/* === Catholic Intelligence: the mobile touch floor ========================= One sheet, linked from every surface, that raises standalone controls to a 44px touch target and lifts control labels off the sub-12px floor. SCOPE: every rule sits inside @media (pointer: coarse). Desktop rendering is untouched, so the careful mouse-and-keyboard typography carries no risk from this file. Phones and tablets get the larger targets; nothing else changes. WHAT IS DELIBERATELY NOT HERE: inline links inside a sentence. WCAG 2.5.8 exempts them from the target-size minimum precisely because padding a link in flowing prose either overlaps the neighbouring lines or forces the line height open and wrecks the column. The essay links ("Further: on the diocese"), the citation links in the notes list, and the Scripture references are all inline and all stay as they are. The controls that are NOT inline -- the toggle, the brand, the nav rows, the chips, the filter index, the list rows -- are what this sheet fixes. The class prefixes run in parallel across the templates: hp- (homepage), cn- (canon essays + /communion), c- (cathedrals). Selectors are written for all three rather than one generic rule, because the templates do not share a stylesheet and a bare `nav a` would reach into places it should not. ========================================================================= */ @media (pointer: coarse) { /* --- 1. The theme toggle ------------------------------------------------- 115x31 on 14 of 22 templates, and styled in six separate places (inline in index.html, news-teaser.ts, cathedrals/index.ts, sign-in/index.html, canon.css, home.css). Rather than chase all six, set the floor once here. min-height + inline-flex centring keeps the label optically centred whatever padding the owning sheet already set. */ .theme-toggle { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: max(0.75rem, 12px); } /* home.css scopes the toggle as `body.public-home .theme-toggle` (0,2,0), which outranks the rule above on the homepage and the workbench. Matched at equal specificity so the label clears 12px there too. */ body.public-home .theme-toggle, body.has-workbench .theme-toggle { font-size: max(0.75rem, 12px); } /* --- 2. Footnote reference markers -------------------------------------- `sup.fn > a` renders 5x10 to 7x13 -- the smallest targets on the site and the least hittable thing we ship. The glyph must stay superscript-sized, so the hit area is grown with an overlay instead of padding: the anchor keeps its layout box, the ::after spills out to 44px and catches the tap. Safe here because footnote markers are isolated in prose; they are never stacked against another control that the overlay could swallow. */ sup.fn a { position: relative; display: inline-block; } sup.fn a::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); /* Purely a hit area. Never paints, never affects layout. */ } /* --- 3. Footnote back-links --------------------------------------------- `a.fn-back` (the ↩ at the end of each note) is 14x19 and sits at the end of a list item, so a full 44px overlay would reach into the note above and below. Open the note line spacing first, then overlay within that room. */ .cn-notes li, .hp-notes li, .c-notes li { line-height: 1.9; margin-bottom: 0.55rem; } .fn-back { position: relative; display: inline-block; padding: 0 0.35rem; } .fn-back::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 38px; transform: translate(-50%, -50%); } /* --- 4. The brand lockup ------------------------------------------------- 354x30: full-bleed wide but only 30 tall. Height is the whole problem. */ .hp-brand, .cn-brand, .c-brand, .brand { min-height: 44px; } /* --- 5. Topbar nav rows ("Sign in") ------------------------------------- 55x17 and 64x19. These are standalone nav controls, not prose, so they take real padding and the row grows. Negative margin keeps the added padding from pushing the toggle off the line on a 390px viewport. */ .hp-nav > a, .cn-nav > a, .c-nav > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.4rem; margin: 0 -0.4rem; font-size: max(0.68rem, 12px); } /* --- 6. Footer + onward nav --------------------------------------------- `footer.cn-foot > a` at 35x18 and `nav.cn-onward > a` at 69x23. Stacked standalone links: give them block padding so the rows separate cleanly under a thumb. */ .cn-foot > a, .c-foot > a, .hp-foot > a, .cn-onward > a, .c-onward > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5rem; margin: 0 -0.5rem; } /* --- 7. Chips, tabs, and filter buttons --------------------------------- The homepage seek examples (98x28), the cathedral register filters (100x28), and the archive tabs and request chips (45x40 / 102x35). All are standalone controls sitting in a wrap row, so height is free to grow. */ .hp-example, .c-fchip, .tab, .coming-chip, .pill-button { min-height: 44px; padding-top: 0.4rem; padding-bottom: 0.4rem; font-size: max(0.7rem, 12px); } /* --- 8. Select controls -------------------------------------------------- `select.c-fsel` is 288x33. Native pickers are the one control a user cannot miss twice, but 33px is still under the floor. */ select, .c-fsel { min-height: 44px; } /* --- 9. The A-Z jump index ---------------------------------------------- 150 links at 30x32 on /cathedrals. This is the densest control cluster on the site and the hardest to hit: a two-letter target with no margin for a thumb. Grow each cell and let the index wrap to more rows. */ .c-jump > a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* --- 10. Register list rows --------------------------------------------- `a.c-name` (2,324 rows) at 205x28 and `a.c-site` (1,137) at 205x22. These are the primary content targets of the cathedrals register -- the thing the page exists for -- and both sit under the floor. Padding them also buys the separation that stops a mis-tap landing on the row below. */ .c-row > .c-name, .c-row > .c-site { display: flex; align-items: center; min-height: 44px; } /* --- 10b. The universities register -------------------------------------- Same shape as the cathedrals register above but under a u- prefix, which the c- selectors do not reach: 66 jump-index links as narrow as 11x34 and 723 list rows at 217x19 and 217x24. The narrow jump cells are the worst targets left on the site. */ .u-jump > a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } .u-row > .u-name, .u-row > .u-site { display: flex; align-items: center; min-height: 44px; } /* --- 10c. The parish record ---------------------------------------------- /p// is the most numerous template we publish. Its key facts sit in a
, and the links inside those
s -- the website, the telephone, and the directions -- rendered 21 to 22px tall. Those are the three things somebody standing outside a church actually taps. */ .kv dd a, .p-directions { display: inline-flex; align-items: center; min-height: 44px; } .p-action { min-height: 44px; font-size: max(0.72rem, 12px); } .p-eyebrow, .p-badge { font-size: max(0.72rem, 12px); } .cilf-signin, .ci-sat-meta a { display: inline-flex; align-items: center; min-height: 44px; } /* Shared record footer: /p/, /d/ and /universities/ all render it, and its links were 28px or less on every one. */ .site-foot p a { display: inline-flex; align-items: center; min-height: 44px; } /* --- 11. Map controls ---------------------------------------------------- MapLibre ships 29x29 zoom buttons and a 24x24 attribution summary. They are third-party defaults, so they are overridden here rather than in the map templates, which do not own the markup. */ .maplibregl-ctrl-group > button { width: 44px; height: 44px; } .maplibregl-ctrl-attrib-button { width: 44px; height: 44px; } /* --- 12. Checkboxes and radios ------------------------------------------ The archive state picker ships 16x16 native boxes. Grow the box, and give the wrapping label the height so the whole row is tappable, not just the glyph. */ input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; } label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; } /* --- 13. Control-label type floor --------------------------------------- Sub-12px text that labels a control (as against decorative letterspaced small-caps, which read fine at 11px because of the tracking and are left alone deliberately). */ button, .c-kind, .product-tag, .product-row-count, .visual-format, .state-check-rows { font-size: max(0.72rem, 12px); } /* The coverage console runs its action links and table headers at 9px -- 162 controls on the page, and the smallest interactive type on the site. Internal dashboard, but it is read on a phone like everything else. */ .act, .cmd-bar, .bar-label, th, .k { font-size: max(0.72rem, 12px); } /* The universities register tags every row "Catholic" or "Jesuit" at 11.8px, 572 of them: the c-kind equivalent already covered above. */ .u-kind, .u-eyebrow { font-size: max(0.72rem, 12px); } /* The parish record. The
s label the key facts, and the Mass rows carry the day and the language of each celebration -- the hours of Holy Mass are what the whole site is for, so they do not get to be the smallest type on the page. The satellite strip ran down to 9.3px. */ .kv-grid .kv dt, .p-massrow-day, .p-lang, .p-schedule-days span, .ci-sat-kicker, .ci-sat-main span, .ci-sat-meta span, .ci-sat-meta a, .ci-sat-toolbar output { font-size: max(0.72rem, 12px); } /* The map drawer labels its controls at 11px and scopes those rules tightly enough to outrank the generic button rule above. */ .drawer-body button, .drawer-body label, .drawer-body summary, .drawer-body span, .section-title, .menu-head, .leg-n, .mi-sub { font-size: max(0.72rem, 12px); } /* --- 14. The J.M.J. mark ------------------------------------------------- 9.4px on /map, /request-access, /sign-in. It is the one piece of the Catholic mark that should never render as noise. */ .jmj { font-size: max(0.62rem, 11px); } /* --- 14b. The 24 Churches ------------------------------------------------ /communion/ lists the 24 sui iuris Churches as heading links at 149x27. They are the entire point of the page and the only way into each Church's profile, so they take the floor even though they sit inside an

. */ .cn-church-link { display: inline-flex; align-items: center; min-height: 44px; } /* --- 14c. The map drawer ------------------------------------------------- /map/ carries its own chrome: a header CTA (57x40), the account menu (266x34), the drawer quick actions (173x40), the collapsible control groups (352x42 and 372x35 summaries) and the drawer link row (49x18). Every one is a standalone control on the surface a member is most likely to open one-handed. */ .open-cta, .menu-panel > a, .quick-actions > button, .drawer-links > a { display: inline-flex; align-items: center; min-height: 44px; } /* Every disclosure control, not just the drawer's: the map also carries an unclassed top-level
("Catholic population") at 372x35, and a summary is always a standalone control wherever it appears. */ summary { min-height: 44px; display: flex; align-items: center; } /* ...except MapLibre's attribution toggle, which is a fixed 44x44 square set in section 11 and must not be stretched to full width by the flex above. */ summary.maplibregl-ctrl-attrib-button { display: block; } /* --- 14d. Form labels and the entry chrome ------------------------------- /request-access/ is the door we hand to people by name, and /sign-in/ and /map/ share its chrome. Its field labels render at 11.2px and its live stats at 10.8px -- letterspaced small-caps, so legible, but a label on a form someone is being asked to fill in should not be the smallest type on the page. The wordmark link also lands at 181x43, one pixel short. */ .row label, form label, .live-stats span { font-size: max(0.72rem, 12px); } .wordmark > a { display: inline-flex; align-items: center; min-height: 44px; } /* --- 15. Text entry ------------------------------------------------------ The archive search box is 300x30. A short input is worse than a short link: a mis-tap puts the caret in the wrong field and the keyboard opens over the result. 16px on the font is not cosmetic -- iOS Safari zooms the whole page when a focused input is under 16px, which is the single most common way a mobile form feels broken. */ input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], textarea { min-height: 44px; font-size: max(1rem, 16px); } /* --- 16. Buttons that carry a label ------------------------------------- The archive detail toggles (40x40), its primary actions (69x40) and the coverage console act buttons (76x23 / 69x22). All standalone. */ .button, .icon-button, .act, .nav-merch, .button-primary, .button-secondary { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* store.css sets `.product-actions .button { min-height: 40px }` at specificity (0,2,0), which beats a single-class rule here no matter the load order. Matched selector-for-selector rather than reached for !important, so the cascade stays readable. */ .product-actions .button { min-height: 44px; } /* The archive detail toggle is a square icon button: height was the only dimension the generic rule fixed, and 40px wide is still under the floor for a control whose whole label is a single "i". */ .icon-button { min-width: 44px; } /* --- 17. Stacked footer + sidebar link lists ---------------------------- The archive footer columns (166x20, 140x19) and the coverage sidebar (376x37). Vertical lists of standalone links, where a short row means the thumb lands on the neighbour. */ .footer-grid a, .footer-bottom a, .site-footer nav a, aside > nav > a { display: flex; align-items: center; min-height: 44px; } /* --- 18. Dense table actions -------------------------------------------- The coverage tables carry ~150 inline act links and buttons at 54x23. They sit inside a table cell, so growing them grows the row -- which is the right trade on a phone, where the table already scrolls. */ td .acts a, td .acts button { min-height: 44px; display: inline-flex; align-items: center; } /* The coverage tables also carry ~43 bare place links in their first column ("Mexico City") at 71x19. Those are the row's own identity link, not prose inside a sentence, so the inline exemption does not cover them. */ td > a { display: inline-flex; align-items: center; min-height: 44px; /* Short place names ("Lugo") leave the target only ~33px wide. The negative margin buys the width back without shifting the column. */ padding-inline: 0.4rem; margin-inline: -0.4rem; } }