/* /styles/global.css */
/* ==========================================================================
Design system — measured from the reference layout at 1440px.
Colours, type scale, spacing and motion curves are all measured values.
Breakpoints — the page uses four and only four:
1280 the 1200 rail plus its 2x40 gutter stops fitting
1100 three- and four-across rows drop to two
900 everything stacks; section padding 96/40 -> 72/24
600 phone: padding 56/--gutter, single column
Section sheets write them as `max-width:1279px / 1100px / 900px / 600px`.
The two sheets that also carry a `min-width` branch (hero, header) pair it
as 899/900 so the two never both apply.
The card photographs live in styles/wells.css, which build.js must link
LAST, after every section sheet — see the header of that file.
========================================================================== */
/* ---- Fonts ------------------------------------------------------------- */
/* Only the weights the page actually draws: Sentient 300 (display),
Onest 400/500 (body, labels, buttons), Inter 500 (customer wordmarks). */
@font-face{font-family:Sentient;src:url("/assets/fonts/sentient-300.woff2?v=e9cae46d") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Onest;src:url("/assets/fonts/onest-400.woff2?v=3bde8d38") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Onest;src:url("/assets/fonts/onest-500.woff2?v=653ecd75") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("/assets/fonts/inter-500.woff2?v=52394584") format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* ---- Tokens ------------------------------------------------------------ */
:root{
/* surfaces */
--page: #fbfaf6; /* page background */
--panel: #f4f2ec; /* raised / tinted section bg */
--soft: #ece9e0; /* hairline fills, chips */
--sand: #e7e3d9; /* deeper sand, photo fallback */
/* ink */
--ink: #1c1a15; /* primary text, dark buttons */
--ink-hover: #2e2b24; /* the one hover step on ink */
--muted: #56524a; /* secondary text */
--faint: #8c887e; /* tertiary text */
--on-dark: #fbfaf6; /* text on --ink */
/* lines */
--line: rgba(28,26,21,.08);
--line-header: #e4e4e1; /* the header's hairline */
/* shadows — the reference draws exactly two */
--shadow-card: 0 1px 3px rgba(0,0,0,.03), 0 4px 16px rgba(0,0,0,.04);
--shadow-pop: 0 1px 3px rgba(0,0,0,.03), 0 4px 16px rgba(0,0,0,.06);
/* type families */
--font-display: Sentient, ui-serif, Georgia, serif;
--font-body: Onest, ui-sans-serif, system-ui, sans-serif;
--font-brand: Inter, ui-sans-serif, system-ui, sans-serif;
/* layout */
--container: 1200px; /* the rail every section aligns to */
--gutter: 20px; /* phone side padding (<=600) */
--header-h: 64px; /* the fixed bar's height */
/* radii — the scale the page actually draws */
--r-4: 4px;
--r-6: 6px;
--r-8: 8px;
--r-10: 10px;
--r-12: 12px;
--r-16: 16px;
--r-pill: 999px;
/* the one world swatch still in use: sky blue thinning to the page */
--sky-wash: linear-gradient(160deg, #bcd9f2 0%, #dfe9ec 55%, #ede9de 100%);
/* motion — measured: spring(duration 1.2s, bounce 0.1); appear travels
y:16px -> 0 with opacity .001 -> 1. Bezier below fits that spring. */
--appear-dur: 1.2s;
--appear-ease: cubic-bezier(.22,.61,.28,1);
--hover-dur: .28s;
--hover-ease: cubic-bezier(.4,0,.2,1);
}
/* ---- Reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,h5,h6,p,figure,figcaption,blockquote,dl,dd,ul,ol{margin:0;padding:0}
ul[class],ol[class]{list-style:none}
/* height:auto keeps the ratio when max-width clamps an that carries
width/height attributes — without it those images squash. */
img,svg,video{display:block;max-width:100%}
img,video{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6{font-weight:inherit;font-size:inherit}
/* ---- Base -------------------------------------------------------------- */
body{
background:var(--page);
color:var(--ink);
font-family:var(--font-body);
font-size:16px;
line-height:1.45;
/* nothing in the current copy is long enough to overflow 320px, but there is
no overflow-x:hidden anywhere to catch one that is. */
overflow-wrap:break-word;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
font-feature-settings:normal;
text-rendering:auto;
}
/* anything linkable clears the fixed bar when it is jumped to */
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
/* ---- Type scale ---------------------------------------------------------
Measured at 1440: 56/58.8/-2.8, 48/50.4/-2.4, 40/46/-2, 40/50/-2. The
steps are written fluid so no section has to restate them at 900 and 600:
each clamp resolves to its measured maximum from ~1100px up (xl reaches 56
at 1091, lg 48 at 1102, md/num 40 at 1440 exactly), and the tracking is the
measured -.05em at every size. Line height is the measured ratio. */
.t-display-xl{font-family:var(--font-display);font-weight:300;font-size:clamp(36px,2rem + 2.2vw,56px); line-height:1.05;letter-spacing:-.05em;color:var(--ink)}
.t-display-lg{font-family:var(--font-display);font-weight:300;font-size:clamp(32px,1.9rem + 1.6vw,48px);line-height:1.05;letter-spacing:-.05em;color:var(--ink)}
.t-display-md{font-family:var(--font-display);font-weight:300;font-size:clamp(28px,1.6rem + 1vw,40px); line-height:1.15;letter-spacing:-.05em;color:var(--ink)}
.t-num {font-family:var(--font-display);font-weight:300;font-size:clamp(32px,1.6rem + 1vw,40px); line-height:1.25;letter-spacing:-.05em;color:var(--ink)}
.t-h3 {font-family:var(--font-body);font-weight:400;font-size:20px;line-height:27px;letter-spacing:-.4px;color:var(--ink)}
.t-h4 {font-family:var(--font-body);font-weight:400;font-size:18px;line-height:25.2px;color:var(--ink)}
.t-body {font-family:var(--font-body);font-weight:400;font-size:16px;line-height:23.2px;color:var(--muted)}
.t-sm {font-family:var(--font-body);font-weight:400;font-size:14px;line-height:21px;color:var(--muted)}
.t-sm-strong {font-family:var(--font-body);font-weight:500;font-size:14px;line-height:21px;color:var(--ink)}
.t-brand {font-family:var(--font-brand);font-weight:500;font-size:18px;line-height:21.6px;letter-spacing:-.54px;color:var(--ink)}
/* an inline link inside body copy (the reset removes underlines from every a) */
.t-link {color:var(--ink);text-decoration:underline;text-decoration-color:rgba(28,26,21,.35);text-underline-offset:.15em;transition:text-decoration-color .15s var(--hover-ease)}
.t-link:hover{text-decoration-color:var(--ink)}
/* display headings mix ink + muted words: marks the muted run */
.t-display-xl em,.t-display-lg em,.t-display-md em{font-style:normal;color:var(--muted)}
/* headings wrap evenly, so a hand-placed that leaves a long second line (or a
phone width that does) never strands one word ("matching.", "in.") on a line */
h1,h2,h3,h4,.t-display-xl,.t-display-lg,.t-display-md{text-wrap:balance}
/* the hand-placed line breaks in the display headlines are set for the wide
measure; on a phone the copy wraps on its own */
@media (max-width:600px){
.t-display-lg br,.t-display-xl br{display:none}
/* the hidden break must still separate the words */
.t-display-lg br+em::before,.t-display-xl br+em::before{content:" "}
}
/* ---- Layout primitives -------------------------------------------------- */
/* Gutterless, as measured: the 40px side gutter comes from each section's own
`padding: 96px 40px`, so content lands at x=120 in a 1440 viewport. */
.container{width:100%;max-width:var(--container);margin-inline:auto}
/* Every band on the site shares this rhythm; it used to be restated in
17 section sheets. A sheet that needs different padding overrides it
wholesale (hero, page-hero, footer, prc-plans, prc-hero) — and must
override all three steps, not just the base, because this file loads
first and its media rules would otherwise win at 900 and 600. */
.section{position:relative;padding:96px 40px}
@media (max-width:900px){.section{padding:72px 24px}}
@media (max-width:600px){.section{padding:56px var(--gutter)}}
/* a second page that opens on a normal section, not the hero, still clears
the fixed bar */
main > .section:first-child:not(.hero){padding-top:calc(var(--header-h) + 32px)}
/* Eyebrow label that opens every section.
Measured: Onest 15/19.5 --muted, a 10x5 pill marker, 6px gap, 2px left inset. */
.eyebrow{
display:inline-flex;align-items:center;gap:6px;
padding-left:2px;
font-family:var(--font-body);font-weight:400;font-size:15px;line-height:19.5px;
color:var(--muted);
}
.eyebrow::before{content:"";width:10px;height:5px;border-radius:var(--r-pill);background:var(--muted);flex:none}
/* ---- Noise ---------------------------------------------------------------
One grain layer for every panel that takes one (features cards, the sticky
media wells, the use-case screens). Sits on top of whatever fills the
panel, takes the panel's own corner radius, and is tuned per section with
--noise-opacity / --noise-blend. */
.noise{
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
opacity:var(--noise-opacity,.05);
mix-blend-mode:var(--noise-blend,normal);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:160px 160px;
}
/* ---- Buttons ------------------------------------------------------------
Style measured from sentira.framer.website and translated to this palette:
44 tall, r12, padding 10px 20px, 16/500 with -0.04em tracking (they use
Geist; we use Onest), no border, no shadow. Two fills:
· primary ink on page (their white-on-black, inverted)
· secondary 6% ink tint (their 10% white) with a 16px round ink coin
holding a 7px arrow at the end
· light page fill with ink text, for use ON dark or photo surfaces
(this is their primary, un-inverted)
· ghost no fill, muted text — nav links, "Log in"
Hover: the label blur-swaps — the resting copy blurs out and lifts, a
second copy blurs in from below (their Text 1 / Text 2 pair). Mark up as
Book a demo
- the inner span is the real (accessible) label; ::after draws the copy.
Sizes: .btn--sm is 40 tall / 8px 16px / 15px for header use. */
.btn{
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
height:44px;padding:10px 20px;border-radius:var(--r-12);border:0;
font-family:var(--font-body);font-weight:500;font-size:16px;line-height:24px;letter-spacing:-.04em;
white-space:nowrap;cursor:pointer;text-decoration:none;
transition:background-color var(--hover-dur) var(--hover-ease),
color var(--hover-dur) var(--hover-ease),
opacity var(--hover-dur) var(--hover-ease);
}
.btn--sm{height:40px;padding:8px 16px;font-size:16px;line-height:24px;border-radius:var(--r-12)}
.btn--primary{background:var(--ink);color:var(--on-dark)}
.btn--primary:hover{background:var(--ink-hover)}
.btn--secondary{background:rgba(28,26,21,.06);color:var(--ink)}
.btn--secondary:hover{background:rgba(28,26,21,.1)}
.btn--ghost{background:transparent;color:var(--muted)}
.btn--ghost:hover{background:rgba(28,26,21,.06);color:var(--ink)}
/* label blur-swap */
.btn__text{
position:relative;display:block;overflow:hidden;
}
.btn__l{
display:block;
transition:transform .32s var(--hover-ease),filter .32s var(--hover-ease),opacity .32s var(--hover-ease);
}
.btn__text::after{
content:attr(data-label);position:absolute;inset:0;
transform:translateY(60%);filter:blur(5px);opacity:0;
transition:transform .32s var(--hover-ease),filter .32s var(--hover-ease),opacity .32s var(--hover-ease);
}
.btn:hover .btn__l,.btn:focus-visible .btn__l{transform:translateY(-60%);filter:blur(5px);opacity:0}
.btn:hover .btn__text::after,.btn:focus-visible .btn__text::after{transform:none;filter:none;opacity:1}
/* bare north-east arrow, for buttons that lead to another page but do not
take the coin — on a filled .btn--primary an ink coin would disappear into
the fill. Same path and same travel as the coin above, and as the feature
cards and explore links, so one mark means "this leaves the page" across
the whole site. */
.btn__go{flex:none;transition:transform .32s var(--hover-ease)}
.btn:hover .btn__go,
.btn:focus-visible .btn__go{transform:translate(3px,-3px)}
/* The hero pair, over the photo. There used to be generic .btn--light and
.btn--on-dark variants here; nothing ever used them and they were removed.
They only apply from 900 up — below that the hero stacks onto the page and
both buttons go back to the ink-on-page pair — which is why the markup
keeps btn--primary / btn--secondary and these recolour on top. Kept here,
next to the button system, rather than in hero.css, so the fills stay in
one file.
The secondary was rgba(255,255,255,.16) with no blur, on the stated
reasoning that "the picture behind them is already darkened by the card's
scrim". There is no scrim — see the live-layout block in hero.css — so a
translucent white pill with white type sat straight on the photograph. On
hero-tv-wide.webp that is a sunlit hillside: 118/255 average luminance
behind the button, giving white text about 1.6:1 where 4.5:1 is the floor.
It now takes the same treatment the search bar in the hero demo already
uses over this same picture (html[data-text="light"] .sp-search__bar in
hero.css): a dark translucent fill over an 18px backdrop blur, with a white
inset hairline. The blur is what does the work — it flattens whatever is
behind the pill into an even tone, so the label holds up wherever the copy
lands on the photo, and the two elements read as one family. Keep the two
in step: if the bar's treatment changes, change this with it. */
@media (min-width:900px){
.hero__cta{background:var(--page);color:var(--ink)}
.hero__cta:hover{background:#fff}
.hero__cta2{
background:rgba(28,26,21,.38);
color:#fff;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 8px 32px rgba(28,26,21,.18);
-webkit-backdrop-filter:blur(18px) saturate(1.3);
backdrop-filter:blur(18px) saturate(1.3);
}
.hero__cta2:hover{background:rgba(28,26,21,.5)}
}
@media (prefers-reduced-motion:reduce){
.btn__l,.btn__text::after,.btn__go{transition:none}
.btn:hover .btn__l{transform:none;filter:none;opacity:1}
.btn:hover .btn__text::after{opacity:0}
.btn:hover .btn__go,.btn:focus-visible .btn__go{transform:none}
}
/* ---- Skip link ----------------------------------------------------------
build.js emits as the first thing in the
body. It is clipped rather than display:none so it keeps its place in the tab
order, and takes the page's --page pill on :focus-visible. z-index 20 clears
the fixed .header (z-index 10, header.css). */
.skip-link{
position:fixed;
top:12px;
left:12px;
z-index:20;
/* clipped, not hidden: still focusable, still read in order */
width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);
clip-path:inset(50%);
white-space:nowrap;
}
.skip-link:focus-visible{
width:auto;height:auto;overflow:visible;
clip:auto;
clip-path:none;
padding:10px 16px;
border-radius:var(--r-pill);
background:var(--page);
color:var(--ink);
box-shadow:var(--shadow-card);
font-family:var(--font-body);font-weight:500;font-size:15px;line-height:19.5px;
}
/* ---- Focus --------------------------------------------------------------
One ring for the whole page. :where() keeps it at zero specificity, so a
control that draws its own corner radius (.btn, .header__link, ...) keeps
it, and a surface that needs a different colour — white over the hero
photo, see header.css — can override with a single class. */
:where(a,button,summary,[tabindex]):focus-visible{
outline:2px solid var(--ink);
outline-offset:2px;
border-radius:var(--r-6);
}
/* ---- Appear engine ------------------------------------------------------ */
/* Measured: initial {opacity:.001, y:16px}, spring 1.2s bounce .1,
stagger delays 0.05s .. 0.4s. Some runs add a 3px blur (split headlines).
The two HIDDEN base rules are scoped to html.js — build.js puts an inline
script at the very top of that adds that class — because only
scripts/main.js ever adds .is-in. Without JS the class is never set, so an
unscoped base rule would leave the whole page invisible; scoped, no-JS simply
gets the finished state. .is-in and the reduced-motion override stay
unscoped: they are the visible state and must win wherever they apply — which
is why the scope is written :where(html.js), at zero specificity, so these two
rules weigh exactly what they weighed before and the cascade is unchanged. */
:where(html.js) [data-appear]{
opacity:.001;
/* Measured travel: 32px everywhere except the hero, which uses 16px.
Override with --appear-y on the element or a section wrapper. */
transform:translateY(var(--appear-y,32px));
transition:opacity var(--appear-dur) var(--appear-ease),
transform var(--appear-dur) var(--appear-ease),
filter var(--appear-dur) var(--appear-ease);
transition-delay:var(--appear-delay,.05s);
}
:where(html.js) [data-appear="blur"]{filter:blur(3px)}
[data-appear].is-in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
[data-appear]{opacity:1;transform:none;filter:none;transition:none}
/* stop everything: the duration clamp alone still leaves infinite
animations (the two marquees) running */
*{animation-duration:.01ms!important;transition-duration:.01ms!important;animation:none!important}
}
/* /styles/page-hero.css */
/* ==========================================================================
Page hero — the opening of every inner page (shared component).
Not the home page's cinematic hero: container width, text first, about
half the viewport tall, the header solid above it. Two columns from 900
up: copy (eyebrow, display headline, lead, the two CTAs) and one media
slot, a .well carrying the page family's picture with a white product-UI
mockup on it. Under 900 it stacks, copy first.
Markup (copy this; only the text, the data-well and the @svg change):
Sizes at 1440: rail 1200, copy column 540, media 588 x 460 (radius 16),
the 600x400 landscape mockup scaled to 520 wide and centred. The section's
own top padding clears the fixed header (global.css offsets main's first
non-hero section by --header-h + 32).
========================================================================== */
.page-hero{padding:24px 40px 64px}
.page-hero__inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:64px;
}
.page-hero__copy{
flex:0 1 540px;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:20px;
}
.page-hero__title{margin:0}
.page-hero__lead{max-width:460px;margin:0;font-size:18px;line-height:27px}
.page-hero__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.page-hero__media{
flex:0 0 588px;
height:460px;
border-radius:var(--r-16);
display:grid;
place-items:center;
}
.page-hero__shot{
position:relative;
width:520px;
filter:drop-shadow(0 12px 32px rgba(28,26,21,.14));
}
.page-hero__svg{display:block;width:100%;height:auto}
@media (max-width:1279px){
.page-hero__media{flex:0 0 50%;height:420px}
.page-hero__shot{width:88%}
}
@media (max-width:900px){
.page-hero{padding:16px 24px 48px}
.page-hero__inner{flex-direction:column;align-items:stretch;gap:32px}
.page-hero__copy{flex:0 0 auto}
.page-hero__media{flex:0 0 auto;height:auto;aspect-ratio:588/460}
}
@media (max-width:600px){
.page-hero{padding:8px var(--gutter) 40px}
.page-hero__media{aspect-ratio:4/3}
.page-hero__shot{width:92%}
}
/* /styles/guide.css */
/* ==========================================================================
Guide pages (gd) — /guide/ and the four reference pages under it.
These are Swedish glossary pages: a scoped definition, a labelled formula,
a worked example, a short FAQ. Reference material, not marketing. The job
of this sheet is a readable measure, a correct outline and two formula
shapes that survive being read on a phone.
---- Deliberate overlap with styles/legal.css -----------------------------
A guide page is long-form prose, and so is a legal page. The prose numbers
here are COPIED from legal.css on purpose and must stay identical, so the
two can be merged into one prose component later:
measure 640 · body 16/26 · rhythm margin-top only, never margin-bottom
16 between blocks · 64 above h2 · 40 above h3 · 28 above h4
12 above a list that belongs to the sentence introducing it
first-child 0 · h2 + h3 collapses to 20
The two sheets are kept apart only because another agent owns legal.css
while this is being written. If you change a number above, change it in
both files or do the merge properly.
Differences from legal.css, and why: no table of contents rail (these
pages are four to six h2s long, a sticky rail would be longer than the
document), so the prose is a single left-aligned column on the rail rather
than a two-column grid; and [data-appear] IS used here, once, on the prose
wrapper — legal.css avoids it because its transformed ancestor breaks the
sticky rail, and there is no sticky rail here.
---- Hero ----------------------------------------------------------------
`.guide-hero` is the LEFT-aligned flat variant of the shared page hero
(styles/page-hero.css), the same idea as `.prc-hero` (centred) and
`.legal-hero`. There is no picture well on a guide page, so the two-column
flex in page-hero.css has nothing to sit beside; this collapses it to one
column and keeps the copy on the left margin, where the prose below starts.
Only padding-inline and padding-bottom are set — padding-top has to keep
coming from global.css's `main > .section:first-child` rule, the one place
that clears the 64px fixed header.
---- Formula block -------------------------------------------------------
docs/competitor-lessons.md §9 records that the Swedish AI Overview for
this cluster rewards "a short scoped definition paragraph followed by an
explicitly labelled formula block near the top". So the formula is real
text in a tinted panel, not a picture: it is selectable, searchable,
readable by a screen reader and legible at 375px. --panel/r12 is the
site's standard text-card treatment (24px inset, see card-row.css).
Tabular figures so the digits in a two-line formula line up.
---- Calculator ----------------------------------------------------------
Same panel, one step more prominent (r16, hairline, 28px inset) because it
is the only interactive thing on the page. Fields are a two-up grid that
becomes one column at 600; results are a two-up grid of label-over-value
blocks. Values use the existing .t-num and .t-h3 utilities — four .t-num
results in a column would out-shout the H1.
Breakpoints: 1280 / 1100 / 900 / 600, as everywhere else on the site.
========================================================================== */
/* ==========================================================================
Hero
========================================================================== */
/* Almost nothing. The guide hero IS the shared component now
(styles/page-hero.css) — two columns, copy left, .well right — so the only
rules here are the two things the component does not have: the back link
above the eyebrow, and the treatment for a piece of flat drawn art sitting
in a slot built for a white product mockup.
Everything that used to be in this block — flex-direction:column,
align-items:flex-start, a 720 then 640 max-width, margin-inline:auto and a
hand-rolled padding-inline per breakpoint — is deleted. It was a
reimplementation of the component with different numbers, and different
numbers were exactly the complaint. */
/* the guide's picture fills the well slot edge to edge instead of floating
a product mockup on a photograph. The slot is 588x460 and the picture
16:9 with its subject right of centre, so the crop is held to the right. */
.guide-hero__media{position:relative;overflow:hidden;background:var(--soft)}
.guide-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:82% 50%}
/* ==========================================================================
Body
========================================================================== */
/* The hero above carries the opening space and the FAQ below carries the
closing space, so this band contributes neither. Longhand, not the
`padding` shorthand: the shorthand would also wipe the horizontal padding
that global.css's .section sets per breakpoint. */
.guide-body{padding-top:0;padding-bottom:0}
/* The legal pages' grid (styles/legal.css .legal__inner), same columns, same
gap, same source order with the nav first and placed right. A 640 measure
is correct for reading and wrong on its own: it left ~560px of empty rail
beside every guide. The rail now holds the contents list, the page fills
its width like every other page, and the measure is untouched. */
.guide__inner{
display:grid;
grid-template-columns:minmax(0,640px) 240px;
justify-content:space-between;
align-items:start;
gap:64px;
}
.guide__toc{grid-column:2;grid-row:1}
.guide__prose{grid-column:1;grid-row:1;min-width:0}
/* ---- contents rail ------------------------------------------------------
Sticky, with the same offset legal.css uses: the fixed bar is 64, +32 is
the air global.css gives a page's first section, so a stuck rail lines up
with the top of a heading jumped to. NOTE: nothing between .guide__inner
and this element may carry a transform — that includes [data-appear],
which is why the prose wrapper lost its. */
.guide__toc{
position:sticky;
top:calc(var(--header-h) + 32px);
max-height:calc(100vh - var(--header-h) - 64px);
overflow-y:auto;
padding-right:4px;
}
.guide__toc-title{margin:0 0 12px}
.guide__toc-list{margin:0;padding:0;list-style:none}
.guide__toc-list li{margin-top:8px}
.guide__toc-list li:first-child{margin-top:0}
.guide__toc-link{
display:block;
color:var(--faint);
transition:color var(--hover-dur) var(--hover-ease);
}
.guide__toc-link:hover,
.guide__toc-link:focus-visible{color:var(--ink)}
/* one column below 1100: 640 + 64 + 240 needs 944 inside the rail, and the
rail is already narrower than that by 1100. Same step legal.css takes. */
@media (max-width:1100px){
.guide__inner{display:block}
.guide__toc{
position:static;
max-height:none;
overflow:visible;
margin-bottom:40px;
padding-right:0;
}
.guide__prose{max-width:640px}
}
/* one leading for every text block in the document, headings excluded.
26, not the 23.2 of .t-body: across a 640 measure and thirty paragraphs
23.2 packs the lines too tightly to scan. Same deviation, same reason and
same value as legal.css. */
.guide__prose p,
.guide__prose li{line-height:26px}
/* margin-top only — see the header */
.guide__prose > *{margin-top:16px}
.guide__prose > *:first-child{margin-top:0}
.guide__prose > h2{margin-top:64px}
.guide__prose > h3{margin-top:40px}
.guide__prose > h4{margin-top:28px}
/* a list belongs to the sentence that introduces it */
.guide__prose > ul,
.guide__prose > ol{margin-top:12px}
/* nothing is allowed to open the page with 64px of nothing */
.guide__prose > h2:first-child,
.guide__prose > h3:first-child{margin-top:0}
/* ...but a body split into several sections (the compare pages) still needs
the section break between them, or the next h2 sits on the list above it */
.guide-body + .guide-body .guide__prose > h2:first-child{margin-top:64px}
/* a sub-heading straight after its parent keeps the parent's own air */
.guide__prose > h2 + h3,
.guide__prose > h3 + h4{margin-top:20px}
/* the two block components get a little more room than a paragraph */
.guide__prose > .guide__formula,
.guide__prose > .guide__table-panel{margin-top:20px}
.guide__prose > .calc{margin-top:32px}
/* an anchored heading is focused by scripts/main.js after a jump; the shared
ring in global.css draws it, and this keeps the ring off the text */
.guide__prose :focus-visible{outline-offset:4px}
/* ---- Lists --------------------------------------------------------------
The reset strips markers from every ul[class] — that selector is (0,1,1),
so a bare .guide__list (0,1,0) loses to it and the bullets stay gone.
`ul.guide__list` matches its weight and wins on source order instead. */
ul.guide__list{margin-left:0;padding-left:22px;list-style:disc}
ol.guide__list--num{margin-left:0;padding-left:22px;list-style:decimal}
.guide__list li{margin-top:10px}
.guide__list li:first-child{margin-top:0}
.guide__list li::marker{color:var(--faint)}
/* the lead-in phrase of a list item, in ink against the muted body */
.guide__term{color:var(--ink)}
/* ==========================================================================
Formula block
========================================================================== */
.guide__formula{
display:flex;
flex-direction:column;
gap:8px;
padding:20px 24px;
border-radius:var(--r-12);
background:var(--panel);
}
.guide__formula-line{
margin:0;
/* .t-h4 in the markup sets family, size and colour; this only lines the
digits up between two stacked lines */
font-variant-numeric:tabular-nums;
}
/* a worked example, as opposed to the general formula: same panel, quieter,
so a reader scanning for "the formula" does not stop at the example */
.guide__formula--calc{background:transparent;padding:4px 0 4px 20px;border-left:2px solid var(--soft)}
/* ==========================================================================
Example table
========================================================================== */
.guide__table-panel{
background:var(--panel);
border-radius:var(--r-16);
padding:4px 20px 12px;
}
.guide__table{
width:100%;
border-collapse:collapse;
table-layout:fixed;
}
.guide__table th,
.guide__table td{
padding:12px 12px 12px 0;
text-align:left;
vertical-align:top;
border-bottom:1px solid var(--line);
}
.guide__table th:last-child,
.guide__table td:last-child{padding-right:0}
.guide__table thead th{color:var(--ink)}
.guide__table tbody tr:last-child > *{border-bottom:0}
/* 34% is what the longest field name ("Kompetenser med nivå") needs to stay
on one line inside the 640 measure; the value column takes the rest,
because it carries the only real sentences */
.guide__col--field{width:34%}
/* clipped, not hidden: the table's caption is for a screen reader only —
the visible label is the
directly above the panel */
.guide__sr-only{
position:absolute;
width:1px;height:1px;
padding:0;margin:-1px;
overflow:hidden;
clip:rect(0 0 0 0);
clip-path:inset(50%);
white-space:nowrap;
border:0;
}
/* ==========================================================================
Calculator — scripts/guide.js, initGuide()
========================================================================== */
.calc{
display:flex;
flex-direction:column;
gap:20px;
padding:28px;
border-radius:var(--r-16);
background:var(--panel);
box-shadow:inset 0 0 0 1px var(--line);
}
.calc__title{margin:0}
/* the no-JS line. build.js puts an inline script at the top of that
sets html.js, so this is visible exactly when the calculator is dead. */
.calc__nojs{margin:0;color:var(--faint)}
html.js .calc__nojs{display:none}
/* ---- Fields ------------------------------------------------------------- */
.calc__fields{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}
.calc__field{display:flex;flex-direction:column;gap:6px;margin:0}
.calc__label{display:block}
.calc__hint{margin:0;color:var(--faint)}
.calc__input{
width:100%;
height:44px; /* the .btn height, so a row of controls agrees */
padding:10px 14px;
border:1px solid var(--line);
border-radius:var(--r-10);
background:var(--page);
color:var(--ink);
font-family:var(--font-body);
font-size:16px; /* 16 keeps iOS Safari from zooming on focus */
line-height:24px;
font-variant-numeric:tabular-nums;
transition:border-color var(--hover-dur) var(--hover-ease);
}
.calc__input:hover{border-color:rgba(28,26,21,.2)}
.calc__input::placeholder{color:var(--faint)}
/* the shared ring in global.css only covers a,button,summary,[tabindex] */
.calc__input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* ---- Results ------------------------------------------------------------ */
.calc__results{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
margin:0;
padding:0;
list-style:none;
}
/* one result spans the row on its own */
.calc__results--single{grid-template-columns:minmax(0,1fr)}
.calc__result{
display:flex;
flex-direction:column;
gap:2px;
margin:0;
padding:16px 18px;
border-radius:var(--r-12);
background:var(--page);
}
.calc__result-label{display:block}
/* .t-num / .t-h3 in the markup set the size;