/* ============================================================================ gtr-pages.css — the shared design for every page behind the footer's Information and Customer Service columns: the seven CMS pages (Return Policy, About Us, Terms, Security Policy, Mode of Payment, Delivery Information, Deliverable Areas), Site Map, Wish List, Brands, Gift Certificates, Affiliate and Returns. Those pages had never been redesigned: they still rendered through OpenCart's stock `default/` templates, so a branded serif page-head band sat directly above unstyled WYSIWYG output and the join was visible. HOW IT LOADS. Two ways, deliberately: 1. As a body on line 2 of each theme template that takes over a route — loads after every sheet, so it wins by source order and needs no !important. 2. Scoped by the body route class (body.information-information, body.account-wishlist, body.affiliate-register, ...). common/header.twig renders and the header controller sets class = str_replace('/', '-', route). This is what lets the form-heavy pages (affiliate/register is 711 lines) be restyled without restructuring markup that controllers and JS depend on. TRAPS THIS FILE IS WRITTEN AROUND (docs/frontend-css-architecture.md): - common.js:42-71 MOVES `ul.breadcrumb` and `#content > h1` out of the page into .gtr-pagehead after #header. So page-scoped selectors like `#information-information h1` match NOTHING at runtime, and the page title must stay an

that is a direct child of #content. Titles are styled by plaza/gtr-pagehead.css, not here. - Desktop never loads plaza/theme_font.css, so --main-color, --link-color, --heading-* and --rowspace resolve to nothing there and the whole declaration is dropped. This file defines its own --gt-* tokens. - Generated plaza/theme.css styles bare `button {}` dark #253237 with a tan #C1906F hover (~2.8:1, fails AA). Every button here therefore sets background AND color AND hover/active at >= (0,2,0) specificity. - stylesheet.css:7 is `:focus{outline:none !important}`, so focus rings need their own !important to paint at all. - Bootstrap 3 only: no d-flex/mb-3/text-muted. Grid classes in the templates are load-bearing; restyle around them. Sections: 1 tokens · 2 page shell · 3 prose · 4 side nav · 5 help card 6 card grid · 7 forms & tables · 8 phones ========================================================================== / /* ---------------------------------------------------------------- 1. Tokens / / Same values as gtr-contact.css §1 so the two sheets cannot drift. Declared on both the explicit wrapper and the route body classes, because pages styled without a template takeover have no .gtr-page element to hang on. / .gtr-page, body.information-information #content, body.information-sitemap #content, body.account-wishlist #content, body.account-voucher #content, body[class^="account-return"] #content, body.product-manufacturer #content, body.affiliate-login #content, body.affiliate-register #content, body.affiliate-forgotten #content { --gt-brand: #e85224; / icons / large accents only — 3.7:1, fails AA at text size / --gt-brand-strong: #c73e12; / interactive text, hovers — 5.1:1 on white / --gt-brand-deep: #a83210; / hover/active for filled controls / --gt-brand-soft: #fdeee6; --gt-ink: #2f2a26; --gt-muted: #6f6862; --gt-line: #efe8e2; --gt-border: #ddd2c8; / form control borders — visible but soft / --gt-surface-alt: #faf5f0; --gt-radius: 10px; --gt-transition: 160ms ease; color: var(--gt-ink); } / ------------------------------------------------------------ 2. Page shell / .gtr-page { display: grid; gap: 26px; margin: 6px 0 10px; font-size: 15px; line-height: 1.65; } / Sidebar only where there is room for it. Below 992px the footer accordion already carries the same links, so repeating them is noise. / @media (min-width: 992px) { / Rail on the LEFT — the conventional place for section navigation, so it is where people look for it. The whole composition is capped, not just the text. Left at 1fr the main track is ~1080px while readable prose stops at ~705px, so a text-only page (Return Policy) stranded ~375px of white between the last word and the rail — which reads as a broken layout, not as breathing room. Capping content+rail together closes that gap on prose pages while still giving the Deliverable Areas fee tables ~770px, comfortably more than their three short columns need. No grid-column assignments: the aside comes first in the markup, so natural order already places it in the first track. That keeps DOM order matching visual order (WCAG 2.4.3), which an explicit reorder would have broken for keyboard and screen-reader users. / .gtr-page--withside { grid-template-columns: 250px minmax(0, 1fr); gap: 40px; max-width: 1080px; align-items: start; } } .gtr-pagemain { min-width: 0; } / ----------------------------------------------------------------- 3. Prose / / The typographic treatment for {{ description }} — raw admin WYSIWYG HTML we cannot add classes to. Every selector is a low-specificity descendant so an admin edit can restructure the content without breaking the page, and so nothing here outranks a deliberate inline style the shop may have applied. / / MEASURE: the 68ch reading width belongs on TEXT, not on the container. Deliverable Areas is six fee tables and nothing else; capping the whole prose block left a ~200px void between the last column and the sidebar and squeezed the tables for no reason. Paragraphs and lists still get a comfortable line length (78ch — the upper end of the readable 45–90ch band, chosen so the text column nearly fills the grid track instead of leaving a void beside the sidebar); tables, images and scroll wrappers use the full column. Applied at any depth because Word wraps content in divs. / .gtr-prose { max-width: none; color: var(--gt-ink); font-size: 15.5px; line-height: 1.75; } .gtr-prose p, .gtr-prose ul, .gtr-prose ol, .gtr-prose blockquote { max-width: 78ch; } / The band above already shows the page title, so the body should not open with a redundant top margin. / .gtr-prose > :first-child { margin-top: 0; } .gtr-prose > :last-child { margin-bottom: 0; } .gtr-prose p { margin: 0 0 1.05em; } / Levels 2 and 3 of the site-wide title system (plaza/gtr-sectionhead.css). Prata is levels 1-2 only; a serif at 17px beside a serif at 28px reads as one level, not two, so h3 and below are sans. / .gtr-prose h1, .gtr-prose h2 { margin: 1.9em 0 0.6em; font-family: var(--gt-title-face, Prata, Georgia, "Times New Roman", serif); font-size: var(--gt-title-section, clamp(22px, 2.4vw, 28px)); font-weight: 400; line-height: var(--gt-title-lh, 1.2); letter-spacing: var(--gt-title-ls, -0.01em); color: var(--gt-title-ink, #2f2a26); } .gtr-prose h3, .gtr-prose h4, .gtr-prose h5, .gtr-prose h6 { margin: 1.7em 0 0.5em; font-family: inherit; font-size: var(--gt-title-card, 17px); font-weight: 700; line-height: 1.35; color: var(--gt-ink); } .gtr-prose h4, .gtr-prose h5, .gtr-prose h6 { font-size: 15.5px; } / Admin copy frequently bolds a run-in heading instead of using a real heading element. Give those a little air so the page still has rhythm. / .gtr-prose p > strong:only-child { display: inline-block; margin-top: 0.3em; } .gtr-prose a { color: var(--gt-brand-strong); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color var(--gt-transition); } .gtr-prose a:hover, .gtr-prose a:focus { color: var(--gt-brand-deep); } .gtr-prose ul, .gtr-prose ol { margin: 0 0 1.05em; padding-left: 1.35em; } .gtr-prose li { margin: 0 0 0.4em; } .gtr-prose ul { list-style: disc; } .gtr-prose ol { list-style: decimal; } .gtr-prose blockquote { margin: 1.4em 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--gt-brand-soft); color: var(--gt-muted); font-style: italic; } .gtr-prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--gt-line); } .gtr-prose img { max-width: 100%; height: auto; border-radius: 8px; } / WYSIWYG tables (the Deliverable Areas fee table is the big one). The table scrolls inside its own box; the PAGE must never scroll horizontally. The wrapper is added by the template where possible, but admin HTML often supplies a bare , so the display:block fallback covers that too. / .gtr-prosescroll { overflow-x: auto; margin: 0 0 1.3em; -webkit-overflow-scrolling: touch; } .gtr-prose table { width: 100%; margin: 0 0 1.3em; border-collapse: collapse; font-size: 14.5px; } .gtr-prosescroll > table { margin-bottom: 0; } .gtr-prose th, .gtr-prose td { padding: 10px 14px; border: 1px solid var(--gt-line); text-align: left; vertical-align: top; } .gtr-prose th { background: var(--gt-surface-alt); font-weight: 700; color: var(--gt-ink); } / --------------------------------------- 3b. Word-paste neutraliser The CMS copy was pasted from Microsoft Word: Return Policy alone carries 22 inline font-family, 21 font-size and 21 line-height declarations on wrappers, plus artifacts and MsoNormal classes. Inline styles beat every stylesheet rule, so without this block the entire prose design above is invisible on exactly the pages it was written for — the page would still render 11pt Calibri on a boutique florist. !important is deliberate and is the narrow, sanctioned use: answering inline styles we do not control and cannot edit from a template. It is scoped to .gtr-prose, so it cannot reach anything else on the site. Scope note: font-family and line-height are neutralised on everything (Word never varies them meaningfully). font-size is neutralised on only — that is the element Word wraps text runs in, while a real heading or a deliberate admin size change lives on a block element and survives. If the shop ever wants larger body text, the right fix is the copy, not a span. This block does NOT touch colour, weight or alignment: bold, italics and any emphasis the shop applied stay exactly as typed. -------------------------------------------------------------------------- / .gtr-prose [style] { font-family: inherit !important; line-height: inherit !important; } .gtr-prose span[style] { font-size: inherit !important; } / Word emits empty paragraph markers that render as stray blank runs. / .gtr-prose o\:p { display: none; } / MsoNormal carries Word's own zero margins, which collapses the paragraph rhythm the prose rules set up. / .gtr-prose p.MsoNormal { margin: 0 0 1.05em; } .gtr-prose p.MsoListParagraph { margin: 0 0 0.4em; } / ------------------------------------------------ 3c. Fee / data tables in prose Deliverable Areas is SIX of these and nothing else, so on that page the table IS the design. The admin markup carries class="table table-border", so these selectors repeat `table.table` to outrank Bootstrap 3's own .table rules without !important. Full column width (the reading measure above deliberately does not apply), rounded hairline frame, sticky-feeling header band, and a right-aligned fee column that stays on one line so "PHP 1,300 - Shipping Fee" never wraps mid-amount. / .gtr-prose table, .gtr-prose table.table { width: 100%; max-width: none; margin: 0 0 1.6em; border: 1px solid var(--gt-line); border-radius: var(--gt-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 14.5px; background: #fff; } .gtr-prose table.table > thead > tr > th, .gtr-prose table.table > thead > tr > td, .gtr-prose table th { padding: 11px 16px; border: 0; border-bottom: 1px solid var(--gt-line); background: var(--gt-surface-alt); color: var(--gt-ink); font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; text-align: left; vertical-align: middle; white-space: nowrap; } .gtr-prose table.table > tbody > tr > td, .gtr-prose table td { padding: 10px 16px; border: 0; border-top: 1px solid var(--gt-line); vertical-align: middle; color: var(--gt-ink); } / The first body row sits directly under the header band, which already has its own bottom rule — a second line there reads as a double border. / .gtr-prose table.table > tbody > tr:first-child > td { border-top: 0; } .gtr-prose table.table > tbody > tr:nth-child(even) > td, .gtr-prose table tbody tr:nth-child(even) td { background: #fcfaf8; } .gtr-prose table.table > tbody > tr:hover > td { background: var(--gt-brand-soft); } / Area name column carries the row; the km column is secondary. / .gtr-prose table.table > tbody > tr > td:first-child { font-weight: 600; } .gtr-prose table.table > tbody > tr > td:last-child, .gtr-prose table.table > thead > tr > th:last-child { white-space: nowrap; } / A "Free Shipping" row is good news — let it read as such without relying on colour alone (the word is already there). / .gtr-prose table.table > tbody > tr > td:last-child { color: var(--gt-ink); } / Group heading above each table ("Metro Manila Area", "Rizal Area", ...). The admin markup uses h3, which the base prose rules render at card level; here it needs to read as the label of the block beneath it. / .gtr-prose h3 { margin: 2em 0 0.7em; padding-bottom: 8px; border-bottom: 2px solid var(--gt-brand-soft); font-size: 18px; color: var(--gt-ink); } .gtr-prose > h3:first-child { margin-top: 0; } @media (max-width: 767px) { / Let a wide fee table scroll inside itself rather than forcing the whole page to scroll sideways. / .gtr-prose table, .gtr-prose table.table { display: block; overflow-x: auto; white-space: nowrap; } .gtr-prose table.table > thead > tr > th, .gtr-prose table.table > tbody > tr > td { padding: 9px 12px; } } / ------------------------------------------- 3d. Deliverable Areas: no Kilometer The fee tables ship a middle "Kilometer" column. It is empty for all 17 Metro Manila rows and, more importantly, it was the third column that pushed the table past a phone's width and forced horizontal scrolling on the one page people open ON a phone to check what delivery costs. Dropped from the design layer rather than the copy: no DB write, and the data is still in the admin content if it is ever wanted back (delete this block and the 2-column widths below to restore it). Scoped to .gtr-prose--areas — the modifier the template adds only on this page — so a table on any other CMS page keeps all of its columns. display:none removes the cells from the accessibility tree as well as the layout, so a screen reader is not left reading out an empty column. / .gtr-prose--areas table tr > th:nth-child(2), .gtr-prose--areas table tr > td:nth-child(2) { display: none; } / Two visible columns now, so the 42/22/36 split above no longer adds up. These override it at equal specificity by loading later. / .gtr-prose--areas table tr > th:first-child, .gtr-prose--areas table tr > td:first-child { width: 58%; } .gtr-prose--areas table tr > th:last-child, .gtr-prose--areas table tr > td:last-child { width: 42%; } @media (max-width: 767px) { / With the third column gone the table fits, so it no longer has to behave as a scroll container. Reverting display:block back to a real table and letting cells wrap is what actually removes the sideways scroll — a nowrap block would still overflow on a long name like "Cavite-Gen. Emilio Aguinaldo". / .gtr-prose--areas table, .gtr-prose--areas table.table { display: table; overflow-x: visible; white-space: normal; } .gtr-prose--areas table tr > th, .gtr-prose--areas table tr > td { white-space: normal; } } / -------------------------------------------------------------- 4. Side nav Mobile-first, and it now RENDERS AT EVERY WIDTH. It used to be display:none below 992px on the reasoning that the footer accordion carries the same links. That is true but useless in the moment: someone reading Return Policy on a phone had no way to reach Terms without scrolling the whole page. As a left rail it is primary navigation, so it has to survive the breakpoint. Phones get a horizontal scrolling pill strip above the content — no JS, no Bootstrap dropdown (clearMenus closes those on inside clicks), and it costs one row of height instead of seven. Desktop gets the sticky vertical card. / .gtr-pageside { margin: 0 0 4px; min-width: 0; } .gtr-pageside-title { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gt-brand-strong); } .gtr-pageside-list { display: flex; gap: 8px; margin: 0; padding: 0 0 4px; list-style: none; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .gtr-pageside-list li { margin: 0; flex: 0 0 auto; } .gtr-pageside-list a { display: block; padding: 8px 14px; border: 1px solid var(--gt-line); border-radius: 999px; background: #fff; color: var(--gt-ink); font-size: 13.5px; line-height: 1.3; white-space: nowrap; text-decoration: none; transition: background var(--gt-transition), color var(--gt-transition), border-color var(--gt-transition); } .gtr-pageside-list a:hover, .gtr-pageside-list a:focus { background: var(--gt-brand-soft); border-color: var(--gt-brand-strong); color: var(--gt-brand-strong); } .gtr-pageside-list a[aria-current="page"] { background: var(--gt-brand-strong); border-color: var(--gt-brand-strong); color: #fff; font-weight: 600; } @media (min-width: 992px) { / Vertical card. Sticky so the rail stays reachable down a long policy page; top offset clears the sticky header. / .gtr-pageside { position: sticky; top: 20px; margin: 0; padding: 20px; border: 1px solid var(--gt-line); border-radius: var(--gt-radius); background: var(--gt-surface-alt); } .gtr-pageside-title { margin-bottom: 12px; } .gtr-pageside-list { display: block; overflow: visible; padding: 0; } .gtr-pageside-list a { padding: 7px 10px; border: 0; border-radius: 6px; background: none; font-size: 14px; line-height: 1.4; white-space: normal; } .gtr-pageside-list a:hover, .gtr-pageside-list a:focus { background: var(--gt-brand-soft); border-color: transparent; color: var(--gt-brand-strong); } / On the card, the current page reads as a highlighted row rather than a filled pill — a solid block would over-weight it inside a tinted panel. / .gtr-pageside-list a[aria-current="page"] { background: #fff; box-shadow: inset 2px 0 0 var(--gt-brand-strong); color: var(--gt-brand-strong); } } / ------------------------------------------------------------- 5. Help card / .gtr-pagehelp { margin-top: 34px; padding: 22px; border: 1px solid var(--gt-line); border-radius: var(--gt-radius); background: var(--gt-surface-alt); } .gtr-pagehelp-title { margin: 0 0 6px; font-size: var(--gt-title-card, 17px); font-weight: 700; color: var(--gt-ink); } .gtr-pagehelp-lead { margin: 0 0 14px; color: var(--gt-muted); font-size: 14.5px; } .gtr-pagehelp-list { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 16px; padding: 0; list-style: none; font-size: 14.5px; } .gtr-pagehelp-list span { color: var(--gt-muted); margin-right: 6px; } .gtr-pagehelp-list a { color: var(--gt-brand-strong); text-decoration: none; font-weight: 600; } .gtr-pagehelp-list a:hover, .gtr-pagehelp-list a:focus { text-decoration: underline; } / ------------------------------------------------------------- 6. Card grid / .gtr-pagegrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin: 0; padding: 0; list-style: none; } .gtr-pagecard { padding: 18px 20px; border: 1px solid var(--gt-line); border-radius: var(--gt-radius); background: #fff; transition: border-color var(--gt-transition), box-shadow var(--gt-transition); } .gtr-pagecard:hover { border-color: var(--gt-border); box-shadow: 0 2px 10px rgba(47, 42, 38, 0.06); } .gtr-pagecard-title { margin: 0 0 10px; font-size: var(--gt-title-card, 17px); font-weight: 700; color: var(--gt-ink); } .gtr-pagecard-list { margin: 0; padding: 0; list-style: none; } .gtr-pagecard-list li { margin: 0 0 6px; } .gtr-pagecard-list li:last-child { margin-bottom: 0; } .gtr-pagecard-list a, .gtr-pagecard > a { color: var(--gt-ink); font-size: 14.5px; text-decoration: none; transition: color var(--gt-transition); } .gtr-pagecard-list a:hover, .gtr-pagecard-list a:focus, .gtr-pagecard > a:hover, .gtr-pagecard > a:focus { color: var(--gt-brand-strong); text-decoration: underline; } / ------------------------------------------------------- 7. Forms and tables / / Applies to the account/affiliate pages via their body route class, so the 711-line affiliate register form is restyled without touching its markup. / .gtr-pageform, body.account-voucher #content .well, body.affiliate-login #content .well, body.affiliate-register #content fieldset, body[class^="account-return"] #content fieldset { padding: 22px; border: 1px solid var(--gt-line); border-radius: var(--gt-radius); background: #fff; box-shadow: none; } body.affiliate-register #content legend, body[class^="account-return"] #content legend, body.account-voucher #content legend { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--gt-line); font-family: inherit; font-size: var(--gt-title-card, 17px); font-weight: 700; color: var(--gt-ink); } .gtr-pageform .control-label, body.account-voucher #content .control-label, body.affiliate-login #content .control-label, body.affiliate-register #content .control-label, body[class^="account-return"] #content .control-label { font-size: 14px; font-weight: 600; color: var(--gt-ink); } .gtr-pageform .form-control, body.account-voucher #content .form-control, body.affiliate-login #content .form-control, body.affiliate-register #content .form-control, body[class^="account-return"] #content .form-control { height: auto; padding: 10px 12px; border: 1px solid var(--gt-border); border-radius: 8px; box-shadow: none; color: var(--gt-ink); font-size: 15px; transition: border-color var(--gt-transition), box-shadow var(--gt-transition); } .gtr-pageform .form-control:focus, body.account-voucher #content .form-control:focus, body.affiliate-login #content .form-control:focus, body.affiliate-register #content .form-control:focus, body[class^="account-return"] #content .form-control:focus { border-color: var(--gt-brand-strong); box-shadow: 0 0 0 3px var(--gt-brand-soft); outline: none; } .gtr-pageform .help-block, body.affiliate-register #content .help-block, body[class^="account-return"] #content .help-block { color: var(--gt-muted); font-size: 13px; } .gtr-pageform .text-danger, body.affiliate-register #content .text-danger, body[class^="account-return"] #content .text-danger, body.account-voucher #content .text-danger { color: #b3261e; font-size: 13px; } / Buttons. Explicit background AND color AND hover/active, at >= (0,2,0), or generated theme.css paints them dark with a 2.8:1 tan hover. / .gtr-page .btn-primary, body.account-voucher #content .btn-primary, body.affiliate-login #content .btn-primary, body.affiliate-register #content .btn-primary, body[class^="account-return"] #content .btn-primary { background-color: var(--gt-brand-strong); border: 1px solid var(--gt-brand-strong); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; transition: background-color var(--gt-transition), border-color var(--gt-transition); } .gtr-page .btn-primary:hover, .gtr-page .btn-primary:focus, .gtr-page .btn-primary:active, body.account-voucher #content .btn-primary:hover, body.account-voucher #content .btn-primary:focus, body.affiliate-login #content .btn-primary:hover, body.affiliate-login #content .btn-primary:focus, body.affiliate-register #content .btn-primary:hover, body.affiliate-register #content .btn-primary:focus, body[class^="account-return"] #content .btn-primary:hover, body[class^="account-return"] #content .btn-primary:focus { background-color: var(--gt-brand-deep); border-color: var(--gt-brand-deep); color: #fff; } .gtr-page .btn-default, body.account-voucher #content .btn-default, body.affiliate-login #content .btn-default, body.affiliate-register #content .btn-default, body[class^="account-return"] #content .btn-default { background-color: #fff; border: 1px solid var(--gt-border); color: var(--gt-ink); font-size: 13px; font-weight: 600; } .gtr-page .btn-default:hover, .gtr-page .btn-default:focus, body.account-voucher #content .btn-default:hover, body.affiliate-login #content .btn-default:hover, body.affiliate-register #content .btn-default:hover, body[class^="account-return"] #content .btn-default:hover { background-color: var(--gt-brand-soft); border-color: var(--gt-brand-strong); color: var(--gt-brand-strong); } / Focus rings need !important — stylesheet.css:7 blanks every outline. / .gtr-page a:focus-visible, .gtr-page button:focus-visible, .gtr-pageside-list a:focus-visible, .gtr-pagecard a:focus-visible, body.affiliate-register #content a:focus-visible, body.affiliate-register #content button:focus-visible, body[class^="account-return"] #content a:focus-visible, body[class^="account-return"] #content button:focus-visible, body.account-voucher #content a:focus-visible, body.account-voucher #content button:focus-visible { outline: 2px solid var(--gt-brand-strong) !important; outline-offset: 2px; } / Data tables that are real markup (wish list, returns list). / .gtr-pagetable-scroll { overflow-x: auto; } .gtr-page .table-responsive .table, body[class^="account-return"] #content .table-responsive .table { border: 1px solid var(--gt-line); border-radius: var(--gt-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; } .gtr-page .table-responsive .table > thead > tr > td, .gtr-page .table-responsive .table > thead > tr > th { border-bottom: 1px solid var(--gt-line); background: var(--gt-surface-alt); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gt-muted); } .gtr-page .table-responsive .table > tbody > tr > td { border-top: 1px solid var(--gt-line); vertical-align: middle; } / ---------------------------------------------------------------- 8. Phones / @media (max-width: 767px) { .gtr-page { gap: 20px; font-size: 14.5px; } .gtr-prose { font-size: 15px; line-height: 1.7; } .gtr-prose h1, .gtr-prose h2 { margin-top: 1.6em; } .gtr-pagehelp, .gtr-pagecard { padding: 16px; } .gtr-pagehelp { margin-top: 26px; } .gtr-pagegrid { grid-template-columns: 1fr; } .gtr-prose th, .gtr-prose td { padding: 8px 10px; } } / ------------------------------------------------ 6b. Site map extras The category tree is the reason most people open a site map, so it gets the full row while the shorter link lists sit beside each other. / .gtr-pagecard--wide { grid-column: 1 / -1; } .gtr-pagetree ul { margin: 6px 0 6px 14px; padding: 0 0 0 12px; border-left: 1px solid var(--gt-line); list-style: none; } .gtr-pagetree ul a { color: var(--gt-muted); font-size: 14px; } .gtr-pagetree ul a:hover, .gtr-pagetree ul a:focus { color: var(--gt-brand-strong); } / Top level of the tree reads as the heading of its own little group. / .gtr-pagetree > li { margin: 0 0 12px; } .gtr-pagetree > li > a { font-weight: 600; } @media (min-width: 768px) { / Three columns of top-level categories inside the wide card; each branch is kept whole with break-inside so a child list never splits a column. / .gtr-pagecard--wide .gtr-pagetree { column-count: 3; column-gap: 28px; } .gtr-pagecard--wide .gtr-pagetree > li { break-inside: avoid; -webkit-column-break-inside: avoid; } } / ------------------------------------------------------- 6c. A-Z jump row Brands index. Replaces a run-on paragraph of -separated letters. / .gtr-pageaz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--gt-line); } .gtr-pageaz-label { margin-right: 4px; color: var(--gt-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .gtr-pageaz a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--gt-line); border-radius: 8px; background: #fff; color: var(--gt-ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: background var(--gt-transition), border-color var(--gt-transition), color var(--gt-transition); } .gtr-pageaz a:hover, .gtr-pageaz a:focus { background: var(--gt-brand-soft); border-color: var(--gt-brand-strong); color: var(--gt-brand-strong); } / Anchor targets sit under the sticky header without this. / .gtr-page__card[id] { scroll-margin-top: 90px; } / Column proportions for the 3-column fee tables (Area / Kilometer / Fee). Left to itself the browser gives the area name ~55% and floats the fee far from it; on the Metro Manila table the Kilometer cells are empty in the admin copy, which made that gap read as a layout bug rather than a blank column. Fixed proportions keep the three columns evenly weighted whatever the cells contain. Scoped to 3-column rows so a 2- or 4-column table added later is untouched. */ .gtr-prose table.table > tbody > tr > td:first-child:nth-last-child(3), .gtr-prose table.table > thead > tr > th:first-child:nth-last-child(3) { width: 42%; } .gtr-prose table.table > tbody > tr > td:nth-child(2):nth-last-child(2), .gtr-prose table.table > thead > tr > th:nth-child(2):nth-last-child(2) { width: 22%; } .gtr-prose table.table > tbody > tr > td:nth-child(3):last-child, .gtr-prose table.table > thead > tr > th:nth-child(3):last-child { width: 36%; }