/* ========================================================================== FullPort Media. Variant A, "Daylight ledger". Tokens first. Contrast ratios are noted against the ground they sit on. Change order 3 (2026-09-16): - One ground. The alternating section band and its --paper-2 token are gone. Every section sits on --paper and is separated by a hairline and whitespace. A soft gold tint may still fill a contained object; it never fills a full-width band. The dark phone modules are the one exception. - Five type sizes in play on any one page. --t-lead and --t-small were folded away; weight and colour carry what size used to. ========================================================================== */ :root { /* --- Ground ------------------------------------------------------------ */ --paper: #F7F3EC; /* warm bone, the one page ground */ --card: #FFFFFF; /* raised surface */ /* --- Ink --------------------------------------------------------------- */ --ink: #14120E; /* 16.91:1 on paper, 18.71:1 on card */ --ink-2: #57514A; /* 7.08:1 on paper, 7.83:1 on card */ --ink-3: #8A8175; /* hairline label ink, decorative only */ /* --- Rules ------------------------------------------------------------- */ --rule: #DCD5C7; --rule-strong: #C6BCA9; /* --- Accent: the two golds, taken from the ring in the logo ------------- --gold is the O. It is a fill colour: buttons, rules, dots, tints, the focus ring. At 2.16:1 on paper it is never used for text on a light ground. --gold-ink is the same hue darkened until small text on paper is readable, and is used for text only. ---------------------------------- */ --gold: #D2A01E; /* ink on it 7.83:1, it on ink 7.83:1 */ --gold-deep: #B2860F; /* button hover / pressed, ink on it 5.62:1 */ --gold-ink: #7A5A0E; /* text on light: 5.76:1 paper, 6.37:1 card */ --gold-tint: #F2E7CF; /* = 14% gold in paper. Upgraded to color-mix below. */ --gold-rule: #E9D39E; /* = 38% gold in paper, the tint's hairline */ --on-gold: #14120E; /* ink, not white: 7.83:1 on gold, white is 2.16:1 */ --error: #8E2C1E; /* 7.51:1 on paper, 8.30:1 on card */ /* --- Type --------------------------------------------------------------- Five sizes are in play on any one page and no more: --t-display the h1 on the home page, the 404 and the thank-you page --t-h1 the h1 on every other page. A page never uses both --t-h2 section headings --t-h3 sub-headings: module titles, service headings, FAQ questions, callout headings, legal page headings --t-body every running word. Body copy, leads, captions, table cells, form fields, buttons, notes, consent text --t-label the one small-caps mono size. Every label, eyebrow, chip, status, timestamp and table header sits here There is no --t-lead and no --t-small. Anything that used to be quieter is quieter in colour (--ink-2) and weight, not in size. Anything that used to be a one-off heading size is --t-h3, or body at 700 weight where a sixth size was not worth it. ------------------------------------------ */ --display: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif; --body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --t-display: clamp(2.35rem, 5.4vw, 4.5rem); --t-h1: clamp(2.1rem, 4.6vw, 3.5rem); --t-h2: clamp(1.65rem, 3vw, 2.6rem); --t-h3: clamp(1.125rem, 1.5vw, 1.3rem); --t-body: 1.0625rem; --t-label: 0.6875rem; /* --- Space (4px base) --------------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --section: clamp(4rem, 8vw, 7.5rem); --gutter: clamp(1.25rem, 4vw, 2.5rem); --maxw: 1200px; /* --- Shape ------------------------------------------------------------- */ --r-1: 3px; /* chips, inputs, buttons */ --r-2: 8px; /* screenshot frames, cards */ --r-phone: 22px; --shadow-frame: 0 1px 2px rgba(20,18,14,.06), 0 12px 28px -12px rgba(20,18,14,.22); --shadow-card: 0 1px 2px rgba(20,18,14,.05), 0 18px 40px -26px rgba(20,18,14,.35); } /* The two tints are mixed from the gold at runtime where color-mix is available (every current Chrome, Safari, Firefox and Edge). The plain hexes above are the same values pre-mixed, and are what older engines keep. */ @supports (color: color-mix(in srgb, red 50%, blue)) { :root { --gold-tint: color-mix(in srgb, var(--gold) 14%, var(--paper)); --gold-rule: color-mix(in srgb, var(--gold) 38%, var(--paper)); } } /* ========================================================================== Reset and base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--t-body); line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4, h5 { font-family: var(--display); font-weight: 700; line-height: 1.04; letter-spacing: -0.022em; margin: 0; text-wrap: balance; } h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); } h3, h4, h5 { font-size: var(--t-h3); line-height: 1.24; letter-spacing: -0.012em; } p { margin: 0 0 var(--s-4); } p:last-child { margin-bottom: 0; } ul, ol { margin: 0 0 var(--s-4); padding-left: 1.15rem; } li { margin-bottom: var(--s-2); } img, svg, video { max-width: 100%; } img { height: auto; display: block; } strong, b { font-weight: 600; } hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-7) 0; } a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { text-decoration-color: var(--gold-ink); } /* 2px of gold, held off the element by a 1px paper gap, with an ink hairline just outside it. The paper gap keeps the ring legible on a dark object; the ink hairline gives the gold an edge to read against on paper, where gold alone is only 2.16:1. */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; box-shadow: 0 0 0 1px var(--paper), 0 0 0 4px rgba(20, 18, 14, .32); border-radius: 2px; } /* The two links whose own inset underline the ring's box-shadow would erase. */ .tlink:focus-visible { box-shadow: 0 0 0 1px var(--paper), 0 0 0 4px rgba(20, 18, 14, .32), inset 0 -2px 0 0 var(--gold); } .nav__link:focus-visible { box-shadow: 0 0 0 1px var(--paper), 0 0 0 4px rgba(20, 18, 14, .32), inset 0 -2px 0 0 var(--gold); } ::selection { background: var(--gold); color: var(--on-gold); } .skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 200; background: var(--ink); color: var(--paper); padding: .75rem 1rem; border-radius: var(--r-1); font-weight: 600; text-decoration: none; } .skip-link:focus { top: var(--s-4); } .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ========================================================================== Layout. One ground, hairlines and whitespace. ========================================================================== */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: 760px; } .section { padding-block: var(--section); } .section--tight { padding-block: clamp(2.75rem, 5vw, 4.5rem); } .section + .section { border-top: 1px solid var(--rule); } .grid { display: grid; gap: var(--s-6); } @media (min-width: 760px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } } /* Section heading pattern: hairline, mono label, big head, lead */ .shead { margin-bottom: clamp(2rem, 4vw, 3.25rem); } /* A section head that is the whole section, with nothing under it. */ .shead--solo { margin-bottom: 0; } /* A section head with no eyebrow. Change order 3 section 3 took out every eyebrow that only restated the heading under it; the ones that carry an industry term stayed. The hairline is the section divider, so it moves onto the head itself rather than leaving an empty .shead__top behind. */ .shead--rule { border-top: 1px solid var(--ink); padding-top: var(--s-6); } .shead__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem var(--s-4); border-top: 1px solid var(--ink); padding-top: var(--s-3); margin-bottom: var(--s-5); } .label { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0; } .label--gold { color: var(--gold-ink); } .shead h2, .shead h1 { max-width: 20ch; } .shead__lead { color: var(--ink-2); max-width: 58ch; margin-top: var(--s-4); } .shead__note { color: var(--ink-2); max-width: 58ch; margin-top: var(--s-4); } .lead { line-height: 1.55; color: var(--ink-2); } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 52px; padding: .8rem 1.5rem; font-family: var(--display); font-weight: 600; font-size: var(--t-body); letter-spacing: -.01em; border-radius: var(--r-1); border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease; } .btn--primary { background: var(--gold); color: var(--on-gold); } .btn--primary:hover { background: var(--gold-deep); color: var(--on-gold); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); } .btn--ghost:hover { border-color: var(--ink); background: var(--card); } .btn--sm { min-height: 44px; padding: .55rem 1.05rem; } .btn:active { transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active { transform: none; } } /* Text link with the one accent underline */ .tlink { font-family: var(--display); font-weight: 600; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem 0; min-height: 44px; box-shadow: inset 0 -2px 0 0 var(--gold); } .tlink:hover { box-shadow: inset 0 -12px 0 0 var(--gold-tint), inset 0 -2px 0 0 var(--gold); } .tlink .arw { transition: transform .16s ease; } .tlink:hover .arw { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .tlink .arw { transition: none; } } .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); } .cta-note { color: var(--ink-2); max-width: 46ch; margin-top: var(--s-4); } .callline { font-family: var(--display); font-weight: 600; text-decoration: none; display: inline-block; padding-block: .68rem; line-height: 1.45; } .callline:hover { color: var(--gold-ink); } /* ========================================================================== Brand mark and wordmark ========================================================================== */ /* The phone number is one token: never break it at the hyphen. The rule is on the number itself, not on the link around it. Scoping it to the whole anchor made "Need us sooner? Call or text (225) 416-5843" on /thank-you one unbreakable line, which pushed the page 13px wider than a 360px screen. */ [data-fp="phone"] { white-space: nowrap; } /* The logo is one SVG file, letters on currentColor with the gold ring baked in. The header takes the one-line lockup, the footer the two-line one. */ .brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink); } .brand__logo { display: block; width: 204px; height: auto; flex: none; } /* MEDIA is 40 of the lockup's 341 viewBox units tall, so the footer width sets its cap height: 272px puts it at 9.1px, 240px at 8px on a phone. */ .brand--footer .brand__logo { width: 272px; } @media (max-width: 430px) { .brand__logo { width: 168px; } .brand--footer .brand__logo { width: 240px; } } /* ========================================================================== Header + nav ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 90; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--rule); } @supports not (backdrop-filter: blur(4px)) { .site-header { background: var(--paper); } } .site-header__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 68px; } .nav { display: none; } .nav__list { display: flex; align-items: center; gap: var(--s-5); list-style: none; margin: 0; padding: 0; } .nav__list li { margin: 0; } .nav__link { font-family: var(--display); font-weight: 500; text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; min-height: 44px; box-shadow: inset 0 0 0 0 var(--gold); transition: box-shadow .16s ease; } .nav__link:hover { box-shadow: inset 0 -2px 0 0 var(--gold); } /* The current page is marked only by this underline, and a state indicator has to clear 3:1 against its ground (WCAG 1.4.11). The O gold is 2.16:1 on paper, so the marker is drawn in --gold-ink (5.76:1). Hover is exempt from 1.4.11 and keeps the O gold, which also keeps the two states told apart. */ .nav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 0 var(--gold-ink); } .nav__link[aria-current="page"]:focus-visible { box-shadow: 0 0 0 1px var(--paper), 0 0 0 4px rgba(20, 18, 14, .32), inset 0 -2px 0 0 var(--gold-ink); } @media (prefers-reduced-motion: reduce) { .nav__link { transition: none; } } .nav-toggle { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; min-width: 44px; padding: .5rem .8rem; background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--r-1); font-family: var(--display); font-weight: 600; font-size: var(--t-body); color: var(--ink); cursor: pointer; } .nav-toggle__bars { display: grid; gap: 4px; } .nav-toggle__bars span { display: block; width: 16px; height: 1.5px; background: var(--ink); } .header-cta { display: none; } #mobile-nav { border-bottom: 1px solid var(--rule); background: var(--paper); } #mobile-nav[hidden] { display: none; } .mnav__list { list-style: none; margin: 0; padding: var(--s-3) 0 var(--s-5); } .mnav__list li { margin: 0; border-top: 1px solid var(--rule); } .mnav__list a { display: flex; align-items: center; min-height: 56px; font-family: var(--display); font-weight: 600; text-decoration: none; } .mnav__cta { padding-top: var(--s-4); display: grid; gap: var(--s-3); } .mnav__cta .btn { width: 100%; } @media (min-width: 900px) { .nav { display: block; } .nav-toggle { display: none; } .header-cta { display: inline-flex; } #mobile-nav { display: none !important; } } /* ========================================================================== Hero ========================================================================== */ /* The hero carries no screenshot. The missed-call phone is the first visual on the page, so the headline runs full width and the support line, the CTA and the proof row sit under it as a ledger head. */ .hero { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.25rem); } .hero__eyebrow { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; border-top: 1px solid var(--ink); padding-top: var(--s-3); margin-bottom: var(--s-6); } .hero h1 { font-size: var(--t-display); letter-spacing: -.035em; line-height: 1; max-width: 19ch; } .hero__foot { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); margin-top: clamp(1.75rem, 3vw, 2.5rem); } @media (min-width: 1000px) { .hero__foot { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; } } .hero__support { color: var(--ink-2); max-width: 46ch; margin: 0; } .u-acc { box-shadow: inset 0 -.06em 0 0 var(--gold); } .nb { white-space: nowrap; } /* The proof line under the hero, set as ledger cells. */ .proofrow { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; border-top: 1px solid var(--ink); display: grid; } @media (min-width: 760px) { .proofrow { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); max-width: 46rem; } } .proofrow li { margin: 0; padding: var(--s-4) 0 var(--s-4) 1.4rem; border-bottom: 1px solid var(--rule); font-family: var(--display); font-weight: 600; position: relative; } .proofrow li::before { content: ""; position: absolute; left: 0; top: 1.55rem; width: 8px; height: 2px; background: var(--gold); } @media (min-width: 760px) { .proofrow li { border-bottom: 0; } } /* Ledger panel: a spec sheet in a card */ .ledger { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-2); box-shadow: var(--shadow-card); padding: clamp(1.25rem, 2.5vw, 1.75rem); } .ledger__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); border-bottom: 1px solid var(--ink); padding-bottom: var(--s-3); } .ledger__title { font-family: var(--display); font-weight: 700; font-size: var(--t-h3); letter-spacing: -.024em; } .ledger__rows { list-style: none; margin: 0; padding: 0; } .ledger__rows li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding: .8rem 0; border-bottom: 1px solid var(--rule); margin: 0; } .ledger__rows li:last-child { border-bottom: 0; } .ledger__k { font-family: var(--display); font-weight: 600; } .ledger__v { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); text-align: right; } .ledger--contact .ledger__v { font-size: var(--t-body); letter-spacing: 0; text-transform: none; font-family: var(--body); } /* padding, not a min-height, so the link's own box clears 44px without pushing the row apart. */ .ledger--contact .ledger__v a { display: inline-block; padding-block: .55rem; } .ledger__foot { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule); color: var(--ink-2); } /* ========================================================================== Screenshot frames ========================================================================== */ .frame { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-2); padding: 8px; box-shadow: var(--shadow-frame); overflow: hidden; } .frame img { border-radius: 4px; width: 100%; } .frame--phone { border-radius: var(--r-phone); padding: 7px; max-width: 250px; } .frame--phone img { border-radius: 16px; } figure { margin: 0; } figcaption { color: var(--ink-2); margin-top: var(--s-3); } /* Before / after ---------------------------------------------------------- */ .ba { display: grid; gap: var(--s-4); } @media (min-width: 760px) { .ba { grid-template-columns: 1fr 1fr; } } .ba__pane { position: relative; margin: 0; } .ba__tag { position: absolute; top: 14px; left: 14px; z-index: 3; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); padding: .3rem .5rem; border-radius: var(--r-1); } .ba.is-slider { position: relative; display: block; aspect-ratio: 1400 / 875; border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--card); padding: 8px; box-shadow: var(--shadow-frame); overflow: hidden; --pos: 50; } .ba.is-slider .ba__pane { position: absolute; inset: 8px; border-radius: 4px; overflow: hidden; } .ba.is-slider .ba__pane .frame { border: 0; padding: 0; border-radius: 0; box-shadow: none; height: 100%; } .ba.is-slider .ba__pane img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 0; } .ba.is-slider .ba__pane--after { clip-path: inset(0 0 0 calc(var(--pos) * 1%)); } .ba.is-slider .ba__tag { top: 12px; } .ba.is-slider .ba__pane--after .ba__tag { left: auto; right: 12px; } .ba__range { position: absolute; inset: 8px; z-index: 5; width: calc(100% - 16px); height: calc(100% - 16px); margin: 0; padding: 0; background: transparent; cursor: ew-resize; -webkit-appearance: none; appearance: none; } .ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; background: transparent; cursor: ew-resize; } .ba__range::-moz-range-thumb { width: 44px; height: 100%; background: transparent; border: 0; cursor: ew-resize; } .ba__range::-moz-range-track { background: transparent; } .ba__range:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } .ba__handle { position: absolute; top: 8px; bottom: 8px; z-index: 4; left: calc(8px + (100% - 16px) * var(--pos) / 100); width: 2px; margin-left: -1px; background: var(--paper); pointer-events: none; box-shadow: 0 0 0 1px rgba(20,18,14,.25); } .ba__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); background: var(--paper); border: 1px solid var(--ink); border-radius: 50%; box-shadow: 0 2px 10px rgba(20,18,14,.25); } .ba__handle::before { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 12px; transform: translate(-50%, -50%); z-index: 1; background: no-repeat center / 22px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='%2314120E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 1.5 1 6l4 4.5M17 1.5 21 6l-4 4.5'/%3E%3C/svg%3E"); } .ba__hint { color: var(--ink-2); margin-top: var(--s-3); } .ba__notes { display: grid; gap: var(--s-4); margin-top: var(--s-5); } @media (min-width: 760px) { .ba__notes { grid-template-columns: 1fr 1fr; gap: var(--s-6); } } .ba__notes p { color: var(--ink-2); } .ba__notes b { color: var(--ink); font-family: var(--display); } /* ========================================================================== The ownership ledger table ========================================================================== */ .index-table { width: 100%; border-collapse: collapse; } .index-table th, .index-table td { text-align: left; padding: 1rem .75rem; border-bottom: 1px solid var(--rule); vertical-align: top; } .index-table th { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); font-weight: 400; border-bottom: 1px solid var(--ink); } .index-table td:first-child, .index-table th:first-child { padding-left: 0; } .index-table td:last-child, .index-table th:last-child { padding-right: 0; } .index-table .cell-name { font-family: var(--display); font-weight: 700; letter-spacing: -.015em; } .index-table tr:last-child td { border-bottom: 1px solid var(--ink); } /* Three columns of sentences, so the middle one is set in the display face to read as the answer and the last one is let go. */ .index-table--own th:nth-child(2) { width: 13rem; } .index-table--own td:nth-child(2) { font-family: var(--display); font-weight: 600; color: var(--ink); } .index-table--own td:nth-child(3) { color: var(--ink-2); } .ownfoot { margin-top: var(--s-5); border-left: 2px solid var(--gold); padding-left: .75rem; color: var(--ink); max-width: 62ch; } .table-scroll { overflow-x: auto; } @media (max-width: 719px) { .index-table, .index-table tbody, .index-table tr, .index-table td { display: block; width: 100%; } .index-table thead { display: none; } .index-table tr { border-bottom: 1px solid var(--ink); padding: var(--s-4) 0; } .index-table tr:last-child td { border-bottom: 0; } .index-table td { border-bottom: 0; padding: 0 0 .35rem; } .index-table td[data-k]::before { content: attr(data-k) " "; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); display: block; margin-top: .4rem; } } .status { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); } .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; } /* ========================================================================== Cards and lists ========================================================================== */ /* numbered-free reason list: hairline rows */ .reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } @media (min-width: 860px) { .reasons { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); } /* Three reasons in two columns leaves a hole in the second row. */ .reasons--3 { grid-template-columns: repeat(3, 1fr); column-gap: var(--s-7); } } .reasons li { margin: 0; padding: var(--s-5) 0; border-top: 1px solid var(--rule); } .reasons h3 { display: flex; align-items: center; gap: .6rem; margin-bottom: var(--s-3); } .reasons h3::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--gold); border-radius: 1px; } .reasons p { color: var(--ink-2); margin: 0; } /* Service bands */ .band { border-top: 1px solid var(--ink); padding-top: var(--s-5); margin-top: var(--s-7); } .band:first-of-type { margin-top: 0; } .band__grid { display: grid; gap: var(--s-5); } @media (min-width: 900px) { .band__grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--s-8); } } .band__lead { color: var(--ink-2); margin-top: var(--s-3); } .band__items { list-style: none; margin: 0; padding: 0; } .band__items > li { margin: 0; padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); } .band__items > li:first-child { padding-top: 0; } .band__items > li:last-child { border-bottom: 0; padding-bottom: 0; } /* Direct children only. A demo module sits inside one of these list items, and a descendant selector here would out-rank the module's own rules. */ .band__items > li > h3 { margin-bottom: var(--s-2); } .band__items > li > p { color: var(--ink-2); margin-bottom: var(--s-3); } .band__col { min-width: 0; } .band__items > li > .label { margin-bottom: var(--s-3); } .getline { display: flex; gap: .6rem; align-items: baseline; border-left: 2px solid var(--gold); padding-left: .75rem; } .getline .label { flex: none; padding-top: .35rem; } /* A demo module sitting under the service it demonstrates. */ .getline + .fpd { margin-top: var(--s-5); } .band__col .callout { margin-top: var(--s-7); } /* The home page service rows: the small caps label and the plain heading on the left, the one-line outcome on the right. A ledger, not a card grid. */ .svc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); } .svc > li { margin: 0; padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); display: grid; gap: var(--s-3); } @media (min-width: 860px) { .svc > li { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--s-8); align-items: start; } } .svc .label { margin-bottom: var(--s-3); } .svc__v { color: var(--ink-2); margin: 0; max-width: 58ch; } .fpd + .svc { margin-top: clamp(2.5rem, 5vw, 4rem); } /* The growth-work blocks on the home page. Each is a headed slab with its own ink rule, so the module or the callout under it reads as part of that block. */ .gblock { border-top: 1px solid var(--ink); padding-top: var(--s-4); margin-top: clamp(2.5rem, 5vw, 4rem); } .gblock--first { margin-top: 0; } .gblock > .label { margin-bottom: var(--s-3); } .gblock h3 { margin-bottom: var(--s-4); } .gblock > p { color: var(--ink-2); max-width: 66ch; } .gblock .fpd { margin-top: clamp(2rem, 4vw, 2.75rem); } .gblock .callout { margin-top: clamp(2rem, 4vw, 2.75rem); max-width: 880px; } /* Steps */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); } @media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } } .steps li { margin: 0; padding-top: var(--s-4); border-top: 2px solid var(--ink); } .steps h3 { margin-bottom: var(--s-3); } .steps p { color: var(--ink-2); margin: 0; } .steps__rule { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); display: block; margin-bottom: var(--s-3); } /* Founder plates */ .founders { display: grid; gap: var(--s-5); } @media (min-width: 720px) { .founders { grid-template-columns: 1fr 1fr; gap: var(--s-6); } } .founder { display: flex; gap: var(--s-4); align-items: flex-start; } .plate { width: 84px; height: 84px; flex: none; border-radius: var(--r-2); background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: var(--t-h3); letter-spacing: .06em; position: relative; overflow: hidden; } .plate::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 12px; height: 3px; background: var(--gold); border-radius: 1px; } .founder h3 { margin-bottom: .35rem; } .founder .label { margin-bottom: var(--s-3); } .founder p { color: var(--ink-2); margin: 0; } /* FAQ. It starts on the page's own left edge like every other section now that there are no bands to justify an indented block, and stops short of the right one so the open/close mark does not sit a screen away from its question. */ .faq { border-top: 1px solid var(--ink); max-width: 62rem; } .faq details { border-bottom: 1px solid var(--rule); } .faq summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-5) 0; font-family: var(--display); font-weight: 600; font-size: var(--t-h3); line-height: 1.24; letter-spacing: -.012em; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; margin-left: auto; flex: none; width: 14px; height: 14px; margin-top: .35rem; /* the open/close affordance: --gold-ink, not --gold, so a 2px stroke still clears 3:1 on the paper (WCAG 1.4.11) */ background: linear-gradient(var(--gold-ink), var(--gold-ink)) no-repeat center / 14px 2px, linear-gradient(var(--gold-ink), var(--gold-ink)) no-repeat center / 2px 14px; transition: transform .18s ease; } .faq details[open] summary::after { transform: rotate(45deg); } @media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } } .faq__a { padding-bottom: var(--s-5); color: var(--ink-2); max-width: 70ch; } /* ========================================================================== The case study (work page) ========================================================================== */ .case { padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--rule); } .case:first-of-type { border-top: 0; padding-top: 0; } .case__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: var(--s-4); } .case > h2 { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); } .case__ba { margin-bottom: clamp(2.5rem, 5vw, 4rem); } .case__head { display: grid; gap: var(--s-6); margin-bottom: var(--s-6); } @media (min-width: 900px) { .case__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; } } .case__body p { color: var(--ink-2); } .case__body h3 { margin-bottom: var(--s-3); } .case__h { margin-top: var(--s-6); } .case__list { list-style: none; margin: var(--s-4) 0 0; padding: 0; border-top: 1px solid var(--rule); } .case__list li { margin: 0; padding: .7rem 0 .7rem 1.4rem; border-bottom: 1px solid var(--rule); position: relative; } .case__list li::before { content: ""; position: absolute; left: 0; top: 1.35rem; width: 8px; height: 2px; background: var(--gold); } .shots { display: grid; gap: var(--s-5); align-items: end; } @media (min-width: 760px) { .shots { grid-template-columns: minmax(0, 1fr) 250px; gap: var(--s-6); } } /* ========================================================================== Pricing ========================================================================== */ .model { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); } .model > li { margin: 0; padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); } @media (min-width: 860px) { .model > li { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--s-8); align-items: start; } } /* Change order 2 section 4.4: the ownership row is the highlighted one, and change order 3 section 4 allows a tint on a contained object like this one, never on a full-width band. No meaning rests on the tint: the row says "You own everything" in words. On a phone the wrap IS the viewport. Filling the row to the gutters still put the tint the full width of every other row, so it read as the section band change order 3 took out. It is now stepped in from the list's own hairlines on both sides, carries its own gold edge all the way round, and takes the card radius. At 360px that is a tinted card sitting inside the list, which is what it is. */ .model > li.model__own { background: var(--gold-tint); box-shadow: inset 3px 0 0 0 var(--gold); border: 1px solid var(--gold-rule); border-radius: var(--r-2); padding-inline: var(--s-4); margin-inline: var(--s-3); margin-block: var(--s-3); } /* From 860px up the wrap has paper on both sides of it, so the row can bleed by one gutter and still be an object inside the page. */ @media (min-width: 860px) { .model > li.model__own { padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); margin-block: 0; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; } } .model p { color: var(--ink-2); margin: var(--s-3) 0 0; } @media (min-width: 860px) { .model p { margin-top: 0; } } .price { display: inline-block; margin-top: var(--s-3); font-family: var(--display); font-weight: 700; font-size: var(--t-h3); letter-spacing: -.02em; color: var(--gold-ink); } .price[hidden] { display: none; } .pricetag { display: flex; flex-direction: column; gap: .35rem; margin: var(--s-3) 0 0; } .pricetag[hidden] { display: none; } .pricetags { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-top: var(--s-4); } .checklist { list-style: none; margin: 0; padding: 0; } .checklist li { margin: 0; padding: .65rem 0 .65rem 1.75rem; border-bottom: 1px solid var(--rule); position: relative; } .checklist li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 12px; height: 7px; /* --gold-ink so the ticks read at least as strongly as the --ink-3 dashes in the "not covered" column beside them */ border-left: 2px solid var(--gold-ink); border-bottom: 2px solid var(--gold-ink); transform: rotate(-45deg); } .checklist--out li::before { width: 11px; height: 0; border-left: 0; border-bottom: 2px solid var(--ink-3); transform: none; top: 1.4rem; } /* ========================================================================== FullPort Media. Variant A, "Daylight ledger". The demo module shell, the conversation list, and the reactivation ledger. Every class is prefixed .fpd (FullPort demo). It defines no new :root tokens and no new fonts. The two message threads live in the .fpt block below. Sizing is done with container queries so a module reads correctly whether it is full width or sitting in a half-width column. Engines without container query support get the narrow, stacked layout, which is complete and legible. ========================================================================== */ /* --- Module shell -------------------------------------------------------- */ .fpd { margin: 0; } .fpd--thread { max-width: 660px; } .fpd--seq { max-width: 880px; } /* .fpd--inbox takes the width it is given: it is the widest of the three. */ /* Copy on the left, module on the right, stacked below 1000px. */ .fpd-split { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; } .fpd-split > .shead { margin-bottom: 0; } @media (min-width: 1000px) { /* The module column is sized to the phone rather than to half the page. A phone is 22.5rem wide and will not grow, so a column half the wrap wide left it floating with paper on both sides of it and the caption running wider than the thing it captions. */ .fpd-split { grid-template-columns: minmax(0, 1fr) minmax(22.5rem, 27rem); } /* The phone is most of a screen tall and the copy beside it is three short lines. Centring the copy left a field of paper above the heading; simply topping it left the same field below. The copy is pinned instead, so it holds its place against the thread the whole way down and the column is deliberately empty rather than accidentally so. Its hairline still meets the module's at the top, which is the ledger idea. Sticky is not motion: nothing moves that the reader did not scroll, so prefers-reduced-motion has nothing to turn off here. */ .fpd-split > .shead { align-self: start; position: sticky; /* the sticky site header is 68px, plus a step of air */ top: calc(68px + var(--s-6)); } } .fpd__head { border-top: 1px solid var(--ink); padding-top: var(--s-3); margin-bottom: var(--s-4); } .fpd__head .label { margin-bottom: var(--s-2); } /* Stated in full so the module title renders identically whether it is an h3 (home page) or an h4 (the system page). */ .fpd__title { font-family: var(--display); font-weight: 700; font-size: var(--t-h3); line-height: 1.24; letter-spacing: -.02em; } .fpd__sheet { --fpd-pad: clamp(.9rem, 2.6vw, 1.4rem); background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-2); box-shadow: var(--shadow-card); overflow: hidden; container-type: inline-size; } /* The caption is copy, not a disclaimer. */ .fpd__cap { margin-top: var(--s-4); padding-left: .75rem; border-left: 2px solid var(--gold); line-height: 1.5; color: var(--ink-2); max-width: 64ch; } /* --- Chips. Content, not decoration: they stay in the reading order. ------ */ .fpd-chip { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; line-height: 1.55; padding: .14rem .42rem; white-space: nowrap; background: var(--card); color: var(--ink-2); border: 1px solid var(--rule-strong); border-radius: var(--r-1); } /* Anything the system did carries a gold dot; anything a person did does not. */ .fpd-chip--sent { color: var(--gold-ink); border-color: var(--gold-rule); } .fpd-chip--sent::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--gold); } .fpd-chip--run::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-2); } /* The one solid gold chip in the set, on the step where the owner has to say yes. Ink on gold, never white on gold. */ .fpd-chip--wait { background: var(--gold); color: var(--on-gold); border-color: var(--gold-deep); } /* --- The conversation list, which is a register and stays a ledger -------- */ .fpd-inbox__head { display: flex; align-items: center; padding: var(--fpd-pad); border-bottom: 1px solid var(--ink); } .fpd-inbox__lead { margin: 0; color: var(--ink-2); } .fpd-list { list-style: none; margin: 0; padding: 0; } .fpd-list > li { margin: 0; padding: .8rem var(--fpd-pad); border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "src time" "prev prev"; column-gap: var(--s-4); } .fpd-list > li:last-child { border-bottom: 0; } .fpd-list__src { grid-area: src; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; } .fpd-list__who { font-family: var(--display); font-weight: 600; color: var(--ink); } .fpd-list__time { grid-area: time; margin: 0; padding-top: .35rem; text-align: right; white-space: nowrap; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .08em; color: var(--ink-2); } .fpd-list__prev { grid-area: prev; margin: .35rem 0 0; color: var(--ink-2); } /* The open row. The tint and the gold edge repeat what the phone header beside it already says in words, so no meaning rests on colour alone. */ .fpd-list > li[aria-current] { background: var(--gold-tint); box-shadow: inset 3px 0 0 0 var(--gold); } .fpd-list > li[aria-current] .fpd-list__prev { color: var(--ink); } /* ========================================================================== Module 3. Past-customer reactivation, as a ledger ========================================================================== */ .fpd-seq__note { margin: 0; padding: .8rem var(--fpd-pad); background: var(--gold-tint); border-bottom: 1px solid var(--gold-rule); font-family: var(--display); font-weight: 600; line-height: 1.5; color: var(--ink); display: flex; align-items: flex-start; gap: .6rem; } .fpd-seq__note::before { content: ""; width: 9px; height: 9px; flex: none; margin-top: .55rem; background: var(--gold-ink); border-radius: 1px; } .fpd-seq { list-style: none; margin: 0; padding: 0; } .fpd-seq > li { margin: 0; padding: var(--s-5) var(--fpd-pad); border-top: 1px solid var(--rule); display: grid; gap: .55rem; } .fpd-seq > li:first-child { border-top: 0; } /* The approval step is the trust point, so it is the one tinted row. */ .fpd-seq__step--approve { background: var(--gold-tint); } .fpd-seq__marker { margin: 0; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); } .fpd-seq__body { min-width: 0; } /* Body size at 700 weight in the display face. A step heading inside a ledger row does not need a size of its own. */ .fpd-seq__h { font-family: var(--display); font-weight: 700; font-size: var(--t-body); line-height: 1.3; letter-spacing: -.012em; margin: 0 0 .35rem; } .fpd-seq__p { margin: 0; color: var(--ink-2); } .fpd-seq__status { margin: 0; } .fpd-mail { margin-top: .65rem; padding: .7rem .85rem; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-1); } .fpd-mail__subject { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.35; color: var(--ink); } .fpd-mail__body { margin: .45rem 0 0; line-height: 1.55; color: var(--ink-2); } @container (min-width: 40rem) { .fpd-seq > li { grid-template-columns: 6.5rem minmax(0, 1fr) auto; column-gap: var(--s-5); align-items: start; } .fpd-seq__marker { padding-top: .35rem; } .fpd-seq__status { justify-self: end; padding-top: .3rem; } } /* ========================================================================== FullPort Media. Variant A, "Daylight ledger". Change order 3, notes 1 and 5. The two message modules rebuilt as real phone conversations. Built to brief/THREAD-MODULES.md. Prefix: .fpt (FullPort thread). Nothing here touches the .fpd module shell (.fpd, .fpd__head, .fpd__title, .fpd__cap, .fpd-split, .fpd-list), which keeps its current ledger treatment. No JavaScript. No motion. No new :root tokens: every colour this component needs is declared on .fpt itself, so the bubble green stays a phone artifact and can never be reached by another element on the site. The type inside the phone is a drawing of a phone screen: every value is an em against the single font size on .fpt__screen, so the whole thing scales as one picture. Change order 3 section 3 still governs how many values there may be, so the phone runs on three and only three: 1em .fpt-b the message bubbles .92em .fpt__who the contact name in the header .8em everything else status bar, header sub line, day and time separators, the missed-call event line, the sender labels, the read receipt, the composer The first pass had eight values, three of them under a pixel apart, which is exactly the texture Cager counted. Hierarchy is carried by weight and colour (700 for the day, 600 for the labels, --fpt-dim against --fpt-dim-2), never by a fourth size. ========================================================================== */ /* --- The phone ----------------------------------------------------------- One dark object on the bone paper. It is 360px wide at most, it never stretches, and it centres itself in whatever column it is given. ------------------------------------------------------------------------ */ .fpt { /* Screen and chrome */ --fpt-frame: #2B2822; /* the bezel. 13.28:1 against paper */ --fpt-edge: #423D34; /* 1px inner highlight on the bezel */ --fpt-screen: #0D0C0A; /* the screen ground, warm near-black */ --fpt-head: #171512; /* the thread header, lifted off the screen */ --fpt-hrule: #262320; /* hairline under the header */ /* Bubbles */ --fpt-in: #312E28; /* received, dark warm grey. White on it 13.53:1 */ --fpt-green: #207E37; /* sent. White on it 5.12:1. See the contrast table in brief/THREAD-MODULES.md. Not a brand colour, not a site token, never used outside .fpt. */ /* Text */ --fpt-on: #FFFFFF; /* bubble text */ --fpt-dim: #9C968C; /* separators, labels, receipts. 6.66:1 on screen */ --fpt-dim-2: #B4AEA3; /* the missed-call event line, which is content */ --fpt-icon: #EDE9E1; /* status bar, back chevron */ --fpt-comp: #1F1D19; /* composer button ground */ --fpt-ava: #3A362F; /* avatar disc */ --fpt-ava-ink: #8B857B; /* avatar glyph */ --fpt-gold: #D2A01E; /* the site gold, on the "sent automatically" mark */ width: min(100%, 22.5rem); margin-inline: auto; container-type: inline-size; background: var(--fpt-frame); border-radius: 2.3rem; padding: 0.44rem; box-shadow: inset 0 0 0 1px var(--fpt-edge), 0 2px 3px rgba(20, 18, 14, .10), 0 26px 46px -20px rgba(20, 18, 14, .55); } .fpt__screen { background: var(--fpt-screen); color: var(--fpt-on); border-radius: 1.95rem; overflow: hidden; font-family: var(--body); font-size: 1rem; /* fallback where cqw is unsupported */ line-height: 1.32; letter-spacing: -.008em; } @supports (container-type: inline-size) { .fpt__screen { font-size: clamp(.9375rem, 4.9cqw, 1.0625rem); } } /* The one small size in the phone. Every label, timestamp, separator, receipt and placeholder sits here, so the screen has three sizes and no more. */ .fpt__bar, .fpt__sub, .fpt-sep, .fpt-ev, .fpt-m__tag, .fpt-m__rcpt, .fpt__field { font-size: .8em; } /* --- Status bar. Chrome, so the whole strip is aria-hidden in the markup. -- */ .fpt__bar { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .62em 1.05em .16em; color: var(--fpt-icon); font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; } .fpt__bar-icons { display: flex; align-items: center; gap: .32em; } .fpt__bar svg { display: block; } /* Icon sizes are in em so the chrome scales with the phone, not with the page. Each pair matches its viewBox ratio, so nothing is squashed. */ .fpt-ico-sig { width: 1.25em; height: .80em; } /* viewBox 17 x 11 */ .fpt-ico-wifi { width: 1.10em; height: .80em; } /* viewBox 15 x 11 */ .fpt-ico-bat { width: 1.85em; height: .82em; } /* viewBox 25 x 11 */ .fpt-ico-chev { width: .67em; height: 1.15em; } /* viewBox 11 x 19 */ .fpt-ico-plus { width: .95em; height: .95em; } /* viewBox 20 x 20 */ .fpt-ico-wave { width: 1.05em; height: .92em; } /* viewBox 16 x 14 */ /* --- Thread header. Back chevron on the left, contact centred. ----------- */ .fpt__head { position: relative; display: flex; flex-direction: column; align-items: center; gap: .16em; padding: .3em 2.6em .6em; background: var(--fpt-head); border-bottom: 1px solid var(--fpt-hrule); } .fpt__back { position: absolute; left: .78em; top: 50%; transform: translateY(-50%); color: var(--fpt-icon); display: block; } .fpt__back svg { display: block; } .fpt__ava { width: 2.15em; height: 2.15em; border-radius: 50%; background: var(--fpt-ava); color: var(--fpt-ava-ink); display: grid; place-items: center; } .fpt__ava svg { display: block; width: 100%; height: 100%; } .fpt__who { margin: 0; font-family: var(--body); font-weight: 600; font-size: .92em; line-height: 1.2; color: var(--fpt-on); text-align: center; } .fpt__sub { margin: 0; line-height: 1.25; color: var(--fpt-dim); text-align: center; } /* --- The thread ---------------------------------------------------------- */ .fpt__thread { list-style: none; margin: 0; padding: .85em .85em 0; display: flex; flex-direction: column; gap: .3em; } .fpt__thread > li { margin: 0; } /* Centred grey day and time separators, the way a phone breaks up a conversation. These carry the timing, which is the point of the module. */ .fpt-sep { align-self: center; margin: .75em 0 .35em; font-weight: 600; line-height: 1.3; color: var(--fpt-dim); text-align: center; font-variant-numeric: tabular-nums; } .fpt__thread > .fpt-sep:first-child { margin-top: .15em; } .fpt-sep b { font-weight: 700; color: var(--fpt-dim); } /* The missed call is an event in the record, not a message. Slightly brighter than the separators because it is content, not chrome. */ .fpt-ev { align-self: center; margin: .1em 0 .5em; max-width: 88%; line-height: 1.35; color: var(--fpt-dim-2); text-align: center; } /* --- Messages ------------------------------------------------------------ */ .fpt-m { display: flex; flex-direction: column; max-width: 100%; } .fpt-m--in { align-items: flex-start; } .fpt-m--out { align-items: flex-end; } .fpt-m + .fpt-m { margin-top: .22em; } /* The label that says who or what sent the message. This is where the "sent automatically" distinction lives: above the bubble, in the reading order, never crammed inside it. */ .fpt-m__tag { display: flex; align-items: center; gap: .38em; margin: .45em .35em .22em; line-height: 1.3; font-weight: 600; letter-spacing: .01em; color: var(--fpt-dim); } .fpt-m__tag--auto { color: var(--fpt-gold); } .fpt-m__tag--auto::before { content: ""; flex: none; width: .5em; height: .5em; border-radius: 50%; background: var(--fpt-gold); } .fpt-b { position: relative; margin: 0; max-width: 77%; padding: .5em .78em .56em; border-radius: 1.15em; font-size: 1em; word-wrap: break-word; overflow-wrap: anywhere; } .fpt-m--in .fpt-b { background: var(--fpt-in); color: var(--fpt-on); } .fpt-m--out .fpt-b { background: var(--fpt-green); color: var(--fpt-on); } /* The tails. Two pseudo-elements: one paints the flick in the bubble colour, the second paints a screen-coloured rectangle over it whose rounded corner bites the curve out. Pseudo-elements are not in the accessibility tree, so the tails are silent by construction. */ .fpt-b::before, .fpt-b::after { content: ""; position: absolute; bottom: 0; } .fpt-m--out .fpt-b::before { right: -.47em; width: 1.18em; height: 1.18em; background: var(--fpt-green); border-bottom-left-radius: .88em; } .fpt-m--out .fpt-b::after { right: -1.53em; width: 1.53em; height: 1.18em; background: var(--fpt-screen); border-bottom-left-radius: .6em; } .fpt-m--in .fpt-b::before { left: -.47em; width: 1.18em; height: 1.18em; background: var(--fpt-in); border-bottom-right-radius: .88em; } .fpt-m--in .fpt-b::after { left: -1.53em; width: 1.53em; height: 1.18em; background: var(--fpt-screen); border-bottom-right-radius: .6em; } /* The read or delivered line under the last sent message. */ .fpt-m__rcpt { margin: .3em .5em .15em; line-height: 1.3; font-weight: 600; color: var(--fpt-dim); font-variant-numeric: tabular-nums; } /* --- Composer and home indicator. Chrome, aria-hidden in the markup. ----- */ .fpt__comp { display: flex; align-items: center; gap: .55em; padding: .85em .8em .2em; } .fpt__plus { flex: none; width: 2.05em; height: 2.05em; border-radius: 50%; background: var(--fpt-comp); color: var(--fpt-dim-2); display: grid; place-items: center; } .fpt__field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: .5em; padding: .42em .5em .42em .78em; border: 1px solid #2E2A25; border-radius: 1.1em; color: var(--fpt-dim); line-height: 1.3; } .fpt__plus svg, .fpt__field svg { display: block; } .fpt__home { width: 36%; height: .3em; margin: .6em auto .5em; border-radius: .3em; background: #3A362F; } /* --- Module 1. Missed-call text-back ------------------------------------- The figure keeps .fpd / .fpd__head / .fpd__cap. The phone replaces the white sheet entirely: this module is the phone. ------------------------------------------------------------------------ */ .fpd--thread > .fpt { margin-top: var(--s-4); } /* --- Module 2. One inbox ------------------------------------------------- Left: the conversation list, in the white ledger card it always had. Right: the open thread, now a phone. .fpt-host goes on the
and is only there to give the container query something to measure. ------------------------------------------------------------------------ */ .fpt-host { container-type: inline-size; } .fpt-inbox { margin-top: var(--s-4); } .fpt-inbox__list { /* The list rows still read --fpd-pad, which used to come from .fpd__sheet. */ --fpd-pad: clamp(.9rem, 2.6vw, 1.4rem); background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-2); box-shadow: var(--shadow-card); overflow: hidden; } .fpt-inbox__thread { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); } @container (min-width: 50rem) { .fpt-inbox { display: grid; grid-template-columns: minmax(0, 1fr) 22.5rem; gap: clamp(1.5rem, 3vw, 2.75rem); /* The phone is much taller than the five-row list. Centring the list against it put a field of empty paper between the module's heading and the list it introduces, which breaks the one thing a heading is for. Top-aligned, the list sits under its heading and the phone runs past the bottom of it, which is what a taller object should do. */ align-items: start; } .fpt-inbox__thread { margin-top: 0; } } /* --- Motion -------------------------------------------------------------- There is none. Nothing in this component animates, transitions or moves at any viewport. The guard is stated anyway so a later edit cannot slip one in without tripping over it. ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .fpt, .fpt *, .fpt *::before, .fpt *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* --- Windows high contrast ------------------------------------------------ Forced colours flatten the bubble fills, so give the bubbles a real border and drop the tails, which would otherwise print as solid blocks. ------------------------------------------------------------------------ */ @media (forced-colors: active) { .fpt { border: 1px solid CanvasText; } .fpt-b { border: 1px solid CanvasText; } .fpt-b::before, .fpt-b::after { display: none; } .fpt__ava, .fpt__plus, .fpt__home { border: 1px solid CanvasText; } } /* ========================================================================== Motion on the ledger rows. One idea only: the rows settle in once, on load, in reading order. It is declared inside no-preference, so under prefers-reduced-motion there is no animation to disable. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { @keyframes fpd-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .fpd-list > li, .fpd-seq > li { animation: fpd-in .45s cubic-bezier(.22, .61, .36, 1) both; } .fpd-list > li:nth-child(1), .fpd-seq > li:nth-child(1) { animation-delay: .04s; } .fpd-list > li:nth-child(2), .fpd-seq > li:nth-child(2) { animation-delay: .12s; } .fpd-list > li:nth-child(3), .fpd-seq > li:nth-child(3) { animation-delay: .2s; } .fpd-list > li:nth-child(4), .fpd-seq > li:nth-child(4) { animation-delay: .28s; } .fpd-list > li:nth-child(5), .fpd-seq > li:nth-child(5) { animation-delay: .36s; } } @media (prefers-reduced-motion: reduce) { .fpd-list > li, .fpd-seq > li { animation: none; opacity: 1; transform: none; } } @media print { .fpd-list > li, .fpd-seq > li { animation: none !important; opacity: 1 !important; transform: none !important; } .fpd__sheet, .fpt-inbox__list { box-shadow: none; } } /* ========================================================================== Small placement utilities. These replace the inline styles the pages used to carry, so every rule lives in this file. ========================================================================== */ .tlink-row { margin-top: var(--s-6); } .afterfig { margin-top: clamp(3rem, 6vw, 4.5rem); } .figlabel { margin-bottom: var(--s-4); } .collabel { margin-bottom: var(--s-4); } .callout__h { margin-top: var(--s-3); } .footer__tag { font-family: var(--display); font-weight: 600; margin: var(--s-4) 0 0; } .grid--top { align-items: start; } .grid--wide { gap: clamp(2rem, 5vw, 4rem); } .lead--ink { color: var(--ink); } .aboutp { margin-top: var(--s-5); } .case--lead { border-top: 0; padding-top: 0; } .quoteline { line-height: 1.55; color: var(--ink); margin-top: var(--s-5); border-left: 2px solid var(--gold); padding-left: var(--s-4); } .quoteline--foot { margin-top: var(--s-7); } .minih { font-size: var(--t-h3); margin-bottom: var(--s-3); } .minip { color: var(--ink-2); } .calslot { margin-top: var(--s-5); } .nextblock { margin-top: var(--s-6); } .nextlist--flush { margin-top: var(--s-4); } .plain__top { max-width: 62ch; } .plain__cta { margin-top: var(--s-7); } .btn--full { width: 100%; } .form__note--flush { margin: 0; } .form__note--under { margin-top: var(--s-3); } .form__note--ruled { border-top: 1px solid var(--rule); padding-top: var(--s-4); } /* ========================================================================== Callout / CTA blocks ========================================================================== */ /* A contained object, so change order 3 section 4 still allows the tint. */ .callout { background: var(--gold-tint); border: 1px solid var(--gold-rule); border-radius: var(--r-2); padding: clamp(1.5rem, 3vw, 2.25rem); } .callout h2, .callout h3, .callout h4 { max-width: 24ch; } /* :not(.label) so the small-caps eyebrow inside a callout keeps its own colour and its own zero margin. Without it this rule out-ranks .label--gold and the eyebrow silently loses the gold. */ .callout p:not(.label) { color: var(--ink-2); max-width: 62ch; margin-top: var(--s-4); } .callout .cta-row { margin-top: var(--s-5); } /* Body size at 700 weight. A sixth type size is not worth a heading. */ .callout__hh { font-family: var(--display); font-weight: 700; font-size: var(--t-body); letter-spacing: -.012em; margin: 0 0 var(--s-3); } /* The closing block. Change order 3 section 4 put the whole site on one ground, so this is the same paper as everything else, marked instead by a heavier rule and more air. */ .endcta { border-top: 2px solid var(--ink); } .section + .section.endcta { border-top: 2px solid var(--ink); } .endcta__line { color: var(--ink-2); max-width: 62ch; margin-top: var(--s-5); } /* ========================================================================== Forms ========================================================================== */ .form { display: grid; gap: var(--s-5); } .field { display: grid; gap: .45rem; } .field label { font-family: var(--display); font-weight: 600; } .input, .select, .textarea { font-family: var(--body); font-size: var(--t-body); color: var(--ink); background: var(--card); border: 1px solid var(--rule-strong); border-radius: var(--r-1); padding: .8rem .85rem; min-height: 52px; width: 100%; } .textarea { min-height: 120px; resize: vertical; } .input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--gold); outline: 2px solid var(--gold); outline-offset: 1px; } .field--error .input, .field--error .select, .field--error .textarea { border-color: var(--error); } .err { color: var(--error); } .err[hidden] { display: none; } .form__row { display: grid; gap: var(--s-5); } @media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } } .consent { margin: 0; padding: var(--s-5); background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-2); display: grid; gap: var(--s-5); } .consent__label { margin-bottom: 0; padding: 0 .4rem; } .check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: .75rem; align-items: start; } /* --gold-ink, not --gold: the checked mark is a UI component state and has to clear 3:1. White on --gold is 2.39:1; white on --gold-ink is 6.37:1. */ .check input[type="checkbox"] { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--gold-ink); flex: none; } .check span { line-height: 1.55; color: var(--ink-2); } .check a { color: var(--ink); } .form__note { color: var(--ink-2); } .formstatus { border-left: 2px solid var(--gold); padding-left: var(--s-4); } .formstatus[hidden] { display: none; } .calendar-embed { width: 100%; min-height: 640px; border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--card); } #calendar-block[hidden], #form-embed-block[hidden], #native-form[hidden], #no-endpoint[hidden] { display: none; } /* ========================================================================== /start. The guided intake. Change order 3 section 6. One ground: everything here sits on --paper. The only tint is inside a selected option card, which is a contained object, never a band. ========================================================================== */ .start__intro { color: var(--ink-2); max-width: 54ch; margin-top: var(--s-4); } /* The