/* ==========================================================================================================
Absolv v3 "Notebook" - the site-wide stylesheet
----------------------------------------------------------------------------------------------------------
ONE resolved layer, scoped under html.v3. Every value here is the value in effect on the homepage trial
after round 22 (prototypes/index-v3-continuous.html in the v3-notebook-trial worktree), with the round
override layering of assets/v3/v3-continuous.css flattened: where that file set a property several times,
only the last value is kept. Comments name the prototype selector each rule came from, as "from: ...".
Components the homepage never had (article body, forms, results panels, legal layout, breadcrumbs,
pagination, related links) are marked "NEW" and are designed in the same language.
The spec is docs/DESIGN-SYSTEM-V3-SPEC.md. Load with assets/v3/v3-site.js (reveal, FAQ, entrances, Poppy).
Plain hyphens only in this file.
========================================================================================================== */
/* ---------------------------------------------------------------------------------------------------------
0. Fonts
Aleo (SIL OFL) is the display face, Schibsted Grotesk (SIL OFL) the body face, Infamous the hand.
Infamous by Typeheist, https://typeheist.co, used under a Typeheist webfont licence. The files are the
licensed web files as supplied, not subset or converted (EULA clause 4.1), and the licence covers ONE
website (clause 3.1), so it is served from absolv.ai only.
from: cont/v3-tokens.css and the round 11 block of v3-continuous.css
--------------------------------------------------------------------------------------------------------- */
@font-face { font-family: "Aleo"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("/assets/v3/fonts/aleo-normal-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Aleo"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("/assets/v3/fonts/aleo-normal-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
src: url("/assets/v3/fonts/schibsted-grotesk-normal-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
src: url("/assets/v3/fonts/schibsted-grotesk-normal-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: italic; font-weight: 400 900; font-display: swap;
src: url("/assets/v3/fonts/schibsted-grotesk-italic-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: italic; font-weight: 400 900; font-display: swap;
src: url("/assets/v3/fonts/schibsted-grotesk-italic-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Infamous by Typeheist, https://typeheist.co */
@font-face { font-family: "Infamous"; font-style: normal; font-weight: 400; font-display: swap;
src: url("/assets/v3/fonts/infamous-regular.woff2") format("woff2"), url("/assets/v3/fonts/infamous-regular.woff") format("woff"); }
/* ---------------------------------------------------------------------------------------------------------
1. Tokens
Sizes follow the guide: every size is given at 1920 and is 0.75 of that at 1440, a straight line through
the origin, so each is its 1920 value as a share of the viewport width, capped at the 1920 value and
floored at the guide's phone size (round 16).
--------------------------------------------------------------------------------------------------------- */
html.v3 {
/* Colour (round 11 palette, round 16 part B marks). ONE orange for shapes, a darker orange for every orange letter. */
--v3-orange: #FF5B00; /* shapes only: the desk, buttons, the logo square, the live dot, bullets, radio dots */
--v3-orange-text: #D93200; /* every orange letter and every pencil mark (4.7:1 on the notepad); button hover and press */
--v3-paper: #FFFDFB; /* the notepad sheet, the light button, the button label, handwriting on the orange desk */
--v3-paper-note: #FBF6EE; /* torn card paper, quiet fills such as code and table stripes */
--v3-paper-under: #F1EEEA; /* sheet-3: the pill hover, a pressed paper surface */
--v3-yellow: #FFF06A; /* highlights only, always multiplied, never a fill */
--v3-yellow-overlap: #FFE02B; /* reference: where two highlight strokes cross, never set by hand */
--v3-blue: #CDE8FA; /* reserved: the guide's original highlight, retired from highlights in round 9; never a fill */
--v3-ink: #141414; /* all text, button border and hard shadow */
--v3-black-40: rgba(20, 20, 20, .4); /* thin rules, the "they say" head and a competitor's key line only, never body text */
--v3-black-11: rgba(20, 20, 20, .11); /* the grid line (round 22) */
/* Type families */
--v3-font-display: "Aleo", Georgia, serif;
--v3-font-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
--v3-font-hand: "Infamous", "Bradley Hand", "Segoe Print", cursive;
--v3-font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* NEW: system faces only, no fourth web font */
/* Type roles (round 16, part A) */
--v3-fs-h1: clamp(40px, 5.8333vw, 112px); /* Headline 1: Aleo Bold 112 / 1.0 */
--v3-fs-h2: clamp(24px, 2.8125vw, 54px); /* Headline 2: Aleo Bold 54 / 1.0 */
--v3-fs-text: clamp(14px, 1.3542vw, 26px); /* Text and lead: Schibsted Regular 26 / 1.2 */
--v3-fs-number: clamp(24px, 2.5vw, 48px); /* Card headline (a figure): Aleo Medium 48 / 0.9, -2% */
--v3-fs-keyline: clamp(14px, 1.3542vw, 26px); /* Card descriptor (key line): Schibsted Bold 26 / 0.9 */
--v3-fs-card: clamp(14px, 1.0417vw, 20px); /* Card text, and every small label: Schibsted Regular 20 / 1.2 */
--v3-fs-descriptor: clamp(14px, 1.25vw, 24px); /* Descriptor: Schibsted SemiBold 24 / 1.07 (FAQ questions, answers in "we do") */
--v3-fs-nav: clamp(14px, 1.0417vw, 20px); /* Navigation: Schibsted Medium 20 / 1.0 */
--v3-fs-button: clamp(18px, 1.25vw, 24px); /* Button: Aleo Medium 24 / 1.07 */
--v3-fs-hand: clamp(20px, 3.125vw, 60px); /* Notes: Infamous 60 */
--v3-fs-promise: clamp(20px, 1.5625vw, 30px); /* A note under a list line: Infamous 30 */
/* NEW roles for pages the homepage did not have. Long reading and form fields keep a higher floor than the
homepage's 14px, because 14px running text across 65 characters is hard work and iOS zooms any field under 16px. */
--v3-fs-prose: clamp(17px, 1.3542vw, 26px); /* article body: the Text role with a 17px floor */
--v3-fs-field: clamp(16px, 1.1458vw, 22px); /* form fields and their labels' values: never under 16px */
--v3-lh-text: 1.2;
--v3-lh-prose: 1.5; /* NEW: long-form line height; the guide's 1.2 is for short marketing lines */
--v3-lh-heading: 1;
--v3-lh-figure: .9;
--v3-lh-ui: 1.07;
--v3-measure: 19.5em; /* marketing running text: 440 to 520px at 1920 */
--v3-measure-prose: 65ch; /* NEW: article and legal body */
/* Weights */
--v3-w-display: 700; /* Aleo Bold for both headline roles */
--v3-w-ui: 500; /* Aleo or Schibsted Medium: buttons, navigation, figures */
/* Layout and spacing (rounds 7, 16 and 21) */
--v3-sheet-max: 1816px; /* the sheet is 1816 wide on the 1920 frame */
--v3-gutter: clamp(16px, 2.7vw, 52px); /* orange desk either side of the sheet */
--v3-pad-x: clamp(24px, 6vw, 112px); /* sheet padding either side of the content */
--v3-sec-pad-y: clamp(56px, 6.25vw, 120px); /* each section's own space above and below (round 21) */
--v3-paper-pad: 24px; /* the least gap between text and a paper edge */
/* The grid (round 21 half size, round 22 lighter line) */
--v3-grid-cell: clamp(29px, 4.4531vw, 85.5px); /* 86 at 1920, 64 at 1440, 29 on a phone */
--v3-grid-line: var(--v3-black-11);
/* The binding and the torn edge */
--v3-head-h: 76px; /* measured by v3-site.js */
--v3-bind-h: 64px; /* coil strip height */
--v3-bind-overhang: 30px; /* how far the wire rises above the sheet */
--v3-bind-drop: 6px; /* the coils sit this much lower so their ends land in the holes (round 21) */
--v3-bind-on-page: calc(var(--v3-bind-h) - var(--v3-bind-overhang) + var(--v3-bind-drop));
--v3-top: calc(var(--v3-head-h) + var(--v3-bind-overhang)); /* where the sheet starts */
--v3-stick: calc(var(--v3-top) + var(--v3-bind-on-page)); /* the line hashes and sticky things land under */
--v3-tear-h: 96px; /* the torn bottom edge, one tile deep */
--v3-tear-w: 960px; /* one tile of the edge, repeated, never scaled */
/* Depth */
--v3-shadow-sheet: drop-shadow(0 3px 10px rgba(20, 20, 20, .12)); /* sheet and torn cards, as a filter so it follows a torn edge */
--v3-shadow-sheet-box: 0 3px 10px rgba(20, 20, 20, .12); /* the same shadow on a plain rectangle */
--v3-shadow-hard: 4px 4px 0 var(--v3-ink); /* buttons: hard, no blur */
--v3-shadow-object: drop-shadow(2px 5px 6px rgba(20, 20, 20, .24)); /* desk photographs: clips, pencil, eraser */
/* Objects: one scale, the tape is the yardstick (round 22) */
--v3-tape-h: 54px; /* every tape band at every width, about 1.9cm of tape */
--v3-clip-w: 74px; /* every paper clip, about 81px of wire, 1.5 tapes */
--v3-rot-max: 10deg; /* notes, scraps, tape and clips stay within +/-10 degrees of their drawn angle */
/* Strokes. The marks are filled pencil outlines; on the page they read 1.76 to 2.27px at 1440 against a median of
1.95 (round 19). Every mark must sit within 30% of that median at every width. CSS rules use the hairline. */
--v3-stroke-mark: 1.95px;
--v3-stroke-rule: 1px;
/* Highlight band geometry (round 14 phone fix) */
--v3-hl-top: .38;
--v3-hl-bot: .1;
/* Motion */
--v3-ease: cubic-bezier(.3, .7, .2, 1);
--v3-dur-wipe: .7s;
--v3-dur-draw: .9s;
/* Buttons */
--v3-btn-h: 50px;
--v3-btn-pad: 40px;
--v3-btn-w: clamp(260px, 22.9167vw, 440px); /* 440 at 1920, 330 at 1440 */
scroll-padding-top: var(--v3-stick);
-webkit-text-size-adjust: 100%;
}
@supports (width: round(1px, 1px)) { html.v3 { --v3-grid-cell: round(clamp(29px, 4.4531vw, 85.5px), 1px); } }
@media (min-width: 1800px) and (min-height: 1000px) { html.v3 { --v3-bind-h: 76px; --v3-bind-overhang: 36px; --v3-bind-drop: 7px; } }
@media (max-width: 900px) { html.v3 { --v3-hl-top: .55; --v3-hl-bot: .28; } }
@media (max-width: 640px) {
html.v3 {
--v3-gutter: 20px; --v3-pad-x: 18px; --v3-sec-pad-y: 48px; --v3-paper-pad: 16px;
--v3-bind-h: 34px; --v3-bind-overhang: 15px; --v3-bind-drop: 3px;
--v3-tear-h: 52px; --v3-tear-w: 520px;
}
}
/* ---------------------------------------------------------------------------------------------------------
2. Base
from: cont/v3.css "Base", with the orange desk of v3-continuous.css round 7
--------------------------------------------------------------------------------------------------------- */
html.v3 *, html.v3 *::before, html.v3 *::after { box-sizing: border-box; }
html.v3 body {
margin: 0; background: var(--v3-orange); color: var(--v3-ink);
font-family: var(--v3-font-body); font-size: var(--v3-fs-text); line-height: var(--v3-lh-text);
-webkit-font-smoothing: antialiased; overflow-x: clip;
}
html.v3 img { max-width: 100%; height: auto; }
html.v3 a { color: inherit; }
html.v3 :focus-visible { outline: 2px solid var(--v3-ink); outline-offset: 4px; }
html.v3 .v3-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.v3 .v3-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--v3-paper); color: var(--v3-ink); padding: 10px 14px; border: 1px solid var(--v3-ink); box-shadow: var(--v3-shadow-hard); font-weight: 600; text-decoration: none; }
html.v3 .v3-skip:focus { top: 12px; }
/* ---------------------------------------------------------------------------------------------------------
3. Type roles
Headings carry NO full stop (round 21 and 22; the homepage build fails on one). Question marks stay.
from: .t-hero, .t-heading, .t-lead, .t-small (cont/v3.css) with the round 11 and round 16 values
--------------------------------------------------------------------------------------------------------- */
html.v3 .v3-h1 { margin: 0; font-family: var(--v3-font-display); font-weight: var(--v3-w-display); font-size: var(--v3-fs-h1); line-height: var(--v3-lh-heading); letter-spacing: 0; text-wrap: balance; }
html.v3 .v3-h2 { margin: 0; font-family: var(--v3-font-display); font-weight: var(--v3-w-display); font-size: var(--v3-fs-h2); line-height: var(--v3-lh-heading); letter-spacing: 0; text-wrap: balance; }
html.v3 .v3-lead { margin: 0; font-size: var(--v3-fs-text); line-height: var(--v3-lh-text); }
html.v3 .v3-text { font-size: var(--v3-fs-text); line-height: var(--v3-lh-text); }
html.v3 .v3-card-text, html.v3 .v3-small { font-size: var(--v3-fs-card); line-height: 1.2; }
html.v3 .v3-descriptor { font-weight: 600; font-size: var(--v3-fs-descriptor); line-height: var(--v3-lh-ui); }
html.v3 .v3-keyline { font-weight: 700; font-size: var(--v3-fs-keyline); line-height: 1; letter-spacing: -0.02em; }
html.v3 .v3-figure { font-family: var(--v3-font-display); font-weight: var(--v3-w-ui); font-size: var(--v3-fs-number); line-height: var(--v3-lh-figure); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
html.v3 .v3-label { font-weight: 600; font-size: var(--v3-fs-card); line-height: 1.2; }
html.v3 .v3-center { text-align: center; }
html.v3 .v3-measure { max-width: var(--v3-measure); margin-left: auto; margin-right: auto; }
html.v3 .v3-orange-text { color: var(--v3-orange-text); }
/* ---------------------------------------------------------------------------------------------------------
4. Header on the orange desk, fixed, with the spiral binding
Fixed header (round 21, replacing round 10's notebook tabs). The binding is part of the header: under it a band
of desk orange as tall as the wire's rise, then a strip of the sheet's top edge in paper with the grid's columns,
which the sheet scrolls under. Both bands take the pointer, so a click never falls through to content.
from: .desk-header, .nav, html.v3-cont .desk-header::before, .cont-binding, .cont-spiral (round 22)
Markup:
--------------------------------------------------------------------------------------------------------- */
html.v3 .v3-header {
position: fixed; left: 0; right: 0; top: 0; z-index: 50;
background: var(--v3-orange);
display: flex; align-items: center; justify-content: space-between; gap: 24px;
padding: 18px var(--v3-gutter) 14px;
}
html.v3 .v3-header::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--v3-bind-overhang); background: var(--v3-orange); }
html.v3 .v3-header__brand { flex: none; display: block; line-height: 0; }
html.v3 .v3-header__lockup { display: block; height: clamp(26px, 2.5vw, 48px); width: auto; }
html.v3 .v3-header__wordmark { display: none; height: 22px; width: auto; }
html.v3 .v3-nav { display: flex; align-items: center; gap: clamp(20px, 2.0833vw, 40px); }
html.v3 .v3-nav a:not(.v3-btn) { font-family: var(--v3-font-body); font-weight: var(--v3-w-ui); font-size: var(--v3-fs-nav); line-height: 1; color: var(--v3-ink); text-decoration: none; }
html.v3 .v3-nav a:not(.v3-btn):hover, html.v3 .v3-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media (min-width: 641px) and (max-width: 820px) {
html.v3 .v3-header__lockup { display: none; } /* the Aleo lockup at its 26px floor pushed Get started off a 641 to 715px screen */
html.v3 .v3-header__wordmark { display: block; height: 26px; }
}
@media (max-width: 640px) {
html.v3 .v3-header { padding-top: 14px; padding-bottom: 10px; }
html.v3 .v3-header__lockup { display: none; }
html.v3 .v3-header__wordmark { display: block; }
html.v3 .v3-nav .v3-nav__wide { display: none; } /* no hamburger on phones (locked): the wide links simply go */
html.v3 .v3-nav .v3-btn { height: 40px; padding: 0 16px; box-shadow: 3px 3px 0 var(--v3-ink); }
}
@media (max-width: 360px) { html.v3 .v3-header { gap: 12px; } }
html.v3 .v3-binding {
position: absolute; top: 100%;
left: max(var(--v3-gutter), calc((100% - var(--v3-sheet-max)) / 2));
right: max(var(--v3-gutter), calc((100% - var(--v3-sheet-max)) / 2));
height: calc(var(--v3-bind-overhang) + var(--v3-bind-on-page));
}
html.v3 .v3-binding::before {
content: ""; position: absolute; left: 0; right: 0; top: var(--v3-bind-overhang); bottom: 0; pointer-events: auto;
background-color: var(--v3-paper);
background-image: linear-gradient(90deg, var(--v3-grid-line) 1px, transparent 1px);
background-size: var(--v3-grid-cell) 100%;
}
/* The spiral (round 22): a whole number of coil tiles, rounded down to fit, with a first coil rising from a ball tip
and the far half of the last hole as end pieces, all three centred so both margins are equal. */
html.v3 .v3-spiral {
--sp-tile: calc(var(--v3-bind-h) * 181 / 288);
--sp-start: calc(var(--v3-bind-h) * 141 / 288);
--sp-end: calc(var(--v3-bind-h) * 70 / 288);
--sp-margin: clamp(16px, 2.5vw, 48px);
position: absolute; z-index: 1; pointer-events: none;
top: var(--v3-bind-drop); height: var(--v3-bind-h);
left: calc(50% + (var(--sp-start) - var(--sp-end)) / 2); translate: -50% 0;
width: calc(100% - 2 * var(--sp-margin) - var(--sp-start) - var(--sp-end));
background: url("/assets/v3/img/absolv-notebook-spiral-top.webp") 0 0 / var(--sp-tile) var(--v3-bind-h) repeat-x;
}
@supports (width: round(down, 10px, 3px)) {
html.v3 .v3-spiral { width: round(down, calc(100% - 2 * var(--sp-margin) - var(--sp-start) - var(--sp-end)), var(--sp-tile)); }
}
html.v3 .v3-spiral::before, html.v3 .v3-spiral::after { content: ""; position: absolute; top: 0; height: 100%; }
html.v3 .v3-spiral::before { right: 100%; width: var(--sp-start); background: url("/assets/v3/img/absolv-notebook-spiral-start.webp") 0 0 / 100% 100% no-repeat; }
html.v3 .v3-spiral::after { left: 100%; width: var(--sp-end); background: url("/assets/v3/img/absolv-notebook-spiral-end.webp") 0 0 / 100% 100% no-repeat; }
/* ---------------------------------------------------------------------------------------------------------
5. The desk and the one sheet
One continuous sheet: the grid runs all the way down, the right edge is straight (round 22) and the bottom is
torn, opening onto the desk and the footer. The paper is a separate layer so its drop shadow (a filter) follows
the torn edge; the content never forms a stacking context of its own, so drawings multiply against the paper.
from: .desk, .deck-track, .cont-paper and .cont-paper::before (rounds 7, 16 and 22)
Markup:
...
--------------------------------------------------------------------------------------------------------- */
html.v3 .v3-desk { display: block; padding: var(--v3-top) var(--v3-gutter) 0; overflow-x: clip; } /* from: .desk (v3.css) */
html.v3 .v3-sheet {
position: relative; z-index: 1; isolation: isolate;
max-width: var(--v3-sheet-max); margin: 0 auto;
padding: var(--v3-bind-on-page) 0 calc(var(--v3-tear-h) * .8);
}
html.v3 .v3-sheet__paper { position: absolute; inset: 0; z-index: -1; pointer-events: none; filter: var(--v3-shadow-sheet); }
html.v3 .v3-sheet__paper::before {
content: ""; position: absolute; inset: 0;
background-color: var(--v3-paper);
background-image: linear-gradient(var(--v3-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--v3-grid-line) 1px, transparent 1px);
background-size: var(--v3-grid-cell) var(--v3-grid-cell);
-webkit-mask-image: linear-gradient(#000, #000), url("/assets/v3/img/absolv-sheet-torn-edge.svg");
mask-image: linear-gradient(#000, #000), url("/assets/v3/img/absolv-sheet-torn-edge.svg");
-webkit-mask-size: 100% calc(100% - var(--v3-tear-h) + 1px), var(--v3-tear-w) var(--v3-tear-h);
mask-size: 100% calc(100% - var(--v3-tear-h) + 1px), var(--v3-tear-w) var(--v3-tear-h);
-webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
-webkit-mask-repeat: no-repeat, repeat-x; mask-repeat: no-repeat, repeat-x;
}
/* ---------------------------------------------------------------------------------------------------------
6. Section rhythm
A section is a stretch of the one sheet: an optional kicker note, a heading, an optional aside note, the
content and at most one primary button. Each keeps its own space above and below (round 21).
from: .nb__page and .section-head (cont/v3.css, v3-continuous.css rounds 7 and 21)
--------------------------------------------------------------------------------------------------------- */
html.v3 .v3-sec { position: relative; padding: var(--v3-sec-pad-y) var(--v3-pad-x); scroll-margin-top: var(--v3-stick); }
html.v3 .v3-sec--tight { padding-top: calc(var(--v3-sec-pad-y) * .5); padding-bottom: calc(var(--v3-sec-pad-y) * .5); } /* NEW: a section that continues the one above it, such as breadcrumbs */
html.v3 .v3-sec-head { position: relative; text-align: center; margin: 0 auto clamp(28px, 3.5vw, 64px); max-width: 30em; }
html.v3 .v3-sec-head .v3-h1, html.v3 .v3-sec-head .v3-h2 { position: relative; display: inline-block; }
html.v3 .v3-sec-head .v3-lead { margin: clamp(14px, 1.4vw, 26px) auto 0; max-width: 26.5em; }
html.v3 .v3-sec-cta { text-align: center; margin-top: clamp(36px, 4vw, 72px); }
html.v3 .v3-sec--left .v3-sec-head { text-align: left; margin-left: 0; }
/* Aside notes: beside the heading from 1440px, where the sheet has room, and dropped under it below that,
right-aligned and tilted from the right end so the tilt never rises into the heading's highlight.
from: .section-head .aside, the round 16 review fixes and round 17 placements */
/* default: above the heading's right end, so it never leaves the sheet whatever the heading's width (adapted from
.features .aside, whose right: -12%; top: -66px was hand-placed for one heading and ran off the sheet beside a long one);
--right and --left stand it beside a SHORT heading, outside its box (from: .pricing-page .aside and .faq-page .aside) */
html.v3 .v3-aside { position: absolute; white-space: nowrap; left: auto; right: -4%; top: calc(var(--v3-fs-hand) * -1.15); --r: -4deg; transform-origin: right center; }
html.v3 .v3-aside--right { right: auto; left: calc(100% + .3em); top: -40px; --r: 5deg; transform-origin: left center; }
html.v3 .v3-aside--left { right: calc(100% + .45em); top: 10px; --r: -6deg; }
@media (max-width: 1439px) {
html.v3 .v3-aside, html.v3 .v3-aside--left, html.v3 .v3-aside--right {
position: relative; display: block; width: max-content; max-width: 100%; white-space: normal;
left: auto; right: auto; top: auto; text-align: right; transform-origin: right center;
margin: calc(var(--v3-fs-h2) * var(--v3-hl-bot) + 12px) 0 0 auto;
}
}
/* ---------------------------------------------------------------------------------------------------------
7. Buttons and links
Flat orange, a 1px ink border and a 4px hard ink shadow. Hover fills dark orange and moves 2px onto a 2px shadow,
press moves 4px and drops it. Section buttons are 330 wide at 1440 (440 at 1920) and full width on phones.
from: .btn (cont/v3.css) with the round 11 and round 16 values
--------------------------------------------------------------------------------------------------------- */
html.v3 .v3-btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5em;
height: var(--v3-btn-h); padding: 0 var(--v3-btn-pad);
background: var(--v3-orange); color: var(--v3-paper);
border: 1px solid var(--v3-ink); border-radius: 0; box-shadow: var(--v3-shadow-hard);
font-family: var(--v3-font-display); font-weight: var(--v3-w-ui); font-size: var(--v3-fs-button); line-height: var(--v3-lh-ui);
text-decoration: none; cursor: pointer; white-space: nowrap;
transition: transform .12s var(--v3-ease), box-shadow .12s var(--v3-ease), background-color .12s;
}
html.v3 .v3-btn:hover { background: var(--v3-orange-text); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--v3-ink); }
html.v3 .v3-btn:active { background: var(--v3-orange-text); transform: translate(4px, 4px); box-shadow: none; }
html.v3 .v3-btn[disabled], html.v3 .v3-btn[aria-disabled="true"] { cursor: default; background: var(--v3-orange-text); transform: translate(4px, 4px); box-shadow: none; }
/* the light button is the header's Get started on the orange desk (a signal button would vanish into it) */
html.v3 .v3-btn--light, html.v3 .v3-btn--light:hover, html.v3 .v3-btn--light:active { background: var(--v3-paper); color: var(--v3-ink); }
html.v3 .v3-btn--wide { width: var(--v3-btn-w); max-width: 100%; }
html.v3 .v3-btn--block { width: 100%; }
html.v3 .v3-sec .v3-btn:not(.v3-btn--inline) { width: var(--v3-btn-w); max-width: 100%; }
@media (max-width: 640px) { html.v3 .v3-sec .v3-btn:not(.v3-btn--inline) { width: 100%; max-width: none; } }
/* Secondary: outline only, no fill and no hard shadow, so it never competes with the one primary. from: .btn-secondary */
html.v3 .v3-btn-secondary {
display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 44px; padding: 0 18px;
background: transparent; color: var(--v3-ink); border: 1px solid var(--v3-ink); border-radius: 0;
font-family: var(--v3-font-body); font-weight: var(--v3-w-ui); font-size: var(--v3-fs-nav); line-height: 1;
text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .12s;
}
html.v3 .v3-btn-secondary:hover { background: rgba(20, 20, 20, .06); }
/* Text link: ink with a crisp underline. Links are digital, never pencil. from: .link */
html.v3 .v3-link, html.v3 .v3-prose a { color: var(--v3-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; font-weight: 600; }
html.v3 .v3-link:hover, html.v3 .v3-prose a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--v3-orange-text); }
/* ---------------------------------------------------------------------------------------------------------
8. Highlights (yellow, multiplied) and pencil marks (dark orange)
A highlight wipes left to right and a mark draws on when its section gets .is-in (v3-site.js).
from: .hl, .ul, .circ, .braces, .mark (cont/v3.css) with the round 9 yellow, round 14 band and round 16 fixes
--------------------------------------------------------------------------------------------------------- */
html.v3 .v3-hl { position: relative; white-space: nowrap; --hl-img: url("/assets/v3/marks/absolv-highlight-double-a-yellow.svg"); }
html.v3 .v3-hl::before {
content: ""; position: absolute; z-index: -1; pointer-events: none;
left: -.14em; right: -.2em; top: calc(var(--v3-hl-top) * 1em); bottom: calc(var(--v3-hl-bot) * -1em);
background: var(--hl-img) center / 100% 100% no-repeat; mix-blend-mode: multiply;
clip-path: inset(0 0 0 0); transition: clip-path var(--v3-dur-wipe) var(--v3-ease);
}
html.v3 .v3-hl--b { --hl-img: url("/assets/v3/marks/absolv-highlight-double-b-yellow.svg"); }
html.v3 .v3-hl--c { --hl-img: url("/assets/v3/marks/absolv-highlight-double-c-yellow.svg"); }
html.v3 .v3-hl--single { --hl-img: url("/assets/v3/marks/absolv-highlight-single-a-yellow.svg"); }
html.v3 .v3-hl--single::before { top: .5em; bottom: -.04em; }
/* NEW: a highlight inside running text, which may wrap. Each line fragment takes its own single stroke (the guide's rule
for a phrase on three or more lines, round 16 part B), drawn as a background so it follows the wrap. */
html.v3 .v3-hl-run {
white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone;
background: url("/assets/v3/marks/absolv-highlight-single-a-yellow.svg") 0 82% / 100% .62em no-repeat;
padding: 0 .08em; transition: background-size var(--v3-dur-wipe) var(--v3-ease);
}
html.v3 .v3-hl-run { mix-blend-mode: multiply; }
/* On phones a heading's highlighted phrase may be wider than its line (the homepage drew a zigzag over the two lines in
script, round 16 H05). Here the phrase is let wrap and each line fragment carries the same stroke as a background,
so nothing runs off the sheet at 320px; on one line it looks the same as the pseudo-element band. */
@media (max-width: 640px) {
html.v3 .v3-h1 .v3-hl, html.v3 .v3-h2 .v3-hl {
white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; mix-blend-mode: multiply;
background: var(--hl-img) 0 100% / 100% .72em no-repeat; padding: 0 .06em .02em;
transition: background-size var(--v3-dur-wipe) var(--v3-ease);
}
html.v3 .v3-h1 .v3-hl::before, html.v3 .v3-h2 .v3-hl::before { content: none; }
html.v3.js .v3-sec:not(.is-in) .v3-h1 .v3-hl, html.v3.js .v3-sec:not(.is-in) .v3-h2 .v3-hl { background-size: 0 .72em; }
}
html.v3 .v3-ul { position: relative; white-space: nowrap; --ul-img: url("/assets/v3/marks/absolv-mark-underline-wave.svg"); --ul-h: .42em; }
html.v3 .v3-ul::after {
content: ""; position: absolute; pointer-events: none;
left: -.04em; right: -.08em; bottom: calc(-1 * var(--ul-h) - .08em); height: var(--ul-h);
background: var(--ul-img) center / 100% 100% no-repeat;
clip-path: inset(0 0 0 0); transition: clip-path var(--v3-dur-draw) var(--v3-ease) .25s;
}
html.v3 .v3-ul--taper { --ul-img: url("/assets/v3/marks/absolv-mark-underline-taper.svg"); --ul-h: .3em; }
html.v3 .v3-ul--coil { --ul-img: url("/assets/v3/marks/absolv-mark-underline-coil.svg"); --ul-h: .34em; }
/* Headings sit at line height 1.0, so an underline would run through the line below whenever a heading wraps. Inside a
headline role every underline is an inline block whose bottom padding holds the mark, which pushes only its own line
down by the mark's height (H03; the homepage did this per heading as .ul--first, here it is the default). */
html.v3 .v3-ul--first, html.v3 .v3-h1 .v3-ul, html.v3 .v3-h2 .v3-ul, html.v3 .v3-prose h2 .v3-ul { display: inline-block; padding-bottom: calc(var(--ul-h) + .02em); }
html.v3 .v3-ul--first::after, html.v3 .v3-h1 .v3-ul::after, html.v3 .v3-h2 .v3-ul::after, html.v3 .v3-prose h2 .v3-ul::after { bottom: 0; }
html.v3 .v3-circ { position: relative; white-space: nowrap; margin-left: .12em; }
html.v3 .v3-circ::after {
content: ""; position: absolute; pointer-events: none; left: -.5em; right: -.5em; top: -.6em; bottom: -.46em;
background: url("/assets/v3/marks/absolv-mark-circle-oval.svg") center / 100% 100% no-repeat;
clip-path: inset(0 0 0 0); transition: clip-path var(--v3-dur-draw) var(--v3-ease) .25s;
}
@media (max-width: 640px) {
html.v3 .v3-h2 .v3-circ, html.v3 .v3-h1 .v3-circ { display: inline-block; padding-top: 1.2em; margin-left: .26em; }
html.v3 .v3-h2 .v3-circ::after, html.v3 .v3-h1 .v3-circ::after { top: .44em; bottom: -.46em; left: -.66em; right: -.6em; }
}
html.v3 .v3-braces { position: relative; display: inline-block; padding: 0 .6em; }
html.v3 .v3-braces::before, html.v3 .v3-braces::after {
content: ""; position: absolute; top: -.06em; bottom: -.12em; width: .4em; pointer-events: none;
background: center / 100% 100% no-repeat; clip-path: inset(0 0 0 0); transition: clip-path var(--v3-dur-draw) var(--v3-ease) .2s;
}
html.v3 .v3-braces::before { left: 0; background-image: url("/assets/v3/marks/absolv-mark-brace-left.svg"); }
html.v3 .v3-braces::after { right: 0; background-image: url("/assets/v3/marks/absolv-mark-brace-right.svg"); }
html.v3 .v3-h1 .v3-braces::before, html.v3 .v3-h1 .v3-braces::after { width: .29em; }
html.v3 .v3-h1 .v3-braces { padding: 0 .55em; } /* from: .t-hero .braces */
@media (max-width: 1100px) { html.v3 .v3-h2 .v3-braces { padding: 0 .66em; } } /* from: #who .braces */
@media (max-width: 640px) { html.v3 .v3-h1 .v3-braces { padding: 0 .42em; } } /* tall pairs are drawn narrower to keep the line weight */
/* Standalone marks: arrows and ticks, placed in margins, never on type. Use the -even copies of the small marks. */
html.v3 .v3-mark { position: absolute; display: block; pointer-events: none; height: auto; transform: rotate(var(--r, 0deg)) scaleX(var(--flip, 1)); clip-path: inset(0 0 0 0); transition: clip-path var(--v3-dur-draw) var(--v3-ease) .45s; }
html.v3 .v3-mark--inline { position: relative; display: inline-block; vertical-align: middle; }
html.v3 .v3-mark--flow { position: relative; margin: 0 auto; }
/* hidden states before the section is drawn on (JS adds .js; v3-site.js adds .is-in to .v3-sec) */
html.v3.js .v3-sec:not(.is-in) .v3-hl::before, html.v3.js .v3-sec:not(.is-in) .v3-ul::after,
html.v3.js .v3-sec:not(.is-in) .v3-circ::after, html.v3.js .v3-sec:not(.is-in) .v3-mark { clip-path: inset(0 100% 0 0); }
html.v3.js .v3-sec:not(.is-in) .v3-braces::before, html.v3.js .v3-sec:not(.is-in) .v3-braces::after,
html.v3.js .v3-sec:not(.is-in) .v3-mark--down { clip-path: inset(0 0 100% 0); }
html.v3.js .v3-sec:not(.is-in) .v3-hl-run { background-size: 0 .62em; }
/* ---------------------------------------------------------------------------------------------------------
9. Handwritten notes (Infamous, dark orange, lowercase, tilted)
The hand comments on the digital layer: never the only place a fact or an action lives.
from: .note, .note--kicker, .note--name, .cmp-promise (cont/v3.css, rounds 16 and 17)
--------------------------------------------------------------------------------------------------------- */
html.v3 .v3-note {
font-family: var(--v3-font-hand); font-weight: 400; font-size: var(--v3-fs-hand); line-height: 1;
color: var(--v3-orange-text); text-transform: lowercase;
display: inline-block; white-space: nowrap;
transform: rotate(var(--r, -3deg)); transform-origin: left center;
}
html.v3 .v3-note--name { text-transform: none; } /* only a name keeps its capital: "Poppy" */
html.v3 .v3-note--kicker { display: block; width: max-content; max-width: 100%; margin: 0 auto .35em; white-space: normal; }
html.v3 .v3-note--promise { font-size: var(--v3-fs-promise); white-space: normal; --r: -1.5deg; margin-top: .3em; }
html.v3 .v3-note--on-desk { color: var(--v3-paper); } /* on the orange desk handwriting is paper white (guide p11) */
html.v3 .v3-note--flow { display: block; width: max-content; max-width: 100%; white-space: normal; }
/* ---------------------------------------------------------------------------------------------------------
10. Cards
.v3-card is a plain paper card with the sheet shadow. .v3-card--torn is the torn note paper: its own paper layer
cut by a mask, plain between the edges and the sheet's torn tile at half size along the bottom and turned over along
the top, repeated and never scaled, so a card can grow with its copy without stretching its edge (round 22). Set
--len (any number) to move the tear so no two neighbouring cards share an edge.
from: .card, .card--note, .tnote, .r22-paper (cont/v3.css and v3-continuous.css round 22)
Markup:
...content...
--------------------------------------------------------------------------------------------------------- */
html.v3 .v3-card { position: relative; background: var(--v3-paper); box-shadow: var(--v3-shadow-sheet-box); padding: clamp(24px, 2.6vw, 44px); }
html.v3 .v3-card--torn {
--np-w: calc(var(--v3-tear-w) / 2); --np-h: calc(var(--v3-tear-h) / 2);
background: none; box-shadow: none; isolation: isolate;
/* the prototype's text sat inside a 40 14 44 14px note-paper border plus .tnote padding, so the same distances are kept */
padding: 58px calc(var(--v3-paper-pad) + 14px) calc(44px + clamp(18px, 1.7vw, 32px));
transform: rotate(var(--r, 0deg));
}
html.v3 .v3-paper { position: absolute; inset: 0; z-index: -1; pointer-events: none; filter: var(--v3-shadow-sheet); }
html.v3 .v3-paper::before {
content: ""; position: absolute; inset: 0; background: var(--v3-paper-note);
-webkit-mask-image: url("/assets/v3/img/absolv-sheet-torn-edge-top.svg"), linear-gradient(#000, #000), url("/assets/v3/img/absolv-sheet-torn-edge.svg");
mask-image: url("/assets/v3/img/absolv-sheet-torn-edge-top.svg"), linear-gradient(#000, #000), url("/assets/v3/img/absolv-sheet-torn-edge.svg");
-webkit-mask-size: var(--np-w) var(--np-h), 100% calc(100% - 2 * var(--np-h) + 2px), var(--np-w) var(--np-h);
mask-size: var(--np-w) var(--np-h), 100% calc(100% - 2 * var(--np-h) + 2px), var(--np-w) var(--np-h);
-webkit-mask-position: calc(var(--len, 40) * -11px) 0, 0 calc(var(--np-h) - 1px), calc(var(--len, 40) * 7px) 100%;
mask-position: calc(var(--len, 40) * -11px) 0, 0 calc(var(--np-h) - 1px), calc(var(--len, 40) * 7px) 100%;
-webkit-mask-repeat: repeat-x, no-repeat, repeat-x; mask-repeat: repeat-x, no-repeat, repeat-x;
}
/* the interactive taped card (a feature card that opens a demo): it straightens, lifts and deepens its shadow */
html.v3 .v3-card--action { cursor: pointer; transition: transform .22s cubic-bezier(.22, 1, .36, 1); }
html.v3 .v3-card--action:hover { transform: rotate(calc(var(--r, 0deg) * .4)) translateY(-4px); }
html.v3 .v3-card__art { display: block; width: 112px; height: 104px; margin: 0 auto 18px; object-fit: contain; mix-blend-mode: multiply; }
html.v3 .v3-card__rule { display: block; height: 1px; background: var(--v3-black-40); margin: 0 0 16px; }
html.v3 .v3-card__copy { margin: 0; font-size: var(--v3-fs-card); line-height: 1.2; font-weight: 400; }
html.v3 .v3-card__title { margin: 0 0 .4em; font-weight: 700; font-size: var(--v3-fs-keyline); line-height: 1; }
/* a row of torn cards whose widths follow their copy (round 16, O06): set --len to the copy length */
html.v3 .v3-card-row { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: clamp(16px, 2vw, 36px); justify-items: center; align-items: start; max-width: clamp(1180px, 76.8vw, 1475px); margin: 0 auto; padding-top: 14px; }
html.v3 .v3-card-row > .v3-card--torn { width: min(100%, calc(60% + var(--len, 40) * .64%)); }
html.v3 .v3-card-row > :nth-child(2) { margin-top: 26px; }
html.v3 .v3-card-row > :nth-child(4) { margin-top: 34px; }
@media (max-width: 1100px) { html.v3 .v3-card-row { --cols: 2; row-gap: 48px; max-width: 680px; } html.v3 .v3-card-row > :nth-child(n) { margin-top: 0; } }
@media (max-width: 640px) {
html.v3 .v3-card-row { --cols: 1; row-gap: 30px; }
html.v3 .v3-card-row > .v3-card--torn { width: auto; max-width: min(100%, calc(170px + var(--len, 40) * 1.6px)); }
html.v3 .v3-card-row > :nth-child(odd) { justify-self: start; }
html.v3 .v3-card-row > :nth-child(even) { justify-self: end; }
html.v3 .v3-card__art { width: 92px; height: 86px; }
}
/* ---------------------------------------------------------------------------------------------------------
11. Physical objects: one scale, the tape is the yardstick (round 22)
Tape and clips only ever HOLD paper (round 19: loose tape "doesn't seem to be holding anything in place"). A tape
band is 54px at every width; a clip is 74px wide at every width and grips an edge with a quarter to a half of it
on the paper. Turn each within 10 degrees of its drawn angle. Objects never touch text.
from: .tnote__tape, .r16-obj, .r18-clasp--price, .r20-clasp--proof, .cont-pencil, .cont-eraser
--------------------------------------------------------------------------------------------------------- */
html.v3 .v3-tape {
position: absolute; top: -8px; left: 50%; width: 62%; height: var(--v3-tape-h); pointer-events: none; z-index: 2;
background: url("/assets/v3/img/absolv-object-tape.webp") center / 100% 100% no-repeat;
transform: translateX(-50%) rotate(var(--tr, 2deg));
}
html.v3 .v3-tape--corner-l, html.v3 .v3-tape--corner-r { /* two short strips across a photo's top corners (round 21) */
width: 40%; top: 4%;
background: url("/assets/v3/img/absolv-object-tape.webp") center / 100% 100% no-repeat, url("/assets/v3/img/absolv-object-tape.webp") center / 100% 100% no-repeat;
filter: drop-shadow(0 1px 1px rgba(20, 20, 20, .14));
}
html.v3 .v3-tape--corner-l { left: 14%; --tr: -40deg; height: clamp(22px, 1.9vw, 34px); }
html.v3 .v3-tape--corner-r { left: 86%; --tr: 38deg; height: clamp(22px, 1.9vw, 34px); }
html.v3 .v3-obj { position: absolute; z-index: 4; height: auto; pointer-events: none; rotate: var(--r, 0deg); filter: var(--v3-shadow-object); }
/* a clip stands upright over a card's top edge, a little in from the corner; --clip-at: .1em from the chosen corner */
/* --clip-y is the share of the clip's own width it rides above the card's text box, which sits 40px under the paper's
torn top (the prototype's 40px note-paper border), so the same numbers as the homepage give the same grip */
html.v3 .v3-clip { width: var(--v3-clip-w); top: calc(40px + var(--v3-clip-w) * var(--clip-y, -.8)); right: .1em; z-index: 5; --r: -47deg; }
html.v3 .v3-clip--left { right: auto; left: .1em; }
/* the desk pencil lies across the torn edge with the eraser by its tip; both show from 1060px, clear of the footer */
html.v3 .v3-desk-pencil { right: 1.5%; bottom: calc(var(--v3-tear-h) * -.9 + 7vw); width: clamp(260px, 23vw, 440px); rotate: -6deg; z-index: 6; }
html.v3 .v3-desk-eraser { right: 1%; bottom: calc(var(--v3-tear-h) * -1.45 + 22px); width: clamp(135px, 11.25vw, 218px); rotate: -9deg; z-index: 6; }
@media (max-width: 1059px) { html.v3 .v3-desk-pencil, html.v3 .v3-desk-eraser { display: none; } }
/* a photograph as a square print with a white border, held by two corner tapes. from: .who-photo */
html.v3 .v3-photo { position: relative; width: clamp(150px, 14vw, 230px); transform: rotate(var(--r, -3deg)); margin: 12px 0 0; }
html.v3 .v3-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: var(--v3-shadow-sheet-box); border: 8px solid #fff; border-bottom-width: 30px; }
/* ---------------------------------------------------------------------------------------------------------
12. Price card, tick lists and figures
from: .price-card, .price-card__list--ticks (cont/v3.css, rounds 16 and 19)
--------------------------------------------------------------------------------------------------------- */
html.v3 .v3-price { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 30em; }
html.v3 .v3-price__label { font-weight: 600; font-size: var(--v3-fs-descriptor); line-height: var(--v3-lh-ui); }
html.v3 .v3-price__amount { margin: 10px 0 8px; }
html.v3 .v3-price__sub { font-weight: 700; font-size: var(--v3-fs-keyline); line-height: 1; max-width: 16em; letter-spacing: -0.02em; color: var(--v3-orange-text); }
html.v3 .v3-price--other .v3-price__sub { color: var(--v3-black-40); } /* the competitor's key line, never ours */
html.v3 .v3-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
html.v3 .v3-list li { font-size: var(--v3-fs-card); line-height: 1.2; display: flex; align-items: baseline; gap: .45em; }
html.v3 .v3-list li::before { content: ""; flex: none; width: .3em; height: .3em; border-radius: 50%; background: currentColor; transform: translateY(-.15em); }
html.v3 .v3-list--ticks li::before { width: .7em; height: .9em; border-radius: 0; transform: translateY(.1em); background: url("/assets/v3/marks/absolv-mark-tick-bullet-even.svg") center / contain no-repeat; }
html.v3 .v3-pair { display: flex; justify-content: center; align-items: center; gap: clamp(24px, 3vw, 56px); margin: 0 auto; }
@media (max-width: 640px) { html.v3 .v3-pair { flex-direction: column; gap: 40px; } }
/* ---------------------------------------------------------------------------------------------------------
13. FAQ with hand-drawn crosses
Questions in the Descriptor style held to 22em, the list capped at 24.6 question sizes and centred, the toggle a
hand-drawn cross that turns 45 degrees into an x when open (round 22).
from: .faq, .faq__q, .faq__icon, .faq__a (cont/v3.css, rounds 16 and 22)
--------------------------------------------------------------------------------------------------------- */
html.v3 .v3-faq { max-width: min(100%, calc(var(--v3-fs-descriptor) * 24.6)); margin: 0 auto; border-bottom: 1px solid var(--v3-black-40); }
html.v3 .v3-faq--wide { max-width: min(100%, var(--v3-measure-prose)); } /* NEW: for an FAQ page with long questions */
html.v3 .v3-faq__item { border-top: 1px solid var(--v3-black-40); }
html.v3 .v3-faq__q {
position: relative; width: 100%; display: block; text-align: left; color: var(--v3-ink);
padding: clamp(18px, 1.6vw, 28px) max(2.6em, calc(100% - 22em)) clamp(18px, 1.6vw, 28px) 0;
background: none; border: 0; cursor: pointer;
font-family: var(--v3-font-body); font-weight: 600; font-size: var(--v3-fs-descriptor); line-height: var(--v3-lh-ui);
transition: color .2s;
}
html.v3 .v3-faq--wide .v3-faq__q { padding-right: 2.6em; }
html.v3 .v3-faq__q:hover, html.v3 .v3-faq__q:focus-visible { color: var(--v3-orange-text); }
html.v3 .v3-faq__icon { position: absolute; right: 0; top: 50%; width: 1.4em; height: 1.4em; margin-top: -.7em; background: url("/assets/v3/marks/absolv-mark-cross.svg") center / contain no-repeat; transition: transform .3s ease; }
html.v3 .v3-faq__item.is-open .v3-faq__icon { transform: rotate(45deg); }
html.v3 .v3-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
html.v3 .v3-faq__a > div { overflow: hidden; }
html.v3 .v3-faq__a p { margin: 0; padding-bottom: .7em; font-size: var(--v3-fs-card); line-height: 1.2; max-width: var(--v3-measure); }
html.v3 .v3-faq--wide .v3-faq__a p { max-width: none; font-size: var(--v3-fs-prose); line-height: var(--v3-lh-prose); }
html.v3 .v3-faq__a > div > :last-child { margin-bottom: clamp(18px, 1.6vw, 28px); }
html.v3 .v3-faq__item.is-open .v3-faq__a { grid-template-rows: 1fr; }
/* ---------------------------------------------------------------------------------------------------------
14. Footer on the desk, with Poppy's walk
The lockup on orange, the footer pills on one ground line, and Poppy, who trots along the pills and sits on the
last one (v3-site.js). Above 640px the footer is one row with headroom above it for her; on phones it stacks and
the pills drop by her height. One Poppy per page.
from: .desk-footer, .pf-pill, .pf-poppy, .pf-name (cont/v3.css, the page's own styles, rounds 13, 16 and 21)
Markup: see the spec.
--------------------------------------------------------------------------------------------------------- */
html.v3 .v3-footer {
--poppy-h: 132px;
position: relative; overflow: clip;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
max-width: calc(var(--v3-sheet-max) + 2 * var(--v3-gutter)); margin: 0 auto;
padding: calc(var(--poppy-h) + 10px) var(--v3-gutter) 56px;
color: var(--v3-ink); font-size: var(--v3-fs-card);
}
html.v3 .v3-footer__brand { display: block; line-height: 0; }
html.v3 .v3-footer__brand img { display: block; width: auto; height: clamp(26px, 2.5vw, 48px); }
html.v3 .v3-footer__small { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
html.v3 .v3-footer__small a { color: var(--v3-ink); }
html.v3 .v3-pills { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; }
html.v3 .v3-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; color: var(--v3-ink); text-decoration: none; font-weight: var(--v3-w-ui); font-size: var(--v3-fs-nav); line-height: 1; }
html.v3 .v3-pill__box { position: absolute; inset: 0; border: 1px solid var(--v3-ink); background: var(--v3-paper); transform-origin: 50% 100%; will-change: transform; transition: background-color .12s; }
html.v3 .v3-pill__lbl { position: relative; display: inline-block; transform-origin: 50% 100%; will-change: transform; }
html.v3 .v3-pill:hover .v3-pill__box { background: var(--v3-paper-under); }
html.v3 .v3-pill::after { content: ""; position: absolute; left: -2px; right: -2px; top: -4px; bottom: -4px; } /* at least 44px of tap target */
html.v3 .v3-poppy { position: absolute; left: 0; top: 0; width: 132px; height: 0; z-index: 3; opacity: 0; pointer-events: none; background-repeat: no-repeat; will-change: transform; }
html.v3 .v3-poppy:not([data-phase]), html.v3 .v3-poppy[data-phase="idle"] { visibility: hidden; }
html.v3 .v3-poppy-name {
position: absolute; left: 0; top: 0; z-index: 3; margin: 0; pointer-events: none; white-space: nowrap;
font-family: var(--v3-font-hand); font-size: clamp(22px, 1.9vw, 36px); line-height: 1; color: var(--v3-paper);
transform: rotate(-8deg); transform-origin: left center; opacity: 0; transition: opacity .6s ease .15s;
}
html.v3 .v3-poppy-name.is-on { opacity: 1; }
@media (max-width: 640px) {
html.v3 .v3-footer { flex-direction: column; align-items: flex-start; padding: 12px var(--v3-gutter) 40px; }
html.v3 .v3-footer .v3-pills { margin-top: calc(var(--poppy-h) - 8px); }
html.v3 .v3-footer__brand img { width: 120px; height: auto; }
html.v3 .v3-pill { height: 36px; padding: 0 12px; }
}
@media (max-width: 400px) { html.v3 .v3-poppy-name { font-size: 19px; } }
/* =========================================================================================================
NEW COMPONENTS (not on the homepage trial), designed in the same language
========================================================================================================= */
/* ---------------------------------------------------------------------------------------------------------
15. Breadcrumbs (NEW): navigation type, black 40% separators, the current page in ink SemiBold
--------------------------------------------------------------------------------------------------------- */
html.v3 .v3-crumbs { font-size: var(--v3-fs-nav); line-height: 1.3; }
html.v3 .v3-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; }
html.v3 .v3-crumbs li { display: inline-flex; align-items: baseline; min-width: 0; }
html.v3 .v3-crumbs li + li::before { content: "/"; color: var(--v3-black-40); margin: 0 .55em; }
html.v3 .v3-crumbs a { color: var(--v3-ink); text-decoration: none; padding: 10px 0; } /* 44px tall tap target with the line height */
html.v3 .v3-crumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }
html.v3 .v3-crumbs [aria-current="page"] { font-weight: 600; overflow-wrap: anywhere; }
/* ---------------------------------------------------------------------------------------------------------
16. Article body (NEW): the long-form reading column
Body in Schibsted at the Text role with a 17px floor and 1.5 line height, held to 65 characters and centred on
the sheet. Headings are Aleo (H2 role for h2), left aligned, no full stops. Links are ink, underlined.
Markup: ...
--------------------------------------------------------------------------------------------------------- */
html.v3 .v3-prose { max-width: var(--v3-measure-prose); margin: 0 auto; font-size: var(--v3-fs-prose); line-height: var(--v3-lh-prose); overflow-wrap: break-word; }
html.v3 .v3-prose > * { margin-top: 0; margin-bottom: 0; }
html.v3 .v3-prose > * + * { margin-top: 1em; }
html.v3 .v3-prose h1 { font-family: var(--v3-font-display); font-weight: var(--v3-w-display); font-size: var(--v3-fs-h1); line-height: 1; text-wrap: balance; }
html.v3 .v3-prose h2 { font-family: var(--v3-font-display); font-weight: var(--v3-w-display); font-size: var(--v3-fs-h2); line-height: 1.1; text-wrap: balance; scroll-margin-top: var(--v3-stick); }
html.v3 .v3-prose > * + h2 { margin-top: 1.9em; }
html.v3 .v3-prose h3 { font-family: var(--v3-font-body); font-weight: 700; font-size: calc(var(--v3-fs-prose) * 1.15); line-height: 1.2; scroll-margin-top: var(--v3-stick); }
html.v3 .v3-prose > * + h3 { margin-top: 1.6em; }
html.v3 .v3-prose h2 + *, html.v3 .v3-prose h3 + * { margin-top: .55em; }
html.v3 .v3-prose h4 { font-weight: 600; font-size: var(--v3-fs-prose); }
html.v3 .v3-prose .v3-standfirst { font-size: calc(var(--v3-fs-prose) * 1.12); line-height: 1.4; }
html.v3 .v3-prose .v3-meta { font-size: var(--v3-fs-card); color: var(--v3-ink); display: flex; flex-wrap: wrap; gap: 4px 16px; }
html.v3 .v3-prose strong { font-weight: 700; }
/* lists: small orange squares (the logo's full stop) for bullets, Aleo numerals in dark orange for steps */
html.v3 .v3-prose ul, html.v3 .v3-prose ol { padding-left: 1.4em; }
html.v3 .v3-prose li + li { margin-top: .4em; }
html.v3 .v3-prose li > ul, html.v3 .v3-prose li > ol { margin-top: .4em; }
html.v3 .v3-prose ul { list-style: none; }
html.v3 .v3-prose ul > li { position: relative; }
html.v3 .v3-prose ul > li::before { content: ""; position: absolute; left: -1.05em; top: .62em; width: .34em; height: .34em; background: var(--v3-orange); }
html.v3 .v3-prose ol { list-style: none; counter-reset: v3-ol; }
html.v3 .v3-prose ol > li { position: relative; counter-increment: v3-ol; }
html.v3 .v3-prose ol > li::before { content: counter(v3-ol); position: absolute; left: -1.4em; top: 0; width: 1.1em; text-align: right; font-family: var(--v3-font-display); font-weight: 700; color: var(--v3-orange-text); }
html.v3 .v3-prose ul.v3-list--ticks > li::before { left: -1.3em; top: .25em; width: .8em; height: 1em; background: url("/assets/v3/marks/absolv-mark-tick-bullet-even.svg") center / contain no-repeat; }
/* blockquote: a quote set larger, against a hand-drawn brace instead of a bar */
html.v3 .v3-prose blockquote { position: relative; margin-left: 0; margin-right: 0; padding: .1em 0 .1em 1.3em; font-size: calc(var(--v3-fs-prose) * 1.1); line-height: 1.4; }
html.v3 .v3-prose blockquote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .55em; background: url("/assets/v3/marks/absolv-mark-brace-left.svg") center / 100% 100% no-repeat; }
html.v3 .v3-prose blockquote p { margin: 0; }
html.v3 .v3-prose blockquote cite, html.v3 .v3-prose blockquote footer { display: block; margin-top: .6em; font-style: normal; font-size: var(--v3-fs-card); }
/* code: system monospace on the card paper, a hairline border */
html.v3 .v3-prose :not(pre) > code { overflow-wrap: anywhere; }
html.v3 .v3-prose code, html.v3 .v3-prose kbd { font-family: var(--v3-font-code); font-size: .86em; background: var(--v3-paper-note); border: 1px solid rgba(20, 20, 20, .14); padding: .08em .3em; }
html.v3 .v3-prose pre { font-family: var(--v3-font-code); font-size: calc(var(--v3-fs-prose) * .82); line-height: 1.5; background: var(--v3-paper-note); border: 1px solid rgba(20, 20, 20, .14); padding: 1em 1.2em; overflow-x: auto; white-space: pre; }
html.v3 .v3-prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
/* figures: an image as a print on the sheet, the caption digital (captions carry facts), a hand note may sit beside */
html.v3 .v3-prose figure { margin-left: 0; margin-right: 0; }
html.v3 .v3-prose figure img { display: block; width: 100%; background: #fff; border: 8px solid #fff; box-shadow: var(--v3-shadow-sheet-box); }
html.v3 .v3-prose figure.v3-figure--plain img { border: 0; box-shadow: none; background: none; mix-blend-mode: multiply; }
html.v3 .v3-prose figcaption { margin-top: .7em; font-size: var(--v3-fs-card); line-height: 1.3; }
/* rules and footnotes */
html.v3 .v3-prose hr { border: 0; height: 1px; background: var(--v3-black-40); margin: 2em 0; }
html.v3 .v3-prose sup { line-height: 0; vertical-align: super; }
html.v3 .v3-prose sup a, html.v3 .v3-prose a.v3-fn-ref { font-size: .72em; font-weight: 700; color: var(--v3-orange-text); text-decoration: none; padding: 0 .1em; }
html.v3 .v3-footnotes { margin-top: 2.4em; padding-top: 1em; border-top: 1px solid var(--v3-black-40); font-size: var(--v3-fs-card); line-height: 1.4; }
html.v3 .v3-prose .v3-footnotes ol > li::before { font-size: 1em; }
html.v3 .v3-footnotes :target { background: url("/assets/v3/marks/absolv-highlight-single-a-yellow.svg") 0 90% / 100% .7em no-repeat; }
/* a callout: a torn note inside the article for a key fact or a worked example */
html.v3 .v3-prose .v3-callout { margin-top: 1.6em; margin-bottom: .6em; }
html.v3 .v3-callout > :first-child { margin-top: 0; }
html.v3 .v3-callout > * + * { margin-top: .6em; }
/* ---------------------------------------------------------------------------------------------------------
17. Tables (NEW): black 40% hairlines, a bold head, tabular figures right aligned; scroll inside their own box
Markup:
...
--------------------------------------------------------------------------------------------------------- */
html.v3 .v3-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
/* scroll shadows: a soft edge shows only on the side that has more table to scroll to */
background: linear-gradient(90deg, var(--v3-paper) 30%, rgba(255, 253, 251, 0)) 0 0 / 40px 100% no-repeat local,
linear-gradient(270deg, var(--v3-paper) 30%, rgba(255, 253, 251, 0)) 100% 0 / 40px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(20, 20, 20, .16), transparent) 0 0 / 14px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(20, 20, 20, .16), transparent) 100% 0 / 14px 100% no-repeat scroll; }
html.v3 .v3-table-wrap > .v3-table { min-width: 32em; }
html.v3 .v3-table { width: 100%; border-collapse: collapse; font-size: var(--v3-fs-card); line-height: 1.3; }
html.v3 .v3-prose .v3-table { font-size: calc(var(--v3-fs-prose) * .88); }
html.v3 .v3-table caption { caption-side: top; text-align: left; font-weight: 600; padding-bottom: .6em; }
html.v3 .v3-table th, html.v3 .v3-table td { text-align: left; vertical-align: top; padding: .62em .8em .62em 0; border-bottom: 1px solid var(--v3-black-40); }
html.v3 .v3-table thead th { font-weight: 700; border-bottom: 1px solid var(--v3-ink); vertical-align: bottom; }
html.v3 .v3-table tbody th { font-weight: 600; }
html.v3 .v3-table .v3-num, html.v3 .v3-table td.num { text-align: right; white-space: nowrap; }
html.v3 .v3-table tfoot td, html.v3 .v3-table tfoot th { font-weight: 700; border-top: 1px solid var(--v3-ink); border-bottom: 0; }
html.v3 .v3-table tr.is-ours td, html.v3 .v3-table tr.is-ours th { background: rgba(255, 240, 106, .45); } /* one row in yellow at most, as a highlight */
/* ---------------------------------------------------------------------------------------------------------
18. Form controls (NEW)
Digital, so ink and paper: a paper field with a 1px ink border and no radius; on focus the field takes the button's
hard shadow (a 3px ink offset), so focus reads as "pressed into the page". Labels are SemiBold; help is card text
in ink; an error is dark orange with a hand-drawn cross, set by aria-invalid. Fields never go under 16px.
Markup: