/* ============================================================================ LoreWeaver "Ink Modernist" style Swiss / modernist grid: paper background, ink rules, one red accent. Built from loreweaver-ink-modernist-homepage.pdf (1440px desktop reference). Separate from redesign.css; pages opt in with . ========================================================================== */ :root { --ink: #201e1d; --paper: #f3f2f2; --plate: #d8d5d0; --red: #ec3013; /* fills: buttons, bands, underlines */ --red-text: #c8240c; /* red type on paper */ --grey-900: #33302e; /* body copy */ --grey-700: #57534f; /* labels, meta */ --grey-500: #78746d; /* captions */ --grey-400: #a8a29d; /* labels on ink */ --rule: 2px; --pad: 32px; --ink-nav-h: 72px; /* sticky top bar incl. its rule */ --ink-sticky-top: var(--ink-nav-h); /* grows when a product sub-bar sticks too */ --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --wide: 108%; /* display width for headings */ --wordmark-wide: 112.5%; } .ink *, .ink *::before, .ink *::after { box-sizing: border-box; } body.ink { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.5; word-spacing: 0.02em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Sticky top bar: anchors and sticky side columns clear it */ :root:has(body.ink) { scroll-padding-top: calc(var(--ink-sticky-top) + 16px); } :root:has(.arch-psub, .dr-subnav) { --ink-sticky-top: calc(var(--ink-nav-h) + 52px); } /* Resets use :where() so they never outrank component classes */ :where(.ink) img { display: block; max-width: 100%; } :where(.ink) a { color: inherit; } :where(.ink) :where(p, h1, h2, h3, ul, ol, figure, blockquote) { margin: 0; } :where(.ink) :where(h1, h2, h3) { font-size: inherit; } :where(.ink) :where(ul, ol) { padding: 0; list-style: none; } :where(.ink) strong { font-weight: 700; } .ink [hidden] { display: none !important; } /* --------------------------------------------------------------------------- Type primitives ------------------------------------------------------------------------- */ .ink-label { font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--grey-700); } .ink-label--red { color: var(--red-text); font-weight: 600; } .ink-display { font-stretch: var(--wide); font-weight: 800; letter-spacing: -0.02em; } .ink-caps { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; } /* Buttons: hard rectangles */ .ink-btn { display: inline-flex; align-items: center; height: 48px; padding: 0 20px; background: var(--red); color: var(--paper); border: 0; font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color 120ms ease, color 120ms ease; } .ink a.ink-btn { color: var(--paper); } .ink-btn:hover { background: var(--ink); } .ink a.ink-btn--outline, .ink-btn--outline { background: transparent; color: var(--ink); border: var(--rule) solid var(--ink); } .ink a.ink-btn--outline:hover { background: var(--ink); color: var(--paper); } /* Copy at 17 to 19px carries slightly open word spacing in the reference */ .ink-card p, .ink-steps li, .ink-facts li, .ink-notes .ink-cell blockquote { word-spacing: 0.08em; } /* Red underlined text link */ .ink-link { display: inline-block; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--red-text); padding-bottom: 2px; border-bottom: var(--rule) solid var(--red); } .ink a.ink-link { color: var(--red-text); } .ink a.ink-link:hover { color: var(--ink); border-bottom-color: var(--ink); } /* Image frame (fills its cell) */ .ink-plate { position: relative; background: var(--plate); overflow: hidden; } .ink-plate img { width: 100%; height: 100%; object-fit: cover; } /* --------------------------------------------------------------------------- Nav ------------------------------------------------------------------------- */ .ink-nav { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; height: 72px; padding: 0 var(--pad); border-bottom: var(--rule) solid var(--ink); background: var(--paper); } .ink-wordmark { font-size: 20px; line-height: 1; font-weight: 800; font-stretch: var(--wordmark-wide); letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; } .ink-nav__links { display: flex; align-items: baseline; gap: 25px; } .ink-nav__links a, .ink-footer__links a { font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; } .ink-nav__links a:hover, .ink-footer__links a:hover { color: var(--red-text); } .ink-nav .ink-btn { height: 38px; padding: 0 16px; font-size: 13px; } .ink-nav__toggle, .ink-nav .ink-nav__cta-m { display: none; } /* --------------------------------------------------------------------------- Grid rows: every cell is outlined by ink rules ------------------------------------------------------------------------- */ .ink-row { display: grid; border-bottom: var(--rule) solid var(--ink); } .ink-row > * { min-width: 0; } .ink-row > *:not(:last-child) { border-right: var(--rule) solid var(--ink); } .ink-row--half { grid-template-columns: 1fr 1fr; } .ink-row--third { grid-template-columns: 1fr 2fr; } .ink-row--three { grid-template-columns: 1fr 1fr 1fr; } .ink-cell { padding: 30px var(--pad) 32px; } /* --------------------------------------------------------------------------- Hero ------------------------------------------------------------------------- */ .ink-hero__copy { padding: 42px var(--pad) 35px; } .ink-hero__title { margin-top: 18px; font-size: 5.4vw; line-height: 0.94; } .ink-hero__title .ink-red { display: block; color: var(--red-text); font-weight: 400; font-stretch: 106%; letter-spacing: 0; } .ink-hero__lede { max-width: 540px; margin-top: 26px; font-size: 18px; line-height: 28px; color: var(--grey-900); } .ink-hero__cta { display: flex; gap: 10px; margin-top: 28px; padding-bottom: 24px; border-bottom: var(--rule) solid var(--ink); } .ink-hero__note { margin-top: 10px; font-size: 13px; line-height: 18px; letter-spacing: 0.07em; color: var(--grey-700); } .ink-hero__media { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px; align-content: start; } .ink-hero__media .ink-plate:first-child { grid-column: 1 / -1; border-bottom: var(--rule) solid var(--ink); } .ink-hero__media .ink-plate:nth-child(2) { border-right: var(--rule) solid var(--ink); } /* --------------------------------------------------------------------------- Definition / gap rows ------------------------------------------------------------------------- */ .ink-definition .ink-cell:last-child { padding-bottom: 30px; } .ink-products .ink-cell { padding-top: 32px; padding-bottom: 34px; } .ink-definition .ink-cell:first-child { padding-top: 28.5px; } .ink-gap .ink-cell:first-child { padding-top: 24.5px; } .ink-gap .ink-cell:last-child { padding-top: 26px; padding-bottom: 27px; } .ink-definition p:not(.ink-label) { font-size: 20px; line-height: 30px; } .ink-gap p:not(.ink-label) { font-size: 24px; line-height: 33px; } /* --------------------------------------------------------------------------- Products row ------------------------------------------------------------------------- */ .ink-products__title { margin-top: 11px; font-size: 2.78vw; line-height: 1; } .ink-products__sub { margin-top: 17px; font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red-text); } .ink-card__head { display: flex; align-items: baseline; justify-content: space-between; } .ink-card__head h3 { font-size: 26px; line-height: 32px; font-weight: 700; font-stretch: 106%; letter-spacing: -0.01em; } .ink-card__num { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; color: var(--red-text); } .ink-card p { margin-top: 12px; font-size: 17px; line-height: 26px; color: var(--grey-900); } .ink-card .ink-link { margin-top: 19px; } /* --------------------------------------------------------------------------- Product detail rows (Architect / Director) ------------------------------------------------------------------------- */ .ink-detail__text { padding: 36.5px var(--pad) 38.5px; } .ink-detail__title { margin-top: 9px; font-size: 3.2vw; line-height: 45px; } .ink-steps { margin-top: 27.5px; border-bottom: var(--rule) solid var(--ink); } .ink-steps li { display: grid; grid-template-columns: 48px 1fr; padding: 14px 0; border-top: var(--rule) solid var(--ink); font-size: 17px; line-height: 25px; } .ink-steps__num { font-weight: 600; color: var(--red-text); } .ink-detail--mirrored .ink-steps { margin-top: 28.5px; } .ink-detail .ink-btn { margin-top: 24px; } /* --------------------------------------------------------------------------- Logo strip ------------------------------------------------------------------------- */ .ink-logos { background: var(--ink); color: var(--grey-400); padding: 20px 0 24px; border-bottom: var(--rule) solid var(--ink); overflow: hidden; } .ink-logos .ink-label { color: var(--grey-400); padding: 0 var(--pad); } .ink-logos__track { display: flex; gap: 72px; width: max-content; margin-top: 16px; animation: ink-marquee 40s linear infinite; } .ink-logos__track img { width: 122px; height: 52px; padding: 6px 10px; object-fit: contain; background: var(--plate); } @keyframes ink-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ink-logos__track { animation: none; } } /* --------------------------------------------------------------------------- Field notes (testimonials) ------------------------------------------------------------------------- */ .ink-notes { background: var(--red); color: var(--paper); } .ink-notes .ink-label { color: var(--paper); font-weight: 600; } .ink-notes__lead { padding: 18.5px var(--pad) 35px; border-bottom: var(--rule) solid var(--ink); } .ink-notes__lead blockquote { max-width: 15.5em; margin-top: 7.5px; font-size: 4.6vw; line-height: 1; } .ink-notes cite, .ink-notes figcaption { display: block; font-style: normal; font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .ink-notes__lead figcaption { margin-top: 19px; } /* Small quotes sit on paper: white on red is only used at display sizes */ .ink-notes .ink-row { background: var(--paper); color: var(--ink); border-bottom-color: var(--ink); } .ink-notes .ink-row figcaption { color: var(--red-text); } .ink-notes .ink-cell { padding: 24px var(--pad) 21.5px; } .ink-notes .ink-cell blockquote { font-size: 19px; line-height: 28px; } .ink-notes .ink-cell figcaption { margin-top: 9.5px; font-size: 12px; } /* --------------------------------------------------------------------------- Community CTA + facts ------------------------------------------------------------------------- */ .ink-cta > .ink-cell:first-child { padding-top: 38px; padding-bottom: 39px; } .ink-cta > .ink-facts { padding-top: 36.5px; } .ink-cta__title { font-size: 2.78vw; line-height: 1; } .ink-cta p:not(.ink-label) { max-width: 540px; margin-top: 17px; font-size: 18px; line-height: 28px; color: var(--grey-900); } .ink-cta .ink-btn { margin-top: 24px; } .ink-facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; } .ink-facts ul { margin-top: 8px; } .ink-facts li { font-size: 17px; line-height: 27px; } /* --------------------------------------------------------------------------- Footer ------------------------------------------------------------------------- */ .ink-footer { display: flex; align-items: flex-start; justify-content: space-between; padding: 23.5px var(--pad) 30.5px; } .ink-footer .ink-wordmark { font-size: 18px; } .ink-footer__links { display: flex; flex-wrap: wrap; column-gap: 26.5px; row-gap: 12.5px; max-width: 620px; } .ink-footer__copy { font-size: 13px; color: var(--grey-700); } /* =========================================================================== Shared building blocks for interior pages Pattern: every page is a stack of full-width rows separated by 2px ink rules. Colour rule: white on red only at display sizes (24px and up). Small text never sits on a red fill; use paper or ink backgrounds for it. ========================================================================= */ /* Skip link */ .ink-skip { position: absolute; left: var(--pad); top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; } .ink-skip:focus { top: 12px; } /* Keyboard focus */ .ink a:focus-visible, .ink button:focus-visible, .ink summary:focus-visible, .ink input:focus-visible, .ink select:focus-visible, .ink textarea:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; } /* Nav: active page + Products dropdown */ .ink-nav__links a[aria-current] { color: var(--red-text); } .ink-nav__group { position: relative; display: flex; } .ink-nav__group::after { /* hover bridge between link and menu */ content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: 24px; } .ink-nav__menu { position: absolute; top: calc(100% + 22px); left: -18px; z-index: 20; display: none; min-width: 200px; background: var(--paper); border: var(--rule) solid var(--ink); } .ink-nav__group:hover .ink-nav__menu, .ink-nav__group:focus-within .ink-nav__menu { display: grid; } .ink-nav__menu a { padding: 14px 18px; } .ink-nav__menu a + a { border-top: var(--rule) solid var(--ink); } .ink-nav__menu a:hover { background: var(--ink); color: var(--paper); } /* --------------------------------------------------------------------------- Type scale for interior pages ------------------------------------------------------------------------- */ .ink-h1 { font-size: 5.4vw; line-height: 0.94; } .ink-h1--sm { font-size: 3.2vw; line-height: 0.98; } .ink-h2 { font-size: 3.2vw; line-height: 0.98; } .ink-h2--sm { font-size: 2.78vw; line-height: 1; } .ink-h3 { font-size: 26px; line-height: 32px; font-weight: 700; font-stretch: 106%; letter-spacing: -0.01em; } .ink-h4 { font-size: 19px; line-height: 26px; font-weight: 700; } .ink-red { color: var(--red-text); } .ink-lede { font-size: 20px; line-height: 30px; color: var(--ink); } .ink-body { font-size: 17px; line-height: 26px; color: var(--grey-900); word-spacing: 0.08em; } .ink-meta { font-size: 13px; line-height: 18px; letter-spacing: 0.07em; color: var(--grey-700); } .ink-stack > * + * { margin-top: 16px; } .ink-stack--lg > * + * { margin-top: 24px; } .ink-actions { display: flex; flex-wrap: wrap; gap: 10px; } /* --------------------------------------------------------------------------- Page head: first row of an interior page ------------------------------------------------------------------------- */ .ink-pagehead { padding: 42px var(--pad) 44px; border-bottom: var(--rule) solid var(--ink); } .ink-pagehead > .ink-label + * { margin-top: 18px; } .ink-pagehead__lede { max-width: 640px; margin-top: 26px; font-size: 18px; line-height: 28px; color: var(--grey-900); } .ink-pagehead .ink-actions { margin-top: 28px; } /* Split page head: copy left, plate right (same geometry as the home hero) */ .ink-pagehead-split > :first-child { padding: 42px var(--pad) 44px; } .ink-pagehead-split > :first-child > .ink-label + * { margin-top: 18px; } .ink-pagehead-split .ink-plate { min-height: 360px; } /* --------------------------------------------------------------------------- Rows and grids ------------------------------------------------------------------------- */ .ink-row--quarter { grid-template-columns: 1fr 3fr; } .ink-row--four { grid-template-columns: repeat(4, 1fr); } /* Auto-ruled grid: cells get ink rules between them, rows wrap freely. Use item counts that fill the last row, or add .ink-grid__fill to span it. */ .ink-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rule); background: var(--ink); border-bottom: var(--rule) solid var(--ink); } .ink-grid > * { background: var(--paper); min-width: 0; } .ink-grid--2 { grid-template-columns: repeat(2, 1fr); } .ink-grid--4 { grid-template-columns: repeat(4, 1fr); } .ink-grid__fill { grid-column: 1 / -1; } /* Section head row: label left third, heading + intro right */ .ink-section-head .ink-h2 + *, .ink-section-head .ink-h2--sm + * { margin-top: 20px; } /* Bands */ .ink-band--ink { background: var(--ink); color: var(--paper); } .ink-band--ink .ink-label { color: var(--grey-400); } .ink-band--ink .ink-body { color: var(--plate); } .ink-band--red { background: var(--red); color: var(--paper); } .ink-band--red .ink-label { color: var(--paper); font-weight: 600; } .ink-band--ink.ink-row, .ink-band--red.ink-row { border-bottom-color: var(--ink); } /* Outline button on dark */ .ink a.ink-btn--light, .ink-btn--light { background: transparent; color: var(--paper); border: var(--rule) solid var(--paper); } .ink a.ink-btn--light:hover { background: var(--paper); color: var(--ink); } /* Plate helpers */ .ink-plate--ratio { aspect-ratio: 16 / 10; } .ink-plate--contain img { object-fit: contain; } .ink-plate video { width: 100%; height: 100%; object-fit: cover; display: block; } .ink-figure figcaption { padding: 12px var(--pad); border-top: var(--rule) solid var(--ink); font-size: 13px; line-height: 18px; color: var(--grey-700); } /* Big number / stat cell */ .ink-stat__value { font-size: 3.2vw; line-height: 1; font-weight: 800; font-stretch: 108%; letter-spacing: -0.02em; } .ink-stat__label { margin-top: 12px; } /* Checklist with red square bullets */ .ink-checks li { position: relative; padding-left: 22px; font-size: 17px; line-height: 26px; word-spacing: 0.08em; } .ink-checks li + li { margin-top: 8px; } .ink-checks li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; background: var(--red); } /* --------------------------------------------------------------------------- FAQ (details / summary) ------------------------------------------------------------------------- */ .ink-faq { border-bottom: var(--rule) solid var(--ink); } .ink-faq details { border-top: var(--rule) solid var(--ink); } .ink-faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 18px 0; list-style: none; cursor: pointer; font-size: 20px; line-height: 28px; font-weight: 600; } .ink-faq summary::-webkit-details-marker { display: none; } .ink-faq summary::after { content: "+"; flex: none; color: var(--red-text); font-size: 26px; font-weight: 500; } .ink-faq details[open] summary::after { content: "\2212"; } .ink-faq summary:hover { color: var(--red-text); } .ink-faq__answer { max-width: 72ch; padding: 0 0 22px; font-size: 17px; line-height: 26px; color: var(--grey-900); word-spacing: 0.08em; } .ink-faq__answer > * + * { margin-top: 12px; } .ink-faq__answer a { color: var(--red-text); } /* --------------------------------------------------------------------------- Prose: articles, legal pages, release notes (Markdown output) ------------------------------------------------------------------------- */ .ink-prose { max-width: 720px; font-size: 18px; line-height: 30px; color: var(--grey-900); } .ink-prose > * + * { margin-top: 20px; } .ink-prose h2 { margin-top: 56px; padding-top: 22px; border-top: var(--rule) solid var(--ink); font-size: 34px; line-height: 1.05; font-weight: 800; font-stretch: 108%; letter-spacing: -0.02em; color: var(--ink); } .ink-prose h3 { margin-top: 36px; font-size: 22px; line-height: 28px; font-weight: 700; color: var(--ink); } .ink-prose h4 { margin-top: 28px; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--grey-700); } .ink-prose > :first-child { margin-top: 0; } .ink-prose h2 + *, .ink-prose h3 + *, .ink-prose h4 + * { margin-top: 14px; } .ink-prose strong { color: var(--ink); } .ink-prose a { color: var(--red-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--red); } .ink-prose a:hover { color: var(--ink); text-decoration-color: var(--ink); } .ink-prose ul li, .ink-prose ol li { position: relative; padding-left: 34px; } .ink-prose li + li { margin-top: 10px; } .ink-prose ul li::before { content: ""; position: absolute; left: 4px; top: 14px; width: 12px; height: 2px; background: var(--red); } .ink-prose ol { counter-reset: ink-ol; } .ink-prose ol li { counter-increment: ink-ol; } .ink-prose ol li::before { content: counter(ink-ol, decimal-leading-zero); position: absolute; left: 0; font-size: 15px; font-weight: 600; color: var(--red-text); } .ink-prose li > ul, .ink-prose li > ol { margin-top: 10px; } .ink-prose blockquote { padding-left: 22px; border-left: 4px solid var(--red); font-size: 22px; line-height: 32px; color: var(--ink); } .ink-prose code { padding: 1px 6px; background: var(--plate); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.88em; } .ink-prose pre { padding: 20px 22px; overflow-x: auto; background: var(--ink); color: var(--paper); font-size: 14px; line-height: 22px; } .ink-prose pre code { padding: 0; background: none; color: inherit; font-size: inherit; } .ink-prose img { border: var(--rule) solid var(--ink); } .ink-prose hr { border: 0; border-top: var(--rule) solid var(--ink); } .ink-prose table, .ink-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; } .ink-prose table { display: block; overflow-x: auto; } .ink-prose th, .ink-table th { padding: 12px 16px 12px 0; border-bottom: var(--rule) solid var(--ink); text-align: left; vertical-align: bottom; font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-700); } .ink-prose td, .ink-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--ink); vertical-align: top; color: var(--grey-900); } .ink-prose tr:last-child td, .ink-table tr:last-child td { border-bottom: var(--rule) solid var(--ink); } /* --------------------------------------------------------------------------- Forms ------------------------------------------------------------------------- */ .ink-form { display: grid; gap: 20px; } .ink-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .ink-field { display: grid; gap: 8px; } .ink-field > label, .ink-field > .ink-field__label { font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--grey-700); } .ink-field input, .ink-field select, .ink-field textarea { width: 100%; padding: 13px 16px; border: var(--rule) solid var(--ink); border-radius: 0; background-color: transparent; color: var(--ink); font-family: inherit; font-size: 17px; line-height: 24px; appearance: none; } .ink-field textarea { min-height: 150px; resize: vertical; } .ink-field select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; } .ink-field input::placeholder, .ink-field textarea::placeholder { color: var(--grey-500); } .ink-field input:focus, .ink-field select:focus, .ink-field textarea:focus { outline: 3px solid var(--red); outline-offset: 0; } .ink button.ink-btn { cursor: pointer; } /* --------------------------------------------------------------------------- Chips, filters, pagination ------------------------------------------------------------------------- */ .ink-chips { display: flex; flex-wrap: wrap; gap: 8px; } .ink-chip { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: var(--rule) solid var(--ink); background: transparent; color: var(--ink); font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .ink a.ink-chip { color: var(--ink); } .ink-chip:hover, .ink a.ink-chip:hover, .ink-chip.is-active, .ink-chip[aria-pressed="true"], .ink a.ink-chip[aria-current] { background: var(--ink); color: var(--paper); } .ink-pagination { display: flex; flex-wrap: wrap; gap: 8px; padding: 28px var(--pad); border-bottom: var(--rule) solid var(--ink); } .ink-pagination a, .ink-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border: var(--rule) solid var(--ink); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; } .ink-pagination [aria-current] { background: var(--ink); color: var(--paper); } .ink-pagination a:hover { background: var(--ink); color: var(--paper); } /* Card that is itself a link (whole cell clickable) */ .ink a.ink-cardlink { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); } .ink a.ink-cardlink:hover .ink-h3, .ink a.ink-cardlink:hover .ink-h4 { color: var(--red-text); } /* --------------------------------------------------------------------------- Smaller screens (not in the reference; stacks the grid) ------------------------------------------------------------------------- */ @media (max-width: 1100px) { .ink-nav__links { gap: 16px; } .ink-hero__title { font-size: 6vw; } } @media (max-width: 860px) { :root { --pad: 20px; } .ink-row--half, .ink-row--third, .ink-row--three { grid-template-columns: 1fr; } .ink-row > *:not(:last-child) { border-right: 0; border-bottom: var(--rule) solid var(--ink); } .ink-hero__title { font-size: clamp(44px, 12vw, 78px); } .ink-products__title, .ink-cta__title { font-size: 34px; } .ink-detail__title { font-size: 34px; line-height: 1.05; } .ink-notes__lead blockquote { font-size: clamp(34px, 9vw, 66px); } .ink-detail .ink-plate { aspect-ratio: 4 / 3; } .ink-detail--mirrored .ink-plate { order: -1; border-bottom: var(--rule) solid var(--ink); } .ink-detail--mirrored .ink-detail__text { border-bottom: 0; } .ink-facts { grid-template-columns: 1fr 1fr; } .ink-footer { flex-direction: column; gap: 20px; } } /* Shared blocks on smaller screens */ @media (max-width: 1100px) { .ink-grid--4, .ink-row--four { grid-template-columns: repeat(2, 1fr); } .ink-h1 { font-size: 6vw; } } @media (max-width: 860px) { /* Phone nav: one slim sticky row, links open as a panel under it */ :root { --ink-nav-h: 60px; } :root:has(.arch-psub, .dr-subnav) { --ink-sticky-top: var(--ink-nav-h); } .ink-nav { height: 60px; } .ink-nav > .ink-btn { display: none; } .ink-nav__toggle { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: var(--rule) solid var(--ink); background: transparent; color: var(--ink); font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; } .ink-nav.is-open .ink-nav__toggle { background: var(--ink); color: var(--paper); } .ink-nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100dvh - var(--ink-nav-h)); overflow-y: auto; background: var(--paper); border-top: var(--rule) solid var(--ink); border-bottom: var(--rule) solid var(--ink); } .ink-nav.is-open .ink-nav__links { display: flex; } .ink-nav__links a { padding: 15px var(--pad); font-size: 14px; } .ink-nav__links > a + a, .ink-nav__links > a + .ink-nav__group, .ink-nav__group + a { border-top: var(--rule) solid var(--ink); } .ink-nav__group { display: block; } .ink-nav__group > a { display: block; } .ink-nav__group::after { display: none; } .ink-nav__menu { position: static; display: grid !important; min-width: 0; border: 0; } .ink-nav__menu a { padding-left: calc(var(--pad) + 20px); color: var(--grey-900); } .ink-nav__menu a + a { border-top: 0; } .ink-nav .ink-nav__links a.ink-nav__cta-m { display: flex; justify-content: center; height: 48px; margin: 16px var(--pad) 20px; padding: 0 20px; color: var(--paper); border-top: 0; } .ink .arch-psub, .ink .dr-subnav { position: static; } .ink-row--quarter, .ink-row--four, .ink-grid, .ink-grid--2, .ink-grid--4 { grid-template-columns: 1fr; } .ink-h1 { font-size: clamp(40px, 11vw, 78px); } .ink-h1--sm, .ink-h2 { font-size: 34px; line-height: 1.02; } .ink-h2--sm { font-size: 30px; } .ink-stat__value { font-size: 40px; } .ink-pagehead-split .ink-plate { min-height: 0; aspect-ratio: 16 / 10; } .ink-form__row { grid-template-columns: 1fr; } .ink-prose h2 { font-size: 28px; } }