- it opens the enlarge-photo modal (see the
partial's own comment) - so the usual button chrome (border, its own
background/font, the pointer default cursor) needs resetting back to
what the box already looked like as a plain div. */
.final-cta__image-box {
flex-shrink: 0;
/* min(), not a plain 350px, so it stays square (aspect-ratio: 1) by
shrinking width and height together on a narrow phone instead of
width alone overflowing the section's own side padding. */
width: min(350px, 100%);
aspect-ratio: 1;
/* #fdfdfd, not --neutral-0 (oklch 99% with a faint cool tint) - matches
the product photo's own near-white background exactly, since even
that faint tint shows up as a visible seam around the device. */
background: #fdfdfd;
/* Deliberately rounder than --radius-lg (16px, the largest existing
token) - "strongly rounded corners" was specifically requested for
this box, and no bigger token exists yet to reach for. */
border-radius: 56px;
border: none;
padding: var(--space-6);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 150ms var(--ease-standard), box-shadow 150ms var(--ease-standard);
}
.final-cta__image-box:hover,
.final-cta__image-box:focus-visible {
transform: scale(1.02);
box-shadow: var(--shadow-lg);
}
.final-cta__image-box img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* The enlarged view opened by clicking the box above - default (non
-wide) .modal sizing already tops out around the photo's own native
width, so it displays crisp rather than upscaled. */
.final-cta__image-modal img {
display: block;
max-width: 100%;
max-height: 70vh;
margin: 0 auto;
}
.final-cta__body {
min-width: 0;
}
.final-cta__title {
margin: 0 0 var(--space-2);
}
/* Repeats the top-of-page launch banner's own copy (see
catalog/_launch_offer_banner.html) rather than paraphrasing it - a
visitor who scrolled straight past that banner sees the identical
offer again here, not a second, slightly different claim. Warm
accent ("Solar Amber") instead of the neutral --neutral-400 that
`.section-dark p` uses, so it's the one thing in the band that reads
as urgent rather than descriptive. Selector is `.final-cta
.final-cta__urgency`, not the bare class - `.section-dark p` (class
+ element) otherwise outranks a single-class selector and silently
wins back the neutral color regardless of source order. */
.final-cta .final-cta__urgency {
display: flex;
/* flex-start, not center: matches .tier-feature's own icon+wrapping-text
pattern - centering vertically against the *whole* wrapped block would
otherwise float the icon between lines once "Ends in ..." wraps under
the offer on a narrow viewport. */
align-items: flex-start;
justify-content: center;
gap: var(--space-1);
color: var(--accent-500);
font: var(--text-label);
margin: var(--space-2) 0 0;
}
.final-cta__urgency svg {
flex-shrink: 0;
margin-top: 2px;
}
.final-cta--with-image .final-cta__urgency,
.final-cta--with-image .hero__actions {
justify-content: flex-start;
}
/* Closer than .hero__actions' own default var(--space-6) - the urgency
line moved above the heading (see the partial) leaves noticeably more
air above the button than .hero__actions was tuned for. */
.final-cta .hero__actions {
margin-top: var(--space-4);
}
/* The urgency line gets the same glow pulse as the hero's "today" and
the featured-example profit figure (feature-split-glow, defined
above) once the section's own scroll-reveal settles - ties this
band's "spice it up" pass to the motion language already used
elsewhere instead of inventing a new one. */
.final-cta.reveal-on-scroll.is-visible .final-cta__urgency {
animation: feature-split-glow 1300ms ease-out 500ms both;
}
@media (max-width: 700px) {
.final-cta--with-image .final-cta__inner {
flex-direction: column;
text-align: center;
}
/* A wide, short card reads better than the desktop square once it's
stacked above the copy instead of beside it - a tall portrait photo
inside a landscape box still centers itself via object-fit: contain,
just letterboxed left/right rather than filling the card. height is
an explicit calc(), not `aspect-ratio: 3 / 2` - as a flex item in a
column-direction container (.final-cta--with-image .final-cta__inner
switches to flex-direction: column above), the box's main-size (its
height here) hugs its content instead of resolving from aspect-ratio,
so it rendered taller than intended - the photo's own height plus
padding, not 2/3 of the card's width. */
.final-cta--with-image .final-cta__image-box {
width: 80vw;
height: calc(80vw * 2 / 3);
}
.final-cta--with-image .final-cta__urgency,
.final-cta--with-image .hero__actions {
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
.final-cta.reveal-on-scroll.is-visible .final-cta__urgency {
animation: none;
}
}
/* Country-coverage band, directly under the hero on every domain - a
solid brand-blue break from the hero's white background (bolder than
.section-dark's near-black, which stays reserved for the "Ready to
start curtailing today?" CTA further down the page). */
.hero-countries {
background: var(--brand-primary);
color: var(--neutral-0);
text-align: center;
}
.hero-countries .page-title {
color: var(--neutral-0);
margin-bottom: var(--space-5);
}
/* The track is the flag list rendered twice back to back (see home.html)
and scrolled exactly half its own width, so the seam between the first
and second copy is where the loop resets - invisible as long as both
copies are identical. overflow:hidden has to stay (it's what keeps the
doubled track from spilling past the fade at each edge), but it clips
in both directions, not just the one the marquee actually needs - the
padding-top gives .flag-carousel__label's tooltip room to render above
a flag instead of being clipped away invisibly the moment it shows. */
.flag-carousel {
overflow: hidden;
padding-top: var(--space-6);
mask-image: linear-gradient(
to right,
transparent,
black var(--space-6),
black calc(100% - var(--space-6)),
transparent
);
-webkit-mask-image: linear-gradient(
to right,
transparent,
black var(--space-6),
black calc(100% - var(--space-6)),
transparent
);
}
.flag-carousel__track {
display: flex;
width: max-content;
gap: var(--space-4);
animation: flag-carousel-scroll 36s linear infinite;
}
.flag-carousel__flag {
position: relative;
display: flex;
flex: 0 0 auto;
}
/* Hovering (mouse) or tapping (touch, via the .is-active class the
javascript block below toggles - :hover alone doesn't fire reliably on
touch) pauses the whole track, not just the one flag: it's still
scrolling underneath, so without this the tooltip would be reading a
flag that's already drifted out from under it. */
.flag-carousel__track:has(.flag-carousel__flag:hover),
.flag-carousel__track:has(.flag-carousel__flag.is-active) {
animation-play-state: paused;
}
.flag-carousel__label {
position: absolute;
bottom: calc(100% + var(--space-2));
left: 50%;
padding: 2px 8px;
border-radius: var(--radius-sm);
background: var(--neutral-950);
color: var(--neutral-0);
font: var(--text-caption);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transform: translate(-50%, 4px);
transition:
opacity var(--duration-fast) var(--ease-standard),
transform var(--duration-fast) var(--ease-standard);
}
.flag-carousel__flag:hover .flag-carousel__label,
.flag-carousel__flag.is-active .flag-carousel__label {
opacity: 1;
transform: translate(-50%, 0);
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
}
/* A .field's own bottom margin would otherwise stack on top of the
grid's own row gap, making the gap between grid rows bigger than the
gap between the grid and whatever follows it - see .wizard-wrap
below, which restores a single consistent gap after the whole grid
instead. */
.grid-2 .field {
margin-bottom: 0;
}
@media (max-width: 900px) {
.grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 700px) {
.grid-3,
.grid-2 {
grid-template-columns: 1fr;
}
}
@media (max-width: 520px) {
.grid-4 {
grid-template-columns: 1fr;
}
}
.step-number {
font: var(--text-display-lg);
color: var(--primary-200);
}
/* ---------- Feature split (big claim + real data, side by side) ---------- */
.feature-split {
max-width: var(--content-max-width);
margin: 0 auto;
padding: var(--space-8) var(--space-6);
}
.feature-split__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
align-items: center;
}
.feature-split__title {
font: var(--text-display-lg);
color: var(--text-primary);
letter-spacing: var(--letter-spacing-tight);
margin: 0;
}
.feature-split__note {
font: var(--text-body-sm);
color: var(--text-tertiary);
margin-top: var(--space-1);
}
.feature-split__pill {
display: inline-flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-6);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-pill);
border: 1px solid var(--border-default);
background: var(--bg-surface);
box-shadow: var(--shadow-sm);
color: var(--text-primary);
font: var(--text-body-sm);
font-weight: 600;
transition: box-shadow var(--duration-fast) var(--ease-standard);
}
.feature-split__pill:hover {
box-shadow: var(--shadow-md);
text-decoration: none;
}
.feature-split__pill svg {
flex-shrink: 0;
color: var(--brand-primary);
}
.feature-split__visual {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: var(--space-5);
}
.feature-split__hint {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin: var(--space-3) 0 0;
font: var(--text-caption);
color: var(--text-tertiary);
}
.feature-split__hint svg {
flex-shrink: 0;
}
.feature-split__next {
display: block;
margin: var(--space-5) 0 0;
}
@media (max-width: 900px) {
.feature-split__grid {
grid-template-columns: 1fr;
}
}
/* A "pop" on the text block and the chart card whenever the featured
example changes (Next example button) - a small overshoot (past 100%
scale, past 0 on the way up) reads as more alive than a flat fade, and
draws the eye to the new numbers instead of them just silently
swapping. */
@keyframes feature-split-pop {
0% {
opacity: 0;
transform: translateY(18px) scale(0.96);
}
55% {
opacity: 1;
transform: translateY(-4px) scale(1.015);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.feature-split--pop {
animation: feature-split-pop 750ms var(--ease-standard) both;
}
/* The profit figure itself gets an extra glow pulse on top of the
block-level pop, timed to land as the pop settles. */
@keyframes feature-split-glow {
0%,
100% {
text-shadow: 0 0 0 transparent;
}
55% {
text-shadow: 0 0 20px currentColor;
}
}
.feature-split--pop .feature-split__profit {
animation: feature-split-glow 1100ms ease-out;
}
/* ---------- Scroll-triggered reveal ---------- */
@keyframes reveal-in {
0% {
opacity: 0;
transform: translateY(40px) scale(0.97);
}
60% {
opacity: 1;
transform: translateY(-6px) scale(1.008);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.reveal-on-scroll {
opacity: 0;
}
.reveal-on-scroll.is-visible {
animation: reveal-in 900ms var(--ease-standard) both;
}
/* Grid cards inside a revealed section cascade in one after another
rather than all popping at once - each column waits a little longer
than the last (capped at 4, the widest grid on this page). */
.reveal-on-scroll .grid-2 > *,
.reveal-on-scroll .grid-3 > *,
.reveal-on-scroll .grid-4 > * {
opacity: 0;
}
.reveal-on-scroll.is-visible .grid-2 > *,
.reveal-on-scroll.is-visible .grid-3 > *,
.reveal-on-scroll.is-visible .grid-4 > * {
animation: reveal-in 700ms var(--ease-standard) both;
animation-delay: var(--reveal-delay, 0ms);
}
.reveal-on-scroll.is-visible .grid-2 > *:nth-child(2),
.reveal-on-scroll.is-visible .grid-3 > *:nth-child(2),
.reveal-on-scroll.is-visible .grid-4 > *:nth-child(2) {
--reveal-delay: 120ms;
}
.reveal-on-scroll.is-visible .grid-3 > *:nth-child(3),
.reveal-on-scroll.is-visible .grid-4 > *:nth-child(3) {
--reveal-delay: 240ms;
}
.reveal-on-scroll.is-visible .grid-4 > *:nth-child(4) {
--reveal-delay: 360ms;
}
/* ---------- Hero entrance ---------- */
/* The hero is already in view at page load, so there's nothing for the
scroll IntersectionObserver to trigger on - this plays once,
unconditionally, as soon as the page renders, each of the hero's 4
direct children (badges row, title, lead, actions) cascading in after
the last. */
.hero > * {
opacity: 0;
animation: reveal-in 800ms var(--ease-standard) both;
}
.hero > *:nth-child(2) {
animation-delay: 120ms;
}
.hero > *:nth-child(3) {
animation-delay: 240ms;
}
.hero > *:nth-child(4) {
animation-delay: 360ms;
}
/* "today" is the headline's whole point (immediacy, not just "someday")
- color + italic sets it apart from the rest of the title on its own,
and a glow pulse (reusing the same sweep as the featured-example
profit figure) lands just as the title's own entrance settles. */
.hero__today {
color: var(--brand-primary);
font-style: italic;
animation: feature-split-glow 1200ms ease-out 950ms both;
}
/* Scrolls the doubled flag list (see home.html) left by exactly one copy's
width, then snaps back to 0 - since both copies are identical, the snap
is invisible and the strip reads as an endless loop. */
@keyframes flag-carousel-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
.feature-split--pop,
.feature-split--pop .feature-split__profit,
.hero__today {
animation: none;
}
.reveal-on-scroll,
.reveal-on-scroll .grid-2 > *,
.reveal-on-scroll .grid-3 > *,
.reveal-on-scroll .grid-4 > *,
.hero > * {
opacity: 1;
animation: none;
transform: none;
}
.flag-carousel__track {
animation: none;
}
}
.step-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background: var(--primary-100);
color: var(--brand-primary);
margin-bottom: var(--space-3);
}
.pricing-table {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--bg-surface);
}
.pricing-row {
display: grid;
grid-template-columns: 1.4fr 2fr auto;
gap: var(--space-4);
align-items: center;
padding: var(--space-4);
border-top: 1px solid var(--border-subtle);
}
.pricing-row__title {
font: var(--text-heading-sm);
color: var(--text-primary);
}
.section-narrow {
max-width: 720px;
text-align: center;
}
.prose {
max-width: 760px;
}
.pricing-row:first-child {
border-top: none;
}
@media (max-width: 700px) {
.pricing-row {
grid-template-columns: 1fr;
}
}
/* ---------- Auth pages (login/signup/etc.) ---------- */
.auth-wrap {
max-width: 440px;
margin: 0 auto;
padding: var(--space-7) 0;
}
.auth-wrap h1 {
font: var(--text-heading-lg);
color: var(--text-primary);
margin-bottom: var(--space-4);
}
.auth-wrap p {
color: var(--text-secondary);
}
.auth-wrap table.table {
font: var(--text-body-sm);
}
/* ---------- FAQ (native details/summary, no JS) ---------- */
.faq-item {
border-top: 1px solid var(--border-subtle);
padding: var(--space-4) 0;
}
.faq-item:first-child {
border-top: none;
}
.faq-item summary {
cursor: pointer;
font: var(--text-heading-sm);
color: var(--text-primary);
list-style: none;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: "+";
float: right;
color: var(--text-tertiary);
font-weight: 400;
}
.faq-item[open] summary::after {
content: "\2212";
}
.faq-item p {
color: var(--text-secondary);
margin-top: var(--space-3);
max-width: 680px;
}
/* ---------- Checkout wizard ---------- */
.wizard-wrap {
max-width: 640px;
margin: 0 auto;
padding: var(--space-6) 0 var(--space-9);
}
/* .field input/select/textarea cap at 420px site-wide (a sane readable
width on a page with room to spare) - but the wizard is already
capped at 640px total, so that same cap left a standalone field (e.g.
an address) visibly narrower than the two-column grid above it.
Removing it here only affects fields outside .grid-2 - grid columns
are already narrower than 420px, so this is a no-op for them. */
.wizard-wrap .field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.wizard-wrap .field textarea {
max-width: none;
}
/* Restores one consistent gap below the contact-details grid (matching
every other field's own margin-bottom) now that .grid-2 .field can't
contribute its own. */
.wizard-wrap .grid-2 {
margin-bottom: var(--space-4);
}
.wizard-header {
text-align: center;
margin-bottom: var(--space-3);
}
.wizard-header__title {
font: var(--text-display-lg);
color: var(--text-primary);
}
.wizard-header__step {
font: var(--text-body-md);
color: var(--text-secondary);
margin-top: var(--space-2);
}
.step-dots {
display: flex;
gap: var(--space-2);
justify-content: center;
margin-bottom: var(--space-6);
}
.step-dots__dot {
width: 8px;
height: 8px;
border-radius: var(--radius-pill);
background: var(--neutral-200);
transition: width var(--duration-fast) var(--ease-standard),
background var(--duration-fast) var(--ease-standard);
}
.step-dots__dot.is-done {
background: var(--brand-primary);
}
.step-dots__dot.is-current {
width: 22px;
background: var(--brand-primary);
}
.option-card {
display: block;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-5);
background: var(--bg-surface);
margin-bottom: var(--space-4);
}
/* Selected/detail state keys off the card's OWN main radio only (a direct
descendant of .option-card__radio-label), not any nested term/tier
toggle radios living inside .option-card__detail - those are a
separate child of .option-card, so this selector can't see them. */
.option-card:has(> .option-card__radio-label > .option-card__radio > input:checked) {
border: 2px solid var(--brand-primary);
padding: calc(var(--space-5) - 1px);
}
.option-card__radio-label {
display: block;
cursor: pointer;
}
.option-card__radio input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.option-card__head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-3);
}
.option-card__title {
font: var(--text-heading-sm);
color: var(--text-primary);
}
.option-card__price {
font: var(--text-heading-sm);
color: var(--brand-primary);
white-space: nowrap;
font-feature-settings: "tnum" 1;
}
.option-card__subtitle {
font: var(--text-body-sm);
color: var(--text-secondary);
margin-top: var(--space-1);
}
.option-card__detail {
display: none;
margin-top: var(--space-3);
}
/* The checkout hardware step's device quantity picker - the +/-
buttons themselves are generic (see site.js's .quantity-stepper
delegation), this just makes them look like one control. */
.quantity-stepper {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-3);
}
/* Only present when several steppers share one card (the SDE Pro tier
picker) and each needs its own name - step_hardware.html's device
cards don't use this, their own title above the stepper is enough. */
.quantity-stepper__label {
flex: 1 1 auto;
font: var(--text-body-sm);
color: var(--text-secondary);
}
.quantity-stepper__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex: 0 0 auto;
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
font: 600 16px var(--font-body);
color: var(--text-primary);
cursor: pointer;
}
.quantity-stepper__btn:hover {
border-color: var(--brand-primary);
color: var(--brand-primary);
}
.quantity-stepper__input {
width: 48px;
text-align: center;
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
padding: 6px 4px;
font: var(--text-body-md);
font-feature-settings: "tnum" 1;
color: var(--text-primary);
/* Spin buttons duplicate the +/- controls either side of this input
and look inconsistent across browsers - hidden in favor of those. */
appearance: textfield;
}
.quantity-stepper__input::-webkit-outer-spin-button,
.quantity-stepper__input::-webkit-inner-spin-button {
appearance: none;
margin: 0;
}
.option-card:has(> .option-card__radio-label > .option-card__radio > input:checked) .option-card__detail {
display: block;
}
.toggle-group {
display: flex;
gap: var(--space-2);
}
.toggle-group label {
flex: 1;
text-align: center;
padding: var(--space-2);
border-radius: var(--radius-md);
border: 1px solid var(--border-default);
background: var(--bg-surface);
cursor: pointer;
font: 600 13px var(--font-body);
color: var(--text-primary);
transition: background var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard),
color var(--duration-fast) var(--ease-standard);
}
.toggle-group input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.toggle-group label:has(input:checked) {
border: 2px solid var(--brand-primary);
background: var(--brand-primary);
color: var(--text-on-primary);
padding: calc(var(--space-2) - 1px);
box-shadow: var(--shadow-sm);
}
.toggle-group label:has(input:checked)::before {
content: "✓ ";
}
/* The per-term price next to each 1yr/3yr toggle (populated from
pricing_catalog by step_plan.html's JS) - a plain sub-line under the
term name, not its own color, so it reads as "1 year, €195" rather
than competing with the ✓/checked-state color change above. */
.toggle-group__price {
display: block;
font: 600 12px var(--font-body);
opacity: 0.8;
margin-top: 2px;
font-feature-settings: "tnum" 1;
}
.price-recap {
padding: var(--space-4) var(--space-5);
border: 1px dashed var(--border-default);
border-radius: var(--radius-lg);
margin-top: var(--space-4);
}
/* step_hardware.html's running subtotal is filled in by script and
emptied again when every quantity is 0 - without this the dashed
frame stayed on screen as an empty box until something was added. */
.price-recap:empty {
display: none;
}
.price-recap__title {
font: 600 14px var(--font-body);
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.price-recap__row {
display: flex;
justify-content: space-between;
font: var(--text-body-sm);
color: var(--text-secondary);
padding: 2px 0;
font-feature-settings: "tnum" 1;
}
.price-recap__total {
display: flex;
justify-content: space-between;
font: var(--text-heading-sm);
color: var(--brand-primary);
margin-top: var(--space-2);
padding-top: var(--space-2);
border-top: 1px solid var(--border-subtle);
font-feature-settings: "tnum" 1;
}
.wizard-actions {
display: flex;
justify-content: space-between;
margin-top: var(--space-6);
}
.wizard-status {
text-align: center;
}
.wizard-status p {
margin: var(--space-4) auto 0;
}
/* ---------- Pricing page: view toggle, info tips, image slots ---------- */
.view-toggle {
display: inline-flex;
padding: 4px;
border-radius: var(--radius-pill);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
}
.view-toggle button {
padding: 9px 22px;
border-radius: var(--radius-pill);
border: none;
cursor: pointer;
font: 600 14px var(--font-body);
text-transform: capitalize;
background: transparent;
color: var(--text-secondary);
transition: background var(--duration-fast) var(--ease-standard);
}
.view-toggle button.is-active {
background: var(--brand-primary);
color: var(--text-on-primary);
}
.info-tip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin-left: 5px;
border-radius: 50%;
border: 1px solid var(--border-default);
background: var(--bg-surface-sunken);
color: var(--text-tertiary);
font: 600 10px var(--font-body);
vertical-align: middle;
cursor: help;
}
.dashed-cta {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-5);
flex-wrap: wrap;
padding: var(--space-5) var(--space-6);
border: 1px dashed var(--border-default);
border-radius: var(--radius-lg);
}
.dashed-cta p {
max-width: 520px;
margin: 0;
}
/* Phone-first alternative to the contact form, sat directly above it. */
.contact-direct {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
margin-bottom: var(--space-6);
padding: var(--space-3) var(--space-4);
background: var(--bg-surface-sunken);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
max-width: var(--content-max-width-narrow);
}
.contact-direct__label {
font: var(--text-body-sm);
color: var(--text-secondary);
}
.contact-direct__phone {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font: var(--text-body-md);
font-weight: 600;
}
.cta-box {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-5);
flex-wrap: wrap;
padding: var(--space-6);
background: var(--brand-primary);
border-radius: var(--radius-lg);
}
.cta-box__title {
font: var(--text-heading-sm);
color: var(--text-on-primary);
margin: 0 0 var(--space-1);
}
.cta-box__body {
font: var(--text-body-md);
color: var(--text-on-primary);
margin: 0;
max-width: 480px;
}
.cta-box .btn {
background: var(--bg-surface);
color: var(--brand-primary);
flex-shrink: 0;
}
.cta-box .btn:hover {
background: var(--neutral-50);
color: var(--brand-primary);
}
/* The hardware tab's shared product photo, sat above the comparison
table rather than duplicated per column - see pricing.html's own
comment on why one photo, not two identical ones side by side. */
.hardware-photo {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
text-align: center;
}
.hardware-photo img {
max-width: 100%;
max-height: 220px;
}
/* ---------- Pricing tiers ---------- */
.tier-card {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
background: var(--bg-surface);
padding: var(--space-6) var(--space-5);
display: flex;
flex-direction: column;
}
/* The three subscription cards sit in a shared 7-row subgrid (badge,
name, price, price-alt, period, features, footnote) rather than as
three independent flex columns, so the features divider - and the
footnote below it - line up across all three regardless of one card
having an extra line (Pro/Pro Plus's "or 3 years for..." row Basic
doesn't). Each row's height is set by the tallest cell in that row
across the three cards; an empty cell (Basic's own
.tier-card__price-alt-slot) just occupies whatever height that row
ends up needing, adding none of its own. Markup for each card has to
keep exactly 7 direct children, in the same order, for this to line
up - see pricing.html. A card short one child (this went unnoticed
for a while on Basic, which is why this comment exists at all) shifts
every row below it up by one for that card alone, misaligning the
whole grid without erroring anywhere. */
.tier-grid {
grid-template-rows: repeat(7, auto);
}
.tier-grid .tier-card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 7;
}
.tier-card--highlight {
border: 2px solid var(--brand-primary);
}
.tier-card__badge-slot {
height: 24px;
}
.tier-card__name {
font: var(--text-heading-sm);
color: var(--text-primary);
margin-top: var(--space-2);
}
.tier-card__price {
font: var(--text-display-lg);
color: var(--brand-primary);
font-feature-settings: "tnum" 1;
margin-top: var(--space-4);
/* This row's shared subgrid height is set by Pro/Pro Plus's two lines
(struck list price + .tier-card__price-now below it) - without this,
the default grid stretch leaves Basic's single "€0" sitting at the
top of that same-height cell instead of level with the other cards'
own current-price line, which is always the bottom one. */
align-self: end;
}
/* The launch price, stacked on its own line under the struck-through
list price rather than sitting inline beside it (a plain
used to) - a block-level element forces that line break since
.tier-card__price itself isn't flex/grid. */
.tier-card__price-now {
margin-top: var(--space-1);
}
/* The "or 3 years for €X €Y" line under a struck-through
annual price (Pro/Pro Plus during the launch window) - smaller and
quieter than .tier-card__price itself, same relationship
.tier-card__price-row-label has to .tier-card__price-row. */
.tier-card__price-alt {
font: var(--text-body-md);
color: var(--text-secondary);
font-feature-settings: "tnum" 1;
margin-top: var(--space-1);
}
/* "/year" after a price, in both .tier-card__price (Pro) and a
.tier-card__price-row (SDE Pro) - only overrides size/weight so it
still inherits each context's own color and font-family rather than
fixing on one card's serif display font. */
.tier-card__price-suffix {
font-size: 0.5em;
font-weight: 400;
}
.tier-card__price-stack {
/* No gap - matches the zero gap the three .tier-card__price-row lines
already had as bare flex-column children before this wrapper existed. */
display: flex;
flex-direction: column;
margin-top: var(--space-4);
}
.tier-card__price-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-3);
font: var(--text-heading-md);
color: var(--brand-primary);
font-feature-settings: "tnum" 1;
}
.tier-card__price-row-label {
font: var(--text-body-sm);
color: var(--text-tertiary);
}
.tier-card__period {
font: var(--text-caption);
color: var(--text-tertiary);
margin-top: var(--space-2);
}
.tier-card__features {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-5);
padding-top: var(--space-5);
border-top: 1px solid var(--border-subtle);
}
.tier-feature {
display: flex;
gap: var(--space-2);
align-items: flex-start;
font: 600 14px var(--font-body);
color: var(--text-primary);
}
.tier-feature svg {
flex-shrink: 0;
margin-top: 2px;
}
.tier-feature .badge {
flex-shrink: 0;
margin-left: auto;
}
/* Pro's market-coverage footnote - a "works best in" row of real flags
plus a "works in" EU-flag link to the FAQ's full coverage list,
replacing a sentence that had to name every country in prose. */
.tier-card__flags {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.tier-card__flags-row {
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0;
}
/* The label ("Works best in:"/"Works in:") and everything after it
(icons + the "(support for N countries)" text, wrapped together in
.tier-card__flags-line so they move as one unit) - kept as two
separate elements rather than one run of inline content specifically
so the mobile rule below can break after the colon instead of
wherever the text happens to wrap. */
.tier-card__flags-line {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.tier-card__flags-icons {
display: inline-flex;
align-items: center;
gap: 4px;
}
@media (max-width: 700px) {
/* Stacks the label above the flags/count instead of letting the row
wrap mid-sentence wherever it runs out of width. */
.tier-card__flags-row {
flex-direction: column;
align-items: flex-start;
gap: var(--space-1);
}
}
/* The sitewide launch-offer banner - a single compact pill-shaped bar,
not a stacked heading/sentence/caption card (an earlier three-line
version read as heavier and more "shouty" than a two-week countdown
warrants - see catalog/_launch_offer_banner.html's own comment).
Two short segments separated by a divider, same shape as a typical
crowdfunding-site countdown strip: the offer itself in accent color
("Solar Amber" - this app's own token for free/savings highlights,
see tokens/colors.css), the countdown in muted text next to it. Wraps
to two centered lines only on a narrow viewport; stays one line
everywhere else. */
.launch-offer-banner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-2) var(--space-3);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-pill);
border: 1px solid var(--accent-300);
background: var(--accent-100);
text-decoration: none;
transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
/* Now a link into the get-started flow (see the partial's own
comment) - a hover/focus lift signals that, since nothing else
about a pill-shaped bar otherwise reads as clickable. */
.launch-offer-banner:hover,
.launch-offer-banner:focus-visible {
background: var(--accent-300);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
text-decoration: none;
}
.launch-offer-banner__offer {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font: var(--text-label);
color: var(--accent-900);
white-space: nowrap;
}
.launch-offer-banner__icon {
flex-shrink: 0;
}
.launch-offer-banner__divider {
width: 1px;
height: 16px;
background: var(--accent-300);
}
/* Hidden alongside its divider once there's no room for a second
segment on the same line - the offer itself is the half worth
keeping if something has to give. */
@media (max-width: 420px) {
.launch-offer-banner__divider,
.launch-offer-banner__countdown {
display: none;
}
}
.launch-offer-banner__countdown {
font: var(--text-body-sm);
color: var(--accent-900);
white-space: nowrap;
}
/* The Pro Plus monitoring blurb (pricing.html) - plain prose next to
the tier grid, not another .tier-card (it isn't a priced thing on its
own, and must never carry a savings/payback figure - see the launch
pricing copy brief's business rule against pricing subscriptions
against curtailment savings). */
.monitoring-blurb {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
background: var(--bg-surface);
padding: var(--space-5);
}
.monitoring-blurb__title {
font: var(--text-heading-sm);
color: var(--text-primary);
}
.monitoring-blurb__body {
color: var(--text-secondary);
margin-top: var(--space-2);
}
.monitoring-blurb__list {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-top: var(--space-4);
}
.addon-row {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: var(--space-4);
align-items: center;
padding: var(--space-4);
border-top: 1px solid var(--border-subtle);
}
.addon-row:first-child {
border-top: none;
}
.addon-row--header {
border-top: none;
background: var(--bg-surface-sunken);
}
.addon-row__title {
font: 600 14px var(--font-body);
color: var(--text-primary);
}
.addon-row__note {
font: var(--text-body-sm);
color: var(--text-tertiary);
font-style: italic;
}
@media (max-width: 700px) {
.addon-row {
grid-template-columns: 1fr;
}
}
/* ---------- Use case cards ---------- */
/* The "these plants are made up, the numbers are not" note above the
use-case grid - a quiet band, not a warning. */
.usecase-note {
background: var(--bg-surface-sunken);
box-shadow: none;
max-width: 820px;
}
/* Tag badge and country flag share a row, flag pinned to the far side -
pulls the flag out of the title text (where it read as part of the
plant's name) and up next to the tag it's actually describing. */
.usecase-card__top {
display: flex;
align-items: center;
justify-content: space-between;
}
.usecase-gain {
font: var(--text-heading-md);
color: var(--accent-700);
font-feature-settings: "tnum" 1;
}
.usecase-link {
display: inline-block;
font: 600 13px var(--font-body);
color: var(--brand-primary);
}
/* ---------- Threshold chart (brand motif) ---------- */
.threshold-chart {
display: block;
max-width: 100%;
height: auto;
}
/* ---------- Legal pages (terms, service terms, privacy) ---------- */
/* Vertical rhythm for legal prose. The site-wide reset zeroes every
heading and paragraph's margin (tokens/base.css's `h1, h2, h3, h4, p {
margin: 0; }`), which is right for hand-laid-out marketing sections
that use `--space-*` gaps directly, but reads as cramped in a long
run of prose - paragraphs touching, and a subheading sitting flush
against the paragraph above it instead of separating from it. These
rules apply that spacing back for anything under `.legal-doc`
specifically, rather than loosening the reset globally. */
.legal-doc p,
.legal-doc ul,
.legal-doc ol,
.legal-doc .table-scroll {
margin-bottom: var(--space-4);
}
.legal-doc h2 {
margin-top: var(--space-7);
margin-bottom: var(--space-3);
}
.legal-doc h3 {
margin-top: var(--space-5);
margin-bottom: var(--space-2);
}
.legal-doc li + li {
margin-top: var(--space-2);
}
/* No trailing gap under the last element of a section/the whole page. */
.legal-doc > :last-child,
.legal-doc section > :last-child {
margin-bottom: 0;
}
.site-footer__legal {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
}
/* The rule between the Dutch and English halves of the disclaimer - a
language boundary, not a section break, so it reads as quieter than the
headings on either side of it. */
.legal-language-rule {
border: none;
border-top: 1px solid var(--border-subtle);
margin: var(--space-7) 0;
}
.legal-translation-note {
font: var(--text-body-sm);
color: var(--text-tertiary);
}
/* ---------- General terms (algemene voorwaarden) ---------- */
.legal-meta {
font: var(--text-body-sm);
color: var(--text-tertiary);
}
.legal-clause-list {
list-style: none;
padding-left: 0;
}
.legal-clause-list ul {
list-style: disc;
padding-left: var(--space-6);
margin-top: var(--space-2);
}
.legal-clause-number {
font-weight: 600;
margin-right: var(--space-2);
}
/* ---------- Subscriptions table (orders/subscription_list.html) ---------- */
.subscription-inline-form {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-2);
}
.subscription-inline-form:first-child {
margin-top: 0;
}
.subscription-inline-form select {
font: var(--text-body-sm);
}
/* ---------- Production site map (installations/production_site_form.html) ---------- */
.site-map {
margin-bottom: var(--space-6);
}
.site-map__search {
display: flex;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.site-map__search input {
flex: 1;
min-width: 0;
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
padding: 10px 12px;
font: var(--text-body-md);
color: var(--text-primary);
}
.site-map__search input:focus {
outline: none;
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px var(--primary-100);
}
.site-map__canvas {
height: 400px;
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
overflow: hidden;
}
.site-map-view {
margin-bottom: var(--space-6);
max-width: 480px;
}
.site-map-view__canvas {
height: 200px;
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
overflow: hidden;
}
.site-map-overview {
margin-bottom: var(--space-6);
}
.site-map-overview__canvas {
height: 400px;
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
overflow: hidden;
}
/* ---------- App overview: KPI tiles, device cards, next steps ---------- */
/* A row of headline numbers (the home page across all devices, the
device page's mini dashboard). auto-fit so four tiles sit in one row
on a wide screen and wrap to two-up/one-up on narrower ones without
a breakpoint per count. */
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.kpi {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-4) var(--space-5);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
min-width: 0;
}
/* A tile that navigates somewhere (the home page's "Devices online",
linking to the device list) rather than just reporting a number -
an instead of a , so it needs the interactive affordances a
plain KPI tile doesn't: no underline by default, a hover/focus state,
and a chevron (.icon-chevron, same partial the device page's
Inverters list already uses) so it reads as clickable rather than as
one more static stat. */
a.kpi.kpi--link {
position: relative;
color: inherit;
transition: border-color var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard);
}
a.kpi.kpi--link:hover,
a.kpi.kpi--link:focus-visible {
text-decoration: none;
border-color: var(--primary-300);
box-shadow: var(--shadow-md);
}
.kpi--link .icon-chevron {
position: absolute;
top: var(--space-4);
right: var(--space-4);
color: var(--text-tertiary);
}
.kpi__label {
font: var(--text-label);
color: var(--text-tertiary);
}
.kpi__value {
display: flex;
align-items: baseline;
gap: var(--space-2);
font: var(--text-heading-lg);
color: var(--text-primary);
font-feature-settings: "tnum" 1;
white-space: nowrap;
}
.kpi__unit {
font: var(--text-body-sm);
color: var(--text-tertiary);
}
.kpi__empty {
color: var(--text-tertiary);
}
.device-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--space-4);
}
.device-card {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4) var(--space-5);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
color: var(--text-primary);
transition: border-color var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard);
}
.device-card:hover {
text-decoration: none;
border-color: var(--primary-300);
box-shadow: var(--shadow-md);
}
.device-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.device-card__name {
font: var(--text-heading-sm);
}
.device-card__site {
font: var(--text-body-sm);
color: var(--text-secondary);
}
.device-card__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
margin: var(--space-2) 0 0;
padding-top: var(--space-3);
border-top: 1px solid var(--border-subtle);
}
.device-card__stats dt {
font: var(--text-caption);
color: var(--text-tertiary);
}
.device-card__stats dd {
margin: 0;
font: var(--text-body-sm);
font-weight: 600;
font-feature-settings: "tnum" 1;
}
.next-steps {
margin: 0;
padding-left: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-2);
font: var(--text-body-md);
}
/* ---------- Tabs (device/inverter pages) ---------- */
/* Long pages are split into tabs rather than one scroll: each
[data-tabs] wrapper holds a row of [role=tab] buttons and matching
[role=tabpanel] sections, wired up generically in site.js - the
active tab is mirrored into the URL hash so a link like
/app/devices//#settings (and a redirect back after saving a
setting) lands on the right tab, and every panel is still present in
the HTML for a reader without JS (they then just stack). */
.tabs__list {
display: flex;
gap: var(--space-1);
margin-bottom: var(--space-5);
border-bottom: 1px solid var(--border-subtle);
overflow-x: auto;
}
.tabs__tab {
padding: var(--space-2) var(--space-4);
margin-bottom: -1px;
border: none;
border-bottom: 2px solid transparent;
background: none;
color: var(--text-secondary);
font: var(--text-body-sm);
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: color var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard);
}
.tabs__tab:hover {
color: var(--text-primary);
}
/* Four tabs don't fit a phone in one row - wrap rather than hide the
last one behind a horizontal scroll nobody notices. */
@media (max-width: 600px) {
.tabs__list {
flex-wrap: wrap;
overflow-x: visible;
}
}
.tabs__tab[aria-selected="true"] {
color: var(--brand-primary);
border-bottom-color: var(--brand-primary);
}
/* A count/status chip on a tab label ("Inverters 2"). */
.tabs__count {
margin-left: var(--space-2);
padding: 1px 7px;
border-radius: var(--radius-pill);
background: var(--neutral-100);
color: var(--text-tertiary);
font: var(--text-caption);
}
.tabs__panel[hidden] {
display: none;
}
/* ---------- Profile page ---------- */
.profile-grid {
display: flex;
flex-direction: column;
gap: 0;
}
/* A kv-list inside a panel: the panel already draws the border, so the
list drops its own and its bottom margin. */
.kv-list--flush {
border: none;
border-radius: 0;
margin: 0;
}
.kv-list--flush .kv-row {
padding-left: 0;
padding-right: 0;
}
.email-list {
display: flex;
flex-direction: column;
}
/* flex-wrap so the Verified/Primary badges drop under a long address on
a narrow screen instead of pushing the row (and the page) wider than
the viewport. */
.email-list__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-3);
padding: var(--space-3) 0;
border-top: 1px solid var(--border-subtle);
cursor: pointer;
}
.email-list__row:first-child {
border-top: none;
}
.email-list__address {
font: var(--text-body-md);
min-width: 0;
overflow-wrap: anywhere;
}
/* A form value shown as plain text because it can't be edited here
(billing info's COC number/country) - sits where the input would. */
.field-readonly {
margin: 0;
padding: 10px 0;
font: var(--text-body-md);
color: var(--text-primary);
}
/* ---------- Breadcrumbs ---------- */
/* Above the page title on every app page that sits more than one level
deep (a device, an inverter, a production site) - a flat list page
(Devices, Production sites) has nothing to show a trail *to*, so it
skips this entirely rather than rendering a single, redundant crumb
that just repeats the H1. */
.breadcrumbs {
margin-bottom: var(--space-3);
}
.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1);
list-style: none;
margin: 0;
padding: 0;
font: var(--text-body-sm);
color: var(--text-tertiary);
}
.breadcrumbs li {
display: flex;
align-items: center;
gap: var(--space-1);
}
.breadcrumbs li:not(:last-child)::after {
content: "/";
color: var(--border-default);
}
.breadcrumbs a {
color: var(--text-tertiary);
}
.breadcrumbs a:hover {
color: var(--brand-primary);
}
.breadcrumbs li[aria-current="page"] {
color: var(--text-secondary);
font-weight: 600;
}
/* ---------- Stat strip (compact multi-value summary above a table) ---------- */
/* A quieter, denser cousin of .kpi-grid - the Inverters tab's "3
inverters, 82.5 kWp AC, 60.0 kWp DC" line above the list, shown only
once there's more than one row to total up (a single inverter's own
numbers already read straight off its own row). Not another
.kpi-grid: that one is the page's hero dashboard, this is a small
aside next to a table it's summarizing. */
.stat-strip {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
margin: 0 0 var(--space-4);
padding: var(--space-3) var(--space-4);
background: var(--bg-surface-sunken);
border-radius: var(--radius-md);
}
.stat-strip__item {
display: flex;
flex-direction: column;
gap: 2px;
}
.stat-strip__item dt {
font: var(--text-caption);
color: var(--text-tertiary);
}
.stat-strip__item dd {
margin: 0;
font: var(--text-body-md);
font-weight: 600;
font-feature-settings: "tnum" 1;
}
/* A trailing affordance on a .list-group-item that otherwise has no
visible cue that the row is clickable (badges alone read as status,
not as a link) - a plain chevron, not another pencil, since the row
navigates rather than edits in place. */
.list-group-item .icon-chevron {
color: var(--text-tertiary);
flex-shrink: 0;
}