/* ============================================================= DESIGN TOKENS Palette: deep pine + bone paper + brass. Chosen because U.S. brokerage signage lives in that register, and because it keeps the site out of the generic "startup blue" range. ============================================================= */ :root { --ink: #0D1F1B; --pine: #17362E; --pine-soft: #24473D; --paper: #EFEEE8; --chalk: #FBFAF7; --brass: #B98D4A; --brass-lite: #D8B87C; --moss: #6C7F74; /* Channel values, so translucent colours follow the theme as well. Every rgba() in this file references one of these rather than a hardcoded triplet — that is what makes a theme swap complete instead of half-applied. */ --ink-rgb: 13, 31, 27; --paper-rgb: 239, 238, 232; --brass-rgb: 185, 141, 74; --brass-lite-rgb: 216, 184, 124; --line: rgba(var(--ink-rgb), 0.14); --line-soft: rgba(var(--ink-rgb), 0.07); --line-light: rgba(var(--paper-rgb), 0.18); /* --display, --body, --mono, --radius and --tracking are supplied by the active theme in the . The values here are only fallbacks for the case where the theme block fails to load. */ --display: "Helvetica Neue", Arial, sans-serif; --body: Georgia, "Times New Roman", serif; --mono: ui-monospace, Menlo, monospace; --tracking: -0.022em; --shell: 1180px; --gutter: clamp(1.25rem, 5vw, 3rem); --radius: 4px; --step-1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem); --step-0: clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem); --step-1u: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); --step-2: clamp(1.45rem, 1.28rem + 0.85vw, 2rem); --step-3: clamp(1.85rem, 1.5rem + 1.7vw, 2.9rem); --step-4: clamp(2.3rem, 1.7rem + 2.9vw, 4.1rem); } /* ============================================================= BASE ============================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--step-0); font-weight: 400; line-height: 1.66; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.08; letter-spacing: var(--tracking); margin: 0; text-wrap: balance; } p { margin: 0 0 1.05em; } p:last-child { margin-bottom: 0; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--chalk); padding: 0.7rem 1.1rem; z-index: 999; font-family: var(--mono); font-size: 0.8rem; } .skip-link:focus { left: 0; } .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } /* ============================================================= THE STRUCTURAL DEVICE Mono field labels borrowed from MLS listing sheets. They mark every section and every data pair on the site. ============================================================= */ .field-label { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--moss); margin: 0 0 0.85rem; display: flex; align-items: center; gap: 0.65rem; } .field-label::before { content: ""; width: 22px; height: 1px; background: currentColor; flex: none; } .field-label--brass { color: var(--brass-text, var(--brass)); } .field-label--light { color: var(--brass-lite); } /* ============================================================= BUTTONS ============================================================= */ .btn { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; padding: 0.95rem 1.5rem; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease; } .btn:hover { transform: translateY(-2px); } .btn--solid { background: var(--ink); color: var(--chalk); } .btn--solid:hover { background: var(--pine-soft); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover { border-color: var(--ink); } .btn--brass { background: var(--brass); color: var(--ink); } .btn--brass:hover { background: var(--brass-lite); } .btn--ghost-light { background: transparent; color: var(--chalk); border-color: var(--line-light); } .btn--ghost-light:hover { border-color: var(--brass-lite); color: var(--brass-lite); } /* ============================================================= MASTHEAD + NAV ============================================================= */ .masthead { position: sticky; top: 0; z-index: 60; background: rgba(var(--paper-rgb), 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; } .brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; } .brand__mark { width: 46px; height: 46px; flex: none; display: block; } .brand__mark--lg { width: 60px; height: 60px; } .brand__text { display: flex; flex-direction: column; line-height: 1.25; } .brand__name { font-family: var(--body); font-weight: 500; font-size: 0.97rem; letter-spacing: 0.13em; text-transform: uppercase; } .brand__role { font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--moss); } .nav__list { display: flex; align-items: center; gap: 0.35rem; } .nav__link { display: block; text-decoration: none; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.6rem 0.75rem; color: var(--pine); border-radius: var(--radius); transition: color .2s ease, background-color .2s ease; } .nav__link:hover { background: rgba(var(--ink-rgb), 0.06); } .nav__link.is-current { color: var(--ink); background: rgba(var(--brass-rgb), 0.18); } .nav-toggle { display: none; align-items: center; gap: 0.6rem; background: transparent; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem 0.85rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); cursor: pointer; } .nav-toggle__bars { position: relative; width: 16px; height: 9px; display: block; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform .25s ease; } .nav-toggle__bars::before { top: 0; } .nav-toggle__bars::after { bottom: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(4px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-4px) rotate(-45deg); } /* ============================================================= SECTIONS ============================================================= */ .section { padding-block: clamp(3.5rem, 8vw, 6.5rem); } .section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); } .section--chalk { background: var(--chalk); border-block: 1px solid var(--line-soft); } .section--dark { background: var(--ink); color: var(--paper); } .section--dark .section-head__intro { color: rgba(var(--paper-rgb), 0.72); } .section-head { max-width: 44ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); } .section-head__title { font-size: var(--step-3); } .section-head__intro { margin-top: 1.1rem; font-size: var(--step-1u); line-height: 1.55; color: var(--pine); font-weight: 300; } /* ============================================================= HOME HERO — built as a listing sheet: the pitch on the left, the "property data" panel on the right. ============================================================= */ .hero { position: relative; background: var(--ink); color: var(--paper); padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3.5rem, 8vw, 6rem); overflow: hidden; } .hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line-light) 1px, transparent 1px), linear-gradient(90deg, var(--line-light) 1px, transparent 1px); background-size: 78px 78px; mask-image: radial-gradient(ellipse 75% 65% at 68% 8%, #000 0%, transparent 78%); pointer-events: none; } .hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .hero__title { font-size: var(--step-4); font-weight: 800; max-width: 15ch; } .hero__title em { font-family: var(--body); font-style: italic; font-weight: 300; letter-spacing: -0.005em; color: var(--brass-lite); } .hero__lead { margin-top: 1.6rem; font-size: var(--step-1u); font-weight: 300; line-height: 1.55; max-width: 46ch; color: rgba(var(--paper-rgb), 0.74); } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.1rem; } .hero__credit { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line-light); font-family: var(--mono); font-size: 0.74rem; line-height: 1.9; letter-spacing: 0.04em; color: rgba(var(--paper-rgb), 0.5); } /* The listing-sheet panel */ .sheet { background: var(--chalk); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55); overflow: hidden; } .sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.25rem; background: var(--ink); color: var(--paper); } .sheet__ref { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-lite); } .sheet__status { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; } .sheet__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brass-lite); box-shadow: 0 0 0 0 rgba(var(--brass-lite-rgb), 0.7); animation: pulse 2.6s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--brass-lite-rgb), 0.65); } 70% { box-shadow: 0 0 0 9px rgba(var(--brass-lite-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--brass-lite-rgb), 0); } } .sheet__rows { padding: 0.4rem 1.25rem 1.1rem; } .sheet__row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; } .sheet__row:last-child { border-bottom: 0; } .sheet__key { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--moss); } .sheet__val { font-size: 0.97rem; line-height: 1.5; } .sheet__foot { padding: 1rem 1.25rem; background: rgba(var(--brass-rgb), 0.12); border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.7rem; line-height: 1.7; letter-spacing: 0.05em; color: var(--pine); } /* ============================================================= PAGE HERO (interior pages) ============================================================= */ .page-hero { background: var(--ink); color: var(--paper); padding-block: clamp(3rem, 7vw, 5rem); border-bottom: 1px solid var(--ink); } .page-hero__inner { max-width: 58ch; } .page-hero__title { font-size: var(--step-4); font-weight: 800; } .page-hero__lead { margin-top: 1.4rem; font-size: var(--step-1u); font-weight: 300; line-height: 1.55; color: rgba(var(--paper-rgb), 0.76); } /* ============================================================= PIPELINE — the signature element. Attract to Convert, shown as a routed track because that is literally what the system is. ============================================================= */ .pipeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-light); margin-top: 1rem; } .stage { position: relative; padding: 2.2rem 1.1rem 0.5rem 0; border-right: 1px solid var(--line-light); } .stage:last-child { border-right: 0; } .stage::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); border: 1.5px solid var(--brass); } .section--dark .stage::before { background: var(--ink); } .stage__name { font-family: var(--display); font-size: var(--step-1u); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; } .stage__note { font-size: 0.88rem; line-height: 1.55; color: rgba(var(--paper-rgb), 0.6); margin: 0; } .pipeline-track { position: relative; height: 1px; background: var(--line-light); margin-top: 2.5rem; overflow: hidden; } .pipeline-track::after { content: ""; position: absolute; top: -1px; left: 0; width: 22%; height: 3px; background: linear-gradient(90deg, transparent, var(--brass), transparent); animation: run 5.5s linear infinite; } @keyframes run { from { transform: translateX(-120%); } to { transform: translateX(560%); } } /* ============================================================= CARDS + GRIDS ============================================================= */ .grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card { background: var(--chalk); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 2.6vw, 2.1rem); position: relative; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } .card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 34px; height: 3px; background: var(--brass); transition: width .3s ease; } .card:hover { transform: translateY(-4px); border-color: rgba(var(--ink-rgb), 0.28); box-shadow: 0 20px 40px -30px rgba(var(--ink-rgb), 0.6); } .card:hover::before { width: 76px; } .card__tag { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-text, var(--brass)); margin-bottom: 0.85rem; } .card__title { font-size: var(--step-1u); margin-bottom: 0.7rem; } .card__desc { color: var(--pine); font-size: 0.98rem; } .tick-list { margin-top: 1.1rem; display: grid; gap: 0.42rem; } .tick-list li { position: relative; padding-left: 1.15rem; font-size: 0.9rem; line-height: 1.5; color: var(--pine); } .tick-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; background: var(--brass); border-radius: 1px; } /* ============================================================= SPLIT (text + data pairs) ============================================================= */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .split__body p { font-size: 1.06rem; color: var(--pine); } .pairs { border-top: 1px solid var(--line); } .pairs__row { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1.25rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); align-items: baseline; } .pairs__key { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--brass-text, var(--brass)); } .pairs__val { font-size: 0.98rem; line-height: 1.55; color: var(--pine); } /* ============================================================= NUMBERED SEQUENCE (the process — order genuinely matters) ============================================================= */ .steps { counter-reset: step; border-top: 1px solid var(--line); } .step { display: grid; grid-template-columns: 5rem minmax(0, 15rem) minmax(0, 1fr); gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); align-items: baseline; transition: background-color .25s ease; } .step:hover { background: rgba(var(--brass-rgb), 0.07); } .step__num { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; color: var(--brass); } .step__title { font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.015em; } .step__desc { margin: 0; font-size: 0.97rem; color: var(--pine); } /* ============================================================= CHIPS (capability lists) ============================================================= */ .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .chips li { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; padding: 0.45rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--chalk); color: var(--pine); } .section--dark .chips li { background: transparent; border-color: var(--line-light); color: rgba(var(--paper-rgb), 0.82); } .stack-block { padding: 1.6rem 0; border-bottom: 1px solid var(--line); } .stack-block:last-child { border-bottom: 0; } .stack-block__name { font-family: var(--display); font-weight: 700; font-size: 1.05rem; } /* ============================================================= FAQ ============================================================= */ .faq { border-top: 1px solid var(--line); max-width: 78ch; } .faq__item { border-bottom: 1px solid var(--line); } .faq__q { display: flex; align-items: baseline; gap: 1rem; padding: 1.4rem 0; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.015em; transition: color .2s ease; } .faq__q::-webkit-details-marker { display: none; } .faq__q:hover { color: var(--brass); } .faq__q::after { content: "+"; margin-left: auto; font-family: var(--mono); font-weight: 400; font-size: 1.15rem; color: var(--brass); transition: transform .25s ease; flex: none; } .faq__item[open] .faq__q::after { transform: rotate(45deg); } .faq__n { font-family: var(--mono); font-size: 0.72rem; color: var(--brass); flex: none; } .faq__a { padding: 0 0 1.6rem 3.05rem; max-width: 68ch; color: var(--pine); font-size: 0.99rem; } /* ============================================================= CONTACT FORM ============================================================= */ .form-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } .form { display: grid; gap: 1.15rem; } .form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; } .field { display: grid; gap: 0.45rem; } .field > label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--moss); } .field input, .field select, .field textarea { font-family: var(--body); font-size: 1rem; color: var(--ink); background: var(--chalk); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.82rem 0.95rem; width: 100%; transition: border-color .2s ease, box-shadow .2s ease; } .field textarea { min-height: 170px; resize: vertical; line-height: 1.6; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(var(--brass-rgb), 0.18); outline: none; } .field--hp { position: absolute; left: -9999px; } .form__consent { font-family: var(--mono); font-size: 0.72rem; line-height: 1.7; color: var(--moss); } .notice { border: 1px solid var(--line); border-left: 3px solid var(--brass); background: var(--chalk); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 1.75rem; font-size: 0.97rem; } .notice--ok { border-left-color: #3F7A5E; } .notice--bad { border-left-color: #A5442F; } .notice__title { font-family: var(--display); font-weight: 700; display: block; margin-bottom: 0.25rem; } .contact-aside { background: var(--chalk); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2rem); } .contact-aside .pairs { border-top: 0; } .contact-aside .pairs__row { grid-template-columns: 1fr; gap: 0.25rem; padding: 0.95rem 0; } .contact-aside .pairs__row:last-child { border-bottom: 0; } .contact-aside a { color: var(--pine); } /* ============================================================= CTA BAND ============================================================= */ .cta-band { background: var(--ink); color: var(--paper); padding-block: clamp(3rem, 6vw, 4.75rem); } .cta-band__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; } .cta-band__title { font-size: var(--step-3); max-width: 22ch; } .cta-band__text { margin-top: 1rem; max-width: 52ch; color: rgba(var(--paper-rgb), 0.72); font-weight: 300; } .cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* ============================================================= FOOTER ============================================================= */ .footer { background: var(--pine); color: rgba(var(--paper-rgb), 0.8); padding-block: clamp(2.75rem, 5vw, 4rem) 2rem; } .footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr) minmax(0, 0.7fr); gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-light); } .footer__pitch { margin-top: 1.1rem; font-size: 1.05rem; max-width: 38ch; color: var(--paper); font-weight: 300; } .footer__meta { font-family: var(--mono); font-size: 0.72rem; line-height: 1.9; letter-spacing: 0.04em; color: rgba(var(--paper-rgb), 0.55); } .footer .field-label { color: var(--brass-lite); } .footer__links { display: grid; gap: 0.55rem; } .footer__links a { text-decoration: none; font-size: 0.94rem; transition: color .2s ease; } .footer__links a:hover { color: var(--brass-lite); } .footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.75rem; } .footer__note { max-width: 66ch; font-family: var(--mono); font-size: 0.7rem; line-height: 1.8; color: rgba(var(--paper-rgb), 0.5); } .footer__copy { font-family: var(--mono); font-size: 0.7rem; color: rgba(var(--paper-rgb), 0.5); } /* ============================================================= SCROLL REVEAL ============================================================= */ .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } .js .reveal.is-visible { opacity: 1; transform: none; } /* ============================================================= RESPONSIVE ============================================================= */ @media (max-width: 1000px) { .hero__inner { grid-template-columns: 1fr; } .pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stage:nth-child(3) { border-right: 0; } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-wrap { grid-template-columns: 1fr; } .cta-band__inner { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } } @media (max-width: 780px) { .nav-toggle { display: inline-flex; } .nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--chalk); border-bottom: 1px solid var(--line); display: none; padding: 0.75rem var(--gutter) 1.25rem; } .nav.is-open { display: block; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; } .nav__link { padding: 0.9rem 0.25rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; } .brand__role { display: none; } .split { grid-template-columns: 1fr; } .grid--2, .grid--3 { grid-template-columns: 1fr; } .pipeline { grid-template-columns: 1fr; border-top: 0; } .stage { border-right: 0; border-top: 1px solid var(--line-light); padding: 1.75rem 0 1.5rem; } .stage::before { top: -6px; } .pipeline-track { display: none; } .step { grid-template-columns: 3.25rem minmax(0, 1fr); row-gap: 0.4rem; } .step__desc { grid-column: 2; } .pairs__row { grid-template-columns: 1fr; gap: 0.35rem; } .sheet__row { grid-template-columns: 1fr; gap: 0.3rem; } .form__row { grid-template-columns: 1fr; } .faq__a { padding-left: 0; } .footer__grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .js .reveal { opacity: 1; transform: none; } } /* Sheet header sits on a dark hero, so it takes a brass keyline */ .hero .sheet__head { border-bottom: 1px solid rgba(var(--brass-rgb), 0.5); } /* ============================================================= CHAIN — the website-first sequence on the luxury page ============================================================= */ .chain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: chain; margin: 0; padding: 0; list-style: none; } .chain__link { position: relative; display: flex; flex-direction: column; gap: 0.7rem; padding: 1.75rem 1.25rem 1.75rem 0; border-top: 1px solid var(--line-light); border-right: 1px solid var(--line-light); } .chain__link:nth-child(4n) { border-right: 0; } .chain__num { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--brass); } .chain__name { font-family: var(--display); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.018em; line-height: 1.25; } @media (max-width: 780px) { .chain { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chain__link:nth-child(4n) { border-right: 1px solid var(--line-light); } .chain__link:nth-child(2n) { border-right: 0; } } /* ============================================================= DIAGNOSTIC — the interactive module on the home page. Choices on the left read as quoted client sentences; the panel on the right gives our reading of that symptom. ============================================================= */ .dx { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; } .dx__choices { display: grid; gap: 0; border-top: 1px solid var(--line); } .dx__choice { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.85rem; align-items: baseline; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 1.1rem 0.75rem 1.1rem 0; cursor: pointer; font-family: var(--body); font-size: 1rem; line-height: 1.45; color: var(--pine); transition: background-color .2s ease, color .2s ease, padding-left .2s ease; } .dx__choice:hover { background: rgba(var(--brass-rgb), 0.08); padding-left: 0.5rem; } .dx__choice.is-active { color: var(--ink); background: rgba(var(--brass-rgb), 0.14); padding-left: 0.5rem; box-shadow: inset 3px 0 0 var(--brass); } .dx__choice-num { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--brass); } .dx__choice-text { font-style: italic; } .dx__panels { position: relative; } .dx__panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); animation: dxfade .35s ease; } .dx__panel[hidden] { display: none; } @keyframes dxfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .dx__verdict { font-family: var(--display); font-weight: 700; font-size: var(--step-2); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 0.9rem; } .dx__reading { color: var(--pine); margin: 0; } .dx__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.75rem 0 0; } /* ============================================================= FILTER CHIPS — services and FAQ ============================================================= */ .filterbar { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); } .filterbar__buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; } .chip-btn { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.6rem 0.95rem; border: 1px solid var(--line); border-radius: 999px; background: var(--chalk); color: var(--pine); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .chip-btn:hover { border-color: var(--ink); } .chip-btn.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); } .chip-btn__n { font-size: 0.66rem; opacity: 0.55; } .filterbar__status { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--moss); margin: 0.9rem 0 0; min-height: 1.2em; } .card[hidden] { display: none; } /* ============================================================= FAQ TOOLS ============================================================= */ .faq-tools { max-width: 78ch; margin-bottom: 2rem; } .faq-search { margin-bottom: 1.1rem; max-width: 30rem; } .faq__item[hidden] { display: none; } .faq__topic { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-text, var(--brass)); margin-bottom: 0.5rem; } .faq__empty { padding: 2rem 0; color: var(--moss); font-style: italic; } @media (max-width: 900px) { .dx { grid-template-columns: 1fr; } } /* ============================================================= ASSISTANT A guided-choice sales assistant. Deliberately restrained: no bouncing launcher, no auto-opening popup, no manufactured urgency. It waits to be asked. ============================================================= */ .assistant { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; } .assistant__launcher { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 999px; padding: 0.85rem 1.35rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer; box-shadow: 0 18px 34px -22px rgba(var(--ink-rgb), 0.8); transition: background-color .22s ease, transform .22s ease; } .assistant__launcher:hover { background: var(--pine-soft); transform: translateY(-2px); } .assistant__launcher-mark { display: grid; place-items: center; color: var(--brass-lite); } .assistant__panel { width: min(30rem, calc(100vw - 2rem)); height: min(37rem, calc(100vh - 8rem)); display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(var(--ink-rgb), 0.75); animation: assistantIn .28s ease; } .assistant__panel[hidden] { display: none; } @keyframes assistantIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .assistant__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.15rem; background: var(--ink); color: var(--paper); flex: none; } .assistant__title { margin: 0; font-family: var(--body); font-size: 0.9rem; letter-spacing: 0.13em; text-transform: uppercase; } .assistant__sub { margin: 0.15rem 0 0; font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.08em; color: var(--brass-lite); } .assistant__close { background: transparent; border: 0; color: var(--paper); font-size: 1.5rem; line-height: 1; padding: 0.15rem 0.4rem; cursor: pointer; border-radius: 3px; } .assistant__close:hover { color: var(--brass-lite); } .assistant__log { flex: 1 1 auto; overflow-y: auto; padding: 1.15rem; display: flex; flex-direction: column; gap: 0.85rem; } .msg { display: flex; } .msg--bot { justify-content: flex-start; } .msg--user { justify-content: flex-end; } .msg__body { max-width: 88%; padding: 0.85rem 1rem; border-radius: 6px; font-size: 0.94rem; line-height: 1.6; } .msg--bot .msg__body { background: var(--chalk); border: 1px solid var(--line); color: var(--ink); } .msg--user .msg__body { background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.03em; line-height: 1.55; } .msg__body p { margin: 0 0 0.6rem; } .msg__body p:last-child { margin-bottom: 0; } .msg__verdict { font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.018em; line-height: 1.2; } .msg__label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); margin: 0.9rem 0 0.4rem !important; } .msg__list { margin: 0; display: grid; gap: 0.3rem; } .msg__list li { position: relative; padding-left: 0.95rem; font-size: 0.88rem; line-height: 1.5; color: var(--pine); } .msg__list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 4px; height: 4px; background: var(--brass); border-radius: 1px; } .msg__steps { margin: 0.5rem 0 0; padding-left: 1.15rem; display: grid; gap: 0.35rem; font-size: 0.87rem; line-height: 1.5; color: var(--pine); } .assistant__choices { flex: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.9rem 1.15rem; border-top: 1px solid var(--line); background: var(--chalk); max-height: 12rem; overflow-y: auto; } .assistant__choice { display: inline-block; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 0.55rem 0.9rem; font-family: var(--body); font-size: 0.85rem; line-height: 1.35; color: var(--ink); cursor: pointer; text-decoration: none; transition: background-color .18s ease, border-color .18s ease, color .18s ease; } .assistant__choice:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } .assistant__choice--subtle { color: var(--moss); font-size: 0.8rem; } .assistant__choice--link { border-style: dashed; } .assistant__foot { flex: none; display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 1.15rem; border-top: 1px solid var(--line); background: var(--paper); } .assistant__foot-btn { background: none; border: 0; padding: 0; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--moss); cursor: pointer; text-decoration: none; } .assistant__foot-btn:hover { color: var(--ink); } /* Search inside the assistant */ .assistant__search { width: 100%; font-family: var(--body); font-size: 0.9rem; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); } .assistant__search:focus { border-color: var(--brass); outline: none; box-shadow: 0 0 0 3px rgba(var(--brass-rgb), .18); } .assistant__results { display: grid; gap: 0.3rem; margin-top: 0.6rem; } .assistant__result { text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 0.5rem 0.7rem; font-family: var(--body); font-size: 0.85rem; line-height: 1.4; color: var(--ink); cursor: pointer; } .assistant__result:hover { border-color: var(--ink); } .assistant__none { font-style: italic; color: var(--moss); font-size: 0.85rem; } /* Lead capture form */ .assistant__form { display: grid; gap: 0.7rem; } .assistant__field { display: grid; gap: 0.3rem; } .assistant__field label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--moss); } .assistant__field input { font-family: var(--body); font-size: 0.92rem; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); } .assistant__field input:focus { border-color: var(--brass); outline: none; box-shadow: 0 0 0 3px rgba(var(--brass-rgb), .18); } .assistant__hp { position: absolute; left: -9999px; width: 1px; height: 1px; } .assistant__note { font-family: var(--mono); font-size: 0.62rem; color: var(--moss); margin: 0 !important; } .assistant__submit { justify-self: start; background: var(--ink); color: var(--paper); border: 0; border-radius: 4px; padding: 0.65rem 1.1rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer; } .assistant__submit:disabled { opacity: 0.6; cursor: default; } .assistant__status { font-size: 0.82rem; color: #A5442F; margin: 0 !important; } .assistant__done { font-size: 0.9rem; color: var(--pine); margin: 0 !important; } @media (max-width: 560px) { .assistant { left: 1rem; right: 1rem; align-items: stretch; } .assistant__panel { width: 100%; height: min(32rem, calc(100vh - 7rem)); } .assistant__launcher { justify-content: center; } .assistant.is-open .assistant__launcher { display: none; } } @media (prefers-reduced-motion: reduce) { .assistant__panel { animation: none; } } /* Body copy inside a dark section must not inherit the light-background colour, or it renders pine-on-ink and effectively disappears. */ .section--dark .split__body p, .section--dark .pairs__val { color: rgba(var(--paper-rgb), 0.74); } .section--dark .pairs, .section--dark .pairs__row { border-color: var(--line-light); } .section--dark .sheet__val { color: var(--ink); } /* ============================================================= TESTIMONIALS Set as pull quotes rather than cards with star ratings. At this level of the market a review-site aesthetic reads as cheap. ============================================================= */ .quotes { align-items: start; } .quote { margin: 0; padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); position: relative; } .quote::before { content: ""; position: absolute; top: -1px; left: -1px; width: 34px; height: 3px; background: var(--brass); } .quote__text { margin: 0; } .quote__text p { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.32rem); line-height: 1.55; font-weight: 300; color: var(--ink); text-wrap: pretty; } .quote__text p::before { content: "\201C"; } .quote__text p::after { content: "\201D"; } .quote__by { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); display: grid; gap: 0.2rem; } .quote__name { font-family: var(--body); font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; } .quote__role, .quote__detail { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--moss); line-height: 1.7; } .quote__detail { color: var(--brass-text, var(--brass)); } /* ============================================================= HERO VIDEO BACKGROUND The poster is always present underneath. The video fades in on top once it can actually play, so there is never a flash of empty space and never a layout shift. ============================================================= */ .hero-video { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: var(--ink); } .hero-video__poster, .hero-video__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; } .hero-video__media { opacity: 0; transition: opacity .9s ease; } .hero-video__media.is-playing { opacity: 1; } /* The scrim. Two layers: a vertical gradient for overall control, and a stronger wash on the left where the headline sits. Tested against the brightest frame of the loop, not an average one. */ .hero-video__scrim { position: absolute; inset: 0; pointer-events: none; } .hero-video__scrim::before, .hero-video__scrim::after { content: ""; position: absolute; inset: 0; } .hero-video--light .hero-video__scrim::before { background: linear-gradient(180deg, rgba(var(--ink-rgb), .55) 0%, rgba(var(--ink-rgb), .34) 100%); } .hero-video--medium .hero-video__scrim::before { background: linear-gradient(180deg, rgba(var(--ink-rgb), .74) 0%, rgba(var(--ink-rgb), .50) 100%); } .hero-video--heavy .hero-video__scrim::before { background: linear-gradient(180deg, rgba(var(--ink-rgb), .85) 0%, rgba(var(--ink-rgb), .66) 100%); } /* Extra density behind the text column only */ .hero-video__scrim::after { background: linear-gradient(90deg, rgba(var(--ink-rgb), .62) 0%, rgba(var(--ink-rgb), .34) 46%, rgba(var(--ink-rgb), 0) 72%); } /* Lift the hero content above the video */ .hero__inner { position: relative; z-index: 2; } /* The decorative grid sits between video and text, softened so it does not fight the footage */ .hero:has(.hero-video)::after { opacity: .45; z-index: 1; } @media (max-width: 780px) { /* Phones keep the poster only — the video is never requested */ .hero-video__media { display: none; } .hero-video__scrim::after { background: linear-gradient(90deg, rgba(var(--ink-rgb), .55) 0%, rgba(var(--ink-rgb), .42) 100%); } } @media (prefers-reduced-motion: reduce) { .hero-video__media { display: none; } } /* ============================================================= MOBILE BROWSER CHROME FIXES ------------------------------------------------------------- On phones, 100vh is the height of the viewport WITHOUT the browser's address and toolbar. A fixed element pinned to the bottom therefore sits underneath that toolbar and cannot be seen or tapped. dvh tracks the visible area instead, and the safe-area inset clears the home indicator on newer phones. ============================================================= */ .assistant { bottom: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-bottom, 0px)); right: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-right, 0px)); } @supports (height: 100dvh) { .assistant__panel { height: min(37rem, calc(100dvh - 8rem)); } } @media (max-width: 560px) { /* Keep the launcher as a compact pill on the right rather than a full-width bar, so it reads as a chat affordance and not as part of the page. */ .assistant { left: auto; right: calc(1rem + env(safe-area-inset-right, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); align-items: flex-end; max-width: calc(100vw - 2rem); } .assistant__launcher { justify-content: center; white-space: nowrap; } .assistant__panel { width: calc(100vw - 2rem); height: min(30rem, calc(100vh - 8rem)); } @supports (height: 100dvh) { .assistant__panel { height: min(30rem, calc(100dvh - 8rem)); } } /* Never let the choice tray eat the whole panel on a short screen */ .assistant__choices { max-height: 9rem; } } /* Tap targets on the choice buttons need to clear 44px on touch */ @media (pointer: coarse) { .assistant__choice { padding-block: 0.7rem; min-height: 44px; display: inline-flex; align-items: center; } .assistant__launcher { min-height: 48px; } .assistant__close { min-width: 44px; min-height: 44px; } } /* ============================================================= PRACTICE AT A GLANCE The old hero panel, moved below the fold and laid out horizontally so it reads as a summary strip rather than competing with the video behind the headline. ============================================================= */ .glance { background: var(--chalk); border-bottom: 1px solid var(--line-soft); } .glance__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--line); } .glance__cell { padding: 1.35rem 1.5rem 1.35rem 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); } .glance__cell:nth-child(3n) { border-right: 0; padding-right: 0; } .glance__cell:nth-last-child(-n+3) { border-bottom: 0; } .glance__key { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); margin-bottom: 0.45rem; } .glance__val { margin: 0; font-size: 0.97rem; line-height: 1.5; color: var(--pine); } /* Hero is single-column now that the panel has moved out */ .hero__inner--solo { grid-template-columns: minmax(0, 1fr); } .hero__inner--solo .hero__copy { max-width: 40rem; } @media (max-width: 900px) { .glance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .glance__cell:nth-child(3n) { border-right: 1px solid var(--line); padding-right: 1.5rem; } .glance__cell:nth-child(2n) { border-right: 0; padding-right: 0; } .glance__cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); } .glance__cell:nth-last-child(-n+2) { border-bottom: 0; } } @media (max-width: 600px) { .glance__grid { grid-template-columns: 1fr; } .glance__cell { border-right: 0 !important; padding-right: 0 !important; border-bottom: 1px solid var(--line); } .glance__cell:last-child { border-bottom: 0; } } /* ============================================================= VIDEO ON AN INTERIOR PAGE HERO The page hero is a solid ink block by default. When it carries video it needs positioning context, a taller minimum so the footage has room to read, and its content lifted clear. ============================================================= */ .page-hero { position: relative; overflow: hidden; } .page-hero:has(.hero-video) { min-height: clamp(24rem, 46vh, 34rem); display: flex; align-items: center; } .page-hero:has(.hero-video) > .shell { position: relative; z-index: 2; width: 100%; } /* Slightly higher object-position: these frames carry their subject above the midline, so centring would crop the architecture. */ .page-hero .hero-video__poster, .page-hero .hero-video__media { object-position: center 55%; } /* Fallback for browsers without :has() — video still renders, the hero simply keeps its default height. */ .page-hero .hero-video ~ .shell { position: relative; z-index: 2; } /* ============================================================= NAVIGATION BREAKPOINT With nine items the horizontal menu no longer fits on smaller laptops — it wrapped to two rows below roughly 1200px. The collapsed menu takes over there instead, so the header stays a single clean row at every width. If you add another page, re-check this number. Each item costs roughly 90px of header width. Briefly raised to 1300px when the Network page took the menu to ten items, and returned to 1200px when Network was merged into Work. Nine items fit a single clean row here comfortably. ============================================================= */ @media (max-width: 1200px) { .nav-toggle { display: inline-flex; } .nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--chalk); border-bottom: 1px solid var(--line); display: none; padding: 0.75rem var(--gutter) 1.25rem; } .nav.is-open { display: block; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; } .nav__link { padding: 0.9rem 0.25rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; } } /* ============================================================= PROJECTS Each project reads as a record rather than a card: the name and link held in a left column, the substance beside it. Restrained deliberately — the work should carry itself. ============================================================= */ .project { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding-block: clamp(2.25rem, 4vw, 3.25rem); border-top: 1px solid var(--line); align-items: start; } .project:last-child { border-bottom: 1px solid var(--line); } .project__kind { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-text, var(--brass)); margin-bottom: 0.9rem; } .project__name { font-size: var(--step-2); letter-spacing: -0.022em; margin-bottom: 0.9rem; } .project__link a { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.05em; color: var(--pine); text-decoration: none; border-bottom: 1px solid var(--brass); padding-bottom: 2px; transition: color .2s ease; } .project__link a:hover { color: var(--brass); } .project__summary { color: var(--pine); font-size: 1.02rem; } .project__stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 1.75rem; border-top: 1px solid var(--line); } .project__stats li { padding: 1rem 1.6rem 0.85rem 0; margin-right: 1.6rem; border-right: 1px solid var(--line); } .project__stats li:last-child { border-right: 0; margin-right: 0; } .project__stat-k { display: block; font-family: var(--display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.03em; line-height: 1; } .project__stat-v { display: block; margin-top: 0.35rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--moss); } .project__features { columns: 2; column-gap: 2rem; } .project__features li { break-inside: avoid; } @media (max-width: 860px) { .project { grid-template-columns: 1fr; } .project__features { columns: 1; } } /* ============================================================= THEME SWITCHER Sits at the end of the navigation. Deliberately quiet — it is a tool, not a feature to advertise. ============================================================= */ .themer { position: fixed; left: clamp(1rem, 3vw, 2rem); bottom: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-bottom, 0px)); z-index: 85; } .themer__toggle { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--chalk); box-shadow: 0 14px 30px -20px rgba(var(--ink-rgb), 0.8); border: 1px solid var(--line); border-radius: 999px; padding: 0.45rem 0.8rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pine); cursor: pointer; transition: border-color .2s ease; } .themer__toggle:hover { border-color: var(--ink); } .themer__dots { display: inline-flex; gap: 2px; } .themer__dots span { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(var(--ink-rgb), 0.25); } .themer__menu { position: absolute; bottom: calc(100% + 0.6rem); left: 0; width: 20rem; max-width: calc(100vw - 2rem); background: var(--chalk); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 26px 50px -30px rgba(var(--ink-rgb), 0.7); padding: 0.75rem; z-index: 90; } .themer__menu[hidden] { display: none; } .themer__heading { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-text, var(--brass)); margin: 0.25rem 0 0.6rem 0.3rem; } .themer__option { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.6rem 0.5rem; border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: background-color .18s ease; } .themer__option:hover { background: rgba(var(--brass-rgb), 0.09); } .themer__option.is-active { background: rgba(var(--brass-rgb), 0.14); } .themer__swatch { display: inline-flex; flex: none; margin-top: 0.2rem; } .themer__swatch span { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(var(--ink-rgb), 0.2); margin-right: -4px; } .themer__text { display: grid; gap: 0.15rem; } .themer__name { font-family: var(--body); font-size: 0.92rem; } .themer__note { font-size: 0.78rem; line-height: 1.45; color: var(--ink); opacity: .78; } .themer__foot { margin: 0.55rem 0 0.2rem 0.3rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; color: var(--moss); } @media (max-width: 560px) { /* Keep clear of the assistant launcher on the opposite corner */ .themer__menu { width: calc(100vw - 2rem); } } /* ============================================================= ACCENT CONTEXT The readable accent (--brass-text) is tuned for small type on a light ground. On dark sections it would be far too dark, so the light accent is restored there. Without this pairing, fixing contrast in one place breaks it in another. ============================================================= */ .section--dark .field-label--brass, .page-hero .field-label--brass, .hero .field-label--brass, .cta-band .field-label--brass, .section--dark .card__tag, .section--dark .pairs__key { color: var(--brass-lite); } .section--dark .msg__label, .section--dark .quote__detail { color: var(--brass-lite); } /* ============================================================= THEME SWITCHER — FLOATING PILL Sits low-left, opposite the assistant. Deliberately small: it is a control, not a feature to advertise. ============================================================= */ .themer { display: flex; align-items: center; gap: 0.35rem; } .themer.is-hidden { display: none; } .themer__toggle { border-radius: 999px; padding: 0.55rem 1rem; box-shadow: 0 16px 34px -22px rgba(var(--ink-rgb), 0.85); backdrop-filter: blur(8px); } /* Small dismiss control beside the pill */ .themer__dismiss { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--chalk); border: 1px solid var(--line); color: var(--moss); font-size: 1.05rem; line-height: 1; text-decoration: none; box-shadow: 0 16px 34px -22px rgba(var(--ink-rgb), 0.85); opacity: 0; transform: scale(0.8); transition: opacity .2s ease, transform .2s ease, color .2s ease; pointer-events: none; } .themer:hover .themer__dismiss, .themer:focus-within .themer__dismiss { opacity: 1; transform: none; pointer-events: auto; } .themer__dismiss:hover { color: var(--ink); border-color: var(--ink); } /* Entrance when opened from the footer */ .themer.is-entering { animation: themerIn .32s ease; } @keyframes themerIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ============================================================= FOOTER ACTIVATION LINK ============================================================= */ .footer__theme-trigger { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; color: rgba(var(--paper-rgb), 0.5); transition: color .2s ease; } .footer__theme-trigger:hover { color: var(--brass-lite); } .footer__theme-dots { display: inline-flex; gap: 2px; } .footer__theme-dots span { width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(var(--paper-rgb), 0.3); } .footer__sep { margin: 0 0.45rem; color: rgba(var(--paper-rgb), 0.3); } @media (prefers-reduced-motion: reduce) { .themer.is-entering { animation: none; } .themer__dismiss { transition: none; } } /* ============================================================= THE NETWORK ------------------------------------------------------------- Three pieces: platform cards, the showroom index, and the counted strip used on the home page. The showroom index is deliberately a list rather than a grid of cards. Fifteen cards of near-identical weight reads as padding; a clean index reads as an inventory, which is what it is. It also stays honest — a list does not create an expectation of a description we do not have for every entry. ============================================================= */ /* --- Platform cards ---------------------------------------- */ .netcard { display: flex; flex-direction: column; } .netcard__role { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; line-height: 1.45; text-transform: uppercase; color: var(--moss); margin: 0.55rem 0 0.9rem; } .netcard .card__desc { flex: 1 1 auto; } .netcard__action { margin: 1.35rem 0 0; } .netcard__here { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.55rem 0.9rem; border: 1px dashed var(--line); border-radius: 999px; color: var(--moss); } /* --- Showroom index ---------------------------------------- */ .netlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .netlist__row { border-bottom: 1px solid var(--line); } .netlist__link { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; padding: 1.15rem 0 1.05rem; text-decoration: none; color: inherit; transition: color .2s ease; } .netlist__row:hover .netlist__link { color: var(--brass-text, var(--brass)); } .netlist__name { font-family: var(--display); font-size: var(--step-1u); font-weight: 700; letter-spacing: var(--tracking); line-height: 1.2; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; } .netlist__flag { font-family: var(--mono); font-size: 0.6rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.25rem 0.5rem; border: 1px solid var(--brass); border-radius: 999px; color: var(--brass-text, var(--brass)); white-space: nowrap; } .netlist__addr { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--moss); word-break: break-word; } .netlist__row:hover .netlist__addr { color: var(--brass-text, var(--brass)); } .netlist__note { margin: 0 0 1.15rem; max-width: 62ch; font-size: 0.92rem; line-height: 1.55; color: var(--pine); } .netlist__foot { margin-top: clamp(1.75rem, 3vw, 2.5rem); } /* Keyboard users get the same emphasis a mouse user gets. */ .netlist__link:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; } /* --- Counted strip (home page, dark band) ------------------- */ .netstat { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-light); } .netstat__row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.25rem; align-items: baseline; padding: 1.35rem 0; border-bottom: 1px solid var(--line-light); } .netstat__n { font-family: var(--display); font-size: var(--step-3); font-weight: 700; line-height: 1; letter-spacing: var(--tracking); color: var(--brass-lite); } .netstat__v { font-size: 0.95rem; line-height: 1.55; color: rgba(var(--paper-rgb), 0.74); } /* --- Narrow screens ----------------------------------------- */ @media (max-width: 780px) { .netlist__link { flex-direction: column; align-items: flex-start; gap: 0.35rem; } .netstat__row { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; } } /* ============================================================= MERGED WORK PAGE ------------------------------------------------------------- The Work and Network pages became one, which made the page long enough to need signposting. Three small pieces do that work: a jump bar under the glance strip, labels that divide the directory into showrooms and platforms, and an introduction for the second block. ============================================================= */ /* --- Jump bar ----------------------------------------------- */ .jumpbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.6rem; } .jumpbar__label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss); margin-right: 0.3rem; } .jumpbar__link { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none; padding: 0.5rem 0.85rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--pine); transition: border-color .2s ease, color .2s ease, background-color .2s ease; } .jumpbar__link:hover { border-color: var(--ink); background: rgba(var(--ink-rgb), 0.04); } .jumpbar__link:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } /* The masthead is not fixed, so an anchor does not land under it. The offset is breathing room, not a correction. */ #in-depth, #directory, #method, #transfer { scroll-margin-top: 2rem; } /* --- Directory block labels --------------------------------- */ .block-label { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.85rem; margin-bottom: 0; border-bottom: 1px solid var(--line); } .block-label--spaced { margin-top: clamp(3rem, 6vw, 4.5rem); } .block-label__n { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; padding: 0.15rem 0.45rem; border: 1px solid var(--line); border-radius: 999px; color: var(--moss); } .block-intro { max-width: 62ch; margin: 1.5rem 0 2rem; font-size: 1.02rem; line-height: 1.6; color: var(--pine); } /* The showroom index sits directly beneath its label, so it does not need a second border along the top. */ .block-label + .netlist { border-top: 0; } /* ============================================================= STRAIGHT ANSWERS ------------------------------------------------------------- Set as a two-column list of question and answer rather than as cards or an accordion. Two reasons, both deliberate. An accordion hides the answers behind a click, which is exactly what a visitor came here to avoid, and it hides them from a reader who is skimming for the one line that matters. Cards would give six questions equal visual weight and turn a page of answers into a wall of boxes. A list reads the way a reference page should: scannable down the left, readable across. ============================================================= */ .answers { border-top: 1px solid var(--line); } .answers__row { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1.25rem, 3vw, 3rem); padding: clamp(1.4rem, 2.5vw, 1.9rem) 0; border-bottom: 1px solid var(--line); align-items: start; } .answers__q { font-family: var(--display); font-size: var(--step-1u); font-weight: 700; line-height: 1.25; letter-spacing: var(--tracking); margin: 0; text-wrap: balance; } .answers__a { margin: 0; font-size: 0.98rem; line-height: 1.62; color: var(--pine); } /* --- Source line on a measured figure ------------------------ A number without its source is a claim. This keeps the two attached wherever the figure appears. */ .netstat__src { display: block; margin-top: 0.4rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-lite); } /* --- Secondary hero paragraph -------------------------------- The first paragraph states what the practice is, for a reader and for an answer engine. The second sells. The second is set slightly quieter so the definition stays the thing you read. */ .hero__lead--sub { margin-top: 0.9rem; font-size: 1.02rem; opacity: 0.88; } @media (max-width: 780px) { .answers__row { grid-template-columns: 1fr; gap: 0.65rem; } } /* --- FAQ question as a heading ------------------------------- The question is an

inside the so assistive technology and answer engines can identify it as the question. It must not look any different for doing so. */ .faq__qt { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0; display: inline; }