wrapper (drift section uses a plain div
for a CSS-only background) or directly to an ![]()
(kundberättelser
section uses ![]()
). object-fit and 100% sizing are
inert on a div but make the image fill the card on an img. */
.as-story__bg {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
}
.as-story__scrim {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
oklch(0% 0 0 / 0.1) 0%,
oklch(0% 0 0 / 0.45) 60%,
oklch(0% 0 0 / 0.78) 100%
);
z-index: -1;
}
.as-story__eyebrow {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: oklch(82% 0.13 184);
margin-bottom: 0.75rem;
}
.as-story__title {
font-family: var(--as-font-display);
font-weight: 600;
font-size: clamp(1.875rem, 4vw, 3rem);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--as-ink-on-dark);
margin-bottom: 0.625rem;
max-width: 28ch;
}
.as-story__line {
font-size: clamp(1rem, 1.4vw, 1.125rem);
color: var(--as-ink-on-dark-muted);
max-width: 36rem;
margin-bottom: 1.25rem;
}
/* Specificity override — `.as-cinema h2/h3 { color: var(--as-cinema-ink) }`
wins over `.as-story__title` (single-class selector) because the cinema
rule has 1 class + 1 type. Restore always-light text for story cards
inside cinema since they have their own dark image-bg / mood-gradient
surfaces and need light text regardless of cinema theme. */
.as-cinema .as-story h1,
.as-cinema .as-story h2,
.as-cinema .as-story h3,
.as-cinema .as-story .as-story__title,
.as-cinema .as-story .as-story__line {
color: var(--as-ink-on-dark);
}
.as-cinema .as-story .as-story__line {
color: var(--as-ink-on-dark-muted);
}
/* `.as-story--light` is an always-light variant — uses paper tokens so it
doesn't invert in dark theme. Pair with the white scrim below. */
.as-story--light {
background: var(--as-bg-paper-alt);
color: var(--as-ink-paper);
}
.as-story--light .as-story__title {
color: var(--as-ink-paper);
}
.as-story--light .as-story__line {
color: var(--as-ink-paper-muted);
}
.as-story--light .as-story__scrim {
background: linear-gradient(
180deg,
oklch(100% 0 0 / 0) 0%,
oklch(100% 0 0 / 0.45) 60%,
oklch(100% 0 0 / 0.85) 100%
);
}
/* Story mood gradients — replaces ad-hoc inline `style="background: ..."` on
homepage drift/SLA stories. Hue rotates around the brand axis so each card
feels distinct without escaping the palette. Lightness stays low so the
on-dark text contrast is preserved.
Mood variants don't have a bg image, so the flex-end justification (built
for image-bg cards) leaves dead space at the top. Tighten the min-height
and center-justify so the text floats sensibly. */
.as-story--mood-blue,
.as-story--mood-cyan,
.as-story--mood-violet,
.as-story--mood-green {
min-height: clamp(260px, 32vh, 360px);
justify-content: center;
}
.as-story--mood-blue {
background: linear-gradient(135deg, oklch(20% 0.04 240), oklch(12% 0.02 240));
}
.as-story--mood-cyan {
background: linear-gradient(135deg, oklch(22% 0.05 200), oklch(10% 0.02 240));
}
.as-story--mood-violet {
background: linear-gradient(135deg, oklch(18% 0.06 280), oklch(10% 0.02 240));
}
.as-story--mood-green {
background: linear-gradient(135deg, oklch(20% 0.05 160), oklch(10% 0.02 240));
}
/* Story grid — masonry-ish 1/2/3-up arrangements */
.as-story-rail {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 768px) {
.as-story-rail--2 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.as-story-rail--3 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.as-story-rail--asym {
grid-template-columns: 2fr 1fr;
}
}
/* Arrow link — tiny CTA used inside stories and cinema sections */
.as-arrow-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
font-weight: 500;
color: oklch(82% 0.13 184);
text-decoration: none;
transition:
gap 150ms ease,
color 150ms ease;
}
.as-arrow-link::after {
content: '›';
font-size: 1.125rem;
line-height: 1;
transform: translateY(-1px);
transition: transform 150ms ease;
}
.as-arrow-link:hover {
gap: 0.5rem;
color: oklch(88% 0.13 184);
}
.as-arrow-link:hover::after {
transform: translate(2px, -1px);
}
.as-cinema--light .as-arrow-link,
.as-story--light .as-arrow-link {
color: var(--as-accent);
}
/* Inline link inside body copy — subtle accent underline so it reads as a
link without the chevron CTA flavour of `.as-arrow-link`. Matches surrounding
ink colour so it doesn't fight the line; on hover the accent surfaces. */
.as-inline-link {
color: inherit;
text-decoration: underline;
text-decoration-color: oklch(82% 0.13 184 / 0.5);
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition:
text-decoration-color 150ms ease,
color 150ms ease;
}
.as-inline-link:hover {
color: oklch(88% 0.13 184);
text-decoration-color: oklch(82% 0.13 184);
}
.as-cinema--light .as-inline-link:hover,
.as-story--light .as-inline-link:hover {
color: var(--as-accent);
text-decoration-color: var(--as-accent);
}
/* Cinema CTA cluster — primary button on dark + arrow link.
No `display:` here so Tailwind's `flex flex-col sm:flex-row` utilities
on the same element control the layout direction. We only contribute
wrapping + alignment defaults. */
.as-cinema-cta {
align-items: center;
flex-wrap: wrap;
}
.as-cinema-cta .as-btn-primary {
background: white;
color: #000 !important;
border-color: white;
}
.as-cinema-cta .as-btn-primary:hover {
background: oklch(92% 0.005 240);
border-color: oklch(92% 0.005 240);
}
/* PlaySign app grid — small uniform tiles like an app launcher */
.as-app-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
@media (min-width: 640px) {
.as-app-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1024px) {
.as-app-grid {
grid-template-columns: repeat(6, 1fr);
gap: 1rem;
}
}
.as-app-tile {
aspect-ratio: 1 / 1;
border-radius: var(--as-radius-md);
background: linear-gradient(135deg, oklch(20% 0.04 240) 0%, oklch(14% 0.03 240) 100%);
border: 1px solid oklch(100% 0 0 / 0.06);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.375rem;
color: var(--as-ink-on-dark);
text-decoration: none;
transition:
transform 200ms ease,
border-color 200ms ease;
}
.as-app-tile:hover {
transform: translateY(-2px);
border-color: oklch(100% 0 0 / 0.18);
}
.as-app-tile i {
font-size: clamp(1.5rem, 2.5vw, 2rem);
color: oklch(82% 0.13 184);
}
.as-app-tile span {
font-size: 0.75rem;
color: var(--as-ink-on-dark-muted);
text-align: center;
padding-inline: 0.375rem;
line-height: 1.2;
}
/* Stats strip — quiet, integrated into narrative */
.as-cinema-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem 3rem;
max-width: 56rem;
margin-inline: auto;
text-align: center;
}
@media (min-width: 768px) {
.as-cinema-stats {
grid-template-columns: repeat(4, 1fr);
}
}
.as-cinema-stat__value {
font-family: var(--as-font-display);
font-size: clamp(2rem, 3.5vw, 2.75rem);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1;
color: var(--as-cinema-ink);
margin-bottom: 0.375rem;
}
.as-cinema--light .as-cinema-stat__value {
color: var(--as-ink-paper);
}
.as-cinema-stat__label {
font-size: 0.8125rem;
color: var(--as-cinema-ink-muted);
letter-spacing: 0.02em;
/* Reserve 2 lines so a label that wraps (e.g. "Svensk support, vardagar")
doesn't make its column taller than the others — the whole row stays
baseline-aligned even on narrow viewports. */
min-height: 2lh;
}
.as-cinema--light .as-cinema-stat__label {
color: var(--as-ink-muted);
}
/* Hero device frame — premium product showcase, edge-fade for the "infinite canvas" effect */
.as-hero-stage {
position: relative;
margin-inline: auto;
max-width: 78rem;
padding-inline: 1rem;
}
/* Works whether applied to a
wrapper (legacy markup) or directly to
an ![]()
(current markup). Display + width keep the image responsive
inside its .as-hero-stage container regardless. */
.as-hero-stage__device {
position: relative;
display: block;
width: 100%;
height: auto;
border-radius: clamp(12px, 1.4vw, 18px);
border: 1px solid oklch(100% 0 0 / 0.08);
background: oklch(10% 0.014 250);
overflow: hidden;
box-shadow:
0 1px 0 oklch(100% 0 0 / 0.06) inset,
0 60px 120px -40px oklch(0% 0 0 / 0.65),
0 20px 50px -20px oklch(58% 0.13 184 / 0.2);
}
.as-hero-stage__device img {
width: 100%;
height: auto;
display: block;
}
.as-hero-stage__glow {
position: absolute;
inset: -10% -5% -20% -5%;
background: radial-gradient(
ellipse 50% 30% at 50% 100%,
oklch(45% 0.13 184 / 0.45) 0%,
transparent 70%
);
z-index: -1;
filter: blur(40px);
}
/* Pricing trio (cinema-styled) — 3 plan tiles, one feature row */
.as-pricing-trio {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
max-width: 64rem;
margin-inline: auto;
}
@media (min-width: 768px) {
.as-pricing-trio {
grid-template-columns: repeat(3, 1fr);
}
}
.as-pricing-tile {
background: oklch(12% 0.018 250);
border: 1px solid oklch(100% 0 0 / 0.08);
border-radius: var(--as-radius-lg);
padding: 1.75rem;
color: var(--as-ink-on-dark);
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.as-pricing-tile--featured {
background: oklch(18% 0.04 184);
border-color: oklch(50% 0.1 184);
/* Make room for the ribbon, which sits above the top edge. */
position: relative;
margin-top: 0.875rem;
}
/* "Rekommenderat" / "Bäst värde" ribbon — sits above the top edge of the
featured tile, accent-coloured so it reads as the visual anchor of the row.
Keep markup terse:
Rekommenderat
inside a `.as-pricing-tile--featured`. */
.as-pricing-tile__ribbon {
position: absolute;
top: -0.875rem;
left: 50%;
transform: translateX(-50%);
padding: 0.3125rem 0.875rem;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: white;
background: var(--as-accent);
border-radius: 999px;
white-space: nowrap;
box-shadow: 0 4px 12px -4px oklch(58% 0.13 184 / 0.55);
}
.as-pricing-tile__name {
font-family: var(--as-font-display);
font-size: 1.125rem;
font-weight: 600;
}
.as-pricing-tile__price {
font-family: var(--as-font-display);
font-size: 2.25rem;
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1;
}
.as-pricing-tile__per {
font-size: 0.8125rem;
color: var(--as-ink-on-dark-muted);
margin-bottom: 0.5rem;
}
.as-pricing-tile ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.5rem;
font-size: 0.875rem;
}
.as-pricing-tile li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
color: var(--as-ink-on-dark-muted);
}
.as-pricing-tile li i {
color: oklch(78% 0.2 130);
flex-shrink: 0;
margin-top: 2px;
}
.as-pricing-tile .as-btn-primary {
margin-top: auto;
justify-content: center;
}
/* Pricing tiles are dark cards even inside .as-cinema--light. DaisyUI's
.btn-outline uses --bc (the page text colour) which is near-invisible on
the tile's dark background. Force on-dark colours so "Starta" / "Kontakta
sälj" stay readable. */
.as-pricing-tile .btn.btn-outline {
color: var(--as-ink-on-dark) !important;
border-color: oklch(100% 0 0 / 0.22);
background: transparent;
margin-top: auto;
justify-content: center;
}
.as-pricing-tile .btn.btn-outline:hover {
color: #000 !important;
background: oklch(100% 0 0 / 0.92);
border-color: oklch(100% 0 0 / 0.92);
}
/* Mini calculator on cinema canvas */
.as-cinema-calc {
background: oklch(12% 0.018 250);
border: 1px solid oklch(100% 0 0 / 0.08);
border-radius: var(--as-radius-xl);
padding: clamp(1.5rem, 3vw, 2.5rem);
color: var(--as-ink-on-dark);
display: grid;
gap: 1.5rem;
max-width: 56rem;
margin-inline: auto;
}
.as-cinema-calc__row {
display: grid;
gap: 0.5rem;
}
.as-cinema-calc__label {
display: flex;
align-items: baseline;
justify-content: space-between;
font-size: 0.8125rem;
color: var(--as-ink-on-dark-muted);
letter-spacing: 0.02em;
}
.as-cinema-calc__label strong {
color: var(--as-ink-on-dark);
font-family: var(--as-font-display);
font-size: 1rem;
font-weight: 600;
}
.as-cinema-calc input[type='range'] {
width: 100%;
accent-color: var(--as-accent);
}
.as-cinema-calc__seg {
display: inline-flex;
background: oklch(100% 0 0 / 0.05);
border: 1px solid oklch(100% 0 0 / 0.1);
border-radius: 999px;
padding: 0.25rem;
flex-wrap: wrap;
}
.as-cinema-calc__seg label {
padding: 0.4375rem 0.875rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--as-ink-on-dark-muted);
cursor: pointer;
border-radius: 999px;
transition:
background 150ms ease,
color 150ms ease;
}
.as-cinema-calc__seg input {
display: none;
}
.as-cinema-calc__seg input:checked + span {
background: white;
color: #000;
}
.as-cinema-calc__seg label span {
display: inline-block;
padding: 0.4375rem 0.875rem;
border-radius: 999px;
margin: -0.4375rem -0.875rem;
}
.as-cinema-calc__result {
padding-top: 1.5rem;
border-top: 1px solid oklch(100% 0 0 / 0.08);
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 640px) {
.as-cinema-calc__result {
grid-template-columns: repeat(2, 1fr);
}
}
.as-cinema-calc__big {
font-family: var(--as-font-display);
font-size: clamp(2.25rem, 4vw, 3rem);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1;
color: var(--as-ink-on-dark);
}
.as-cinema-calc__small {
font-size: 0.8125rem;
color: var(--as-ink-on-dark-muted);
margin-top: 0.375rem;
}
/* `.as-cinema--burst` was retired 2026-04-26 — the brand-color radial +
grid overlay was busier than the rest of the Linear/Vercel ground state
and only saw 4× usage across 17 templates. The 4 sites that used it now
use default `.as-cinema` (3 of them) or `.as-cinema--alt --tight` (the
blog categories strip) for rhythm contrast against their neighbours. */
/* Story card — image-zoom on hover (base hover/lift lives with .as-story above). */
.as-story__bg {
transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}
.as-story:hover .as-story__bg {
transform: scale(1.04);
}
/* Trust strip — thin, on-brand row of badges between final CTA and footer. */
.as-trust-strip {
background: oklch(7% 0.012 250);
border-top: 1px solid oklch(100% 0 0 / 0.06);
border-bottom: 1px solid oklch(100% 0 0 / 0.06);
padding-block: clamp(2rem, 4vw, 3rem);
}
.as-trust-strip__inner {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(1.5rem, 4vw, 4rem);
flex-wrap: wrap;
max-width: 56rem;
margin-inline: auto;
}
.as-trust-strip__inner img {
height: 64px;
width: auto;
opacity: 0.92;
transition:
opacity 200ms ease,
transform 200ms ease;
}
.as-trust-strip__inner img:hover {
opacity: 1;
transform: scale(1.04);
}
/* Footer — cinema-aligned, dark, doesn't drop off after the cinematic sections. */
.as-footer {
background: oklch(6% 0.01 250);
color: var(--as-ink-on-dark);
padding-block: clamp(3rem, 6vw, 5rem);
border-top: 1px solid oklch(100% 0 0 / 0.06);
}
.as-footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
max-width: var(--as-maxw-content);
margin-inline: auto;
}
@media (min-width: 768px) {
.as-footer__grid {
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
}
}
.as-footer__brand .as-footer__logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--as-ink-on-dark);
text-decoration: none;
font-family: var(--as-font-display);
font-weight: 600;
font-size: 1.375rem;
margin-bottom: 1rem;
}
.as-footer__tag {
color: var(--as-ink-on-dark-muted);
font-size: 0.9375rem;
line-height: 1.6;
max-width: 28rem;
}
.as-footer__title {
font-family: var(--as-font-display);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--as-ink-on-dark);
margin-bottom: 0.875rem;
opacity: 0.7;
}
.as-footer__col ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.as-footer__col a {
color: var(--as-ink-on-dark-muted);
text-decoration: none;
font-size: 0.9375rem;
transition: color 150ms ease;
}
.as-footer__col a:hover {
color: var(--as-ink-on-dark);
}
.as-footer__base {
margin-top: clamp(2.5rem, 5vw, 4rem);
padding-top: 1.5rem;
border-top: 1px solid oklch(100% 0 0 / 0.06);
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: flex-start;
color: var(--as-ink-on-dark-muted);
font-size: 0.8125rem;
}
@media (min-width: 640px) {
.as-footer__base {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
.as-footer__base p {
margin: 0;
}
.as-footer__base-meta {
opacity: 0.7;
}
/* Contextual: cards inside cinema sections — auto-adapt via theme-responsive
`--as-cinema-card-*` tokens so existing .as-card / .card markup looks
right in both themes without page rewrites. */
.as-cinema .as-card,
.as-cinema .card.as-card {
background: var(--as-cinema-card-bg);
border-color: var(--as-cinema-card-border);
color: var(--as-cinema-ink);
backdrop-filter: blur(2px);
}
.as-cinema .as-card:hover,
.as-cinema .card.as-card:hover {
border-color: var(--as-cinema-card-border-hover);
background: var(--as-cinema-card-bg-hover);
transform: translateY(-2px);
}
.as-cinema .as-card .card-title,
.as-cinema .card.as-card .card-title {
color: var(--as-cinema-ink);
}
.as-cinema .as-card p,
.as-cinema .as-card ul,
.as-cinema .card.as-card p,
.as-cinema .card.as-card ul {
color: var(--as-cinema-ink-muted);
opacity: 1;
}
.as-cinema .as-card .opacity-70,
.as-cinema .as-card .opacity-80,
.as-cinema .card.as-card .opacity-70,
.as-cinema .card.as-card .opacity-80 {
color: var(--as-ink-on-dark-muted);
opacity: 1;
}
/* Fallback for plain DaisyUI `.card` inside cinema (no `.as-card` partner).
Some blog posts use bare `` without the as-card class,
which means they don't pick up the cinema-card tokens above and end up
with DaisyUI's default base-100 surface that flips the wrong way under
the cinema's inherited text color (invisible text in light theme).
This rule applies the same theme-responsive cinema-card treatment so
plain .card markup looks right in both themes without HTML rewrites.
Excludes .as-card / .as-panel / .as-callout because those have their
own dedicated cinema overrides. */
.as-cinema .card:not(.as-card):not(.as-panel):not([class*="as-callout"]) {
background: var(--as-cinema-card-bg);
border: 1px solid var(--as-cinema-card-border);
color: var(--as-cinema-ink);
backdrop-filter: blur(2px);
}
.as-cinema .card:not(.as-card):not(.as-panel):not([class*="as-callout"]):hover {
border-color: var(--as-cinema-card-border-hover);
background: var(--as-cinema-card-bg-hover);
}
.as-cinema .card:not(.as-card):not(.as-panel):not([class*="as-callout"]) .card-title,
.as-cinema .card:not(.as-card):not(.as-panel):not([class*="as-callout"]) h2,
.as-cinema .card:not(.as-card):not(.as-panel):not([class*="as-callout"]) h3,
.as-cinema .card:not(.as-card):not(.as-panel):not([class*="as-callout"]) h4 {
color: var(--as-cinema-ink);
}
.as-cinema .card:not(.as-card):not(.as-panel):not([class*="as-callout"]) p,
.as-cinema .card:not(.as-card):not(.as-panel):not([class*="as-callout"]) ul,
.as-cinema .card:not(.as-card):not(.as-panel):not([class*="as-callout"]) li {
color: var(--as-cinema-ink-muted);
opacity: 1;
}
.as-cinema .as-icon-chip {
background: oklch(100% 0 0 / 0.08);
color: var(--as-ink-on-dark);
border-color: oklch(100% 0 0 / 0.1);
}
.as-cinema .as-icon-chip--hero {
background: oklch(100% 0 0 / 0.1);
color: var(--as-ink-on-dark);
}
.as-cinema .as-category-header__title {
color: var(--as-cinema-ink);
}
.as-cinema .as-category-header__body {
color: var(--as-cinema-ink-muted);
}
/* .as-panel inside cinema — same shape as the .as-card override above.
Without this, the panel keeps its theme-responsive `--as-bg-alt`
background which flips to near-white in light theme, while the cinema
cascade still inherits white text — invisible labels on the demo form,
testimonial card, and pricing INKLUDERAT panel. Force a dark surface so
the inherited light text stays legible regardless of the user's theme.
Excludes `.as-cinema--light` because that section is itself paper-light
and runs a separate paper-token cascade. */
.as-cinema:not(.as-cinema--light) .as-panel,
.as-cinema:not(.as-cinema--light) .card.as-panel {
background: oklch(12% 0.02 250 / 0.55);
border-color: oklch(100% 0 0 / 0.08);
color: var(--as-ink-on-dark);
backdrop-filter: blur(2px);
}
.as-cinema:not(.as-cinema--light) .as-panel h2,
.as-cinema:not(.as-cinema--light) .as-panel h3,
.as-cinema:not(.as-cinema--light) .as-panel .card-title {
color: var(--as-ink-on-dark);
}
.as-cinema:not(.as-cinema--light) .as-panel p,
.as-cinema:not(.as-cinema--light) .as-panel ul {
color: var(--as-ink-on-dark-muted);
opacity: 1;
}
.as-cinema:not(.as-cinema--light) .as-panel .opacity-70,
.as-cinema:not(.as-cinema--light) .as-panel .opacity-80 {
color: var(--as-ink-on-dark-muted);
opacity: 1;
}
/* Form labels inside a cinema panel — DaisyUI's `.label-text` renders the
`` chips above each input. Without an explicit
on-dark colour they fall through to the inherited theme `--bc` which
reads as the body text token (near-white in light theme on the cinema
canvas — but the panel was unintentionally light too, hiding the label).
Now the panel is always dark, so labels need on-dark colour. */
.as-cinema:not(.as-cinema--light) .as-panel label,
.as-cinema:not(.as-cinema--light) .as-panel .label,
.as-cinema:not(.as-cinema--light) .as-panel .label-text,
.as-cinema:not(.as-cinema--light) .as-panel .form-control {
color: var(--as-ink-on-dark);
}
/* Pricing comparison-table section bands (`` used
as a Grundfunktioner / Avancerade funktioner row separator). DaisyUI's
base-200 token is near-white in airsign-light, which made the inherited
on-dark text invisible against the band. Force a dark translucent band
regardless of theme so the inherited light text stays legible. */
.as-cinema:not(.as-cinema--light) table.table tr.bg-base-200,
.as-cinema:not(.as-cinema--light) table.table tr.bg-base-200 td {
background: oklch(100% 0 0 / 0.06) !important;
color: var(--as-ink-on-dark);
}
/* Tables on cinema canvas */
.as-cinema table.table {
color: var(--as-ink-on-dark);
}
.as-cinema table.table th,
.as-cinema table.table td {
border-color: oklch(100% 0 0 / 0.08);
}
.as-cinema table.table thead th {
background: oklch(100% 0 0 / 0.04);
color: var(--as-ink-on-dark);
}
/* Forms on cinema canvas — inputs, selects, labels */
.as-cinema label,
.as-cinema .label,
.as-cinema .label-text,
.as-cinema .form-control {
color: var(--as-ink-on-dark);
}
.as-cinema .input,
.as-cinema .textarea,
.as-cinema .select {
background: oklch(100% 0 0 / 0.04);
border-color: oklch(100% 0 0 / 0.12);
color: var(--as-ink-on-dark);
}
.as-cinema .input::placeholder,
.as-cinema .textarea::placeholder {
color: oklch(70% 0.015 240);
}
.as-cinema .input:focus,
.as-cinema .textarea:focus,
.as-cinema .select:focus {
border-color: var(--as-accent);
outline: 2px solid oklch(60% 0.13 184 / 0.4);
outline-offset: -1px;
}
/* --------------------------------------------------------------------------
.as-prose — typography for blog-article bodies (used inside as-cinema--light).
Targets the inner `.prose` markup that already exists in all blog posts.
Optimized for long-form reading: max 65ch, generous line-height, restrained
color palette. Apple-News / Medium aesthetic.
-------------------------------------------------------------------------- */
/* `.as-prose-card` is always a light reading panel — uses the always-light
`--as-bg-paper` so it doesn't invert when the user is on dark theme. */
.as-prose-card {
background: var(--as-bg-paper);
border: 1px solid var(--as-border-paper);
border-radius: var(--as-radius-lg);
padding: clamp(1.75rem, 4vw, 3rem);
max-width: 48rem;
margin-inline: auto;
box-shadow: 0 24px 80px -40px oklch(0% 0 0 / 0.25);
}
.as-cinema .as-prose-card .prose,
.as-cinema--light .prose,
.as-prose {
color: var(--as-ink-paper);
font-size: 1.0625rem;
line-height: 1.75;
max-width: 65ch;
}
.as-cinema--light .prose .lead,
.as-prose .lead {
font-size: 1.25rem;
line-height: 1.6;
color: var(--as-ink-paper);
font-weight: 500;
margin-bottom: 2rem;
}
.as-cinema--light .prose h2,
.as-prose h2 {
font-family: var(--as-font-display);
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.15;
margin-top: 3rem;
margin-bottom: 1rem;
color: var(--as-ink-paper);
}
.as-cinema--light .prose h3,
.as-prose h3 {
font-family: var(--as-font-display);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
margin-top: 2rem;
margin-bottom: 0.75rem;
color: var(--as-ink-paper);
}
.as-cinema--light .prose p,
.as-prose p {
margin-bottom: 1.25rem;
color: var(--as-ink-paper);
}
.as-cinema--light .prose ul,
.as-cinema--light .prose ol,
.as-prose ul,
.as-prose ol {
margin: 1rem 0 1.5rem 1.25rem;
}
.as-cinema--light .prose li,
.as-prose li {
margin-bottom: 0.5rem;
color: var(--as-ink-paper);
}
.as-cinema--light .prose ul,
.as-prose ul {
list-style: disc;
}
.as-cinema--light .prose ol,
.as-prose ol {
list-style: decimal;
}
.as-cinema--light .prose blockquote,
.as-prose blockquote {
border-left: 3px solid var(--as-accent);
padding: 0.5rem 1.25rem;
margin: 2rem 0;
font-style: italic;
color: var(--as-ink-paper-muted);
background: var(--as-bg-paper-alt);
border-radius: 0 var(--as-radius-md) var(--as-radius-md) 0;
}
.as-cinema--light .prose a,
.as-prose a {
color: var(--as-accent);
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-thickness: 1px;
}
.as-cinema--light .prose a:hover,
.as-prose a:hover {
color: var(--as-accent-hover);
}
.as-cinema--light .prose strong,
.as-prose strong {
color: var(--as-ink-paper);
font-weight: 600;
}
.as-cinema--light .prose code,
.as-prose code {
background: oklch(96% 0.006 192);
border: 1px solid var(--as-border-paper);
padding: 0.125rem 0.375rem;
border-radius: var(--as-radius-sm);
font-size: 0.9em;
color: var(--as-ink-paper);
}
.as-cinema--light .prose img,
.as-prose img {
border-radius: var(--as-radius-md);
margin: 1.5rem 0;
}
.as-cinema--light .prose hr,
.as-prose hr {
border: 0;
height: 1px;
background: var(--as-border-paper);
margin: 2.5rem 0;
}
/* Inline CTA inside blog prose-card — compact, brand-tinted, eye-catching.
Overrides .as-cta's section-sized padding when nested inside .prose. */
.as-prose-card .as-cta,
.prose .as-cta {
padding-block: 0;
background: linear-gradient(135deg, oklch(20% 0.05 240), oklch(12% 0.02 240));
color: var(--as-ink-on-dark);
border-radius: var(--as-radius-lg);
}
.as-prose-card .as-cta::before,
.prose .as-cta::before {
border-radius: var(--as-radius-lg);
}
.as-prose-card .as-cta .card-body,
.prose .as-cta .card-body {
padding: clamp(1.5rem, 4vw, 2.5rem);
}
.as-prose-card .as-cta h3,
.prose .as-cta h3 {
color: var(--as-ink-on-dark);
font-family: var(--as-font-display);
margin-top: 0;
}
.as-prose-card .as-cta p,
.prose .as-cta p {
color: var(--as-ink-on-dark-muted);
}
.as-prose-card .as-cta a,
.prose .as-cta a {
color: var(--as-ink-on-dark);
}
/* Article hero — used at top of blog posts. Sits on dark canvas with
breadcrumbs, eyebrow pill, headline. Optional __bg element promotes the
article's hero image to a full-bleed background under a dark scrim — same
treatment as `.as-story` cards but at section scale. The doubled selector
(`.as-cinema.as-article-hero`) wins padding-block specificity over `.as-cinema`. */
.as-cinema.as-article-hero {
padding-block: clamp(4rem, 7vw, 7rem);
/* Slightly more vertical room when there's a hero bg image — gives the scrim
enough surface to grade properly. */
}
.as-article-hero__bg {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
/* Subject visibility first. The scrim handles title contrast on its own
via a bottom-weighted gradient, so the image itself only needs a hair
of dim to integrate with the dark cinema chrome. */
filter: brightness(0.95);
}
.as-article-hero__scrim {
position: absolute;
inset: 0;
z-index: -1;
/* Bottom-weighted scrim: top stays bright so the photograph shows through,
mid carries a soft transition, bottom darkens hard enough for white title
+ muted meta to clear WCAG AA. Avoids the previous "wash everything"
gradient that was hiding the actual hero subject. */
background: linear-gradient(
180deg,
oklch(8% 0.012 250 / 0.15) 0%,
oklch(8% 0.012 250 / 0.35) 35%,
oklch(8% 0.012 250 / 0.65) 70%,
oklch(8% 0.012 250 / 0.85) 100%
);
pointer-events: none;
}
.as-article-hero__breadcrumbs {
color: oklch(78% 0.02 200);
font-size: 0.8125rem;
margin-bottom: 1.5rem;
}
.as-article-hero__breadcrumbs a {
color: var(--as-ink-on-dark-muted);
text-decoration: none;
}
.as-article-hero__breadcrumbs a:hover {
color: var(--as-ink-on-dark);
}
/* Specificity bump: `.as-cinema h1, h2, h3 { color: var(--as-cinema-ink); }`
has specificity (0,1,1) and was winning over a single-class rule on the
title, painting it dark-on-dark in light theme. Compound the article-hero
class with .as-cinema to land at (0,2,0) and reclaim the color. */
.as-cinema .as-article-hero__title {
font-family: var(--as-font-display);
font-size: clamp(2.25rem, 5vw, 3.75rem);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--as-ink-on-dark);
margin-bottom: 1.5rem;
max-width: 22ch;
}
.as-article-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
color: var(--as-ink-on-dark-muted);
font-size: 0.875rem;
}
/* Button-driven segmented control (Alpine :class="{ 'is-active': ... }") —
sits next to the existing radio-input pattern for backwards compatibility. */
.as-cinema-calc__seg button {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
padding: 0.4375rem 0.875rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--as-ink-on-dark-muted);
cursor: pointer;
border-radius: 999px;
transition:
background 150ms ease,
color 150ms ease;
line-height: 1;
}
.as-cinema-calc__seg button:hover {
color: var(--as-ink-on-dark);
background: oklch(100% 0 0 / 0.05);
}
.as-cinema-calc__seg button.is-active {
background: white;
color: #000;
}
.as-cinema-calc__seg button:focus-visible {
outline: 2px solid var(--as-accent);
outline-offset: 2px;
}
/* App grid — overflow tile pointing to the rest of the catalog. */
.as-app-tile--more {
background: linear-gradient(135deg, oklch(20% 0.06 240), oklch(14% 0.04 240));
border-color: oklch(100% 0 0 / 0.12);
color: var(--as-ink-on-dark);
}
.as-app-tile--more i,
.as-app-tile--more span {
color: var(--as-ink-on-dark);
opacity: 0.95;
}
/* --------------------------------------------------------------------------
Defensive flatteners — soak up DaisyUI gradient + heavy-shadow patterns
that occasionally creep back in. Kept as belt-and-suspenders even now that
most authored markup has been migrated to `.as-card` / `.as-panel`.
-------------------------------------------------------------------------- */
.card.bg-gradient-to-br {
background: var(--as-bg) !important;
background-image: none !important;
border: 1px solid var(--as-border) !important;
box-shadow: none !important;
}
.card.shadow-2xl,
.card.shadow-xl {
box-shadow: none !important;
border: 1px solid var(--as-border) !important;
}
/* Tables on cinema canvas — DaisyUI defaults add bg-base-100 + shadow-xl on
tables which produces an out-of-system white slab on the dark canvas.
Re-skin to match the cinema palette. Light cinema uses the page tokens. */
.as-cinema table.table.shadow-xl,
.as-cinema table.table.shadow-2xl {
box-shadow: none !important;
background: oklch(12% 0.02 250 / 0.55) !important;
border: 1px solid oklch(100% 0 0 / 0.08);
border-radius: var(--as-radius-md);
overflow: hidden;
}
.as-cinema--light table.table.shadow-xl,
.as-cinema--light table.table.shadow-2xl {
background: var(--as-bg) !important;
}
/* Prose headings — blog articles authored before the design system was
formalised use raw `text-3xl font-bold mt-12 mb-4` on h2 and `text-2xl`
on h3 inside .prose. Marketing.css already provides on-token sizes for
.as-prose h2/h3, but Tailwind utilities win on specificity. Reassert the
tokens with higher specificity so all 10+ articles read consistently. */
.as-prose-card .prose h2,
.as-cinema--light .prose h2 {
font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
line-height: 1.15 !important;
font-weight: 600 !important;
margin-top: 3rem !important;
margin-bottom: 1rem !important;
letter-spacing: -0.02em;
font-family: var(--as-font-display);
color: var(--as-ink-paper);
}
.as-prose-card .prose h3,
.as-cinema--light .prose h3 {
font-size: 1.25rem !important;
line-height: 1.3 !important;
font-weight: 600 !important;
margin-top: 2rem !important;
margin-bottom: 0.75rem !important;
font-family: var(--as-font-display);
color: var(--as-ink-paper);
}
/* Strip redundant Tailwind list utilities that conflict with prose styling.
Articles author `
- ` which collides
with the prose's outdented list-style. Reassert the prose default. */
.as-prose-card .prose ul.list-disc,
.as-cinema--light .prose ul.list-disc {
list-style: disc;
list-style-position: outside;
margin-left: 1.25rem !important;
padding-left: 0;
}
.as-prose-card .prose ul.list-disc li,
.as-cinema--light .prose ul.list-disc li {
margin-bottom: 0.5rem;
}
/* --------------------------------------------------------------------------
Accessibility
-------------------------------------------------------------------------- */
:focus-visible {
outline: 2px solid var(--as-accent);
outline-offset: 2px;
border-radius: var(--as-radius-sm);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* --------------------------------------------------------------------------
Print
-------------------------------------------------------------------------- */
@media print {
.as-hero::before,
.as-cta::before,
.as-hero-media__halo {
display: none;
}
body.as-page > nav.navbar,
body.as-page > footer.footer {
display: none;
}
}