/** * Site chrome — component stylesheet. * * Contains design tokens and all styles for the shared .tugm-header and * .tugm-footer elements. Intentionally excludes html/body page-level rules * so it can be safely embedded in consumer applications (e.g. gmc-nextjs) * without affecting their global styles. * * No Tailwind, no Bootstrap dependency. * All rules are scoped under .tugm-header and .tugm-footer to avoid * conflicting with Bootstrap utilities injected by the Tessitura host page. * * All sizes use px (not rem) to avoid being affected by the host page's * html { font-size: 10px } base which would break rem-based values. * * Color tokens are redefined here as plain hex values — they do not depend * on the Next.js runtime that sets --font-dm-sans / --font-fk-screamer. * DM Sans is loaded via Google Fonts link in the of the template HTML. */ /* ============================================================ Design tokens (colors only — all sizes are inlined as px) ============================================================ */ :root { --color-teal: #0e6f6e; --color-neon-green: #c2e854; --color-white: #ffffff; --color-dark-text: #093534; } /* Prevent padding/border from adding to element width/height. Scoped to template elements only to avoid conflicting with Bootstrap. */ .tugm-header, .tugm-header *, .tugm-header *::before, .tugm-header *::after, .tugm-footer, .tugm-footer *, .tugm-footer *::before, .tugm-footer *::after { box-sizing: border-box; } /* SVGs carry hardcoded width/height HTML attributes that override CSS width. max-width beats the SVG width attribute per the CSS cascade, clamping them to their container on narrow screens. */ /* .tugm-footer svg { max-width: 100%; height: auto; } */ /* ============================================================ HEADER (.tugm-header) ============================================================ */ .tugm-header { width: 100%; background-color: var(--color-teal); position: sticky; top: 0; z-index: 60; } .tugm-header__inner { position: relative; z-index: 60; display: flex; height: 66px; align-items: center; justify-content: space-between; padding-left: 20px; padding-right: 20px; box-shadow: 4px 4px 30px 0px #2027204d; } .tugm-header__logo { outline: none; text-decoration: none; width: fit-content; } .tugm-header__logo-img { height: 28px; width: auto; display: block; } /* Desktop nav — hidden until ≥768px */ .tugm-header__desktop-nav { display: none; align-items: center; gap: 48px; } .tugm-header__nav-list { display: flex; list-style: none; align-items: center; gap: 0; padding: 0; margin: 0; } .tugm-header__nav-link { display: block; background: transparent; padding: 8px 12px; font-family: "DM Sans", sans-serif; font-size: 18px; font-weight: 700; line-height: normal; color: #ffffff; text-decoration: none; transition: opacity 0.2s; } .tugm-header__nav-link:hover { text-decoration: none; color: white; box-shadow: 0 3px 0 0 var(--color-neon-green); } .tugm-header__cta { display: block; width: fit-content; border-radius: 9999px; padding: 10px 16px; font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--color-dark-text); background-color: var(--color-neon-green); text-decoration: none; transition: opacity 0.2s; } .tugm-header__cta:hover { scale: 1.02; box-shadow: inset 0 0 0 2px var(--color-neon-green); background-color: var(--color-teal); color: white; } /* Mobile controls (CTA + hamburger) — hidden at ≥768px */ .tugm-header__mobile-controls { display: flex; align-items: center; gap: 16px; } .tugm-header__mobile-cta { display: block; width: fit-content; border-radius: 9999px; padding: 6px 10px; font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--color-dark-text); background-color: var(--color-neon-green); text-decoration: none; } .tugm-header__mobile-cta:hover { opacity: 0.9; color: var(--color-dark-text); } .tugm-header__toggle { display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 0; } .tugm-header__hamburger { position: relative; display: flex; height: 24px; width: 32px; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .tugm-header__bar { display: block; height: 3px; width: 31px; border-radius: 8px; background-color: #ffffff; transition: transform 0.3s; } /* Mobile drawer — shown/hidden by nav.js via inline display style */ .tugm-header__mobile-nav-inner { display: flex; flex-direction: column; align-items: center; background-color: var(--color-teal); padding-top: 44px; padding-bottom: 44px; } .tugm-header__mobile-nav-list { display: flex; list-style: none; flex-direction: column; align-items: center; gap: 44px; padding: 0; margin: 0; } .tugm-header__mobile-nav-link { font-family: "DM Sans", sans-serif; font-size: 30px; font-weight: 400; line-height: normal; color: #ffffff; text-decoration: none; transition: opacity 0.2s; } .tugm-header__mobile-nav-link:hover { opacity: 0.8; color: #ffffff; } .tugm-header__mobile-nav { position: fixed; top: 66px; left: 0; right: 0; bottom: 0; z-index: 59; flex-direction: column; overflow: hidden; } .tugm-header__backdrop { flex: 1; background-color: rgba(0, 0, 0, 0.8); } /* Desktop breakpoint ≥768px */ @media (min-width: 768px) { .tugm-header__inner { height: 100px; padding-left: 100px; padding-right: 100px; } .tugm-header__logo-img { height: 38px; } .tugm-header__desktop-nav { display: flex; } .tugm-header__nav-list { gap: 60px; } .tugm-header__mobile-controls { display: none; } } /* ============================================================ FOOTER (.tugm-footer) ============================================================ */ .tugm-footer { width: 100%; background-color: var(--color-teal); color: #ffffff; } .tugm-footer__inner { width: 100%; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; padding-top: 60px; padding-bottom: 40px; } /* 4-column grid */ .tugm-footer__grid { display: grid; grid-template-columns: 1fr; row-gap: 40px; } /* Col 1: brand/logo */ .tugm-footer__col-brand { display: flex; flex-direction: column; gap: 32px; } .tugm-footer__logo-group { display: grid; width: 40%; max-width: 160px; grid-template-columns: 1fr; gap: 24px; overflow: hidden; } .tugm-footer__mark { justify-self: end; width: auto; } .tugm-footer__logo-img { width: 100%; display: block; } .tugm-footer__address { font-family: "DM Sans", sans-serif; font-size: 14px; font-style: normal; line-height: 24px; color: #ffffff; } /* Col 2: contact */ .tugm-footer__col-contact { display: flex; flex-direction: column; gap: 16px; padding: 0; } .tugm-footer__col-heading { font-family: "DM Sans", sans-serif; font-size: 18px; font-weight: 700; font-style: normal; line-height: 120%; letter-spacing: 0; text-transform: none; color: #ffffff; margin: 0; } .tugm-footer__contact-address { font-family: "DM Sans", sans-serif; font-size: 14px; font-style: normal; line-height: 24px; color: #ffffff; } .tugm-footer__phone-group { display: flex; flex-direction: column; gap: 6px; font-family: "DM Sans", sans-serif; font-size: 14px; line-height: 24px; color: #ffffff; } .tugm-footer__phone-group p { margin: 0; } /* Cols 3 & 4: nav links */ .tugm-footer__col-links { display: flex; flex-direction: column; gap: 16px; padding: 0; } .tugm-footer__nav-list { list-style: none; display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; } .tugm-footer__nav-link { font-family: "DM Sans", sans-serif; font-size: 14px; font-style: normal; line-height: 24px; color: #ffffff; text-decoration: none; transition: color 0.2s; } .tugm-footer__nav-link:hover { color: rgba(255, 255, 255, 0.8); } /* Col 4: support + socials */ .tugm-footer__col-support { display: flex; flex-direction: column; padding: 0; gap: 28px; } .tugm-footer__socials { display: flex; flex-direction: row; align-items: center; gap: 24px; } .tugm-footer__social-link { text-decoration: none; transition: opacity 0.2s; display: block; line-height: 0; } .tugm-footer__social-link:hover { opacity: 0.8; } .tugm-footer__social-icon { height: 24px; width: auto; display: block; } /* Bottom bar */ .tugm-footer__bottom { margin-top: 52px; padding-top: 28px; display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--color-neon-green); } .tugm-footer__legal-text { font-family: "DM Sans", sans-serif; font-size: 12px; line-height: 24px; color: #ffffff; } .tugm-footer__legal-text p { margin: 0; } .tugm-footer__legal-nav { width: 100%; align-self: flex-start; } .tugm-footer__legal-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0; margin: 0; } .tugm-footer__legal-link { font-family: "DM Sans", sans-serif; font-size: 12px; line-height: 24px; color: #ffffff; text-decoration: none; transition: color 0.2s; } .tugm-footer__legal-link:hover { color: rgba(255, 255, 255, 0.8); } /* Desktop breakpoint ≥768px */ @media (min-width: 768px) { .tugm-footer__inner { padding-left: 100px; padding-right: 100px; } .tugm-footer__grid { grid-template-columns: repeat(4, 1fr); row-gap: 40px; column-gap: 120px; } .tugm-footer__col-brand { gap: 52px; } .tugm-footer__logo-group { max-width: unset; width: fit-content; } .tugm-footer__logo-img { width: 200px; } .tugm-footer__address { font-size: 16px; } .tugm-footer__col-contact { padding-top: 40px; gap: 28px; } .tugm-footer__col-links { padding-top: 40px; gap: 28px; } .tugm-footer__nav-list { gap: 12px; } .tugm-footer__col-support { gap: 28px; } .tugm-footer__bottom { margin-top: 60px; padding-top: 32px; flex-direction: row; align-items: center; justify-content: space-between; } .tugm-footer__legal-text { font-size: 14px; } .tugm-footer__legal-nav { width: fit-content; } .tugm-footer__legal-list { gap: 16px; flex-wrap: nowrap; } .tugm-footer__legal-link { font-size: 14px; } }