/* ============================================================ Ink Fusion v28 — interior-page content blocks (page hero, prose, steps, pricing, tiers, gallery, contact, form) ============================================================ */ /* compact interior hero */ .page-hero { position: relative; padding: 60px 0 40px; border-bottom: 2.5px solid var(--ink); overflow: hidden; } .page-hero .op { font-size: clamp(38px, 6.5vw, 78px); } .page-hero p.sub { max-width: 620px; margin-top: 24px; font-size: clamp(15px, 1.7vw, 19px); color: #3a352d; } /* prose */ .prose { max-width: 720px; } .prose p { font-size: 17px; line-height: 1.7; color: #2e2a23; margin-bottom: 18px; } .prose p:last-child { margin-bottom: 0; } /* Added 2026-09-20 with the full T&C rewrite. `.prose` styled ONLY `p`, which is why every legal-page heading carried its own inline font-family/transform/margin — the inline-style pattern the 09-18 audit flagged. One rule retires all of them. */ .prose h2 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(17px, 1.9vw, 22px); letter-spacing: -0.01em; margin: 34px 0 10px; } .prose h2:first-child { margin-top: 0; } /* h3 added 2026-09-20 for the privacy policy's artwork clause, which has named sub-headings under one numbered section. Sentence case and the body face, so a sub-heading cannot be mistaken for a numbered clause at a glance. */ .prose h3 { font-family: var(--f-body); font-weight: 700; font-size: 17px; letter-spacing: 0; margin: 22px 0 8px; color: var(--ink); } /* base.css sets `ul, ol { list-style: none }` site-wide, so a plain list in prose renders as unmarked lines and a legal clause silently loses its enumeration. `.prose ul` (0,1,1) outranks that reset (0,0,1). */ .prose ul { list-style: disc; padding-left: 22px; margin: 0 0 18px; } .prose ul li { font-size: 17px; line-height: 1.7; color: #2e2a23; margin-bottom: 7px; } .prose ul li::marker { color: var(--mag-ground); } .split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } @media (max-width: 820px) { .split-2 { grid-template-columns: 1fr; gap: 26px; } } /* static 3-step row (upload / print / ship) */ .stepsrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .stepsrow .s { border: 2.5px solid var(--ink); background: var(--paper); padding: 26px; box-shadow: 6px 6px 0 var(--ink); } .stepsrow .s .chip { width: 54px; height: 54px; border: 2.5px solid var(--ink); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 22px; margin-bottom: 18px; } .stepsrow .s:nth-child(1) .chip { background: var(--cyan); } .stepsrow .s:nth-child(2) .chip { background: var(--mag-ground); color: var(--paper); } .stepsrow .s:nth-child(3) .chip { background: var(--yel); } .stepsrow .s h4, .stepsrow .s h3, .stepsrow .s h2 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 20px; margin-bottom: 8px; letter-spacing: -0.01em; } .stepsrow .s p { font-size: 14px; color: #3a352d; } @media (max-width: 760px) { .stepsrow { grid-template-columns: 1fr; } } /* pricing rows */ .ptable { border: 2.5px solid var(--ink); } .prow { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px 22px; border-bottom: 2px solid var(--ink); } .prow:last-child { border-bottom: 0; } .prow:nth-child(odd) { background: var(--paper-2); } .prow .name { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 17px; letter-spacing: -0.01em; } .prow .name small { display: block; font-family: var(--f-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; color: #4a443a; text-transform: none; margin-top: 2px; } .prow .price { font-family: var(--f-display); font-weight: 800; font-size: 24px; white-space: nowrap; } .pnote { font-family: var(--f-mono); font-size: 12px; color: #4a443a; margin-top: 14px; } /* trade tiers */ .tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .tier { border: 2.5px solid var(--ink); padding: 24px; box-shadow: 6px 6px 0 var(--ink); } .tier:nth-child(1) { background: var(--paper-2); } .tier:nth-child(2) { background: var(--cyan); } .tier:nth-child(3) { background: var(--mag-ground); color: var(--paper); } .tier:nth-child(4) { background: var(--yel); } .tier .pct { font-family: var(--f-display); font-weight: 800; font-size: 46px; line-height: 1; } /* h3 as well as h4, for the same reason: "Starter" is promoted a level on both services.html and pricing.html and rendered 26px/600 beside 20px/800. */ /* 20px flat broke "Enterprise" onto two lines ("Enterpris / e") at 1180px and at 320px — 196px of word in a 202px box. The clamp caps at the SAME 20px, so desktop is unchanged; it only scales down where the card is too narrow. */ .tier h4, .tier h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(15px, 1.55vw, 20px); margin: 8px 0 6px; } .tier .th { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; } @media (max-width: 820px) { .tiers { grid-template-columns: repeat(2, 1fr); } } /* gallery grid (duotone halftone tiles) */ .ggrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .gtile { position: relative; aspect-ratio: 1 / 1; border: 2.5px solid var(--ink); overflow: hidden; transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease); } .gtile:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); } .gtile .duo { position: absolute; inset: 0; } .gtile .duo::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(21,19,16,0.45) 30%, transparent 34%); background-size: 10px 10px; opacity: 0.4; } .gtile.k1 .duo { background: var(--cyan); } .gtile.k2 .duo { background: var(--mag); } .gtile.k3 .duo { background: var(--yel); } .gtile.k4 .duo { background: var(--orange); } .gtile.k5 .duo { background: var(--paper-2); } .gtile .lb { position: absolute; left: 12px; bottom: 12px; font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; background: var(--ink); color: var(--paper); padding: 4px 8px; } /* Font scale REDUCED 2026-09-18 (was clamp(20px, 2.4vw, 30px)). "DTF Transfers" overflowed its tile at EVERY width from 900px to 1920px — measured 326px of text in a 269px tile at 1440px — and `.gtile` is overflow-hidden, so the label simply rendered as "DTF TRANSFE". More room does not fix it: even wrapped, the single word "TRANSFERS" at 30px needs 312px against a 269px tile, so the type itself had to come down. 2.4vw -> 1.6vw with a 24px cap was the largest scale that clears every tile; `overflow-wrap` is the last-resort net so a word that still cannot fit BREAKS rather than disappearing. ⚠ Residual: ~19px over at exactly 320px. */ .gtile .big { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 14px; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(12px, 1.6vw, 24px); line-height: 0.9; color: var(--ink); overflow-wrap: break-word; } /* k4 (--orange) DROPPED from this rule 2026-09-18. Paper on orange measures 2.58:1 — below even the 3:1 large-text floor — and it sat in one row beside two siblings at 15.32:1, so "DTF Transfers" read as washed out rather than styled. tokens.css states this exact case: orange "carries INK text (5.95), which is why you will see `color: var(--ink)` on every orange ground". Removing k4 here lets it inherit the .gtile .big default of var(--ink). k2 (--mag) STAYS: paper on --mag is 3.45:1, which passes at 30px/800 (large text). */ .gtile.k2 .big { color: var(--paper); } @media (max-width: 860px) { .ggrid { grid-template-columns: repeat(2, 1fr); } } /* contact methods + form */ .contactgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .method { border: 2.5px solid var(--ink); padding: 24px; box-shadow: 6px 6px 0 var(--ink); } .method:nth-child(1) { background: var(--cyan); } .method:nth-child(2) { background: var(--mag-ground); color: var(--paper); } .method:nth-child(3) { background: var(--yel); } .method:nth-child(4) { background: var(--paper-2); } /* h2 as well as h3: contact.html promotes the first card's heading a level for emphasis, and styling only h3 left it at 40px sentence-case beside 20px caps. Four other card components already carry this fallback. */ /* Same treatment, same reason: "Instagram" broke onto two lines at 1180px. Caps at the same 20px, so nothing changes on a wide screen. */ .method h3, .method h2 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(15px, 1.55vw, 20px); margin-bottom: 8px; } .method p { font-size: 14px; } .method .v { font-family: var(--f-mono); font-weight: 700; font-size: 13px; display: block; margin-top: 8px; word-break: break-word; } @media (max-width: 860px) { .contactgrid { grid-template-columns: repeat(2, 1fr); } } /* ── Smallest-screen bleed hardening (2026-07-14 mobile audit): card rows that only collapse to 2 cols still overflow ≤560px (2 × ~271px card). Stack them, and give the grid children min-width:0 so a wide child can't blow the track past the viewport (grid items default to min-width:auto = min-content). ── */ .tiers > *, .contactgrid > *, .ggrid > * { min-width: 0; } @media (max-width: 560px) { .tiers, .contactgrid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .form .frow { grid-template-columns: 1fr; } } /* The remaining multi-column content grids had no small-screen rule and overflow on phones (e.g. .split-2 "Standard vs Express"). Stack them all ≤560px. */ .split-2 > *, .worktop > *, .testi > *, .stepsrow > *, .herobottom > * { min-width: 0; } @media (max-width: 560px) { .split-2, .worktop, .testi, .stepsrow, .herobottom { grid-template-columns: 1fr; } } .form { border: 2.5px solid var(--ink); background: var(--paper-2); padding: 30px; box-shadow: 8px 8px 0 var(--mag); } .form .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form label { display: block; font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 16px 0 6px; } .form input, .form textarea, .form select { width: 100%; font-family: var(--f-body); font-size: 15px; padding: 12px 14px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); } .form input:focus, .form textarea:focus, .form select:focus { outline: 3px solid var(--ink); outline-offset: 1px; } .form textarea { min-height: 120px; resize: vertical; } @media (max-width: 620px) { .form .frow { grid-template-columns: 1fr; } } /* testimonials */ .testi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .testi blockquote { border: 2.5px solid var(--ink); padding: 24px; font-size: 16px; line-height: 1.5; box-shadow: 6px 6px 0 var(--ink); } .testi blockquote:nth-child(1) { background: var(--cyan); } .testi blockquote:nth-child(2) { background: var(--yel); } .testi blockquote:nth-child(3) { background: var(--mag-ground); color: var(--paper); } @media (max-width: 820px) { .testi { grid-template-columns: 1fr; } } /* fabric chips */ .chipset { display: flex; flex-wrap: wrap; gap: 10px; } /* `span, button` — the gallery chips became real