From 8e5443e9d126b6020ad402df862f47656e4f05b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?eW=C9=98yn?= <5607939+Llewellynvdm@users.noreply.github.com> Date: Mon, 31 Aug 2026 10:57:36 +0200 Subject: [PATCH] Tighten and darken footer links --- AGENTS.md | 3 ++- dist/truechristian-theme.css | 5 +++-- dist/truechristian-theme.min.css | 2 +- docs/brand-guide.md | 2 +- docs/footer.md | 2 +- docs/source-inventory.md | 2 ++ docs/typography.md | 4 ++-- examples/style-guide.html | 2 +- scripts/validate.mjs | 13 +++++++++++-- src/css/footer.css | 5 +++-- src/html/document-head.html | 2 +- 11 files changed, 28 insertions(+), 14 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 0a12d78..334365a 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -72,7 +72,8 @@ This terminology prevents the YOOtheme region name `tm-bottom` from being confus - The data preserves the source's root-relative URLs. On a different domain, resolve every root-relative global-footer URL against `https://truechristian.church`; the portable HTML template already does this. - `Social Outreach` MUST contain only GitHub and Telegram icon links, in that order. - The owner-supplied original skyline file is `assets/footer/city-skyline-skyscrapers-top.jpg`, matching the source-site path `/images/city-skyline-skyscrapers-top.jpg`. Preserve the original asset and its `270px × 180px` display slot; do not replace it with a screenshot crop or unrelated stock imagery. -- Directory link rows MUST use a `5px` sibling gap. Apply the same spacing to portable `.tcc-footer-group` markup and compatible `.tm-bottom .uk-list` markup. +- Directory link rows MUST have no sibling margin or gap. Apply the same zero-spacing rule to portable `.tcc-footer-group` markup and compatible `.tm-bottom .uk-list` markup. +- Directory links MUST render at full opacity in `#2d2e33` using Montserrat 500 so the small uppercase text remains dark and legible. - On medium layouts, the four columns MAY become a two-by-two grid. On narrow layouts, stack them and center headings, links, and social controls. - Keep the generous light-grey spacing, uppercase headings and links, circular social buttons, rounded image treatment, and subdued shadow shown in `docs/reference/footer-desktop.png`. diff --git a/dist/truechristian-theme.css b/dist/truechristian-theme.css index b6127ad..b58addb 100644 --- a/dist/truechristian-theme.css +++ b/dist/truechristian-theme.css @@ -449,7 +449,7 @@ p { .tcc-footer-group li + li, .tm-bottom .uk-list > li + li { - margin-top: 5px; + margin-top: 0; } .tcc-footer-group li a, @@ -458,9 +458,10 @@ p { color: var(--tcc-color-ink); font-family: var(--tcc-font-display); font-size: 0.6875rem; - font-weight: 400; + font-weight: 500; letter-spacing: 2px; line-height: 1.4; + opacity: 1; text-decoration: none; text-transform: uppercase; } diff --git a/dist/truechristian-theme.min.css b/dist/truechristian-theme.min.css index 2228188..dfc393d 100644 --- a/dist/truechristian-theme.min.css +++ b/dist/truechristian-theme.min.css @@ -1 +1 @@ -:root{--tcc-color-white:#ffffff;--tcc-color-cyan:#00cadb;--tcc-color-directory:#f7f7f7;--tcc-color-charcoal:#303033;--tcc-color-ink:#2d2e33;--tcc-color-nav-muted:#b4b5ba;--tcc-color-footer-text:rgb(255 255 255 / 70%);--tcc-color-social-icon:#6c6d74;--tcc-color-border:#e5e5e7;--tcc-font-body:"Raleway","Helvetica Neue",Arial,sans-serif;--tcc-font-display:"Montserrat",Arial,sans-serif;--tcc-container-max:1200px;--tcc-space-1:0.5rem;--tcc-space-2:1rem;--tcc-space-3:1.5rem;--tcc-space-4:2rem;--tcc-space-5:3rem;--tcc-space-6:4rem;--tcc-space-7:4.375rem;--tcc-radius-small:5px;--tcc-radius-round:999px;--tcc-shadow-medium:0 5px 15px rgb(0 0 0 / 8%);--tcc-focus-ring:0 0 0 4px rgb(0 202 219 / 35%);--tcc-breakpoint-small:640px;--tcc-breakpoint-medium:960px;} *,*::before,*::after{box-sizing:border-box;} html{color:var(--tcc-color-ink);font-family:var(--tcc-font-body);line-height:1.7;text-rendering:optimizeLegibility;} body{margin:0;background:var(--tcc-color-white);color:var(--tcc-color-ink);} img{display:block;max-width:100%;height:auto;} a{color:inherit;text-decoration-thickness:0.08em;text-underline-offset:0.18em;} a:focus-visible,button:focus-visible{outline:2px solid var(--tcc-color-ink);outline-offset:4px;box-shadow:var(--tcc-focus-ring);} button,input,select,textarea{font:inherit;} .tcc-container{width:min(calc(100% - 3rem),var(--tcc-container-max));margin-inline:auto;} @media (max-width:639px){.tcc-container{width:min(calc(100% - 2rem),var(--tcc-container-max));}} h1,h2,h3,h4,h5,h6{margin-block:0 0.75em;color:var(--tcc-color-ink);font-family:var(--tcc-font-display);font-weight:400;line-height:1.25;} p{margin-block:0 1.25em;} .tcc-eyebrow{font-family:var(--tcc-font-display);font-size:0.8125rem;letter-spacing:0.22em;text-transform:uppercase;} .tcc-site-header,.tm-header .uk-navbar-container,.tm-header-mobile .uk-navbar-container{border-top:1px solid var(--tcc-color-cyan);background:var(--tcc-color-white);} .tcc-site-header{position:sticky;z-index:1000;top:0;transform:translateY(0);transition:transform 220ms ease;will-change:transform;} .tcc-site-header[data-scroll-hidden="true"]{transform:translateY(calc(-100% - 1px));} .tcc-site-header[data-menu-open="true"],.tcc-site-header:focus-within{transform:translateY(0);} .tcc-header__container{display:flex;min-height:80px;align-items:center;justify-content:space-between;gap:var(--tcc-space-2);} .tcc-header__brand{display:inline-flex;flex:0 0 auto;align-items:center;} .tcc-header__brand img,.tm-header .uk-logo img,.tm-header-mobile .uk-logo img{width:288px;height:77px;object-fit:contain;} .tm-header .uk-navbar-container>.uk-container{max-width:var(--tcc-container-max);} .tcc-header__menu,.tcc-header__menu ul{margin:0;padding:0;list-style:none;} .tcc-header__menu{display:flex;align-items:center;gap:0;} .tcc-header__menu>li{position:relative;} .tcc-header__menu>li>a,.tcc-header__menu>li>button,.tm-header .uk-navbar-nav>li>a{display:inline-flex;min-height:44px;align-items:center;border:0;padding-inline:15px;background:transparent;color:var(--tcc-color-nav-muted);cursor:pointer;font-family:var(--tcc-font-display);font-size:0.6875rem;font-weight:400;letter-spacing:2px;text-decoration:none;text-transform:uppercase;white-space:nowrap;} .tcc-header__menu>li:last-child>a{padding-right:0;} .tcc-header__menu>li>a:hover,.tcc-header__menu>li>button:hover,.tcc-header__menu>li>a:focus-visible,.tcc-header__menu>li>button:focus-visible,.tcc-header__menu>.is-active>a,.tm-header .uk-navbar-nav>.uk-active>a,.tm-header .uk-navbar-nav>li>a:hover{color:var(--tcc-color-ink);} .tcc-header__menu ul{position:absolute;top:100%;left:0;display:none;min-width:220px;padding:var(--tcc-space-2);border:1px solid var(--tcc-color-border);background:var(--tcc-color-white);box-shadow:var(--tcc-shadow-medium);} .tcc-header__menu ul a{display:block;padding:0.35rem 0.5rem;color:var(--tcc-color-ink);font-size:0.875rem;text-decoration:none;} .tcc-header__services>a{gap:0.7rem;} .tcc-header__services small{display:block;margin-top:0.15rem;font-family:var(--tcc-font-display);font-size:0.75rem;letter-spacing:0.0125rem;text-transform:none;} .tcc-header__services-icon{width:20px;height:20px;flex:0 0 20px;letter-spacing:0;} .tcc-icon{display:block;width:20px;height:20px;fill:currentcolor;} .tcc-icon--stroke{fill:none;stroke:currentcolor;} .tcc-header__toggle{display:none;min-width:44px;min-height:44px;border:0;background:transparent;color:var(--tcc-color-charcoal);font-size:1.5rem;} .tcc-header__close,.tcc-header__scrim{display:none;} @media (max-width:959px){html.tcc-menu-open{overflow:hidden;} .tcc-header__container{min-height:80px;justify-content:center;} .tcc-header__brand img{width:min(240px,66vw);height:auto;} .tcc-header__toggle{position:absolute;left:1rem;display:inline-grid;place-items:center;} .tcc-header__navigation{position:fixed;z-index:1001;inset:0 auto 0 0;width:min(88vw,360px);padding:6rem 2rem 2rem;overflow-y:auto;background:var(--tcc-color-white);box-shadow:var(--tcc-shadow-medium);visibility:hidden;pointer-events:none;transform:translateX(-105%);transition:transform 180ms ease,visibility 0s linear 180ms;} .tcc-site-header[data-menu-open="true"] .tcc-header__navigation{visibility:visible;pointer-events:auto;transform:translateX(0);transition-delay:0s;} .tcc-header__close{position:absolute;top:1rem;right:1rem;display:inline-grid;width:44px;height:44px;place-items:center;border:0;background:transparent;color:var(--tcc-color-ink);font-size:1.75rem;line-height:1;} .tcc-header__scrim{position:fixed;z-index:1000;inset:0;display:block;border:0;padding:0;background:rgb(45 46 51 / 45%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 180ms ease,visibility 0s linear 180ms;} .tcc-site-header[data-menu-open="true"] .tcc-header__scrim{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;} .tcc-header__menu{display:grid;align-items:stretch;gap:0.4rem;} .tcc-header__menu>li>a,.tcc-header__menu>li>button{width:100%;justify-content:flex-start;padding-inline:0;white-space:normal;} .tcc-header__menu ul{position:static;display:none;border:0;padding:0 0 0 var(--tcc-space-2);box-shadow:none;} .tcc-header__menu li[data-submenu-open="true"]>ul{display:grid;gap:0.4rem;}} @media (min-width:960px){.tm-header .uk-navbar,.tm-header .uk-navbar-item,.tm-header .uk-navbar-nav>li>a{min-height:80px;} .tcc-header__menu>li.has-submenu:hover>ul,.tcc-header__menu>li[data-submenu-open="true"]>ul{display:grid;gap:0.4rem;}} .tcc-footer-directory,.tm-bottom.uk-section-muted{background:var(--tcc-color-directory);color:var(--tcc-color-ink);} .tcc-footer-directory,.tm-bottom.uk-section-muted{padding-block:var(--tcc-space-7);} .tm-bottom>.uk-container,.tm-page>footer .uk-container{max-width:var(--tcc-container-max);} .tcc-footer-directory__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;} .tcc-footer-group h2,.tm-bottom .uk-h5{margin:0 0 20px;color:var(--tcc-color-ink);font-family:var(--tcc-font-display);font-size:1rem;font-weight:400;letter-spacing:2px;line-height:1.4;text-transform:uppercase;} .tcc-footer-group ul{margin:0;padding:0;list-style:none;} .tcc-footer-group li + li,.tm-bottom .uk-list>li + li{margin-top:5px;} .tcc-footer-group li a,.tm-bottom .uk-h6,.tm-bottom .uk-h6 a{color:var(--tcc-color-ink);font-family:var(--tcc-font-display);font-size:0.6875rem;font-weight:400;letter-spacing:2px;line-height:1.4;text-decoration:none;text-transform:uppercase;} .tcc-footer-group li a:hover,.tcc-footer-group li a:focus-visible,.tm-bottom .uk-h6 a:hover{text-decoration:underline;} .tcc-footer-social__links{display:flex;flex-wrap:wrap;gap:20px;margin-top:20px;} .tcc-footer-social__links a,.tm-bottom .uk-icon-button{display:inline-grid;width:36px;height:36px;place-items:center;border:1px solid var(--tcc-color-border);border-radius:var(--tcc-radius-round);background:var(--tcc-color-white);color:var(--tcc-color-social-icon);font-family:var(--tcc-font-display);font-size:0.875rem;font-weight:600;text-decoration:none;} .tcc-footer-social img,.tm-bottom .uk-border-rounded{width:270px;height:180px;margin-top:20px;border-radius:var(--tcc-radius-small);box-shadow:var(--tcc-shadow-medium);object-fit:cover;} .tcc-footer-copyright,.tm-page>footer .uk-section-primary{background:var(--tcc-color-charcoal);color:var(--tcc-color-footer-text);} .tcc-footer-copyright,.tm-page>footer .uk-section-primary{padding-block:var(--tcc-space-7);font-family:var(--tcc-font-body);font-size:1rem;font-weight:400;line-height:1.6;} .tcc-footer-copyright a,.tm-page>footer #license a{color:var(--tcc-color-white);text-decoration:none;} .tcc-footer-copyright a:hover,.tcc-footer-copyright a:focus-visible,.tm-page>footer #license a:hover{color:var(--tcc-color-white);text-decoration:underline;} .tcc-footer-copyright a:focus-visible,.tm-page>footer #license a:focus-visible{outline-color:var(--tcc-color-white);} @media (max-width:959px){.tcc-footer-directory__grid{grid-template-columns:repeat(2,minmax(0,1fr));} .tcc-footer-copyright{padding-block:var(--tcc-space-5);font-size:1rem;} .tm-page>footer .uk-section-primary{padding-block:var(--tcc-space-5);} .tcc-footer-social img{display:none;}} @media (max-width:639px){.tcc-footer-directory,.tm-bottom.uk-section-muted{padding-block:var(--tcc-space-5);} .tcc-footer-directory__grid{grid-template-columns:1fr;gap:var(--tcc-space-4);text-align:center;} .tcc-footer-social__links{justify-content:center;} .tcc-footer-copyright{text-align:center;}} .tcc-visually-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important;} @media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto !important;transition-duration:0.01ms !important;animation-duration:0.01ms !important;animation-iteration-count:1 !important;}} @media print{.tcc-site-header{position:static;} .tcc-header__toggle,.tcc-footer-social{display:none !important;} .tcc-footer-directory,.tcc-footer-copyright{padding-block:1.5rem;background:#fff !important;color:#000 !important;}} +:root{--tcc-color-white:#ffffff;--tcc-color-cyan:#00cadb;--tcc-color-directory:#f7f7f7;--tcc-color-charcoal:#303033;--tcc-color-ink:#2d2e33;--tcc-color-nav-muted:#b4b5ba;--tcc-color-footer-text:rgb(255 255 255 / 70%);--tcc-color-social-icon:#6c6d74;--tcc-color-border:#e5e5e7;--tcc-font-body:"Raleway","Helvetica Neue",Arial,sans-serif;--tcc-font-display:"Montserrat",Arial,sans-serif;--tcc-container-max:1200px;--tcc-space-1:0.5rem;--tcc-space-2:1rem;--tcc-space-3:1.5rem;--tcc-space-4:2rem;--tcc-space-5:3rem;--tcc-space-6:4rem;--tcc-space-7:4.375rem;--tcc-radius-small:5px;--tcc-radius-round:999px;--tcc-shadow-medium:0 5px 15px rgb(0 0 0 / 8%);--tcc-focus-ring:0 0 0 4px rgb(0 202 219 / 35%);--tcc-breakpoint-small:640px;--tcc-breakpoint-medium:960px;} *,*::before,*::after{box-sizing:border-box;} html{color:var(--tcc-color-ink);font-family:var(--tcc-font-body);line-height:1.7;text-rendering:optimizeLegibility;} body{margin:0;background:var(--tcc-color-white);color:var(--tcc-color-ink);} img{display:block;max-width:100%;height:auto;} a{color:inherit;text-decoration-thickness:0.08em;text-underline-offset:0.18em;} a:focus-visible,button:focus-visible{outline:2px solid var(--tcc-color-ink);outline-offset:4px;box-shadow:var(--tcc-focus-ring);} button,input,select,textarea{font:inherit;} .tcc-container{width:min(calc(100% - 3rem),var(--tcc-container-max));margin-inline:auto;} @media (max-width:639px){.tcc-container{width:min(calc(100% - 2rem),var(--tcc-container-max));}} h1,h2,h3,h4,h5,h6{margin-block:0 0.75em;color:var(--tcc-color-ink);font-family:var(--tcc-font-display);font-weight:400;line-height:1.25;} p{margin-block:0 1.25em;} .tcc-eyebrow{font-family:var(--tcc-font-display);font-size:0.8125rem;letter-spacing:0.22em;text-transform:uppercase;} .tcc-site-header,.tm-header .uk-navbar-container,.tm-header-mobile .uk-navbar-container{border-top:1px solid var(--tcc-color-cyan);background:var(--tcc-color-white);} .tcc-site-header{position:sticky;z-index:1000;top:0;transform:translateY(0);transition:transform 220ms ease;will-change:transform;} .tcc-site-header[data-scroll-hidden="true"]{transform:translateY(calc(-100% - 1px));} .tcc-site-header[data-menu-open="true"],.tcc-site-header:focus-within{transform:translateY(0);} .tcc-header__container{display:flex;min-height:80px;align-items:center;justify-content:space-between;gap:var(--tcc-space-2);} .tcc-header__brand{display:inline-flex;flex:0 0 auto;align-items:center;} .tcc-header__brand img,.tm-header .uk-logo img,.tm-header-mobile .uk-logo img{width:288px;height:77px;object-fit:contain;} .tm-header .uk-navbar-container>.uk-container{max-width:var(--tcc-container-max);} .tcc-header__menu,.tcc-header__menu ul{margin:0;padding:0;list-style:none;} .tcc-header__menu{display:flex;align-items:center;gap:0;} .tcc-header__menu>li{position:relative;} .tcc-header__menu>li>a,.tcc-header__menu>li>button,.tm-header .uk-navbar-nav>li>a{display:inline-flex;min-height:44px;align-items:center;border:0;padding-inline:15px;background:transparent;color:var(--tcc-color-nav-muted);cursor:pointer;font-family:var(--tcc-font-display);font-size:0.6875rem;font-weight:400;letter-spacing:2px;text-decoration:none;text-transform:uppercase;white-space:nowrap;} .tcc-header__menu>li:last-child>a{padding-right:0;} .tcc-header__menu>li>a:hover,.tcc-header__menu>li>button:hover,.tcc-header__menu>li>a:focus-visible,.tcc-header__menu>li>button:focus-visible,.tcc-header__menu>.is-active>a,.tm-header .uk-navbar-nav>.uk-active>a,.tm-header .uk-navbar-nav>li>a:hover{color:var(--tcc-color-ink);} .tcc-header__menu ul{position:absolute;top:100%;left:0;display:none;min-width:220px;padding:var(--tcc-space-2);border:1px solid var(--tcc-color-border);background:var(--tcc-color-white);box-shadow:var(--tcc-shadow-medium);} .tcc-header__menu ul a{display:block;padding:0.35rem 0.5rem;color:var(--tcc-color-ink);font-size:0.875rem;text-decoration:none;} .tcc-header__services>a{gap:0.7rem;} .tcc-header__services small{display:block;margin-top:0.15rem;font-family:var(--tcc-font-display);font-size:0.75rem;letter-spacing:0.0125rem;text-transform:none;} .tcc-header__services-icon{width:20px;height:20px;flex:0 0 20px;letter-spacing:0;} .tcc-icon{display:block;width:20px;height:20px;fill:currentcolor;} .tcc-icon--stroke{fill:none;stroke:currentcolor;} .tcc-header__toggle{display:none;min-width:44px;min-height:44px;border:0;background:transparent;color:var(--tcc-color-charcoal);font-size:1.5rem;} .tcc-header__close,.tcc-header__scrim{display:none;} @media (max-width:959px){html.tcc-menu-open{overflow:hidden;} .tcc-header__container{min-height:80px;justify-content:center;} .tcc-header__brand img{width:min(240px,66vw);height:auto;} .tcc-header__toggle{position:absolute;left:1rem;display:inline-grid;place-items:center;} .tcc-header__navigation{position:fixed;z-index:1001;inset:0 auto 0 0;width:min(88vw,360px);padding:6rem 2rem 2rem;overflow-y:auto;background:var(--tcc-color-white);box-shadow:var(--tcc-shadow-medium);visibility:hidden;pointer-events:none;transform:translateX(-105%);transition:transform 180ms ease,visibility 0s linear 180ms;} .tcc-site-header[data-menu-open="true"] .tcc-header__navigation{visibility:visible;pointer-events:auto;transform:translateX(0);transition-delay:0s;} .tcc-header__close{position:absolute;top:1rem;right:1rem;display:inline-grid;width:44px;height:44px;place-items:center;border:0;background:transparent;color:var(--tcc-color-ink);font-size:1.75rem;line-height:1;} .tcc-header__scrim{position:fixed;z-index:1000;inset:0;display:block;border:0;padding:0;background:rgb(45 46 51 / 45%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 180ms ease,visibility 0s linear 180ms;} .tcc-site-header[data-menu-open="true"] .tcc-header__scrim{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;} .tcc-header__menu{display:grid;align-items:stretch;gap:0.4rem;} .tcc-header__menu>li>a,.tcc-header__menu>li>button{width:100%;justify-content:flex-start;padding-inline:0;white-space:normal;} .tcc-header__menu ul{position:static;display:none;border:0;padding:0 0 0 var(--tcc-space-2);box-shadow:none;} .tcc-header__menu li[data-submenu-open="true"]>ul{display:grid;gap:0.4rem;}} @media (min-width:960px){.tm-header .uk-navbar,.tm-header .uk-navbar-item,.tm-header .uk-navbar-nav>li>a{min-height:80px;} .tcc-header__menu>li.has-submenu:hover>ul,.tcc-header__menu>li[data-submenu-open="true"]>ul{display:grid;gap:0.4rem;}} .tcc-footer-directory,.tm-bottom.uk-section-muted{background:var(--tcc-color-directory);color:var(--tcc-color-ink);} .tcc-footer-directory,.tm-bottom.uk-section-muted{padding-block:var(--tcc-space-7);} .tm-bottom>.uk-container,.tm-page>footer .uk-container{max-width:var(--tcc-container-max);} .tcc-footer-directory__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;} .tcc-footer-group h2,.tm-bottom .uk-h5{margin:0 0 20px;color:var(--tcc-color-ink);font-family:var(--tcc-font-display);font-size:1rem;font-weight:400;letter-spacing:2px;line-height:1.4;text-transform:uppercase;} .tcc-footer-group ul{margin:0;padding:0;list-style:none;} .tcc-footer-group li + li,.tm-bottom .uk-list>li + li{margin-top:0;} .tcc-footer-group li a,.tm-bottom .uk-h6,.tm-bottom .uk-h6 a{color:var(--tcc-color-ink);font-family:var(--tcc-font-display);font-size:0.6875rem;font-weight:500;letter-spacing:2px;line-height:1.4;opacity:1;text-decoration:none;text-transform:uppercase;} .tcc-footer-group li a:hover,.tcc-footer-group li a:focus-visible,.tm-bottom .uk-h6 a:hover{text-decoration:underline;} .tcc-footer-social__links{display:flex;flex-wrap:wrap;gap:20px;margin-top:20px;} .tcc-footer-social__links a,.tm-bottom .uk-icon-button{display:inline-grid;width:36px;height:36px;place-items:center;border:1px solid var(--tcc-color-border);border-radius:var(--tcc-radius-round);background:var(--tcc-color-white);color:var(--tcc-color-social-icon);font-family:var(--tcc-font-display);font-size:0.875rem;font-weight:600;text-decoration:none;} .tcc-footer-social img,.tm-bottom .uk-border-rounded{width:270px;height:180px;margin-top:20px;border-radius:var(--tcc-radius-small);box-shadow:var(--tcc-shadow-medium);object-fit:cover;} .tcc-footer-copyright,.tm-page>footer .uk-section-primary{background:var(--tcc-color-charcoal);color:var(--tcc-color-footer-text);} .tcc-footer-copyright,.tm-page>footer .uk-section-primary{padding-block:var(--tcc-space-7);font-family:var(--tcc-font-body);font-size:1rem;font-weight:400;line-height:1.6;} .tcc-footer-copyright a,.tm-page>footer #license a{color:var(--tcc-color-white);text-decoration:none;} .tcc-footer-copyright a:hover,.tcc-footer-copyright a:focus-visible,.tm-page>footer #license a:hover{color:var(--tcc-color-white);text-decoration:underline;} .tcc-footer-copyright a:focus-visible,.tm-page>footer #license a:focus-visible{outline-color:var(--tcc-color-white);} @media (max-width:959px){.tcc-footer-directory__grid{grid-template-columns:repeat(2,minmax(0,1fr));} .tcc-footer-copyright{padding-block:var(--tcc-space-5);font-size:1rem;} .tm-page>footer .uk-section-primary{padding-block:var(--tcc-space-5);} .tcc-footer-social img{display:none;}} @media (max-width:639px){.tcc-footer-directory,.tm-bottom.uk-section-muted{padding-block:var(--tcc-space-5);} .tcc-footer-directory__grid{grid-template-columns:1fr;gap:var(--tcc-space-4);text-align:center;} .tcc-footer-social__links{justify-content:center;} .tcc-footer-copyright{text-align:center;}} .tcc-visually-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important;} @media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto !important;transition-duration:0.01ms !important;animation-duration:0.01ms !important;animation-iteration-count:1 !important;}} @media print{.tcc-site-header{position:static;} .tcc-header__toggle,.tcc-footer-social{display:none !important;} .tcc-footer-directory,.tcc-footer-copyright{padding-block:1.5rem;background:#fff !important;color:#000 !important;}} diff --git a/docs/brand-guide.md b/docs/brand-guide.md index 5074b5c..2e99f89 100644 --- a/docs/brand-guide.md +++ b/docs/brand-guide.md @@ -20,7 +20,7 @@ Use it on white. Preserve its aspect ratio and built-in shadow. Do not recolor, | `--tcc-color-cyan` | `#00cadb` | Thin header top rule and restrained focus accent | Measured | | `--tcc-color-directory` | `#f7f7f7` | Directory/link footer | Measured | | `--tcc-color-charcoal` | `#303033` | Copyright footer | Measured | -| `--tcc-color-ink` | `#2d2e33` | Active navigation and directory text | Measured | +| `--tcc-color-ink` | `#2d2e33` | Active navigation and full-opacity directory text | Measured | | `--tcc-color-nav-muted` | `#b4b5ba` | Inactive desktop navigation | Measured | | `--tcc-color-social-icon` | `#6c6d74` | Social glyphs | Measured | | `--tcc-color-footer-text` | `rgb(255 255 255 / 70%)` | Copyright prefix and separators | Measured composite | diff --git a/docs/footer.md b/docs/footer.md index f56c0e6..6b8eba8 100644 --- a/docs/footer.md +++ b/docs/footer.md @@ -19,7 +19,7 @@ Together they form the required bottom footer assembly. They must remain adjacen | Directory container | `1200px` maximum width | | Directory grid | Four equal `270px` tracks with `40px` gaps | | Group heading | Montserrat 400, `16px/1.4`, uppercase, `2px` tracking, `20px` bottom gap | -| Group link | Montserrat 400, `11px/1.4`, uppercase, `2px` tracking, `5px` sibling gap, `#2d2e33` | +| Group link | Montserrat 500, `11px/1.4`, uppercase, `2px` tracking, no sibling margin, full-opacity `#2d2e33` | | Social controls | Two `36px` white circles, `20px` gaps, `#6c6d74` glyphs, `#e5e5e7` edge | | Skyline slot | Desktop only, `270 × 180px`, `20px` top gap, `5px` radius, subdued shadow | | Copyright surface | `#303033`, `70px` block padding | diff --git a/docs/source-inventory.md b/docs/source-inventory.md index 05e7394..773d7d2 100644 --- a/docs/source-inventory.md +++ b/docs/source-inventory.md @@ -84,3 +84,5 @@ Montserrat and Raleway are metric-matched font identifications rather than decla ## Implementation defaults The portable `tcc-*` CSS reproduces the supplied structure without requiring Joomla. Its typography stacks and spacing tokens are maintained as repository defaults. They are documented in `docs/typography.md` and `docs/brand-guide.md` and should be revised if the owner supplies the original compiled CSS or font files. + +The owner's follow-up footer comparison establishes zero sibling margin between directory rows and full-opacity `#2d2e33` link text. The portable implementation uses Montserrat 500 for those small uppercase links so their rendered weight matches the darker reference. diff --git a/docs/typography.md b/docs/typography.md index afb2010..7ba6a28 100644 --- a/docs/typography.md +++ b/docs/typography.md @@ -15,11 +15,11 @@ These stacks are maintained implementation defaults chosen to reproduce the visu | --- | --- | | Desktop navigation | Montserrat 400, 11px, uppercase, 2px tracking | | Directory headings | Montserrat 400, 16px/1.4, uppercase, 2px tracking | -| Directory links | Montserrat 400, 11px/1.4, uppercase, 2px tracking | +| Directory links | Montserrat 500, 11px/1.4, uppercase, 2px tracking | | Services subtitle | Montserrat 400, 12px, normal case, approximately 0.2px tracking | | Copyright copy | Raleway 400, 16px/1.6, normal tracking | | Body copy | 16px, 1.7 line-height | Do not simulate the masthead with a text font. Always use the supplied logo image. -Montserrat and Raleway were identified by matching the screenshot geometry against font metrics; the supplied HTML does not contain the compiled `@font-face` rules. The portable head fragment loads the required 400 weights from Google Fonts. A privacy-restricted deployment may self-host licensed copies and retain the same family names. +Montserrat and Raleway were identified by matching the screenshot geometry against font metrics; the supplied HTML does not contain the compiled `@font-face` rules. The portable head fragment loads Montserrat 400 and 500 plus Raleway 400 from Google Fonts. A privacy-restricted deployment may self-host licensed copies and retain the same family names. diff --git a/examples/style-guide.html b/examples/style-guide.html index 8bfe823..0eae067 100644 --- a/examples/style-guide.html +++ b/examples/style-guide.html @@ -7,7 +7,7 @@ - + diff --git a/scripts/validate.mjs b/scripts/validate.mjs index 7931aac..cba066f 100644 --- a/scripts/validate.mjs +++ b/scripts/validate.mjs @@ -172,9 +172,18 @@ for (const selector of [".tcc-site-header", ".tcc-footer-directory", ".tcc-foote } const sourceFooterCss = await readFile(path.join(root, "src/css/footer.css"), "utf8"); -const linkGapContract = /\.tcc-footer-group li \+ li,\s*\.tm-bottom \.uk-list > li \+ li\s*\{\s*margin-top: 5px;\s*\}/; +const linkGapContract = /\.tcc-footer-group li \+ li,\s*\.tm-bottom \.uk-list > li \+ li\s*\{\s*margin-top: 0;\s*\}/; if (!linkGapContract.test(sourceFooterCss)) { - throw new Error("Footer link rows must use the documented 5px sibling gap in portable and YOOtheme markup."); + throw new Error("Footer link rows must have no sibling margin in portable and YOOtheme markup."); +} +const linkAppearanceContract = /\.tcc-footer-group li a,[\s\S]*?font-weight: 500;[\s\S]*?opacity: 1;[\s\S]*?\}/; +if (!linkAppearanceContract.test(sourceFooterCss)) { + throw new Error("Footer links must use the documented darker weight at full opacity."); +} + +const documentHead = await readFile(path.join(root, "src/html/document-head.html"), "utf8"); +if (!documentHead.includes("Montserrat:wght@400;500")) { + throw new Error("Portable head must load the Montserrat 500 weight used by footer links."); } for (const value of ["--tcc-container-max: 1200px", "border-top: 1px solid", "min-height: 80px", "font-size: 0.6875rem", "gap: 40px", "width: 36px", "padding-block: var(--tcc-space-7)"]) { diff --git a/src/css/footer.css b/src/css/footer.css index 7c7281f..c8f9fc4 100644 --- a/src/css/footer.css +++ b/src/css/footer.css @@ -40,7 +40,7 @@ .tcc-footer-group li + li, .tm-bottom .uk-list > li + li { - margin-top: 5px; + margin-top: 0; } .tcc-footer-group li a, @@ -49,9 +49,10 @@ color: var(--tcc-color-ink); font-family: var(--tcc-font-display); font-size: 0.6875rem; - font-weight: 400; + font-weight: 500; letter-spacing: 2px; line-height: 1.4; + opacity: 1; text-decoration: none; text-transform: uppercase; } diff --git a/src/html/document-head.html b/src/html/document-head.html index 1a256d6..d20e18e 100644 --- a/src/html/document-head.html +++ b/src/html/document-head.html @@ -2,7 +2,7 @@ - +