@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; } /* * CoParity, www.coparity.de. Two households, one state: the page keeps repeating the pair * (parent and child, phone and browser, "bei dir" and "bei Sabine", free and unlocked). * Newsreader speaks the headlines, as the app speaks its plan; Schibsted Grotesk carries the rest. * Petrol is the only hue. Nothing but a device casts a shadow. */ :root { --ground: #EDF1F3; --ground-deep: #E0E8EC; --paper: #FBFDFE; --ink: #14181B; --ink-2: #5B676D; --petrol: #0E5A6E; --petrol-deep: #0A4454; --petrol-wash: #DCE7E8; --rule: #D5DCDF; --rule-strong: #AEB8BD; --focus: var(--petrol); --sans: "Schibsted Grotesk", system-ui, sans-serif; --serif: "Newsreader", "New York", Georgia, serif; /* type scale: display, headline, title, body, small */ --t-display: clamp(2.5rem, 1.35rem + 3.3vw, 4rem); --t-headline: clamp(2rem, 1.25rem + 2.4vw, 3.25rem); --t-title: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem); --t-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); --t-small: 0.9375rem; --gutter: clamp(16px, 4vw, 56px); --measure: 1320px; --space: clamp(88px, 11vw, 176px); --space-half: clamp(48px, 6vw, 96px); --col-gap: clamp(24px, 5vw, 96px); --shadow-device: 0 1px 0 rgba(20, 24, 27, 0.06), 0 32px 64px -28px rgba(20, 24, 27, 0.35); --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, table { 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); } button { font: inherit; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; } [hidden] { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* the answer on the week 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; } /* headlines: the serif voice of the plan */ h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; hyphens: manual; } h1 { font-size: var(--t-display); line-height: 1.02; } h2 { font-size: var(--t-headline); line-height: 1.06; max-width: 22ch; } h3 { font-size: var(--t-title); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; } .lead { font-size: var(--t-title); font-weight: 400; line-height: 1.4; max-width: 34ch; text-wrap: pretty; } p { text-wrap: pretty; } /* bar */ .bar { max-width: var(--measure); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; } /* the lockup (icons.mjs): mark and wordmark, each a whole-pixel box centred on the cap height, so align-items centres the capitals and the mark on the same line; gap 0.75 cap heights */ .mark { display: inline-flex; align-items: center; gap: 15px; min-height: 44px; text-decoration: none; color: var(--ink); } .mark:hover { color: var(--ink); } .mark .wordmark, .mark .brand-mark { display: block; flex: none; } /* the petrol of the logo (#1F4A5A) appears in the mark only, never as a text or control colour */ .mark .brand-mark { color: #1F4A5A; } /* optical: the capitals of the navigation sit about 1 px above the middle of their line box */ .bar .mark .wordmark, .bar .mark .brand-mark { transform: translateY(-1px); } /* in the footer the lockup stands on the top edge, level with the heads of the link columns */ .mark--small { align-items: flex-start; gap: 10px; } .nav { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 24px); } .nav-list { display: flex; align-items: center; gap: clamp(6px, 1.4vw, 20px); } .nav a, .menu-list a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; font-weight: 500; font-size: var(--t-small); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; } .nav a[aria-current="page"], .menu-list a[aria-current="page"] { border-bottom-color: var(--petrol); } .nav a:hover { color: var(--petrol); } .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); } /* below 900 px the pages fold into a menu (details, no script) */ .menu { display: none; position: relative; } .menu summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px; font-weight: 500; font-size: var(--t-small); cursor: pointer; list-style: none; } .menu summary::-webkit-details-marker { display: none; } .menu summary i { width: 18px; height: 2px; background: currentColor; border-radius: 2px; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; } .menu[open] summary i { background: transparent; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; } .menu-list { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; display: grid; padding: 8px; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; z-index: 20; } .menu-list a { padding-inline: 12px; border-radius: 6px; border-bottom: 0; } .menu-list a[aria-current="page"] { background: var(--petrol-wash); } /* devices */ .phone { container-type: inline-size; width: 100%; display: grid; gap: 12px; } .phone-screen { background: var(--ink); padding: 2.4cqw; border-radius: 12.6cqw; box-shadow: var(--shadow-device); overflow: hidden; } .phone-screen img { width: 100%; border-radius: 10.4cqw; } /* * Excerpts. The box keeps the screen's width; its height decides how much shows, and the lower edge * fades out instead of cutting a line. Screen image height is 2622/1206 of its width (207cqw here). * top the upper 59 % tall the upper 83 % */ .phone:is(.phone--top, .phone--tall) .phone-screen { border-end-start-radius: 0; border-end-end-radius: 0; box-shadow: none; -webkit-mask-image: linear-gradient(#000 var(--fade-from, 88%), transparent); mask-image: linear-gradient(#000 var(--fade-from, 88%), transparent); } .phone:is(.phone--top, .phone--tall) .phone-screen img { border-end-start-radius: 0; border-end-end-radius: 0; } .phone--top .phone-screen { aspect-ratio: 1206 / 1500; } .phone--tall .phone-screen { aspect-ratio: 1206 / 2100; --fade-from: 90%; } .phone--full.phone--empty .phone-screen { aspect-ratio: 1206 / 2622; } /* an empty frame while the production screen is missing: outline only, labelled, never a drawn screen */ .phone--empty .phone-screen { display: grid; place-items: center; padding: 12%; background: var(--ground-deep); border: 2px dashed var(--rule-strong); box-shadow: none; -webkit-mask-image: none; mask-image: none; border-radius: 12.6cqw; text-align: center; font-size: var(--t-small); color: var(--ink-2); } .close .phone--empty .phone-screen { background: transparent; border-color: var(--petrol-wash); color: var(--petrol-wash); } .phone figcaption { font-size: var(--t-small); color: var(--ink-2); } /* ways to CoParity: one button, the rest as ways beside it */ .ways { 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 24px; 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--quiet { background: var(--petrol-wash); color: var(--petrol-deep); } .way { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--petrol); } .way svg:first-child { flex: none; } .way--soon { color: var(--ink-2); font-weight: 500; } .way .arrow { flex: none; } /* sections */ main > section, .page-head { max-width: var(--measure); margin-inline: auto; } main > section { padding-bottom: var(--space); } .section-head { display: grid; gap: 20px; margin-bottom: var(--space-half); } .section-head p { max-width: 48ch; font-size: var(--t-body); } .more { font-weight: 600; } .more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--petrol); } .caption { font-size: var(--t-small); color: var(--ink-2); } .fallback { font-size: var(--t-small); color: var(--ink-2); border-left: 2px solid var(--rule-strong); padding-left: 12px; } .checks { display: grid; gap: 8px; } .checks li { display: flex; align-items: baseline; gap: 12px; padding-block: 2px; text-wrap: pretty; } .checks li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--petrol); transform: translateY(-2px); } .checks--hollow li::before { background: var(--ground); border: 2px solid var(--petrol); width: 11px; height: 11px; box-sizing: border-box; } /* hero: the one bold place, two real phones */ .hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: start; padding-block: clamp(24px, 4vw, 56px) var(--space); } .hero-copy { display: grid; gap: clamp(20px, 2.2vw, 30px); justify-items: start; padding-top: clamp(0px, 3vw, 48px); } .hero h1 { max-width: 12em; } .hero .lead { max-width: 30ch; } /* short landscape screens (1280 x 720, 1366 x 768): the three ways stay in the first screen */ @media (min-width: 900px) and (max-height: 820px) { .hero { padding-top: 12px; } .hero-copy { padding-top: 8px; gap: 18px; } .hero h1 { font-size: clamp(2.5rem, 1.2rem + 2.6vw, 3.25rem); } .hero .lead { font-size: var(--t-body); line-height: 1.5; max-width: 38ch; } .hero-stage { max-width: 540px; } } .hero h1 span { display: block; color: var(--petrol); } .hero-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: start; justify-self: end; width: 100%; max-width: 640px; } .hero-child { margin-top: clamp(40px, 8vw, 96px); } .hero-stage .phone figcaption { padding-left: 4px; } /* the problem: three sentences in the serif, one answer in the grotesk */ .problem { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px var(--col-gap); align-items: start; } .problem h2 { font-size: var(--t-title); font-family: var(--sans); font-weight: 700; letter-spacing: -0.015em; color: var(--ink-2); margin-top: 0.4em; } .problem-lines { display: grid; gap: clamp(16px, 2vw, 28px); font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.22; letter-spacing: -0.015em; max-width: 30ch; } .problem-lines li { padding-left: clamp(24px, 3vw, 40px); border-left: 2px solid var(--rule-strong); text-wrap: pretty; } .problem-after { grid-column: 2; max-width: 52ch; margin-top: 8px; font-size: var(--t-title); line-height: 1.4; } /* six areas, each with a real screen */ .area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(48px, 6vw, 88px) clamp(24px, 4vw, 64px); } .area { display: grid; gap: 14px; align-content: start; } .area .phone { width: min(100%, 300px); margin-bottom: 12px; } .area h3 { font-size: var(--t-title); } .area p { max-width: 36ch; } .areas .more { margin-top: var(--space-half); } /* one week: the question and the band */ .week-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px var(--col-gap); align-items: start; } .slip { background: var(--paper); border-radius: 8px; padding: clamp(20px, 2.4vw, 32px); display: grid; gap: 12px; border-top: 3px solid var(--petrol); } .slip-from { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-small); font-weight: 700; color: var(--petrol); } .slip-title { font-family: var(--serif); font-weight: 600; font-size: var(--t-title); line-height: 1.3; letter-spacing: -0.01em; } .answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; } .answer { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 12px; font-weight: 700; font-size: 1rem; 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 { font-weight: 500; font-size: var(--t-small); line-height: 1.4; border-top: 1px solid var(--rule); padding-top: 12px; min-height: 3.2em; } .reset { justify-self: start; min-height: 44px; padding: 0; font-weight: 500; font-size: var(--t-small); color: var(--ink-2); background: none; border: 0; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; } .reset:hover { color: var(--petrol); } .week-band { display: grid; gap: 20px; } .days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } .day { display: grid; align-content: start; gap: 6px; min-height: 180px; border-top: 2px solid var(--ink); padding-top: 8px; font-size: var(--t-small); color: var(--ink-2); } .day-name b { font-weight: 400; } .entry { border-radius: 6px; padding: 6px 8px; font-size: 0.875rem; line-height: 1.25; overflow-wrap: break-word; hyphens: none; } .entry--plan { background: var(--petrol); color: var(--paper); font-weight: 500; } .entry--school { background: var(--petrol-wash); color: var(--ink); } [data-answer="yes"] .entry[data-yes] { background: var(--paper); color: var(--petrol-deep); border: 2px solid var(--petrol); padding: 4px 6px; } .week-next { font-size: var(--t-small); color: var(--ink); border-top: 1px solid var(--rule); padding-top: 12px; } .week-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.875rem; color: var(--ink-2); } .legend { display: inline-flex; align-items: center; gap: 8px; } .legend::before { content: ""; width: 14px; height: 14px; border-radius: 4px; } .legend--plan::before { background: var(--petrol); } .legend--school::before { background: var(--petrol-wash); } .legend--changed::before { background: var(--paper); border: 2px solid var(--petrol); box-sizing: border-box; } .week-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--col-gap); margin-top: var(--space-half); } .point { display: grid; gap: 10px; align-content: start; } .point h3 { font-size: var(--t-body); font-weight: 700; } .point p { max-width: 40ch; } .week .caption { margin-top: 24px; } /* the kids */ .kids { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px var(--col-gap); align-items: center; } .kids-copy { display: grid; gap: 18px; } .kids-copy p { max-width: 44ch; } .kids-stage { max-width: 320px; } .kids--text { grid-template-columns: minmax(0, 1fr); } /* three devices */ .device-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--col-gap); } .device { display: grid; gap: 12px; align-content: start; padding-top: 20px; border-top: 2px solid var(--ink); } .device-icon { color: var(--petrol); } .device h3 { font-size: var(--t-title); } .device p { max-width: 38ch; } .devices .more { margin-top: var(--space-half); } /* the price: free beside the unlock */ .price h2 { margin-bottom: 20px; } .price-intro { max-width: 52ch; margin-bottom: var(--space-half); } .price-pair { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px var(--col-gap); align-items: start; } .price-free, .price-paid { display: grid; gap: 16px; align-content: start; } .price-free h3, .price-paid h3 { font-size: var(--t-small); font-weight: 700; color: var(--petrol); } .price-paid { background: var(--paper); border-radius: 8px; padding: clamp(24px, 3vw, 40px); border-top: 3px solid var(--petrol); } .amount { font-family: var(--serif); font-weight: 600; font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem); line-height: 1; letter-spacing: -0.02em; } .amount-alt { font-family: var(--serif); font-weight: 500; font-size: var(--t-title); line-height: 1.3; margin-top: -6px; } .price-paid .checks { margin-top: 8px; } .price-family { font-weight: 600; border-top: 1px solid var(--rule); padding-top: 16px; } .price-read { color: var(--ink-2); font-size: var(--t-small); } .price .more { margin-top: var(--space-half); } /* trust */ .trust { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px var(--col-gap); align-items: start; } .trust-copy h2 { margin-bottom: var(--space-half); } .trust-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 64px); } .trust-list li { display: grid; gap: 8px; align-content: start; } .trust-list h3 { font-size: var(--t-body); font-weight: 700; } .trust-list p { max-width: 36ch; color: var(--ink); } .trust-stage .phone { max-width: 320px; margin-left: auto; } .trust--text { grid-template-columns: minmax(0, 1fr); } /* questions */ .faq h2 { margin-bottom: var(--space-half); } .qa { display: grid; max-width: 72ch; border-top: 2px solid var(--ink); } .qa details { border-bottom: 1px solid var(--rule); } .qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding-block: 14px; cursor: pointer; list-style: none; font-weight: 600; font-size: var(--t-body); line-height: 1.3; } .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); } .qa-answer { padding-bottom: 20px; max-width: 60ch; display: grid; gap: 10px; } .qa-more { padding-block: 18px; font-weight: 600; } .qa-more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--petrol); } /* the closing band */ .close { max-width: none; margin-inline: calc(-1 * var(--gutter)); padding: var(--space) var(--gutter) 0; 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, 7fr) minmax(0, 5fr); gap: 40px var(--col-gap); align-items: end; } .close-copy { display: grid; gap: 24px; justify-items: start; padding-bottom: var(--space); } .close h2 { max-width: 16ch; } .close-copy > p { font-size: var(--t-title); line-height: 1.4; max-width: 34ch; } .close-copy > .close-note { font-size: var(--t-body); color: var(--petrol-wash); } .close .button { background: var(--paper); color: var(--petrol-deep); } .close .button:hover { background: var(--petrol-wash); } .close .way { color: var(--paper); } .close .way--soon { color: var(--petrol-wash); } .close-stage { align-self: end; } .close-stage .phone { max-width: 340px; margin-left: auto; } /* footer */ .foot { margin-inline: calc(-1 * var(--gutter)); padding: 40px var(--gutter) 48px; background: var(--ground-deep); font-size: var(--t-small); color: var(--ink-2); } .foot-inner { max-width: var(--measure); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px var(--col-gap); } .foot-mark { display: grid; gap: 8px; justify-items: start; align-content: start; } .foot-mark p { max-width: 44ch; } .foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .foot-nav div { display: grid; justify-items: start; align-content: start; } .foot-head { font-weight: 700; color: var(--ink); margin-bottom: 4px; } .foot-nav a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; } .foot-nav a:hover { text-decoration: underline; } .foot a[aria-current="page"] { color: var(--ink); font-weight: 600; } /* subpages: a head, then parts with a screen on one side */ .page-head { display: grid; gap: 24px; padding-block: clamp(24px, 4vw, 56px) var(--space); justify-items: start; } .page-head h1 { max-width: 18ch; } .page-head .ways { margin-top: 8px; } .feature, .part { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px var(--col-gap); align-items: start; } .feature-copy, .part-copy { display: grid; gap: 20px; align-content: start; } .feature-copy .checks { max-width: 56ch; } .part-copy p { max-width: 48ch; } .part-shot { max-width: 320px; justify-self: end; } /* several screens of one feature side by side, the later ones a little lower */ .phones { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); align-items: start; } .phones--2 { --n: 2; } .phones--3 { --n: 3; } /* four screens: two rows of two */ .phones--4 { --n: 2; } .phones.phones--4 .phone:nth-child(3) { margin-top: 0; } .phones.phones--4 .phone:nth-child(4) { margin-top: clamp(24px, 4vw, 56px); } .phones .phone:nth-child(2) { margin-top: clamp(24px, 4vw, 56px); } .phones .phone:nth-child(3) { margin-top: clamp(48px, 8vw, 112px); } .feature-shots { max-width: 560px; width: 100%; justify-self: end; } .feature-shots.phones--1 { max-width: 300px; } .feature-shots.phones--4 { max-width: 480px; } .part-shots { max-width: 560px; width: 100%; justify-self: end; } .part--flip .part-shots { order: -1; justify-self: start; } .kids-phones { max-width: 320px; } .pricing-shot { grid-column: 2; max-width: 300px; } .feature:nth-of-type(even) .feature-shots, .part--flip .part-shot { order: -1; justify-self: start; } .part--text { grid-template-columns: minmax(0, 1fr); } .matrix-wrap { overflow-x: auto; } .matrix { width: 100%; max-width: 860px; border-collapse: collapse; font-size: var(--t-small); } .matrix caption { text-align: left; font-weight: 700; color: var(--ink-2); padding-bottom: 12px; } .matrix th, .matrix td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; } .matrix thead th { font-weight: 700; border-bottom: 2px solid var(--ink); } .matrix tbody th { font-weight: 400; color: var(--ink); } .matrix td { width: 6.5em; white-space: nowrap; } .matrix td.yes { color: var(--petrol); } .matrix td.no .blank { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--rule-strong); } .matrix td.note { color: var(--ink-2); font-size: 0.875rem; } .matrix-note { margin-top: 20px; max-width: 56ch; color: var(--ink-2); font-size: var(--t-small); } .unlock { display: grid; gap: 16px; } .unlock p { max-width: 56ch; } /* the browser page */ .browser-stage { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px var(--col-gap); align-items: center; } .figure-browser { display: grid; gap: 12px; } /* the printout, A4 landscape, as a sheet on the ground: an illustration, never a browser window */ .print-sheet { container-type: inline-size; background: var(--paper); border: 1px solid var(--rule); border-radius: 2px; aspect-ratio: 297 / 210; padding: clamp(14px, 5cqw, 40px); overflow: hidden; } .figure-browser figcaption { font-size: var(--t-small); color: var(--ink-2); } .browser-print { display: grid; gap: 16px; } .browser-print p { max-width: 36ch; } .timetable { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 5px; font-size: 0.8125rem; line-height: 1.2; } .timetable caption { text-align: left; padding: 0 5px 8px; color: var(--ink-2); } .timetable caption span { display: inline-block; margin-right: 16px; } .timetable caption span:first-child { color: var(--ink); font-weight: 700; } .timetable thead th { text-align: left; font-weight: 500; color: var(--ink-2); border-top: 2px solid var(--ink); padding: 6px 0 0 2px; } .timetable thead td { width: 3.4em; } .timetable tbody th { text-align: left; font-weight: 400; color: var(--ink-2); font-size: 0.75rem; vertical-align: top; padding-top: 6px; } .timetable tbody th span { display: block; } .timetable td { vertical-align: top; } .subject { display: block; min-height: 2.6em; border-radius: 6px; padding: 6px 7px; background: var(--ground); overflow-wrap: break-word; hyphens: auto; } .subject--empty { border: 1px solid var(--rule); background: transparent; } .subject--mathe, .subject--maths { background: #C9D9EC; } .subject--deutsch, .subject--german { background: #EFD3C3; } .subject--englisch, .subject--english { background: #CFE4CE; } .subject--sachkunde, .subject--science { background: #EEE3B4; } .subject--sport, .subject--pe { background: #E8CCE0; } .subject--musik, .subject--music { background: #C5E0DE; } .browser-lists { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px var(--col-gap); } .browser-lists div { display: grid; gap: 20px; align-content: start; } .browser-lists h2 { font-size: var(--t-title); font-family: var(--sans); font-weight: 700; letter-spacing: -0.015em; } .browser-lists .checks { max-width: 48ch; } .browser-security { display: grid; gap: 16px; } .browser-security p { max-width: 56ch; } /* the pricing page */ .pricing-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px var(--col-gap); align-items: start; } .pricing .matrix td { width: 7.5em; } .ticket { display: grid; gap: 14px; background: var(--paper); border-radius: 8px; padding: clamp(24px, 3vw, 40px); border-top: 3px solid var(--petrol); } .ticket h3 { font-size: var(--t-small); font-weight: 700; color: var(--petrol); } .ticket p { font-size: var(--t-small); } .ticket .amount { font-family: var(--serif); font-weight: 600; font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4rem); line-height: 1; letter-spacing: -0.02em; } .ticket .amount-alt { font-family: var(--serif); font-weight: 500; font-size: var(--t-title); line-height: 1.3; } .price-facts .trust-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* legal pages and help: a quiet reading column */ .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: 8px; padding: clamp(24px, 4vw, 40px); margin-bottom: clamp(40px, 6vw, 64px); border-top: 3px solid var(--petrol); } .legal-head h1 { font-size: var(--t-headline); 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, .help-note { 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, .help-note { 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-family: var(--sans); 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-family: var(--sans); font-size: var(--t-small); font-weight: 700; letter-spacing: 0; color: var(--petrol); padding-bottom: 10px; border-bottom: 2px solid var(--ink); margin: 0 0 8px; max-width: none; } .legal h2, .help h3 { max-width: none; text-wrap: pretty; font-family: var(--sans); font-size: var(--t-title); 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, .legal-part-title + h3 { margin-top: 1em; } .legal h3 { font-size: var(--t-body); margin: 1.6em 0 0.5em; } .help-lead { margin-top: 12px; max-width: 44ch; } .no-hyphens { hyphens: manual; } .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: #F7EEE2; 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: #F7EEE2; 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: 8px; border-top: 3px solid var(--petrol); 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); } /* motion only answers an action */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; } } /* Windows high contrast: filled marks keep a system edge and a system fill */ @media (forced-colors: active) { .matrix td.no .blank { border-color: CanvasText; forced-color-adjust: none; } .checks li::before, .legend::before, .entry, .subject { border: 1px solid CanvasText; forced-color-adjust: none; background: Canvas; color: CanvasText; } .checks li::before, .entry--plan, .legend--plan::before { background: Highlight; color: HighlightText; } .phone-screen { border: 2px solid CanvasText; } .slip, .price-paid, .ticket, .legal-head { border: 1px solid CanvasText; } .nav a[aria-current="page"] { border-bottom-color: Highlight; } } /* below 1100: fewer columns */ @media (max-width: 1099px) { .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hero-stage { max-width: 520px; } .trust { grid-template-columns: minmax(0, 1fr); } .trust-stage .phone { margin-left: 0; max-width: 300px; } .close-inner { grid-template-columns: minmax(0, 1fr); } .close-stage .phone { margin-left: 0; max-width: 300px; } .price-facts .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* below 900: one column, the menu folds */ @media (max-width: 899px) { .nav-list { display: none; } .menu { display: block; } .hero { grid-template-columns: minmax(0, 1fr); padding-top: 12px; } .hero-stage { justify-self: start; max-width: 560px; } .problem { grid-template-columns: minmax(0, 1fr); } .problem-after { grid-column: 1; } .problem h2 { margin-top: 0; } .week-grid, .kids, .price-pair, .feature, .part, .browser-stage, .browser-lists, .pricing-grid, .foot-inner { grid-template-columns: minmax(0, 1fr); } .week-points, .device-list { grid-template-columns: minmax(0, 1fr); gap: 28px; } .kids-stage { max-width: 560px; } .part-shot { justify-self: start; max-width: 280px; } .feature-shots, .part-shots { justify-self: start; } .part--flip .part-shots { order: 0; } .feature:nth-of-type(even) .feature-shots, .part--flip .part-shot { order: 0; } .pricing-shot { grid-column: 1; } .slip { max-width: 520px; } .days { grid-template-columns: minmax(0, 1fr); gap: 0; } .day { grid-template-columns: 4.5em minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: start; min-height: 0; border-top: 0; border-bottom: 1px solid var(--rule); padding-block: 10px; } .day .entry + .entry { margin-left: 6px; } .days li:first-child { border-top: 2px solid var(--ink); } .day-name { padding-top: 4px; } .browser-print p { max-width: 52ch; } } @media (max-width: 599px) { :root { --t-display: clamp(2.25rem, 1.4rem + 5vw, 2.75rem); --t-headline: clamp(1.75rem, 1.3rem + 3vw, 2.25rem); } .lead { font-size: var(--t-body); line-height: 1.5; max-width: none; } .hero-stage { gap: 12px; } .hero-child { margin-top: 32px; } .area-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; } .area .phone { max-width: 240px; } .answers { grid-template-columns: minmax(0, 1fr); } .day { grid-template-columns: 4em minmax(0, 1fr); grid-auto-flow: row; } .day .entry + .entry { margin-left: 0; grid-column: 2; } .trust-list { grid-template-columns: minmax(0, 1fr); } .price-facts .trust-list { grid-template-columns: minmax(0, 1fr); } .foot-nav { grid-template-columns: minmax(0, 1fr); } .timetable { font-size: 0.75rem; border-spacing: 3px; } .timetable tbody th span:last-child { display: none; } .timetable thead td { width: 2em; } .subject { padding: 5px 4px; hyphens: manual; overflow-wrap: anywhere; } .print-sheet { aspect-ratio: auto; padding: 12px; } .matrix td { width: 4.5em; } .matrix th, .matrix td { padding-right: 8px; } } /* narrow phones (320 to 399 px): the bar keeps mark, menu and language; the language shows its globe only */ @media (max-width: 399px) { .nav { gap: 4px; } .bar .lang { min-width: 44px; justify-content: center; } .bar .lang span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .matrix { font-size: 0.8125rem; } .matrix td { width: auto; } .matrix th, .matrix td { padding-right: 6px; } .matrix thead th { overflow-wrap: anywhere; } .matrix td.note { font-size: 0.75rem; white-space: normal; } }