/* ========================================================================== WiredMedium Branding — WHMCS Twenty-One Theme Overrides -------------------------------------------------------------------------- Loaded automatically by header.tpl (via {assetExists file="custom.css"}). Goal: make the WHMCS portal visually seamless with the main Astro site at wiredmedium.com so visitors feel they never left. Source of truth for brand tokens: src/styles/global.css + assets/brand-colors.css ========================================================================== */ /* -------------------------------------------------------------------------- 1. Self-hosted Lato (served from the main site's /fonts/lato/ path) -------------------------------------------------------------------------- */ @font-face { font-family: 'Lato'; src: url('/fonts/lato/Lato-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Lato'; src: url('/fonts/lato/Lato-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Lato'; src: url('/fonts/lato/Lato-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Lato'; src: url('/fonts/lato/Lato-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Lato'; src: url('/fonts/lato/Lato-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Lato'; src: url('/fonts/lato/Lato-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Lato'; src: url('/fonts/lato/Lato-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- 2. Brand tokens (mirror of src/styles/global.css :root) -------------------------------------------------------------------------- */ :root { --color-orange: #FD6408; --color-orange-hover: #e55a07; --color-orange-light: rgba(253, 100, 8, 0.1); --color-dark-gray: #333333; --color-medium-gray: #4E4E4E; --color-white: #FFFFFF; --color-light-gray: #F9F9F9; --color-border-gray: #D6D6D6; --color-muted-gray: #CCCCCC; --color-logo-medium: #777777; --font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-thin: 100; --font-light: 300; --font-regular: 400; --font-bold: 700; --font-black: 900; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; --header-height: 72px; --transition-fast: 150ms ease; --transition-base: 250ms ease; } /* -------------------------------------------------------------------------- 3. Typography — override the default Open Sans stack with Lato everywhere -------------------------------------------------------------------------- */ html, body, .primary-bg-color, .btn, .form-control, .nav, .navbar, .card, .dropdown-menu, input, select, textarea, button { font-family: var(--font-family) !important; } body { color: var(--color-medium-gray); background-color: var(--color-white); line-height: 1.7; font-weight: var(--font-regular); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Bootstrap .primary-bg-color is applied to by header.tpl; neutralise the WHMCS blue-tinted background. */ body.primary-bg-color { background-color: var(--color-white); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-family); color: var(--color-dark-gray); font-weight: var(--font-bold); line-height: 1.25; } h1, .h1 { font-size: 2.25rem; font-weight: var(--font-light); } h2, .h2 { font-size: 1.75rem; } h3, .h3 { font-size: 1.375rem; } a { color: var(--color-orange); transition: color var(--transition-fast); } a:hover, a:focus { color: var(--color-orange-hover); text-decoration: none; } /* -------------------------------------------------------------------------- 4. Bootstrap primary colour → WiredMedium orange -------------------------------------------------------------------------- */ .btn-primary, .btn-primary:focus { background-color: var(--color-orange); border-color: var(--color-orange); color: var(--color-white); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.05em; border-radius: 0; transition: all var(--transition-base); } .btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary:not(:disabled):not(.disabled):active { background-color: var(--color-orange-hover) !important; border-color: var(--color-orange-hover) !important; color: var(--color-white) !important; } .btn-outline-primary, .btn-outline-primary:focus { background-color: transparent; border-color: var(--color-orange); color: var(--color-orange); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.05em; border-radius: 0; transition: all var(--transition-base); } .btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active { background-color: var(--color-orange) !important; border-color: var(--color-orange) !important; color: var(--color-white) !important; } .btn { border-radius: 0; } .text-primary { color: var(--color-orange) !important; } .bg-primary { background-color: var(--color-orange) !important; } .border-primary { border-color: var(--color-orange) !important; } .badge-info, .badge-primary { background-color: var(--color-orange); color: var(--color-white); } /* -------------------------------------------------------------------------- 5. Site Header — mirror src/components/Header.astro -------------------------------------------------------------------------- */ #header.header { background-color: var(--color-white); border-bottom: 1px solid var(--color-border-gray); position: sticky; top: 0; z-index: 1030; } /* Thin top bar (only shown when logged in) */ #header .topbar { background-color: var(--color-light-gray); border-bottom: 1px solid var(--color-border-gray); font-size: 0.8125rem; padding: 0.25rem 0; } #header .topbar .btn { color: var(--color-medium-gray); font-weight: var(--font-regular); text-transform: none; letter-spacing: 0; padding: 0.35rem 0.75rem; } #header .topbar .btn:hover { color: var(--color-orange); background: transparent; } /* Primary navbar row (holds the logo, search, cart, mobile toggle) */ #header .navbar-light { background-color: var(--color-white); padding: 0.5rem 0; min-height: var(--header-height); } #header .navbar-light .navbar-brand { padding: 0; margin-right: var(--space-xl); } /* WiredMedium logo — rendered by header.tpl as: WIREDMEDIUM */ .wm-logo { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; color: inherit; line-height: 1; } .wm-logo:hover { color: inherit; } .wm-logo__icon { display: block; width: 28px; height: 28px; background-color: var(--color-orange); flex-shrink: 0; } .wm-logo__wordmark { font-size: 1.375rem; letter-spacing: 0.08em; line-height: 1; white-space: nowrap; } .wm-logo__wired { font-weight: var(--font-bold); color: var(--color-dark-gray); } .wm-logo__medium { font-weight: var(--font-light); color: var(--color-logo-medium); } /* -------------------------------------------------------------------------- 6. WHMCS portal nav — calm it down, use brand colours -------------------------------------------------------------------------- */ .main-navbar-wrapper { background-color: var(--color-light-gray); border-top: 1px solid var(--color-border-gray); border-bottom: 1px solid var(--color-border-gray); padding: 0; } .main-navbar-wrapper .navbar-nav .nav-link, .main-navbar-wrapper .navbar-nav > li > a { color: var(--color-medium-gray); font-size: 0.8125rem; font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.875rem 1rem; transition: color var(--transition-fast); } .main-navbar-wrapper .navbar-nav .nav-link:hover, .main-navbar-wrapper .navbar-nav > li > a:hover, .main-navbar-wrapper .navbar-nav .nav-link.active, .main-navbar-wrapper .navbar-nav > li.active > a { color: var(--color-orange); background-color: transparent; } .main-navbar-wrapper .dropdown-menu { border: 1px solid var(--color-border-gray); border-radius: 0; padding: 0.25rem 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .main-navbar-wrapper .dropdown-item { color: var(--color-medium-gray); font-size: 0.875rem; padding: 0.5rem 1rem; } .main-navbar-wrapper .dropdown-item:hover, .main-navbar-wrapper .dropdown-item:focus { background-color: var(--color-orange-light); color: var(--color-orange); } /* -------------------------------------------------------------------------- 8. Breadcrumb — subtle, matches the Astro .breadcrumbs component -------------------------------------------------------------------------- */ .master-breadcrumb { background-color: var(--color-white); padding: var(--space-md) 0; font-size: 0.8125rem; color: var(--color-muted-gray); border-bottom: 1px solid var(--color-border-gray); } .master-breadcrumb .breadcrumb { background: transparent; padding: 0; margin: 0; } .master-breadcrumb .breadcrumb-item, .master-breadcrumb .breadcrumb-item a { color: var(--color-medium-gray); } .master-breadcrumb .breadcrumb-item.active { color: var(--color-orange); } .master-breadcrumb .breadcrumb-item a:hover { color: var(--color-orange); } /* -------------------------------------------------------------------------- 9. Main body / section padding -------------------------------------------------------------------------- */ #main-body { padding: var(--space-3xl) 0; background-color: var(--color-white); } #main-body h2 { color: var(--color-dark-gray); } /* -------------------------------------------------------------------------- 10. Cards — match .card utility from global.css -------------------------------------------------------------------------- */ .card { background-color: var(--color-white); border: 1px solid var(--color-border-gray); border-radius: 0; transition: box-shadow var(--transition-base), transform var(--transition-base); } .card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .card .card-title, .card-body h3, .card-body .h3 { color: var(--color-dark-gray); font-weight: var(--font-bold); } /* Homepage "How can we help?" action tiles (card-accent-*). The default theme paints each tile a different flat colour; we unify them with WiredMedium dark-gray and an orange hover state. */ .action-icon-btns a[class*="card-accent-"] { background-color: var(--color-dark-gray) !important; color: var(--color-white); border: none; border-radius: 0; padding: var(--space-2xl) var(--space-lg); display: block; text-align: center; font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.875rem; transition: background-color var(--transition-base), transform var(--transition-base); } .action-icon-btns a[class*="card-accent-"]:hover { background-color: var(--color-orange) !important; color: var(--color-white); transform: translateY(-2px); text-decoration: none; } .action-icon-btns .ico-container { margin-bottom: var(--space-md); } .action-icon-btns .ico-container i { color: var(--color-orange); font-size: 2.25rem; transition: color var(--transition-base); } .action-icon-btns a[class*="card-accent-"]:hover .ico-container i { color: var(--color-white); } /* -------------------------------------------------------------------------- 11. Forms — orange focus ring, tighter borders -------------------------------------------------------------------------- */ .form-control, .form-control:focus { border-radius: 0; font-family: var(--font-family); } .form-control { border-color: var(--color-border-gray); color: var(--color-dark-gray); } .form-control:focus { border-color: var(--color-orange); box-shadow: 0 0 0 0.2rem rgba(253, 100, 8, 0.15); } .form-control-label, label { color: var(--color-dark-gray); font-weight: var(--font-bold); font-size: 0.875rem; } .input-group-text { background-color: var(--color-light-gray); border-color: var(--color-border-gray); color: var(--color-medium-gray); border-radius: 0; } /* -------------------------------------------------------------------------- 12. Tables, alerts, panels, pagination -------------------------------------------------------------------------- */ .table thead th { border-bottom: 2px solid var(--color-orange); color: var(--color-dark-gray); font-weight: var(--font-bold); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; } .table td, .table th { border-color: var(--color-border-gray); } .alert { border-radius: 0; border-width: 1px; } .alert-info { background-color: var(--color-orange-light); border-color: var(--color-orange); color: var(--color-dark-gray); } .page-item.active .page-link { background-color: var(--color-orange); border-color: var(--color-orange); } .page-link { color: var(--color-orange); } .page-link:hover { color: var(--color-orange-hover); } /* -------------------------------------------------------------------------- 13. Site Footer — mirror src/components/Footer.astro -------------------------------------------------------------------------- */ #footer.footer { background-color: var(--color-dark-gray); color: rgba(255, 255, 255, 0.7); padding: var(--space-4xl) 0 var(--space-xl); margin-top: var(--space-4xl); } #footer .wm-footer__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2xl); margin-bottom: var(--space-3xl); } #footer .wm-footer__heading { color: var(--color-white); font-size: 0.8125rem; font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-lg); } #footer .wm-footer__list { list-style: none; padding: 0; margin: 0; } #footer .wm-footer__list li { margin: 0 0 var(--space-sm) 0; } #footer .wm-footer__list a, #footer .wm-footer__contact a, #footer .wm-footer__contact { color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; text-decoration: none; transition: color var(--transition-fast); } #footer .wm-footer__list a:hover, #footer .wm-footer__contact a:hover { color: var(--color-orange); } #footer .wm-footer__contact p { font-size: 0.875rem; line-height: 1.8; color: rgba(255, 255, 255, 0.7); } /* Utility bar (localisation, social icons) sits above the copyright */ #footer .wm-footer__utility { margin-bottom: var(--space-lg); display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: var(--space-md); } #footer .wm-footer__utility .list-inline { margin: 0; } #footer .wm-footer__utility .btn, #footer .wm-footer__utility .btn-icon { color: rgba(255, 255, 255, 0.7); background: transparent; border: none; padding: 0.25rem 0.5rem; font-size: 0.875rem; } #footer .wm-footer__utility .btn:hover, #footer .wm-footer__utility .btn-icon:hover { color: var(--color-orange); } #footer .wm-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: var(--space-xl); } #footer .wm-footer__bottom p { font-size: 0.75rem; line-height: 1.6; color: rgba(255, 255, 255, 0.4); margin: 0; } @media (max-width: 1024px) { #footer .wm-footer__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { #footer .wm-footer__grid { grid-template-columns: repeat(2, 1fr); } } /* -------------------------------------------------------------------------- 14. Modals — WHMCS overlays, keep Bootstrap structure but reskin -------------------------------------------------------------------------- */ .modal-content { border: none; border-radius: 0; } .modal-header, .modal-footer { border-color: var(--color-border-gray); } .modal-title { color: var(--color-dark-gray); font-weight: var(--font-bold); } /* -------------------------------------------------------------------------- 15. Focus ring for keyboard users -------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--color-orange); outline-offset: 2px; }