/* About, FAQ and Contact. * * These three are read, not operated, so the work is typographic: a measure * that stays comfortable, a clear hierarchy, and motion that marks structure * rather than decorating it. Everything is built from tokens.css and base.css * — the reveals are the shared data-rise / data-type system, so these pages * behave exactly like Home rather than inventing their own. */ .page-head { padding: 4.5rem 0 2.5rem; } .page-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.04; margin-top: 0.6rem; max-width: 18ch; text-wrap: balance; } .page-head .stand { font-family: var(--text); font-size: var(--text-sm); color: var(--muted); max-width: 56ch; margin-top: 1.1rem; } .page-head .ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; } /* A pulled quote carries the founding line. Amber stroke on the left, no fill: colour as stroke, never as area. */ .pull { border-left: 2px solid var(--amber); padding: 0.35rem 0 0.35rem 1.5rem; margin: 0; } .pull p { font-family: var(--serif); font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.25; text-wrap: balance; } .prose { max-width: 62ch; display: grid; gap: 1.1rem; } .prose p { font-family: var(--text); font-size: var(--text-sm); line-height: 1.65; } .story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem; align-items: start; } /* ---------- what makes us different · the dark cards ---------- Until 2026-09-02 these were a numbered index of three ranked rows on hairlines. Darrell asked for them to read exactly like "Why we exist" on the home page: same card, same type, same arrival. The ranking went with the rows — home's cards are not numbered, and three cards that all read as equals is what "match it exactly" means here. ⚠️ A DELIBERATE COPY OF HOME'S .toc, NOT A SHARED CLASS. The obvious move is to load home.css on this page and reuse .toc directly. The reason not to is that home.css is home: pulling all of it in to borrow twelve declarations puts every other home rule one specificity accident away from a page that never asked for it. These values are duplicated on purpose. home.css .toc is the original and this is the copy — change one, change both. ⚠️ THE COLUMN COUNT WAS LOAD-BEARING AND IS NOW A DESIGN CHOICE, 2026-09-03. It is left exactly as it was, and the reason it is left is no longer the reason it was written. It was three columns because checkSystem counted anything 400px wide and 160px tall as a "dark block" and permitted one per page — so /about reported four against a ceiling of one, and the 78rem measure below put each card at roughly 379px to duck under it. Darrell struck that ceiling: how many dark blocks a page carries is a visual call, not a number. So nothing forces this any more. Three still reads better than two here — three sentences of copy in a 379px card is a comfortable measure and a 600px one is not — so the layout stands on its own merits. What has gone is the claim that widening it BREAKS something. It no longer does; judge it by eye. */ .diff-grid { list-style: none; margin: 3.25rem auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; /* ⚠️ 78rem RATHER THAN THE FULL 82.5rem MEASURE, AND IT IS THE CHECK ABOVE THAT SETS THE NUMBER. At the emerald page's full width these cards come out 403px each, and checkSystem counts anything 400px wide and 160px tall as a dark BLOCK — so /about reported four of them against a ceiling of one, and it was right to. Home's .toc cards are the same 403px wide and escape on HEIGHT instead: their copy is a single line, so they never reach 160px tall. This page's copy is three sentences and always will, so height is not available here and width is. 1248px of measure puts each card at roughly 379px, which is 21px of headroom rather than a coin toss. Widen this and /about fails checkSystem. */ max-width: 78rem; } .diff-grid li { display: grid; } .diff-card { position: relative; padding: 32px; background: var(--silk); border: 1px solid var(--emerald-lit); border-radius: var(--radius); transition: box-shadow 0.3s ease; } .diff-card h3 { margin: 0; color: var(--wash); font-family: var(--sans); font-weight: 500; font-size: 0.9375rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.45; } .diff-card h3::after { content: ""; display: block; width: 34px; height: 2px; background: var(--emerald-lit); margin-top: 0.9375rem; } .diff-card p { margin: 0.9375rem 0 0; color: var(--wash); font-size: 18px; } /* ⚠️ base.css paints `p strong` in --amber-deep. That is evergreen #0A3D2B, which lands at 1.36:1 on silk — unreadable, and the identical trap emerald.css §8 records for .text-link on the velvet panel. --emerald-lit is the sanctioned dark-ground accent and measures 4.91:1 here. Home's .toc never hit this because its one-line cards carry no emphasis at all. */ .diff-card p strong { color: var(--emerald-lit); } /* hover — the glow, not a lift. Nothing moves, so nothing reflows. */ .diff-grid li:hover .diff-card { box-shadow: 0 0 0 1px var(--emerald-lit), 0 0 40px -6px color-mix(in srgb, var(--emerald-lit) 70%, transparent); } /* Arrival is the house library's, same as home: data-deal and --i on each li, driven by base.css. Nothing to add here. */ @media (max-width: 900px) { .diff-grid { grid-template-columns: 1fr; gap: 24px; } } /* The showroom strip: amber stroke-bound, the loudest object on the page. */ .strip-cta { border: 1px solid var(--amber); border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 3rem); background: var(--wash); display: grid; gap: 1.1rem; } .strip-cta h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.1; } .strip-cta .addr { font-family: var(--sans); font-size: var(--label-md); letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber-deep); } .strip-cta p { font-family: var(--text); font-size: var(--text-sm); line-height: 1.62; max-width: 62ch; } /* ---------- a link inside a sentence ---------- ⚠️ .text-link IS A CTA, AND USING IT INSIDE RUNNING PROSE IS THE BUG DARRELL REPORTED ON 2026-09-01: "the text bump overlaps the fixed text." Both halves of that are right, and there is a second half he did not have to name. It scales to 1.12 on hover, which inside a paragraph pushes the link over the words either side of it — that is the overlap. It is also uppercase Poppins at --label-md on 0.11em tracking, which in the middle of a --text-sm sentence is a different size, a different case and a different face from the words it sits between. A CTA is supposed to break out of the page. A link in a sentence is supposed to stay in it. So this is the other link type, and the two are not variants of each other: .text-link is a destination you go to, .prose-link is a word you can follow. It takes the sentence's own type and it does not move. ⚠️ THE UNDERLINE IS PERMANENT, NOT DRAWN ON HOVER, and that is the one place this deliberately does not copy .text-link. A CTA sitting alone on its own line is findable without a rule under it. A link buried in a paragraph is not, and colour alone is not allowed to be the only signal. So it starts underlined and the rule deepens on hover, instead of arriving on hover. ⚠️ text-decoration, NOT AN ::after BAR. .text-link can afford an absolutely positioned bar because it is inline-flex and never wraps. An inline link does wrap, and an absolute bar on a link broken across two lines draws one rule through the whole box rather than under each line. */ .prose-link { font: inherit; color: var(--amber-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, var(--amber) 45%, transparent); transition: text-decoration-color 0.28s var(--ease-out); } .prose-link:hover, .prose-link:focus-visible { text-decoration-color: var(--amber); } @media (prefers-reduced-motion: reduce) { .prose-link { transition: none; } } /* ---------- FAQ ---------- */ .faq-tools { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; padding-bottom: 1.25rem; } /* ⚠️ SIZED TO MATCH /rentals' .search, NOT TO ITS OWN TASTE. Darrell, 2026-08-15: "apply design changes from the Inventory/Rentals page search bar here as well." It was 1.0625rem on 0.65/0.9 padding against that field's 1rem on 0.6/0.8 — close enough that nobody would call it wrong on one page and far enough that the two never looked like the same control. /faq loads pages.css and never rentals.css, so this is a deliberate second copy of that rule rather than a shared one; rentals.css .search is the original. */ /* ⚠️ THE RESTING EDGE IS EVERGREEN, NOT THE HAIRLINE. Darrell, 2026-09-02: "let's keep this dark green ... when you click in it, let's fill that bar dark green and the typing text will be the paper white." The field is the reference the rest of .faq-tools now matches, so its edge has to be the green everything else is being pointed at. */ .faq-search { flex: 1 1 18rem; font-family: var(--text); font-size: 1rem; padding: 0.6rem 0.8rem; border: 1px solid var(--evergreen); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); transition: background-color .22s var(--ease-out), color .22s var(--ease-out); } /* ⚠️ THE FIELD FILLS. IT DOES NOT GLOW AND IT DOES NOT GO GOLD. Darrell, 2026-09-02, the same note on both search fields: "remove the glow on the search and remove the transition to the gold outline ... when you click in it, let's fill that bar dark green and the typing text will be the paper white." This replaces the gilt-border-plus-64px-halo state that landed on 2026-09-01; the history of THAT state is worth keeping, because it explains why the outline is suppressed here rather than restyled — the field's own border is set in this file at (0,2,0), and `body.em :focus-visible` sets outline-color to --gilt at (0,2,1). The theme wins on colour, so a focused field wore its own edge AND a gold ring floating 2px off it. `outline: none` in the shorthand sets outline-STYLE, which the theme rule never touches, so the ring goes and the state is carried by the fill. ⚠️ THE FILL IS THE INDICATOR AND IT IS A BIGGER ONE THAN THE RING WAS. Evergreen against paper is 12.2:1, which is four times the 3:1 that SC 1.4.11 asks of a non-text state change, and it moves the whole control rather than one hairline. Paper on evergreen is 12.2:1 for the text she types. ⚠️ THE PLACEHOLDER HAS TO MOVE WITH THE GROUND. Left alone it stays the muted taupe it is on paper and lands at roughly 1.4:1 on evergreen — readable in the mockup only because the field is usually empty by the time anyone looks. Mist mixed back into the ground holds ~6:1. ⚠️ forced-colors PUTS THE OUTLINE BACK. In High Contrast the OS repaints background and border from its own palette, so the fill stops being a state change at all and `outline: none` would leave nothing. */ .faq-search:focus-visible { outline: none; background: var(--evergreen); border-color: var(--evergreen); color: var(--paper); caret-color: var(--paper); } .faq-search:focus-visible::placeholder { color: color-mix(in srgb, var(--wash) 70%, var(--evergreen)); } @media (forced-colors: active) { .faq-search:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; } } .faq-count { font-family: var(--sans); font-size: var(--label-sm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; } /* ⚠️ THE UNDERLINE IS EVERGREEN, NOT EMERALD. Darrell, 2026-09-02, pointing at .faq-tools: "make all of the dark green the darkest green we have so it matches the search." The label was already --amber-deep, which IS #0A3D2B — the underline was the one thing in this row still on --amber (#0E5F41), and two greens a step apart in one control read as a mistake rather than a hierarchy. The search field's edge above is the reference. */ .faq-expand { background: none; border: 0; border-bottom: 1px solid var(--evergreen); padding: 0 0 1px; cursor: pointer; font-family: var(--sans); font-size: var(--label-sm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--evergreen); } .faq-list { border-top: 1px solid var(--rule-line); } .faq-item { border-bottom: 1px solid var(--rule-line); } .faq-item[hidden] { display: none; } .faq-q { width: 100%; display: flex; align-items: baseline; gap: 1rem; background: none; border: 0; padding: 1.35rem 0; cursor: pointer; text-align: left; font-family: var(--serif); font-weight: 400; font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.3; color: var(--ink); } .faq-q:hover { color: var(--amber-deep); } .faq-q .mark { margin-left: auto; flex: none; width: 1.1rem; height: 1.1rem; position: relative; align-self: center; } /* A plus that becomes a minus. Two rules, one rotating — cheaper to read than a chevron, and it says "more of this" rather than "somewhere else". */ .faq-q .mark::before, .faq-q .mark::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 1px; background: var(--amber-deep); transition: transform 0.32s var(--ease-out); } .faq-q .mark::after { transform: rotate(90deg); } .faq-q[aria-expanded="true"] .mark::after { transform: rotate(0deg); } .faq-a { overflow: hidden; height: 0; transition: height 0.34s var(--ease-out); } .faq-a p { font-family: var(--text); font-size: var(--text-sm); line-height: 1.66; color: var(--muted); max-width: 68ch; padding-bottom: 1.45rem; } @media (prefers-reduced-motion: reduce) { .faq-a { transition: none; } .faq-q .mark::before, .faq-q .mark::after { transition: none; } } .faq-none { padding: 2.5rem 0; font-family: var(--text); font-style: italic; color: var(--muted); } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3rem; align-items: start; } .form-card { border: 1px solid var(--rule-line); border-radius: var(--radius); background: var(--paper); padding: clamp(1.5rem, 3vw, 2.25rem); } .form-card h2 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; margin-bottom: 1.25rem; } .field { display: grid; gap: 0.35rem; margin-bottom: 1.1rem; } .field label { font-family: var(--sans); font-size: var(--label-sm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .field input, .field select, .field textarea { font-family: var(--text); font-size: 1.0625rem; padding: 0.65rem 0.8rem; border: 1px solid var(--rule-line); border-radius: var(--radius-sm); background: var(--ground); color: var(--ink); } .field textarea { min-height: 7rem; resize: vertical; } /* ---------- a checkbox inside a field ---------- ⚠️ A SECOND COPY OF design.css's .sendcheck, NOT A SHARED RULE. /contact loads pages.css and never design.css, the same split .diff-grid lives with. The values are deliberately identical: this control asks the same question the canvas asks, in the same words, and two treatments of one question is how a visitor learns the two forms are unrelated when they are not. ⚠️ IT HAS TO OUT-SPECIFY .field's OWN INPUT RULE, which gives every input in a field a border and 0.65rem of padding. On a checkbox that is a large grey rounded rectangle with a tick lost inside it. And `.field label` is uppercase tracked, which is right for a field name and wrong for a sentence somebody reads. Both are undone below rather than weakened where they are. */ .field-check { display: flex; align-items: center; gap: .5rem; margin-top: .2rem; } .field-check label { font-family: var(--text); font-size: .92rem; color: var(--ink); text-transform: none; letter-spacing: 0; cursor: pointer; } .field .field-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex: none; margin: 0; padding: 0; border: 1px solid var(--rule-line); border-radius: var(--radius-sm); background: var(--paper); cursor: pointer; position: relative; transition: border-color .15s, background .15s; } .field .field-check input[type="checkbox"]:hover { border-color: var(--amber); } .field .field-check input[type="checkbox"]:checked { background: var(--amber); border-color: var(--amber); } /* Drawn rather than a glyph, so it scales with the box instead of depending on a font that may not have loaded. */ .field .field-check input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg); } .field-help { font-family: var(--text); font-style: italic; font-size: .9rem; color: var(--muted); margin: .15rem 0 .1rem; } .field-help[hidden] { display: none; } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; } .form-note { font-family: var(--text); font-size: 1rem; color: var(--muted); margin-top: 0.75rem; } .aside-block { display: grid; gap: 1.75rem; align-content: start; } .aside-block h2 { font-family: var(--sans); font-size: var(--label-xs); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; } .aside-block p, .aside-block a { font-family: var(--text); font-size: var(--text-sm); line-height: 1.6; } .aside-block .notice { border: 1px solid var(--amber); border-radius: var(--radius); background: var(--wash); padding: 1.1rem 1.25rem; } @media (max-width: 60rem) { .story, .contact-grid { grid-template-columns: 1fr; gap: 2rem; } } /* ============================================================ THE EMERALD GROUND — About, FAQ, Contact ============================================================ Everything above this line is Honey Pulse composition and is token-driven, so it re-skins for free the moment a page carries body.em. This block is only the parts a token cannot express: the compositions the 2026 system asks for that Honey Pulse had no equivalent of. ⚠️ THIS FILE HAD ZERO HARDCODED COLOUR BEFORE THIS BLOCK AND STILL DOES. That is not a coincidence, it is the reason the migration is a hundred lines rather than a thousand, and it is worth keeping: if you need a colour here, add a token in emerald.css and read it. The moment one hex lands in this file, the next palette costs a search instead of an edit. The system's skeletons, and which page is which: 02 SERVICE — paper masthead, content on paper, one dark finale. About and FAQ. "Service" is the system's word for a page that explains one thing and then asks. 04 CONTACT — the dark block is the HERO, at the top, and the form sits on paper below it. Contact only. The reasoning is in the system doc: by the time someone is on Contact they have decided, so the loud moment confirms they are in the right place and then gets out of the form's way. ============================================================ */ /* ---------- the masthead (02 SERVICE) ---------- The same 55/45 the homepage settled on, so the two do not disagree about what a KMC page looks like at the top. Copy left, media right, and the BOX owns the ratio — a