@font-face { font-family: "Schibsted Grotesk"; src: url("/assets/fonts/schibsted-grotesk-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-latin.woff2") format("woff2"); font-weight: 500 700; font-display: swap; } :root { --ground: #F3F0EA; --ground-deep: #E9E4DA; --paper: #FFFDFA; --ink: #1C1B19; --ink-2: #5E5B55; --petrol: #0E5A6E; --petrol-deep: #0A4454; --petrol-wash: #DCE7E8; --rule: #D9D3C8; --rule-strong: #B9B2A6; --focus: var(--petrol); --sans: "Schibsted Grotesk", system-ui, sans-serif; --serif: "Newsreader", "New York", Georgia, serif; /* five type grades */ --t-display: clamp(2.75rem, 1.1rem + 4.4vw, 5rem); --t-title: clamp(2rem, 1.2rem + 2.9vw, 3.5rem); --t-sub: clamp(1.3125rem, 1.1rem + 0.6vw, 1.625rem); --t-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); --t-small: 0.875rem; --gutter: clamp(16px, 4vw, 56px); --measure: 1320px; --space-section: clamp(96px, 12vw, 200px); --thread-inset: clamp(36px, 5vw, 72px); --shadow-slip: 0 1px 0 rgba(28, 27, 25, 0.05), 0 22px 40px -18px rgba(28, 27, 25, 0.34); --shadow-phone: 0 1px 0 rgba(28, 27, 25, 0.06), 0 30px 60px -22px rgba(28, 27, 25, 0.32); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); color-scheme: light; scrollbar-color: var(--rule-strong) var(--ground); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--t-body) / 1.55 var(--sans); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; padding-inline: var(--gutter); overflow-x: clip; } ::selection { background: var(--petrol); color: var(--paper); } h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { color: var(--petrol); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; } [hidden] { display: none !important; } .nowrap { white-space: nowrap; } /* the answer on the hero slip runs through the page: swaps the plan text for the agreed one */ .if-yes { display: none; } [data-answer="yes"] .if-yes { display: inline; } [data-answer="yes"] .if-none { display: none; } .skip { position: absolute; left: var(--gutter); top: -100px; background: var(--paper); padding: 12px 16px; border-radius: 8px; z-index: 10; } .skip:focus { top: 12px; } /* bar */ .bar { max-width: var(--measure); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; } .mark { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 800; font-size: 1.625rem; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); } .mark:hover { color: var(--ink); } .mark--small { font-size: 1.25rem; gap: 8px; } .nav { display: flex; align-items: center; gap: clamp(8px, 2vw, 28px); } .nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; font-weight: 500; font-size: var(--t-small); text-decoration: none; white-space: nowrap; } /* one language switch, same in head and foot: globe glyph, no underline */ .lang { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none; font-weight: 500; } .lang .globe { flex: none; color: var(--petrol); } /* hero */ .hero { max-width: var(--measure); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 4vw, 72px); align-items: center; padding-block: clamp(16px, 3vw, 40px) var(--space-section); } h1 { font-weight: 800; font-size: var(--t-display); line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance; margin-bottom: clamp(24px, 2.4vw, 36px); hyphens: manual; } h1 span { display: block; color: var(--petrol); } .lead { font-size: var(--t-sub); line-height: 1.42; max-width: 32ch; margin-bottom: clamp(28px, 3vw, 40px); text-wrap: pretty; } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; } .button { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; background: var(--petrol); color: var(--paper); border-radius: 999px; font-weight: 700; text-decoration: none; transition: background-color 0.2s var(--ease-out); } .button:hover { background: var(--petrol-deep); color: var(--paper); } .button svg { transition: transform 0.3s var(--ease-out); } .button:hover svg { transform: translateY(2px); } .availability { color: var(--ink-2); font-size: var(--t-small); } /* * stage: the real plan screen, shown as an excerpt; the image itself is untouched. * --facts is the line below the three plan facts, --crop the phone's lower edge, * just below the app's small print ("Das ist der Plan. Ob es so kommt ..."). The slip lies from * --facts across the household note, the small print and the cut edge, so head, plan sentence and facts stay free * and neither the small print nor the cut is visible. Screen height is 1300/598 of its width. * The phone grows with the viewport height so the slip with its answers ends at least 24 px above * the fold (slip top = stage top + bezel + --facts of the screen height, slip about 330 px). */ .stage { --phone-max: 390px; --facts: 0.437; --crop: 0.505; --bezel: 7px; --phone-w: min(var(--phone-max), max(180px, calc((100vh - 485px) / (2.174 * var(--facts)) + 14px))); --screen-h: calc((var(--phone-w) - 2 * var(--bezel)) * 2.174); --bleed: 14px; display: grid; grid-template-columns: minmax(0, 1fr) var(--phone-w); width: 100%; max-width: 560px; justify-self: start; align-self: start; } :lang(en) .stage { --facts: 0.395; --crop: 0.462; } .phone { background: var(--ink); padding: 7px; border-radius: 44px; box-shadow: var(--shadow-phone); } .phone img { border-radius: 37px; } .phone--plan { grid-area: 1 / 2; align-self: start; height: calc(var(--bezel) + var(--screen-h) * var(--crop)); overflow: hidden; /* cut at the slip's top edge: neither the frame nor a line of the app shows below or beside the tear, whatever the rotation */ clip-path: inset(-80px -80px calc(100% - var(--bezel) - var(--screen-h) * var(--facts) - 1px) -80px); border-end-start-radius: 0; border-end-end-radius: 0; /* phone and slip cross by only 1.5 degrees, so the slip edge stays in the gap between two lines of the app */ transform: rotate(0.5deg); } .slip { position: relative; background: var(--paper); border-radius: 4px; box-shadow: var(--shadow-slip); padding: 30px clamp(18px, 2vw, 28px) 20px; } .slip::before { content: ""; position: absolute; inset: 0 0 auto; border-top: 2px dashed var(--rule-strong); } .slip .scissors { position: absolute; top: -9px; left: 20px; background: var(--paper); padding: 0 4px; box-sizing: content-box; color: var(--ink-2); } .slip--question { grid-area: 1 / 1 / 2 / 3; z-index: 2; align-self: start; justify-self: end; width: min(calc(100% + var(--bleed)), 400px); margin-right: calc(-1 * var(--bleed)); /* top edge below the plan facts, covering the small print and the cut edge of the phone */ margin-top: calc(var(--bezel) + var(--screen-h) * var(--facts)); transform: rotate(-1deg); transform-origin: 30% 80%; animation: slip-settle 1.1s var(--ease-out) 0.25s both; container-type: inline-size; transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); } @keyframes slip-settle { from { transform: translate(18px, -26px) rotate(-5deg); box-shadow: 0 1px 0 rgba(28, 27, 25, 0.05), 0 44px 60px -22px rgba(28, 27, 25, 0.3); } to { transform: rotate(-1deg); box-shadow: var(--shadow-slip); } } .slip-label, .slip-filed { position: absolute; /* 8 px below the perforation, right-aligned on the answer edge */ top: 8px; right: 20px; padding: 0 6px; background: var(--paper); font-size: var(--t-small); font-weight: 700; line-height: 20px; color: var(--petrol); } .slip-filed { opacity: 0; display: inline-flex; align-items: center; gap: 6px; } .slip-filed::before { content: ""; width: 14px; height: 5px; border-radius: 2px; background: var(--petrol); } .slip-from { font-size: var(--t-small); font-weight: 700; color: var(--petrol); margin-bottom: 8px; } .slip-title { font-family: var(--serif); font-weight: 600; font-size: var(--t-sub); line-height: 1.32; letter-spacing: -0.01em; text-wrap: balance; margin-bottom: 6px; } .slip-note { color: var(--ink-2); font-size: var(--t-small); margin-bottom: 18px; } .answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; } @container (max-width: 270px) { .answers { grid-template-columns: minmax(0, 1fr); } } .answer { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px; font: 700 1rem / 1.2 var(--sans); white-space: nowrap; color: var(--petrol); background: transparent; border: 1.5px solid var(--petrol); border-radius: 12px; cursor: pointer; text-align: left; transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out); } .answer:hover { background: var(--petrol-wash); } .answer .tick { flex: none; width: 20px; height: 20px; border: 2px solid currentColor; border-radius: 5px; position: relative; } .answer .tick::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 0.25s var(--ease-out); } .answer[aria-pressed="true"] { background: var(--petrol); color: var(--paper); } .answer[aria-pressed="true"] .tick::after { transform: rotate(45deg) scale(1); } .outcome { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; border-top: 2px dashed var(--rule-strong); padding-top: 14px; min-height: 3.6em; } .outcome-text { flex: 1 1 12ch; font-weight: 500; font-size: var(--t-small); line-height: 1.35; text-wrap: pretty; } .outcome-thread { flex: none; position: relative; width: 40px; height: 14px; } .outcome-thread::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: var(--ink); } /* hollow until answered, then filled */ .outcome-thread span { position: absolute; top: 0; left: 6px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink-2); background: var(--paper); transition: transform 0.45s var(--ease-out), background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); } .reset { min-height: 44px; padding: 0 4px; margin-left: auto; font: 500 var(--t-small) / 1 var(--sans); color: var(--ink-2); background: none; border: 0; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; } .reset:hover { color: var(--petrol); } .show-plan { flex-basis: 100%; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; font-size: var(--t-small); color: var(--petrol); text-decoration: underline; } .show-plan:hover { color: var(--petrol-deep); } /* answered: the slip is filed flat, the thread point fills */ [data-slip]:is([data-state="yes"], [data-state="no"]) { /* filed flat in place: moving down would uncover the app's household note above */ transform: rotate(0deg); box-shadow: 0 1px 0 rgba(28, 27, 25, 0.06), 0 10px 18px -12px rgba(28, 27, 25, 0.36); animation: none; } [data-slip]:is([data-state="yes"], [data-state="no"]) .slip-label { opacity: 0; } [data-slip]:is([data-state="yes"], [data-state="no"]) .slip-filed { opacity: 1; } [data-slip]:is([data-state="yes"], [data-state="no"]) .outcome-thread span { background: var(--petrol); border-color: var(--petrol); } [data-slip][data-state="yes"] .outcome-thread span { transform: translateX(14px); } .slip-label, .slip-filed { transition: opacity 0.3s var(--ease-out); } /* short landscape screens (1280 x 720, 1366 x 768): the primary action stays in the first viewport */ @media (min-width: 900px) and (max-height: 800px) { .hero { padding-top: 16px; } .stage { --phone-w: min(var(--phone-max), max(180px, calc((100vh - 455px) / (2.174 * var(--facts)) + 14px))); } h1 { margin-bottom: 20px; } .lead { margin-bottom: 20px; } } /* sections: no hairlines, a change of section is space and scale */ .today, .how, .price, .questions { max-width: var(--measure); margin: 0 auto; padding-bottom: var(--space-section); } h2 { font-weight: 800; font-size: var(--t-title); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; hyphens: manual; max-width: 18ch; } h3 { font-weight: 700; font-size: var(--t-sub); line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; } /* today / with claro */ .today h2 { max-width: 24ch; margin-bottom: clamp(48px, 6vw, 88px); } /* English breaks after the first sentence; each sentence then holds one line on wide screens */ :lang(en) .today h2 { max-width: 38ch; } .compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; } .compare-side { display: grid; gap: 20px; } .compare-side h3 { font-size: var(--t-small); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); } .compare-side--after h3 { color: var(--petrol); } .compare-side figcaption { font-size: var(--t-small); color: var(--ink-2); } .compare-cut { align-self: stretch; position: relative; width: 2px; border-left: 2px dashed var(--rule-strong); } .compare-cut .scissors { position: absolute; top: 40%; left: -13px; padding: 4px 0; box-sizing: content-box; background: var(--ground); color: var(--ink-2); transform: rotate(90deg); } /* the faded, creased note: pencil on paper that has been in a pocket */ .chat { position: relative; isolation: isolate; display: grid; gap: 14px; padding: clamp(24px, 3vw, 36px); border-radius: 3px; box-shadow: 0 1px 0 rgba(28, 27, 25, 0.05), 0 14px 26px -18px rgba(28, 27, 25, 0.3); transform: rotate(-1.5deg); clip-path: polygon(0 1%, 22% 0, 51% 1.2%, 78% 0.2%, 100% 1%, 99.4% 34%, 100% 67%, 99.2% 99%, 70% 100%, 41% 98.8%, 12% 100%, 0.4% 99%, 0 64%, 0.6% 31%); color: var(--ink-2); } /* paper tone and creases on their own layer below the text */ .chat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(104deg, transparent 38%, rgba(28, 27, 25, 0.0225) 38.4%, transparent 39.2%), linear-gradient(172deg, transparent 57%, rgba(28, 27, 25, 0.02) 57.3%, transparent 58.4%), linear-gradient(64deg, rgba(255, 253, 250, 0) 0 70%, rgba(28, 27, 25, 0.0175) 70.2%, rgba(255, 253, 250, 0) 71.5%), linear-gradient(180deg, #F8F5EF, var(--ground-deep)); } /* the bubble fill is 4 % ink over the note: no surface below a bubble may be darker than --ground-deep, or pencil times fall under 4.5:1 */ .bubble { display: grid; gap: 2px; max-width: 82%; padding: 10px 14px; background: rgba(28, 27, 25, 0.04); border-radius: 16px; font-size: 1.0625rem; line-height: 1.35; } .bubble--out { justify-self: end; border-bottom-right-radius: 4px; } .bubble--in { justify-self: start; border-bottom-left-radius: 4px; } .bubble-meta { font-size: var(--t-small); color: var(--ink-2); } .bubble-meta b { font-weight: 700; } .chat-gap { display: flex; align-items: center; gap: 12px; font-size: var(--t-small); color: var(--ink-2); padding-block: 18px; } .chat-gap::before, .chat-gap::after { content: ""; flex: 1; border-top: 2px dotted var(--rule-strong); } .slip--static { transform: rotate(1deg); } .slip--static .slip-note { margin-bottom: 4px; } .filed { position: relative; z-index: 1; margin: -10px 0 0 clamp(16px, 6%, 48px); padding: 26px clamp(18px, 2vw, 28px) 20px; background: var(--paper); border-radius: 4px; box-shadow: var(--shadow-slip); transform: rotate(-1deg); display: grid; gap: 14px; } .staple { position: absolute; top: -6px; left: 36px; width: 34px; height: 12px; border: 2px solid var(--ink-2); border-bottom: 0; border-radius: 3px 3px 0 0; } .filed-text { font-family: var(--serif); font-weight: 600; font-size: var(--t-sub); line-height: 1.32; letter-spacing: -0.01em; text-wrap: balance; } .filed-entry .entry { display: inline-block; font-size: var(--t-small); padding: 6px 10px; margin: 0; } .filed-where { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--t-small); color: var(--ink); } .filed-where li { display: inline-flex; align-items: center; gap: 8px; } /* how it works */ .section-head { display: grid; gap: 24px; margin-bottom: clamp(56px, 7vw, 104px); } .section-head p { max-width: 44ch; text-wrap: pretty; } .steps { position: relative; display: grid; gap: clamp(96px, 11vw, 160px); padding-left: var(--thread-inset); } .steps::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 0; width: 2px; border-radius: 2px; background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 0 / 100% var(--thread-progress, 100%), var(--rule); } .step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; } .step::before { content: ""; position: absolute; left: calc(-1 * var(--thread-inset)); top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--petrol); box-shadow: 0 0 0 5px var(--ground); } .step-copy h3 { font-size: var(--t-title); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; max-width: 18ch; hyphens: manual; } .step-body p { max-width: 44ch; text-wrap: pretty; } .step-body p + p { margin-top: 12px; } /* one step pattern: title left, text right on the same edge, bound to the first title line; the figure below */ .step-copy, .price-copy { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 20px clamp(20px, 5vw, 88px); align-items: first baseline; } .figure { display: grid; gap: 14px; } .figure figcaption { font-size: var(--t-small); color: var(--ink-2); max-width: 52ch; } .sheet { background: var(--paper); border-radius: 4px; box-shadow: var(--shadow-slip); } /* step 1: the deadline strip, a band across the grid */ .sheet--strip { width: 100%; padding: clamp(24px, 3.4vw, 48px); transform: rotate(-0.6deg); } .deadline { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 48px); padding-top: 36px; } .deadline::before { content: ""; position: absolute; top: 11px; left: 0; right: 0; height: 2px; background: var(--ink); border-radius: 2px; } .station { position: relative; display: grid; gap: 8px; align-content: start; } .station::before { content: ""; position: absolute; top: -32px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); } .station--due::before { border-color: var(--petrol); background: var(--petrol-wash); } .station--plan::before { background: var(--petrol); border-color: var(--petrol); width: 22px; height: 22px; top: -35px; } .station-when { font-size: var(--t-small); font-weight: 700; color: var(--petrol); } .station-what { font-family: var(--serif); font-weight: 500; font-size: var(--t-sub); line-height: 1.32; text-wrap: pretty; } /* step 2: calendar, full width */ .figure--calendar { grid-template-columns: minmax(200px, 3fr) minmax(0, 9fr); align-items: center; column-gap: 0; } .phone--calendar { width: 100%; max-width: 280px; transform: rotate(-2deg); position: relative; z-index: 1; } .sheet--week { margin-left: -40px; padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 32px) 64px; transform: rotate(0.8deg); } .figure--calendar figcaption { grid-column: 1 / -1; margin-top: 14px; } .week-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-size: var(--t-small); color: var(--ink-2); margin-bottom: 16px; } .week-key { display: inline-flex; align-items: center; gap: 6px; } .week-accepted { flex-basis: 100%; font-weight: 700; color: var(--petrol); } .week-foot { margin-top: 16px; font-size: var(--t-small); font-weight: 700; color: var(--petrol); } [data-answer="yes"] .week-foot.if-yes { display: block; } .week-key i { width: 12px; height: 12px; border-radius: 3px; background: var(--petrol); } .days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } .day { display: grid; align-content: start; gap: 6px; min-height: 170px; border-top: 2px solid var(--ink); padding-top: 8px; font-size: var(--t-small); color: var(--ink-2); } .entry { border-radius: 6px; padding: 6px 8px; font-size: var(--t-small); line-height: 1.25; overflow-wrap: break-word; hyphens: none; } .entry--own { background: var(--ground-deep); color: var(--ink); border: 1px solid var(--ink-2); margin-top: 10px; } .entry--claro { background: var(--petrol); color: var(--paper); font-weight: 500; margin-top: 40px; } /* step 3: notice, a large slip laid half over the text column */ .figure--notice { margin-right: 30%; position: relative; z-index: 1; } .slip--notice { transform: rotate(1.5deg); padding: clamp(28px, 3.4vw, 48px); } .slip--notice::before { display: none; } .slip--notice .slip-title { font-size: clamp(3.25rem, 1.5rem + 5.4vw, 6rem); line-height: 1; letter-spacing: -0.02em; margin-block: 10px 12px; } /* one breakable space each: phones break before "late:", wider slips after it */ .slip--notice .space-wide { white-space: normal; } .slip--notice .space-narrow { white-space: nowrap; } @media (max-width: 599px) { .slip--notice .space-wide { white-space: nowrap; } .slip--notice .space-narrow { white-space: normal; } } .slip--notice .slip-note { font-size: var(--t-body); margin-bottom: 24px; } .notice-foot { display: flex; align-items: center; gap: 12px; border-top: 2px dashed var(--rule-strong); padding-top: 14px; font-weight: 500; font-size: var(--t-small); } /* step 4: starting alone, small */ .figure--alone { justify-items: start; margin-left: calc(50% + clamp(20px, 5vw, 88px) / 2); } .slip--alone { width: min(100%, 360px); transform: rotate(-2deg); padding-top: 24px; } .slip--alone::before { display: none; } .slip--alone .slip-title { margin-bottom: 14px; } .slip-from--stacked span { display: block; } .facts { display: grid; font-size: var(--t-small); } .fact { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; padding-block: 6px; } .fact--open { margin-top: 8px; padding-top: 14px; border-top: 2px dashed var(--rule-strong); } .fact dt { color: var(--ink-2); } .fact dd { font-weight: 500; } .fact--open dd { color: var(--ink-2); font-weight: 400; } /* the later note: a hollow point on a dashed continuation of the thread */ .later { position: relative; margin: clamp(96px, 11vw, 160px) 0 0 var(--thread-inset); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 12px clamp(20px, 5vw, 88px); align-items: first baseline; } .later::before { content: ""; position: absolute; left: calc(-1 * var(--thread-inset) + 6px); top: calc(-1 * clamp(96px, 11vw, 160px)); height: calc(clamp(96px, 11vw, 160px) + 4px); border-left: 2px dashed var(--rule-strong); } .later::after { content: ""; position: absolute; left: calc(-1 * var(--thread-inset)); top: 4px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink-2); background: var(--ground); } .later p { max-width: 48ch; color: var(--ink-2); text-wrap: pretty; } /* price: the head follows the steps, the amount is the second large slip, the free list starts at its top edge */ .price { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(48px, 6vw, 88px) clamp(20px, 3vw, 48px); align-items: start; } .price-copy { grid-column: 1 / -1; /* the steps hang on the thread, inset by --thread-inset: the price text starts on their text edge */ grid-template-columns: minmax(0, calc(50% + var(--thread-inset) / 2 - clamp(20px, 5vw, 88px) / 2)) minmax(0, 1fr); } .price-body p { max-width: 44ch; text-wrap: pretty; } .price-body p + p { margin-top: 12px; } .ticket { grid-column: 1 / 9; background: var(--paper); border-radius: 4px; box-shadow: var(--shadow-slip); transform: rotate(-1deg); } .ticket-part { padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3.4vw, 48px) clamp(24px, 3vw, 36px); } .ticket-part h3, .price-free h3 { font-size: var(--t-small); font-weight: 700; letter-spacing: 0; color: var(--petrol); margin-bottom: 12px; } .amount { font-family: var(--serif); font-weight: 600; font-size: clamp(3.25rem, 1.5rem + 5.4vw, 6rem); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; } /* the euro sign would hang optically left of the text edge */ .amount .currency { margin-left: 0.04em; } .ticket-carry { font-family: var(--serif); font-weight: 500; font-size: var(--t-sub); line-height: 1.32; margin-top: 24px; max-width: 34ch; text-wrap: pretty; } .amount-alt { font-family: var(--serif); font-weight: 500; font-size: var(--t-sub); line-height: 1.32; margin: 12px 0 24px; } .ticket ul { display: grid; gap: 4px; } .ticket li, .price-free li { display: flex; align-items: baseline; gap: 12px; padding-block: 4px; text-wrap: pretty; } .ticket li { font-family: var(--serif); font-weight: 500; font-size: var(--t-sub); line-height: 1.32; } .ticket li::before, .price-free li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--petrol); transform: translateY(-3px); } .ticket-cut { position: relative; height: 0; border-top: 2px dashed var(--rule-strong); } .ticket-cut .scissors { position: absolute; top: -10px; right: 24px; padding: 0 4px; box-sizing: content-box; background: var(--paper); color: var(--ink-2); } .ticket-foot { padding: 20px clamp(24px, 3.4vw, 48px) 24px; text-wrap: balance; font-family: var(--serif); font-weight: 600; font-size: var(--t-sub); line-height: 1.32; color: var(--petrol); } .price-free { grid-column: 9 / 13; padding-top: clamp(28px, 3.4vw, 48px); } /* free points are hollow: paid and free differ by the mark, not only by the material */ .price-free li::before { background: var(--ground); border: 2px solid var(--petrol); width: 10px; height: 10px; box-sizing: border-box; } .price-free ul { display: grid; gap: 2px; font-size: var(--t-body); } /* questions: a sheet whose only line form is the perforation */ .questions { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: start; } .qa { background: var(--paper); border-radius: 4px; box-shadow: var(--shadow-slip); transform: rotate(-0.5deg); padding: 8px clamp(20px, 3vw, 40px); } .qa details + details { border-top: 2px dashed var(--rule-strong); } .qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding-block: 16px; cursor: pointer; list-style: none; font-weight: 700; font-size: var(--t-sub); line-height: 1.25; letter-spacing: -0.015em; } .qa summary::-webkit-details-marker { display: none; } .qa summary:hover { color: var(--petrol); } .qa .plus { flex: none; color: var(--petrol); transition: transform 0.3s var(--ease-out); } .qa details[open] .plus { transform: rotate(45deg); } .answer-text { padding-bottom: 24px; max-width: 58ch; } .answer-text p { text-wrap: pretty; } /* close: left aligned, two lines, and a last slip on the petrol band */ .close { margin-inline: calc(-1 * var(--gutter)); padding: var(--space-section) var(--gutter); background: var(--petrol-deep); color: var(--paper); --focus: var(--paper); } .close-inner { max-width: var(--measure); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 104px); align-items: center; } .close-copy { display: grid; gap: 24px; justify-items: start; } .close .thread-mark { color: var(--paper); } .close .thread-mark circle { fill: var(--paper); } .close h2 { font-size: clamp(2.25rem, 0.5rem + 4.2vw, 4.25rem); line-height: 1.06; letter-spacing: -0.025em; max-width: none; } .close h2 span { display: block; } @media (min-width: 600px) { .close h2 span { white-space: nowrap; } } .close-copy > p { font-size: var(--t-sub); max-width: 34ch; text-wrap: pretty; } .close .close-availability { font-size: var(--t-body); max-width: none; } .close-links { display: flex; flex-wrap: wrap; gap: 4px 32px; } .close-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: var(--t-body); } .close-links a:hover { color: var(--petrol-wash); } .slip--close { transform: rotate(2deg); color: var(--ink); width: 100%; max-width: 440px; justify-self: end; } .slip--close .slip-title { margin-bottom: 18px; } .slip--close .thread-mark { color: var(--ink); } .slip--close .thread-mark circle { fill: var(--petrol); } /* footer */ .foot { max-width: var(--measure); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding-block: 28px 36px; font-size: var(--t-small); color: var(--ink-2); } .foot nav { display: flex; flex-wrap: wrap; gap: 0 24px; } .foot nav a { display: inline-flex; align-items: center; min-height: 44px; } .foot p { flex-basis: 100%; } /* legal pages: a quiet reading column; the only slip is the head with version and date */ .legal { max-width: 46rem; margin: 0 auto; padding-block: clamp(32px, 6vw, 80px) clamp(64px, 10vw, 140px); overflow-wrap: break-word; hyphens: auto; } .legal-head { background: var(--paper); border-radius: 4px; box-shadow: var(--shadow-slip); padding: clamp(24px, 4vw, 40px); margin-bottom: clamp(40px, 6vw, 64px); border-top: 2px dashed var(--rule-strong); } .legal-head h1 { font-size: var(--t-title); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; hyphens: auto; overflow-wrap: normal; } .legal-meta { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 16px; font-size: var(--t-small); } .legal-meta div { display: flex; gap: 8px; align-items: baseline; } .legal-meta dt { color: var(--ink-2); } .legal-meta dd { font-family: var(--serif); font-size: 1rem; color: var(--petrol); overflow-wrap: anywhere; } .legal-draft, .legal-governing, .legal-missing { margin-top: 16px; font-size: var(--t-small); line-height: 1.45; } .legal-draft { display: inline-block; padding: 6px 12px; border-radius: 8px; background: var(--petrol-wash); color: var(--petrol-deep); font-weight: 600; } .legal-governing { color: var(--ink-2); } .legal-missing { font-weight: 600; color: #8A3B12; } .legal-toc { margin-bottom: clamp(40px, 6vw, 64px); padding-bottom: 24px; border-bottom: 1px solid var(--rule); } .legal .legal-toc h2 { font-size: var(--t-small); font-weight: 600; color: var(--ink-2); margin: 0 0 8px; } .legal .legal-toc ol { list-style: decimal; padding-left: 1.4em; columns: 2 16rem; column-gap: 32px; max-width: none; } .legal .legal-toc li { break-inside: avoid; padding-block: 2px; margin: 0; } .legal-toc a { text-decoration: none; } .legal-toc a:hover { text-decoration: underline; } .legal-part + .legal-part { margin-top: clamp(56px, 8vw, 96px); } .legal .legal-part-title { font-size: var(--t-small); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--petrol); padding-bottom: 10px; border-bottom: 2px solid var(--ink); margin: 0 0 8px; } .legal h2 { max-width: none; text-wrap: pretty; font-size: var(--t-sub); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin: 2.2em 0 0.6em; scroll-margin-top: 24px; hyphens: manual; } .legal-body > h2:first-child, .legal-part-title + h2 { margin-top: 1em; } .legal p, .legal ul, .legal ol { max-width: 68ch; } .legal p + p, .legal p + ul, .legal p + ol, .legal ul + p, .legal ol + p, .legal .table + p { margin-top: 1em; } .legal-body ul, .legal-part ul { list-style: disc; padding-left: 1.25em; } .legal-body ol, .legal-part ol { list-style: decimal; padding-left: 1.5em; } .legal li + li { margin-top: 0.5em; } .legal li::marker { color: var(--petrol); } .legal strong { font-weight: 650; } .legal code { font-size: 0.9em; } .legal a[href^="mailto:"] { overflow-wrap: anywhere; } .table { margin-block: 1.25em; } .legal table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; } .legal th { text-align: left; font-size: var(--t-small); font-weight: 600; color: var(--ink-2); padding: 0 12px 8px 0; border-bottom: 2px solid var(--ink); } .legal td { vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); } .legal td:first-child { width: 42%; } .legal td:last-child, .legal th:last-child { padding-right: 0; } @media (max-width: 699px) { .legal table, .legal tbody, .legal tr, .legal td { display: block; width: auto; } .legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .legal tr { padding-block: 14px; border-bottom: 1px solid var(--rule); } .legal tr:first-child { border-top: 2px solid var(--ink); } .legal td, .legal td:first-child { width: auto; padding: 0; border: 0; } .legal td + td { margin-top: 8px; } .legal td + td::before { content: attr(data-label); display: block; font-size: var(--t-small); font-weight: 600; color: var(--ink-2); } .legal td:first-child { font-weight: 500; } } .missing { background: #FBEBD9; color: var(--ink); padding: 2px 8px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .legal .missing-block { display: block; padding: 12px 16px; margin-block: 1em; background: #FBEBD9; border: 2px dashed #B5561F; border-radius: 4px; } .missing-block .missing { background: none; padding: 0; } .missing-label { font-weight: 700; color: #8A3B12; } .legal-link { display: inline-flex; flex-direction: column; gap: 2px; padding: 16px 20px; background: var(--paper); border-radius: 4px; box-shadow: var(--shadow-slip); font-weight: 600; text-decoration: none; color: var(--petrol); } .legal-link:hover { color: var(--petrol-deep); } .legal-link-meta { font-family: var(--serif); font-weight: 500; font-size: 0.9375rem; color: var(--ink-2); } .foot a[aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: none; } @media (forced-colors: active) { .missing-block { border-color: Mark; } .legal-draft { border: 1px solid CanvasText; } } /* thread draws as the steps scroll by */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { @property --thread-progress { syntax: ""; inherits: false; initial-value: 100%; } .steps::before { animation: thread-draw linear both; animation-timeline: view(); animation-range: entry 20% exit 60%; } @keyframes thread-draw { from { --thread-progress: 0%; } to { --thread-progress: 100%; } } } } @media (prefers-reduced-motion: reduce) { .slip--question { animation: none; } *, *::before, *::after { transition-duration: 0.01ms !important; } } /* below 1280: smaller display grade, equal hero columns, steps stack */ @media (max-width: 1279px) { :root { --t-display: clamp(2.75rem, 0.9rem + 5.2vw, 4.5rem); } .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .stage { --phone-max: 250px; max-width: 600px; justify-self: end; } .slip--question { padding-inline: 16px; } .figure--notice { margin-right: 12%; } .figure--calendar { grid-template-columns: minmax(180px, 3fr) minmax(0, 8fr); } .ticket { grid-column: 1 / 10; } .price-free { grid-column: 10 / 13; } } /* * below 900: one column. The phone comes first and keeps its sentences readable; * the slip sits to its right and overlaps only the empty screen margin. */ @media (max-width: 899px) { .hero { grid-template-columns: minmax(0, 1fr); } /* beside the slip the excerpt fades out after the household note, before the app's small print */ .stage { --crop: 0.462; } :lang(en) .stage { --crop: 0.422; } .stage { --phone-w: 280px; --overlap: 18px; grid-template-columns: var(--phone-w) minmax(0, 1fr); justify-self: start; max-width: 680px; } /* the slip sits beside the phone here, so the cut edge fades out instead of being covered */ .phone--plan { grid-area: 1 / 1; transform: none; clip-path: none; -webkit-mask-image: linear-gradient(var(--ink) 82%, transparent); mask-image: linear-gradient(var(--ink) 82%, transparent); } .slip--question { grid-area: 1 / 2; justify-self: start; margin: 72px 0 0 calc(-1 * var(--overlap)); width: calc(100% + var(--overlap)); max-width: 400px; transform: rotate(1deg); } @keyframes slip-settle { from { transform: translate(18px, -26px) rotate(4deg); } to { transform: rotate(1deg); box-shadow: var(--shadow-slip); } } .compare { grid-template-columns: minmax(0, 1fr); } .days { grid-template-columns: repeat(4, minmax(0, 1fr)); } .day:nth-child(-n+3) { display: none; } .compare-cut { width: auto; height: 2px; border-left: 0; border-top: 2px dashed var(--rule-strong); margin-block: 8px; } .compare-cut .scissors { top: -12px; left: 24px; padding: 0 4px; transform: none; } .later, .questions, .close-inner, .step-copy, .price-copy { grid-template-columns: minmax(0, 1fr); } .figure--alone { margin-left: 0; } .price { grid-template-columns: minmax(0, 1fr); align-items: start; } .price-copy, .ticket, .price-free { grid-column: 1; } .price-free { padding-top: 0; } .slip--close { justify-self: start; } } @media (max-width: 599px) { .nav a:not(.lang) { display: none; } /* the slip head has to reach the first screen (390 x 844): a tighter lead and display grade */ :root { --t-display: clamp(2.375rem, 1.2rem + 5vw, 2.75rem); } h1 { margin-bottom: 16px; } .lead { font-size: var(--t-body); line-height: 1.5; margin-bottom: 20px; } .hero { padding-top: 8px; gap: 24px; } .phone { padding: 5px; border-radius: 34px; } .phone img { border-radius: 29px; } /* the excerpt ends below the plan sentence (about 180 px), so the question itself reaches the first screen */ .stage { --facts: 0.305; --crop: 0.345; } :lang(en) .stage { --facts: 0.262; --crop: 0.3; } .stage { --phone-w: min(240px, calc(100vw - 2 * var(--gutter))); --bezel: 5px; display: flex; flex-direction: column; align-items: center; justify-self: stretch; max-width: none; } .phone--plan { width: var(--phone-w); align-self: center; -webkit-mask-image: none; mask-image: none; } /* the slip covers the cut edge from the line below the facts, as on wide screens */ .slip--question { margin: calc(-1 * var(--screen-h) * (var(--crop) - var(--facts))) 0 0; width: calc(100% - 16px); max-width: 420px; padding-inline: 18px; transform: rotate(-1deg); } @keyframes slip-settle { from { transform: translateY(-16px) rotate(-3deg); } to { transform: rotate(-1deg); box-shadow: var(--shadow-slip); } } .deadline { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-left: 32px; gap: 24px; } .deadline::before { top: 6px; bottom: 6px; left: 7px; right: auto; width: 2px; height: auto; } .station::before { top: 4px; left: -32px; } .station--plan::before { top: 2px; left: -35px; } .figure--calendar { grid-template-columns: minmax(0, 1fr); row-gap: 0; } /* only the title and the first card of the calendar screen; the week below carries the content */ .phone--calendar { width: 60%; height: 220px; overflow: hidden; border-end-start-radius: 0; border-end-end-radius: 0; } .slip-label, .slip-filed { top: 6px; padding: 4px; } .sheet--week { margin: -48px 0 0; padding: 20px 16px; position: relative; z-index: 2; } /* Thursday to Sunday in two rows: the changeover day stays in the picture */ .days { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; } .day { min-height: 96px; } .entry--claro { margin-top: 16px; } .filed { margin-left: 16px; } .slip--alone { width: calc(100% - 12px); transform: rotate(-1deg); } .figure--notice { margin-right: 0; } /* the notice stays above the price on phones too */ .slip--notice .slip-title { font-size: 3.75rem; } .amount { font-size: 3rem; } } @media (max-width: 419px) { .answers { grid-template-columns: minmax(0, 1fr); } /* the undo link gets its own line, on the edge of "Wie das im Plan aussieht" */ .reset { flex-basis: 100%; margin-left: 0; padding: 0; text-align: left; } } @media (max-width: 419px) { /* English "late: 15:50" stays one unit, on the poster step below the German 60 px */ :lang(en) .slip--notice .slip-title { font-size: 3.25rem; } } @media (max-width: 359px) { .slip--notice .space-wide { white-space: normal; } .slip--notice .slip-title { font-size: 3.25rem; } } /* Windows high contrast: fills vanish, so filled and hollow points keep a system edge and a system fill */ @media (forced-colors: active) { .station::before, .outcome-thread span, .step::before, .later::after, .price-free li::before, .ticket li::before, .week-key i { border: 2px solid CanvasText; forced-color-adjust: none; background: Canvas; } .station--plan::before, .station--due::before, .step::before, .ticket li::before, .week-key i, [data-slip]:is([data-state="yes"], [data-state="no"]) .outcome-thread span { background: Highlight; } /* the thread lines are backgrounds too */ .deadline::before, .outcome-thread::before, .steps::before { forced-color-adjust: none; background: CanvasText; } /* entries from claro keep a system fill; own entries keep their forced edge */ .entry--claro { forced-color-adjust: none; background: Highlight; color: HighlightText; } }