/* ============================================================================ gtr-footer.css — redesigned footer (PRD: docs/task/footer-task/) Linked by common/footer.twig itself (body , valid HTML5) so BOTH header variants load it with one edit, and it comes after every stylesheet — wins the cascade at equal specificity without !important. Scope: every selector is prefixed .gtr-footer / .gtr-mop / .gtr-card. Mobile-first: base = phone accordions; ≥768px static 2×2; ≥992px 4 cols. Sections: 1 tokens+base · 2 grid · 3 headings/accordion · 4 link lists 5 brand+contact+social · 6 MOP grid · 7 bottom bar 8 module fallbacks · 9 ≥768 tablet · 10 ≥992 desktop · 11 a11y ========================================================================== */ /* 1. Tokens + base ---------------------------------------------------------- */ .gtr-footer { --gtr-orange: #e85224; /* brand accent — icons only (3.7:1) */ --gtr-orange-strong: #c73e12; /* AA on white — headings, hovers */ --gtr-orange-soft: #fdeee6; /* tinted pill for hover / open accordion */ --gtr-ink: #2f2a26; --gtr-muted: #6f6862; --gtr-line: #efe8e2; --gtr-surface: #f7f4f0; --gtr-card-border: rgba(47, 42, 38, 0.1); --gtr-transition: 160ms ease; /* overrides for stylesheet.css `footer{}` rules (its --rowspace token is undefined on desktop, so its margin-top silently drops there) */ margin-top: 40px; background: #fdfaf7; border-top: 1px solid var(--gtr-line); color: var(--gtr-ink); font-size: 14px; line-height: 1.5; } .gtr-footer a { text-decoration: none; } .gtr-footer img { max-width: 100%; height: auto; } .gtr-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* 2. Grid ------------------------------------------------------------------- */ .gtr-footer__grid { display: grid; grid-template-columns: 100%; padding: 8px 0 24px; } /* 3. Headings / accordion --------------------------------------------------- */ .gtr-footer__head { margin: 0; } .gtr-footer__col { border-bottom: 1px solid var(--gtr-line); } .gtr-footer__acc { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: calc(100% + 20px); min-height: 50px; margin: 0 -10px; padding: 4px 10px; background: none; border: 0; border-radius: 10px; text-align: left; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gtr-orange-strong); cursor: pointer; transition: background var(--gtr-transition), color var(--gtr-transition); } /* theme.css paints every bare button dark and button:hover tan #C1906F with white text (~2.8:1). These states outrank it (0,3,0 > 0,1,1) and keep the header AA (4.5:1): strong orange on the soft tint. Tap-stuck :hover on phones gets the same treatment as the open state instead of the tan flash. */ .gtr-footer .gtr-footer__acc:hover, .gtr-footer .gtr-footer__acc:focus-visible, .gtr-footer .gtr-footer__acc:active, .gtr-footer .gtr-footer__col.is-open .gtr-footer__acc { background: var(--gtr-orange-soft); color: var(--gtr-orange-strong); } .gtr-footer__chev { width: 14px; height: 14px; flex: 0 0 auto; color: var(--gtr-muted); transition: transform var(--gtr-transition); } .gtr-footer__col.is-open .gtr-footer__chev { transform: rotate(180deg); color: var(--gtr-orange-strong); } /* Panels: collapsed on phones, opened by the footer.twig toggle */ .gtr-footer__panel { display: none; padding: 4px 2px 20px; } .gtr-footer__col.is-open .gtr-footer__panel { display: block; } /* 4. Link lists ------------------------------------------------------------- */ .gtr-footer__links { list-style: none; margin: 0; padding: 0; } .gtr-footer__links li { margin: 0 0 9px; } .gtr-footer__links li:last-child { margin-bottom: 0; } .gtr-footer__links a { display: inline-block; color: var(--gtr-muted); transition: color var(--gtr-transition); } .gtr-footer__links a:before { content: "\203A "; /* › */ color: var(--gtr-orange); } .gtr-footer__links a:hover { color: var(--gtr-orange-strong); } /* 5. Brand / contact / social ----------------------------------------------- */ .gtr-footer__logo { display: block; width: clamp(120px, 14vw, 160px); height: auto; margin: 2px 0 10px; } /* CARD-level title (level 3), per plaza/gtr-sectionhead.css. Was the only Prata in the footer, at a size that belonged to no level. */ .gtr-footer__needhelp { margin: 0 0 12px; font-size: var(--gt-title-card, 17px); font-weight: 700; line-height: 1.3; color: var(--gt-title-ink, #2f2a26); } .gtr-footer__contact { list-style: none; margin: 0 0 16px; padding: 0; } .gtr-footer__contact li { display: grid; grid-template-columns: 17px 78px minmax(0, 1fr); gap: 4px 10px; align-items: baseline; margin-bottom: 10px; } .gtr-footer__cicon { align-self: start; } .gtr-footer__cicon svg { display: block; width: 16px; height: 16px; margin-top: 2px; color: var(--gtr-orange); } .gtr-footer__clabel { font-weight: 600; color: var(--gtr-ink); } .gtr-footer__cvalue { overflow-wrap: anywhere; } .gtr-footer__cvalue a { color: var(--gtr-muted); transition: color var(--gtr-transition); } .gtr-footer__cvalue a:hover { color: var(--gtr-orange-strong); } .gtr-footer__social { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; } .gtr-footer__soc { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; transition: opacity var(--gtr-transition), transform var(--gtr-transition); } .gtr-footer__soc svg { width: 16px; height: 16px; } .gtr-footer__soc:hover { opacity: 0.85; transform: translateY(-1px); color: #fff; } .gtr-footer__soc--fb { background: #1666c1; } .gtr-footer__soc--ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); } .gtr-footer__soc--yt { background: #e60000; } /* 6. Mode of Payment grid (PRD §8–§16) -------------------------------------- */ .gtr-footer__moplabel { margin: 16px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gtr-muted); } .gtr-footer__panel .gtr-footer__moplabel:first-child { margin-top: 0; } .gtr-mop-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 0; padding: 0; } /* Equal container regardless of logo shape; the logo scales INSIDE it and is never stretched (aspect ratio preserved, capped both ways). */ .gtr-mop { display: flex; align-items: center; justify-content: center; min-width: 0; height: 44px; padding: 6px 8px; background: #fff; border: 1px solid var(--gtr-card-border); border-radius: 6px; } .gtr-mop img { display: block; width: auto; height: auto; max-width: 100%; max-height: 24px; object-fit: contain; } /* 7. Bottom bar ------------------------------------------------------------- */ .gtr-footer__bottom { background: var(--gtr-surface); border-top: 1px solid var(--gtr-line); /* phone: keep copy/cards clear of the Messenger bubble + back-to-top */ padding: 18px 0 96px; } .gtr-footer__bottom-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .gtr-footer__secure { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; color: var(--gtr-ink); } .gtr-footer__secure svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--gtr-orange); } .gtr-footer__copy { margin: 0; font-size: 12.5px; color: var(--gtr-muted); } .gtr-footer__cards { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; /* phone: side padding keeps the wrapped strip clear of back-to-top */ padding: 0 64px; } .gtr-card { display: flex; align-items: center; justify-content: center; min-width: 52px; height: 28px; padding: 3px 8px; background: #fff; border: 1px solid var(--gtr-card-border); border-radius: 5px; } .gtr-card img { display: block; width: auto; height: auto; max-width: 100%; max-height: 20px; object-fit: contain; } /* 8. Module-output fallbacks (PRD §17) -------------------------------------- If an admin edits a footer block, the raw module output renders instead of the redesigned markup — keep its composites constrained, never overflowing. */ .gtr-footer__panel .footer-software a, .gtr-footer__pos8 .payment { display: block; } .gtr-footer__panel .footer-software img, .gtr-footer__pos8 img { display: block; width: 100%; max-width: 320px; height: auto; object-fit: contain; margin-bottom: 8px; } /* 9. ≥768px — tablet: static panels, 2×2 grid (PRD §31) --------------------- */ @media (min-width: 768px) { .gtr-footer { margin-top: 48px; } .gtr-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 28px; padding: 36px 0 40px; } .gtr-footer__col { border-bottom: 0; } .gtr-footer__panel { display: block; padding: 0; } .gtr-footer__head { margin: 0 0 14px; } .gtr-footer__head--collapse-only { display: none; } /* Static headings here (buttons are disabled) — flatten the phone pill and neutralize theme.css button:hover, which matches disabled buttons too. */ .gtr-footer .gtr-footer__acc, .gtr-footer .gtr-footer__acc:hover, .gtr-footer .gtr-footer__acc:focus-visible, .gtr-footer .gtr-footer__acc:active, .gtr-footer .gtr-footer__col.is-open .gtr-footer__acc { width: 100%; min-height: 0; margin: 0; padding: 0; background: none; border-radius: 0; color: var(--gtr-orange-strong); cursor: default; font-size: 15px; } .gtr-footer__chev { display: none; } .gtr-mop { height: 48px; } .gtr-mop img { max-height: 26px; } .gtr-footer__bottom { padding: 16px 0; } .gtr-footer__bottom-inner { flex-direction: row; flex-wrap: wrap; justify-content: space-between; text-align: left; } .gtr-footer__copy { flex: 1 1 auto; text-align: center; } .gtr-footer__cards { justify-content: flex-end; padding: 0; } } /* 10. ≥992px — desktop: 4 columns (PRD §20 ratios) -------------------------- */ @media (min-width: 992px) { .gtr-footer__grid { grid-template-columns: 1.5fr 1fr 0.9fr 1.7fr; gap: 40px 32px; padding: 44px 0 48px; } /* 92px floor ⇒ ~4 cards per row at 1440, 3 at 1024 (PRD §11) */ .gtr-mop-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); } .gtr-mop { height: 52px; } .gtr-mop img { max-height: 28px; } /* keep the right-aligned card strip clear of the Messenger bubble */ .gtr-footer__cards { padding: 0 168px 0 0; } } /* 11. Accessibility ---------------------------------------------------------- */ .gtr-footer__acc:focus-visible, .gtr-footer__links a:focus-visible, .gtr-footer__cvalue a:focus-visible, .gtr-footer__soc:focus-visible { outline: 2px solid var(--gtr-orange-strong); outline-offset: 2px; border-radius: 3px; }