@charset "UTF-8"; /*! * Hot Web Design - template layer for the Joomla 6 "default" template. * * Cascade order (do not reorder - later layers intentionally win): * 1. Design tokens 6. Joomla component views * 2. Base / reset 7. Footer * 3. Typography 8. Utilities * 4. Layout & containers 9. Responsive * 5. Components 10. Print * * Dark theme lives in dark.css and works by re-mapping the tokens declared in * layer 1. Components must therefore consume tokens, never raw colours. */ /* ============================================================ 1. DESIGN TOKENS ============================================================ */ :root { color-scheme: light; /* -- Brand ------------------------------------------------ */ /* --hwd-primary / --hwd-primary-gradient / --hwd-footer-* / --hwd-topbar-* / --hwd-container / --hwd-header-container are re-declared inline on from the template parameters. The values below are the fallbacks used when the template is rendered without those parameters. */ --hwd-primary: #6f40f1; --hwd-primary-hover: #5a33d1; --hwd-primary-gradient: linear-gradient(40deg, #7141f1 0%, #4d6bd8 70%, #3183e2 100%); --hwd-primary-tint: rgba(111, 64, 241, .08); --hwd-primary-tint: color-mix(in srgb, var(--hwd-primary) 8%, transparent); --hwd-secondary: #171258; --hwd-dark: #0d0a46; /* -- Surfaces --------------------------------------------- */ --hwd-bg: #fff; --hwd-surface: #fff; --hwd-surface-2: #f7f8fc; --hwd-surface-3: #f0f2f9; --hwd-card-bg: var(--hwd-surface); /* Legacy alias: module HTML written against the previous stylesheet. */ --hwd-bg-light: var(--hwd-surface-2); --hwd-overlay: rgba(13, 10, 70, .35); /* -- Text ------------------------------------------------- */ --hwd-text: #5a585b; --hwd-heading: #0d0a46; --hwd-muted: #6b6970; /* The accent used as a foreground colour. The brand colour itself is tuned for white backgrounds, so the dark theme lightens this one instead of restating every rule that paints accent text. */ --hwd-accent-text: var(--hwd-primary); --hwd-link: var(--hwd-accent-text); --hwd-link-hover: var(--hwd-primary-hover); --hwd-btn-text: #fff; --hwd-on-accent: #fff; /* -- Lines ------------------------------------------------ */ --hwd-border: #e2e5f1; --hwd-separator: var(--hwd-border); /* -- Header / menu surface -------------------------------- */ --hwd-menu-bg: rgba(255, 255, 255, .84); --hwd-menu-blur: saturate(180%) blur(10px); --hwd-menu-border: rgba(226, 229, 241, .6); --hwd-header-min-height: 82px; /* -- Chrome supplied by template parameters --------------- */ --hwd-topbar-bg: transparent; --hwd-topbar-text: var(--hwd-text); --hwd-topbar-hover: var(--hwd-primary); --hwd-header-bg: transparent; --hwd-footer-bg: #0d0a46; --hwd-footer-text: #b8bbc1; --hwd-footer-heading: #fff; --hwd-footer-bottom-bg: #0a0836; /* -- Form controls ---------------------------------------- */ --hwd-input-bg: var(--hwd-surface); --hwd-input-text: var(--hwd-text); --hwd-input-border: var(--hwd-border); --hwd-placeholder: var(--hwd-muted); /* -- Status ----------------------------------------------- */ --hwd-success: #1a7f4b; --hwd-warning: #b45309; --hwd-error: #b42318; --hwd-info: #0b5cad; /* -- Focus ------------------------------------------------ */ --hwd-focus: var(--hwd-primary); --hwd-focus-width: 3px; --hwd-focus-offset: 2px; /* -- Radii ------------------------------------------------ */ --hwd-radius-sm: 8px; --hwd-radius: 12px; --hwd-radius-lg: 16px; --hwd-radius-xl: 18px; --hwd-radius-pill: 999px; /* -- Elevation -------------------------------------------- */ --hwd-shadow-sm: 0 6px 16px rgba(13, 10, 70, .06); --hwd-shadow: 0 12px 30px rgba(13, 10, 70, .08); --hwd-shadow-lg: 0 18px 40px rgba(13, 10, 70, .13); --hwd-shadow-modal: 0 20px 60px rgba(13, 10, 70, .12); /* -- Layout ----------------------------------------------- */ --hwd-container: 1200px; --hwd-header-container: var(--hwd-container); --hwd-gutter: 15px; --hwd-gap: 30px; --hwd-section-y: 80px; --hwd-band-y: 64px; --hwd-sidebar-width: 300px; /* -- Typography ------------------------------------------- */ --hwd-font-family-body: "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --hwd-font-family-headings: var(--hwd-font-family-body); --hwd-font-family-display: "Poppins", var(--hwd-font-family-body); --hwd-font-weight-normal: 400; --hwd-font-weight-headings: 500; --hwd-line-height: 1.65; --hwd-scroll-margin-top: 6rem; /* -- Motion ----------------------------------------------- */ --hwd-transition: .2s ease; --hwd-transition-slow: .35s cubic-bezier(.2, 1, .3, 1); /* -- Stacking --------------------------------------------- */ --hwd-z-header: 30; --hwd-z-backtop: 40; --hwd-z-dropdown: 50; --hwd-z-offcanvas: 90; --hwd-z-modal: 100; --hwd-z-skiplink: 110; } /* Container width modifiers (body class from the template parameter or the per-menu-item override). */ .is-small { --hwd-container: 960px; } .is-medium { --hwd-container: 1200px; } .is-large { --hwd-container: 1480px; } .is-xlarge { --hwd-container: 1680px; } .is-full { --hwd-container: none; } /* ============================================================ 2. BASE / RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--hwd-bg); color: var(--hwd-text); font-family: var(--hwd-font-family-body); line-height: var(--hwd-line-height); } img, svg, video { max-width: 100%; } /* `height: auto` together with the width/height attributes is what preserves the intrinsic ratio while the image loads, and therefore what prevents layout shift (CLS). It is deliberately kept at element specificity so component rules - cards, heroes, avatars - can still size their own media. */ img, video { height: auto; } :target { scroll-margin-top: var(--hwd-scroll-margin-top); } /* Single, visible focus indicator for every interactive element. Never remove this without providing an equally visible replacement. */ :focus-visible { outline: var(--hwd-focus-width) solid var(--hwd-focus); outline-offset: var(--hwd-focus-offset); border-radius: var(--hwd-radius-sm); } /* Fallback for the error page, which loads this file without template.css. */ .visually-hidden:not(:focus):not(:active) { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Skip link - visible only while focused, then pinned to the top of the page. */ .hwd-skip-link { position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: var(--hwd-z-skiplink); transform: translateY(-120%); padding: 12px 20px; background: var(--hwd-primary); color: var(--hwd-on-accent); font-weight: 600; border-end-end-radius: var(--hwd-radius); transition: transform var(--hwd-transition); } .hwd-skip-link:focus { transform: translateY(0); color: var(--hwd-on-accent); } /* ============================================================ 3. TYPOGRAPHY ============================================================ */ h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; color: var(--hwd-heading); font-family: var(--hwd-font-family-headings); font-weight: var(--hwd-font-weight-headings); line-height: 1.2; } a { color: var(--hwd-link); text-decoration: none; } a:hover { color: var(--hwd-link-hover); } /* * Joomla's own reboot underlines every unclassed link (template.css: * `a:not([class])`, specificity 0,1,1) - which is the right default for prose * but wrong for navigation, buttons and cards, where a link is already obvious * from its position and shape. * * The previous stylesheet solved this with a site-wide * `body a { text-decoration: none !important }`, which also stripped the * underline from body copy. Instead, name the chrome explicitly at the same * specificity: later source order wins, no !important is needed, and links * inside article text keep their underline. */ .hwd-skip-link, .hwd-topbar a, .hwd-header-top a, .hwd-logo, .hwd-menu a, .hwd-dropdown a, .hwd-mobile-nav a, .hwd-header-actions a, .hwd-lang-svg a, .hwd-social a, .hwd-contact a, .hwd-btn, .hwd-hero-icon, .hwd-backtop, .hwd-band a.hwd-btn, .hwd-blog-grid__item .readmore a, .hwd-sc-card a, .hwd-sc-hero a, .hwd-sc-links a, .hwd-sc-children a, .hwd-ab-cat, .hwd-ab-share-icons a, .hwd-ab-pagination a, .hwd-footer a, .hwd-copyright a { text-decoration: none; } /* Underlines come back on hover and focus, so a link is never identified by colour alone (WCAG 1.4.1). Focus applies everywhere; hover only where there is a real pointer, because a tap leaves :hover stuck on touch screens. */ .hwd-menu a:focus-visible, .hwd-dropdown a:focus-visible, .hwd-mobile-nav a:focus-visible, .hwd-topbar a:focus-visible, .hwd-footer a:focus-visible, .hwd-copyright a:focus-visible, .hwd-sc-links a:focus-visible, .hwd-ab-pagination a:focus-visible { text-decoration: underline; } @media (hover: hover) and (pointer: fine) { .hwd-menu a:hover, .hwd-dropdown a:hover, .hwd-mobile-nav a:hover, .hwd-topbar a:hover, .hwd-footer a:hover, .hwd-copyright a:hover, .hwd-sc-links a:hover, .hwd-ab-pagination a:hover { text-decoration: underline; } } .hwd-lead { color: var(--hwd-text); font-size: 17px; } .hwd-bold { color: var(--hwd-heading); font-size: 17px; font-style: italic; } .hwd-text-center { text-align: center; } /* ============================================================ 4. LAYOUT & CONTAINERS ============================================================ */ .hwd-container { width: 100%; max-width: var(--hwd-container); margin-inline: auto; padding-inline: var(--hwd-gutter); transition: max-width var(--hwd-transition); } /* Simple 12-column grid used by the module chromes. */ .hwd-module-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hwd-gap); } .hwd-module-col { grid-column: span var(--hwd-module-span, 12); min-width: 0; } /* Legacy flex row helpers, kept for module HTML that already uses them. */ .hwd-row { display: flex; flex-wrap: wrap; margin-inline: calc(var(--hwd-gutter) * -1); } .hwd-row > * { padding-inline: var(--hwd-gutter); } .hwd-row-middle { align-items: center; } .hwd-col-3 { flex: 0 0 25%; max-width: 25%; } .hwd-col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .hwd-col-6 { flex: 0 0 50%; max-width: 50%; } .hwd-col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .hwd-col-9 { flex: 0 0 75%; max-width: 75%; } /* Component + sidebars ------------------------------------- */ .hwd-grid { max-width: var(--hwd-container); margin-inline: auto; padding: 40px var(--hwd-gutter); } .hwd-grid-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } body.has-sidebar-left .hwd-grid-main { grid-template-columns: minmax(0, var(--hwd-sidebar-width)) minmax(0, 1fr); } body.has-sidebar-right .hwd-grid-main { grid-template-columns: minmax(0, 1fr) minmax(0, var(--hwd-sidebar-width)); } body.has-sidebar-left.has-sidebar-right .hwd-grid-main { grid-template-columns: minmax(0, var(--hwd-sidebar-width)) minmax(0, 1fr) minmax(0, var(--hwd-sidebar-width)); } .hwd-grid-banner { grid-column: 1 / -1; } .hwd-component { min-width: 0; padding: 24px; border-radius: var(--hwd-radius); background: var(--hwd-surface); } .hwd-sidebar-left, .hwd-sidebar-right { min-width: 0; } /* Full-width sections and module bands --------------------- */ .hwd-section { padding-block: var(--hwd-section-y); } .hwd-section-grey { background: var(--hwd-surface-2); } .hwd-section-light { background: var(--hwd-surface); } .hwd-section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; } .hwd-section-head h2 { margin-bottom: 12px; font-size: 32px; } .hwd-section-head p { color: var(--hwd-text); } .hwd-band { width: 100%; padding-block: var(--hwd-band-y); } .hwd-band h1, .hwd-band h2, .hwd-band h3, .hwd-band h4, .hwd-band h5, .hwd-band h6, .hwd-band p { color: inherit; } .hwd-band .moduletable, .hwd-band .module { margin: 0; } .hwd-band-title { color: inherit; } .hwd-style-primary { background: var(--hwd-primary-gradient); color: var(--hwd-on-accent); } .hwd-style-secondary { background: var(--hwd-secondary); color: var(--hwd-on-accent); } .hwd-style-none { background: transparent; } /* ============================================================ 5. COMPONENTS ============================================================ */ /* -- Top bar ----------------------------------------------- */ /* The HotWebDesign header carries the contact details itself, so the top bar only appears when a module is actually published to one of its positions. */ .hwd-topbar { padding-block: 6px; background: var(--hwd-topbar-bg); color: var(--hwd-topbar-text); font-size: 13px; } .hwd-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .hwd-topbar a { color: var(--hwd-topbar-text); } .hwd-topbar a:hover, .hwd-topbar a:focus-visible { color: var(--hwd-topbar-hover); } .hwd-topbar-left, .hwd-topbar-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } /* -- header-top strip -------------------------------------- */ .hwd-header-top { width: 100%; background: var(--hwd-topbar-bg); color: var(--hwd-topbar-text); } .hwd-header-top-inner, .hwd-header-top .mod-custom, .hwd-header-top .moduletable { width: 100%; margin: 0; padding: 0; background: inherit; color: inherit; } .hwd-header-top a { color: var(--hwd-topbar-text); transition: color var(--hwd-transition); } .hwd-header-top a:hover, .hwd-header-top a:focus-visible { color: var(--hwd-topbar-hover); } /* -- Header ------------------------------------------------ */ .hwd-header { position: relative; z-index: var(--hwd-z-header); background: transparent; transition: background var(--hwd-transition-slow), box-shadow var(--hwd-transition-slow); } /* On the front page the header floats over the hero. */ .hwd-frontpage .hwd-header { position: absolute; inset-block-start: 0; inset-inline: 0; } .hwd-header.hwd-sticky { position: sticky; inset-block-start: 0; box-shadow: 0 2px 20px rgba(13, 10, 70, .06); border-block-end: 1px solid var(--hwd-menu-border); } /* The glass is painted on a pseudo layer: an element with backdrop-filter becomes a backdrop root, which would clip the blur of the dropdowns. */ .hwd-header.hwd-sticky::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hwd-menu-bg); backdrop-filter: var(--hwd-menu-blur); } /* Sticky variants. Header and dropdowns read the same tokens, so the submenu always inherits the style selected in the template options. */ body.hwd-sticky-solid { --hwd-menu-bg: var(--hwd-header-bg, var(--hwd-surface)); --hwd-menu-blur: none; } body.hwd-sticky-transparent { --hwd-menu-bg: rgba(255, 255, 255, .45); --hwd-menu-blur: saturate(140%) blur(6px); --hwd-menu-border: transparent; } body.hwd-sticky-transparent .hwd-header.hwd-sticky { box-shadow: none; } body.hwd-sticky-transparent .hwd-header:hover, body.hwd-sticky-transparent .hwd-header:focus-within { --hwd-menu-bg: rgba(255, 255, 255, .92); --hwd-menu-border: rgba(226, 229, 241, .6); } .hwd-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--hwd-header-min-height); max-width: var(--hwd-header-container); } /* The header is a three-slot row: brand, optional module content, navigation. Only the brand may absorb the leftover space - the controls on the right have a fixed footprint, so letting them shrink is what pushes the row off-screen. */ .hwd-header-logo { flex: 1 1 auto; min-width: 0; } /* Full-width strip for the "header" module position. */ .hwd-header-strip { width: 100%; background: var(--hwd-topbar-bg); color: var(--hwd-topbar-text); font-size: 14px; } .hwd-header-strip-inner { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; padding-block: 6px; } .hwd-header-strip a { color: var(--hwd-topbar-text); } .hwd-header-strip a:hover, .hwd-header-strip a:focus-visible { color: var(--hwd-topbar-hover); } .hwd-header-strip p, .hwd-header-strip .mod-custom { margin: 0; } .hwd-header-nav { display: flex; flex: 0 0 auto; align-items: center; gap: 16px; min-width: 0; margin-inline-start: auto; } .hwd-header-actions { display: flex; align-items: center; gap: 10px; } .hwd-header-bottom { width: 100%; } /* -- Logo -------------------------------------------------- */ .hwd-logo { display: flex; align-items: center; gap: 10px; color: var(--hwd-heading); font-family: var(--hwd-font-family-display); font-weight: 800; font-size: 22px; letter-spacing: .02em; } .hwd-logo:hover { color: var(--hwd-heading); } /* Both logo variants are in the markup so the swap needs no JavaScript and cannot shift the layout; only one is ever displayed. A logo is sized by its height, so width:auto lets it shrink with the header instead of collapsing. */ .hwd-logo-img { display: block; width: auto; height: auto; max-width: 100%; max-height: 48px; } .hwd-logo-img--dark { display: none; } .hwd-logo-mark { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--hwd-radius); background: var(--hwd-primary-gradient); color: var(--hwd-on-accent); font-size: 16px; } .hwd-logo-tagline { margin-inline-start: 6px; color: var(--hwd-muted); font-size: 10px; font-weight: 400; letter-spacing: .1em; } /* -- Primary navigation ------------------------------------ */ .hwd-nav { min-width: 0; } .hwd-menu { display: flex; flex-direction: row; align-items: center; /* The links carry their own padding, so the list needs almost no gap. */ gap: 2px; margin: 0; padding: 0; list-style: none; } .hwd-menu > li { position: relative; } .hwd-menu > li > a, .hwd-menu > li > .mod-menu__heading, .hwd-menu > li > .mod-menu__separator { display: flex; align-items: center; /* No gap: icon-to-label spacing is set on the icon instead - see below. */ gap: 0; min-height: var(--hwd-header-min-height); padding-inline: 10px; color: var(--hwd-heading); font-weight: 500; font-size: 15px; white-space: nowrap; transition: color var(--hwd-transition); } .hwd-menu > li > a:hover, .hwd-menu > li.active > a, .hwd-menu > li.current > a { color: var(--hwd-accent-text); } /* * Menu icons. * * Core emits class="p-2 pt-0" on the icon span; those Bootstrap utilities are * !important, so a stylesheet cannot undo them. The mod_menu item layouts are * overridden in html/mod_menu/ to emit .hwd-menu-icon instead, which is why * this rule needs no !important of its own. * * A square, line-height:1 box is what actually centres the glyph against the * label: the previous padding (0 top, 8px bottom) left the glyph sitting in the * top of a taller box, so it read as too high even though the box was centred. */ .hwd-menu .hwd-menu-icon, .hwd-menu .fas, .hwd-menu .far, .hwd-menu .fab, .hwd-menu [class*=" fa-"] { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 1.25em; padding: 0; font-size: 15px; line-height: 1; } /* * Icon-to-label spacing sits on the icon, not on the parent's flex gap. * * Component items put the icon directly inside the link, so a gap works there. * Heading and separator parents nest it inside .mod-menu__heading, which is not * a flex container - so a parent gap spaced nothing and those items looked * cramped while the others did not. One rule on the icon covers both shapes. */ .hwd-menu > li > a > .hwd-menu-icon, .hwd-menu > li > .mod-menu__toggle-sub .hwd-menu-icon { margin-inline-end: 7px; } /* Submenu toggle rendered next to a normal link. */ .hwd-menu > li > .mod-menu__toggle-sub:not(:has(.mod-menu__heading, .mod-menu__separator)) { position: absolute; inset-block-start: 50%; inset-inline-end: 0; z-index: 1; width: 24px; height: 34px; padding: 0; border: 0; background: transparent; color: currentcolor; transform: translateY(-50%); cursor: pointer; } /* Submenu toggle that *is* the item (heading / separator parents). */ .hwd-menu > li > .mod-menu__toggle-sub:has(.mod-menu__heading, .mod-menu__separator) { position: relative; display: flex; align-items: center; gap: 6px; min-height: var(--hwd-header-min-height); padding-block: 0; padding-inline: 10px 25px; border: 0; background: transparent; color: var(--hwd-heading); font: 500 15px/1.2 var(--hwd-font-family-body); cursor: pointer; } .hwd-menu > li > .mod-menu__toggle-sub .mod-menu__heading, .hwd-menu > li > .mod-menu__toggle-sub .mod-menu__separator { padding: 0; color: inherit; font: inherit; } .hwd-menu > li > .mod-menu__toggle-sub:has(.mod-menu__heading, .mod-menu__separator) .hwd-caret { position: absolute; inset-inline-end: 8px; } .hwd-menu > .hwd-has-dropdown > a { padding-inline-end: 25px; } .hwd-caret { display: inline-block; font-size: 9px; transition: transform var(--hwd-transition); } .hwd-has-dropdown[data-hwd-open] > .mod-menu__toggle-sub .hwd-caret, .hwd-has-dropdown:hover > .mod-menu__toggle-sub .hwd-caret { transform: rotate(180deg); } /* -- Dropdowns --------------------------------------------- */ .hwd-dropdown { position: absolute; inset-block-start: calc(100% - 8px); inset-inline-start: 0; z-index: var(--hwd-z-dropdown); display: none; min-width: 270px; margin: 0; padding: 12px; list-style: none; border: 1px solid var(--hwd-menu-border); border-radius: 14px; background: var(--hwd-menu-bg); backdrop-filter: var(--hwd-menu-blur); box-shadow: var(--hwd-shadow-lg); /* A very tall submenu must never trap its own content off-screen. */ max-height: min(70vh, 720px); overflow-y: auto; overscroll-behavior: contain; } /* Only an explicit disclosure opens a submenu. Hover and focus are added back below, but only for real pointers: on a touch screen a tap leaves :hover stuck on the item, which is what makes an off-canvas menu feel jammed. */ .hwd-has-dropdown[data-hwd-open] > .hwd-dropdown { display: block; } @media (hover: hover) and (pointer: fine) { .hwd-has-dropdown:hover > .hwd-dropdown, .hwd-has-dropdown:focus-within > .hwd-dropdown { display: block; } } .hwd-dropdown li { position: relative; list-style: none; } .hwd-dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--hwd-radius-sm); color: var(--hwd-heading); font-size: 14px; font-weight: 500; line-height: 1.35; } .hwd-dropdown a:hover, .hwd-dropdown a:focus-visible { background: var(--hwd-surface-2); color: var(--hwd-accent-text); } .hwd-menu > li > .hwd-dropdown > li > a, .hwd-menu > li > .hwd-dropdown > li > .mod-menu__heading, .hwd-menu > li > .hwd-dropdown > li > .mod-menu__separator { display: flex; align-items: flex-start; gap: 16px; padding: 14px; border-radius: var(--hwd-radius-sm); } .hwd-menu > li > .hwd-dropdown > li > a > img, .hwd-menu > li > .hwd-dropdown > li > .mod-menu__heading > img, .hwd-menu > li > .hwd-dropdown > li > .mod-menu__separator > img { flex: 0 0 52px; width: 52px; height: 52px; object-fit: contain; } .hwd-menu > li > .hwd-dropdown > li > a > .fas, .hwd-menu > li > .hwd-dropdown > li > a > .far, .hwd-menu > li > .hwd-dropdown > li > a > .fab, .hwd-menu > li > .hwd-dropdown > li > a > .fa-solid, .hwd-menu > li > .hwd-dropdown > li > a > .fa-regular, .hwd-menu > li > .hwd-dropdown > li > a > .fa-brands { flex: 0 0 40px; width: 40px; padding-block: 4px; text-align: center; font-size: 30px; line-height: 1; } .hwd-menu-copy { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; } .hwd-menu-title { color: var(--hwd-heading); font-size: 16px; font-weight: 600; line-height: 1.3; } .hwd-menu-subtext { color: var(--hwd-text); font-size: 13px; font-weight: 400; line-height: 1.45; } .hwd-dropdown a:hover .hwd-menu-title, .hwd-dropdown a:focus-visible .hwd-menu-title { color: var(--hwd-accent-text); } .hwd-dropdown .hwd-dropdown { inset-block-start: -12px; inset-inline-start: calc(100% + 10px); } /* Multi-column ("mega") submenus. */ .hwd-columns-2 > .hwd-dropdown, .hwd-columns-3 > .hwd-dropdown, .hwd-columns-4 > .hwd-dropdown, .hwd-columns-5 > .hwd-dropdown, .hwd-columns-6 > .hwd-dropdown { inset-inline-start: 50%; transform: translateX(-50%); gap: 2px 12px; grid-auto-flow: row; } .hwd-columns-2[data-hwd-open] > .hwd-dropdown, .hwd-columns-3[data-hwd-open] > .hwd-dropdown, .hwd-columns-4[data-hwd-open] > .hwd-dropdown, .hwd-columns-5[data-hwd-open] > .hwd-dropdown, .hwd-columns-6[data-hwd-open] > .hwd-dropdown { display: grid; } @media (hover: hover) and (pointer: fine) { .hwd-columns-2:hover > .hwd-dropdown, .hwd-columns-2:focus-within > .hwd-dropdown, .hwd-columns-3:hover > .hwd-dropdown, .hwd-columns-3:focus-within > .hwd-dropdown, .hwd-columns-4:hover > .hwd-dropdown, .hwd-columns-4:focus-within > .hwd-dropdown, .hwd-columns-5:hover > .hwd-dropdown, .hwd-columns-5:focus-within > .hwd-dropdown, .hwd-columns-6:hover > .hwd-dropdown, .hwd-columns-6:focus-within > .hwd-dropdown { display: grid; } } .hwd-columns-2 > .hwd-dropdown { width: min(960px, calc(100vw - 30px)); grid-template-columns: repeat(2, minmax(0, 1fr)); } .hwd-columns-3 > .hwd-dropdown { width: min(1120px, calc(100vw - 30px)); grid-template-columns: repeat(3, minmax(0, 1fr)); } .hwd-columns-4 > .hwd-dropdown { width: min(1240px, calc(100vw - 30px)); grid-template-columns: repeat(4, minmax(0, 1fr)); } .hwd-columns-5 > .hwd-dropdown { width: min(1360px, calc(100vw - 30px)); grid-template-columns: repeat(5, minmax(0, 1fr)); } .hwd-columns-6 > .hwd-dropdown { width: min(1480px, calc(100vw - 30px)); grid-template-columns: repeat(6, minmax(0, 1fr)); } /* -- Header icon buttons ----------------------------------- */ .hwd-search-toggle, .hwd-burger, .hwd-dark-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid transparent; border-radius: var(--hwd-radius); background: var(--hwd-primary-tint); color: var(--hwd-accent-text); cursor: pointer; transition: background var(--hwd-transition), color var(--hwd-transition), border-color var(--hwd-transition); } .hwd-search-toggle:hover, .hwd-burger:hover, .hwd-dark-toggle:hover { background: var(--hwd-primary); border-color: var(--hwd-primary); color: var(--hwd-on-accent); } .hwd-burger { display: none; flex-direction: column; gap: 4px; } .hwd-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentcolor; } /* Theme toggle: one icon per state, driven by the resolved theme. */ .hwd-dark-toggle .hwd-icon-sun { display: none; } .hwd-dark-toggle .hwd-icon-moon { display: inline-block; } /* -- Search modal ------------------------------------------ */ .hwd-search-modal { position: fixed; inset: 0; z-index: var(--hwd-z-modal); display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--hwd-bg); background: color-mix(in srgb, var(--hwd-bg) 96%, transparent); } .hwd-search-modal[hidden] { display: none; } .hwd-search-modal-inner { position: relative; width: min(640px, 100%); padding: 28px; border: 1px solid var(--hwd-border); border-radius: var(--hwd-radius-lg); background: var(--hwd-surface); box-shadow: var(--hwd-shadow-modal); } .hwd-search-close { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--hwd-muted); font-size: 18px; cursor: pointer; } .hwd-search-form { display: flex; gap: 10px; flex-wrap: wrap; } .hwd-search-form input[type="search"] { flex: 1 1 220px; padding: 14px 16px; border: 1px solid var(--hwd-input-border); border-radius: var(--hwd-radius); background: var(--hwd-input-bg); color: var(--hwd-input-text); font-size: 15px; } .hwd-search-form button { padding: 14px 22px; border: 0; border-radius: var(--hwd-radius); background: var(--hwd-primary-gradient); color: var(--hwd-on-accent); font-weight: 600; cursor: pointer; } /* -- Mobile navigation ------------------------------------- */ .hwd-mobile-nav { position: fixed; inset: 0; z-index: var(--hwd-z-offcanvas); display: flex; justify-content: flex-end; background: var(--hwd-overlay); backdrop-filter: blur(4px); } .hwd-mobile-nav[hidden] { display: none; } .hwd-mobile-panel { position: relative; width: min(360px, 85vw); height: 100%; padding: 24px; overflow: auto; overscroll-behavior: contain; background: var(--hwd-surface); box-shadow: -12px 0 30px rgba(13, 10, 70, .18); } .hwd-mobile-close { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; z-index: 2; min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--hwd-text); font-size: 18px; cursor: pointer; } .hwd-mobile-logo { margin-block-end: 18px; color: var(--hwd-heading); font-weight: 800; } .hwd-mobile-body { min-width: 0; } /* Inside the off-canvas the desktop menu becomes a plain stacked list. */ .hwd-mobile-body .hwd-menu, .hwd-mobile-menu { display: block; margin: 0; padding: 0; list-style: none; } .hwd-mobile-body .hwd-menu > li, .hwd-mobile-menu li { border-block-end: 1px solid var(--hwd-border); } .hwd-mobile-body .hwd-menu > li > a, .hwd-mobile-body .hwd-menu > li > .mod-menu__toggle-sub, .hwd-mobile-menu a { display: flex; align-items: center; /* No gap: the icon column owns the spacing, so component items (icon and label as siblings) and heading items (label nested in a span, where a gap applies to nothing) end up identical. */ gap: 0; width: 100%; min-height: 44px; padding-block: 12px; padding-inline: 0; color: var(--hwd-heading); font-weight: 500; } /* * A vertical list needs a real icon column: a fixed width means every label * starts on the same x regardless of how wide the glyph is or how the item type * nests it. */ .hwd-mobile-body .hwd-menu > li > a > .hwd-menu-icon, .hwd-mobile-body .hwd-menu > li > .mod-menu__toggle-sub .hwd-menu-icon { width: 24px; margin-inline-end: 12px; } .hwd-mobile-body .hwd-menu > li > a:hover, .hwd-mobile-menu a:hover { color: var(--hwd-accent-text); } /* * Inside the panel the menu is an accordion: every submenu starts collapsed and * opens only from its own disclosure button. The desktop rules position the * submenu absolutely and lay it out in columns, so all of that is unwound here. */ .hwd-mobile-body .hwd-dropdown, .hwd-mobile-body .hwd-has-dropdown[data-hwd-open] > .hwd-dropdown { position: static; width: auto; min-width: 0; max-height: none; padding: 0 0 12px; border: 0; border-radius: 0; background: none; backdrop-filter: none; box-shadow: none; transform: none; grid-template-columns: minmax(0, 1fr); } .hwd-mobile-body .hwd-has-dropdown > .hwd-dropdown { display: none; } .hwd-mobile-body .hwd-has-dropdown[data-hwd-open] > .hwd-dropdown { display: block; } /* Nested submenus indent instead of flying out sideways. */ .hwd-mobile-body .hwd-dropdown .hwd-dropdown { inset-inline-start: auto; inset-block-start: auto; padding-inline-start: 14px; } /* The disclosure control becomes the row itself. */ .hwd-mobile-body .hwd-menu > li > .mod-menu__toggle-sub, .hwd-mobile-body .hwd-menu > li > .mod-menu__toggle-sub:not(:has(.mod-menu__heading, .mod-menu__separator)), .hwd-mobile-body .hwd-menu > li > .mod-menu__toggle-sub:has(.mod-menu__heading, .mod-menu__separator) { position: static; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; height: auto; padding: 12px 0; transform: none; font: inherit; color: var(--hwd-heading); text-align: start; } .hwd-mobile-body .hwd-menu > li > .mod-menu__toggle-sub .hwd-caret { position: static; inset-inline-end: auto; font-size: 12px; } /* * A parent row has one of two shapes: either the disclosure button *is* the row * (heading and separator parents), or the row is a link with the disclosure * beside it. A two-column grid handles both without the button wrapping onto a * second line, which is what a flex row did. */ .hwd-mobile-body .hwd-menu > .hwd-has-dropdown { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .hwd-mobile-body .hwd-menu > .hwd-has-dropdown > a { grid-column: 1; padding-inline-end: 0; } /* The button is the whole row... */ .hwd-mobile-body .hwd-menu > .hwd-has-dropdown > .mod-menu__toggle-sub { grid-column: 1 / -1; } /* ...unless the item has its own link, in which case it is just the chevron. */ .hwd-mobile-body .hwd-menu > .hwd-has-dropdown > a + .mod-menu__toggle-sub { grid-column: 2; justify-content: center; width: 44px; min-width: 44px; padding-inline: 0; } .hwd-mobile-body .hwd-menu > .hwd-has-dropdown > .hwd-dropdown { grid-column: 1 / -1; } /* Submenu rows inside the panel are plain list rows, not media cards. */ .hwd-mobile-body .hwd-menu > li > .hwd-dropdown > li > a { align-items: center; gap: 10px; padding: 10px 0; } .hwd-mobile-body .hwd-menu > li > .hwd-dropdown > li > a > img, .hwd-mobile-body .hwd-menu > li > .hwd-dropdown > li > a > .fas, .hwd-mobile-body .hwd-menu > li > .hwd-dropdown > li > a > .far, .hwd-mobile-body .hwd-menu > li > .hwd-dropdown > li > a > .fab { flex: 0 0 24px; width: 24px; height: 24px; font-size: 18px; } .hwd-mobile-body .hwd-menu-subtext { display: none; } .hwd-mobile-contact { margin-block-start: 20px; } .hwd-mobile-contact a { color: var(--hwd-accent-text); font-size: 14px; } /* -- Buttons ----------------------------------------------- */ .hwd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 14px 28px; border: 0; border-radius: var(--hwd-radius-pill); font-weight: 600; font-size: 14px; letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: transform var(--hwd-transition), box-shadow var(--hwd-transition), background var(--hwd-transition), color var(--hwd-transition); } .hwd-btn-primary { background: var(--hwd-primary-gradient); color: var(--hwd-on-accent); box-shadow: 0 10px 20px rgba(111, 64, 241, .2); box-shadow: 0 10px 20px color-mix(in srgb, var(--hwd-primary) 20%, transparent); } .hwd-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(111, 64, 241, .28); box-shadow: 0 14px 28px color-mix(in srgb, var(--hwd-primary) 28%, transparent); color: var(--hwd-on-accent); } .hwd-btn-primary::before { display: none; } .hwd-btn-dark { background: var(--hwd-dark); color: var(--hwd-on-accent); box-shadow: 0 10px 20px rgba(13, 10, 70, .18); } .hwd-btn-dark:hover { transform: translateY(-1px); background: var(--hwd-secondary); color: var(--hwd-on-accent); box-shadow: 0 14px 28px rgba(13, 10, 70, .24); } .hwd-btn-light { border: 1px solid var(--hwd-border); background: var(--hwd-surface); color: var(--hwd-heading); } .hwd-btn-light:hover { background: var(--hwd-surface-2); color: var(--hwd-heading); } /* -- Hero -------------------------------------------------- */ .hwd-hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: 640px; padding-block: 70px; overflow: hidden; background: linear-gradient(180deg, var(--hwd-surface) 0%, var(--hwd-surface-2) 100%); text-align: center; } .hwd-hero::before, .hwd-hero::after { content: ""; position: absolute; width: 600px; height: 600px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 30% 30%, rgba(111, 64, 241, .08), transparent 70%); background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--hwd-primary) 8%, transparent), transparent 70%); } .hwd-hero::before { inset-inline-start: -180px; inset-block-start: -120px; transform: rotate(15deg); } .hwd-hero::after { inset-inline-end: -200px; inset-block-end: -180px; background: radial-gradient(circle at 70% 70%, rgba(49, 131, 226, .06), transparent 70%); } .hwd-hero-track { position: relative; z-index: 1; width: 100%; } .hwd-hero-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-inline: 20px; opacity: 0; visibility: hidden; transition: opacity .5s ease; } .hwd-hero-slide.is-active { position: relative; opacity: 1; visibility: visible; } .hwd-hero-overlay { max-width: 960px; margin-inline: auto; text-align: center; } .hwd-hero-overlay h1 { margin: 0 0 18px; color: var(--hwd-heading); font-size: clamp(28px, 4vw, 36px); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; } .hwd-hero-overlay p { max-width: 640px; margin: 0 auto 28px; color: var(--hwd-text); font-size: clamp(16px, 2vw, 18px); line-height: 1.6; } .hwd-hero-prev, .hwd-hero-next { position: absolute; inset-block-start: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--hwd-border); border-radius: 50%; background: var(--hwd-surface); color: var(--hwd-heading); box-shadow: var(--hwd-shadow-sm); transform: translateY(-50%); cursor: pointer; } .hwd-hero-prev { inset-inline-start: 24px; } .hwd-hero-next { inset-inline-end: 24px; } .hwd-hero-prev:hover, .hwd-hero-next:hover { background: var(--hwd-primary); border-color: var(--hwd-primary); color: var(--hwd-on-accent); } .hwd-hero-dots, .hwd-dots { display: flex; justify-content: center; gap: 8px; margin-block-start: 28px; } .hwd-dots { margin-block-start: 18px; } .hwd-hero-dots button, .hwd-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--hwd-border); cursor: pointer; transition: width var(--hwd-transition), background var(--hwd-transition); } .hwd-hero-dots button.is-active, .hwd-dots button.is-active { width: 22px; border-radius: var(--hwd-radius-pill); background: var(--hwd-primary); } .hwd-dots button.is-active { width: 20px; } /* Slider pause control - WCAG 2.2 SC 2.2.2 requires a way to stop motion. */ .hwd-slider-pause { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-inline-start: 8px; padding: 0; border: 1px solid var(--hwd-border); border-radius: 50%; background: var(--hwd-surface); color: var(--hwd-heading); font-size: 11px; cursor: pointer; } .hwd-slider-pause:hover { background: var(--hwd-primary); border-color: var(--hwd-primary); color: var(--hwd-on-accent); } /* -- Hero icon row ----------------------------------------- */ .hwd-hero-icons { display: flex; justify-content: center; flex-wrap: wrap; gap: 28px; margin-block-start: 48px; } .hwd-hero-icon { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 120px; color: var(--hwd-heading); font-size: 13px; font-weight: 500; text-align: center; transition: color var(--hwd-transition); } .hwd-hero-icon img { width: 58px; height: 58px; padding: 12px; border: 1px solid var(--hwd-border); border-radius: var(--hwd-radius-lg); background: var(--hwd-surface); box-shadow: var(--hwd-shadow-sm); transition: transform var(--hwd-transition-slow); } .hwd-hero-icon:hover { color: var(--hwd-accent-text); } .hwd-hero-icon:hover img { transform: translateY(-6px); } /* -- Services ---------------------------------------------- */ .hwd-services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .hwd-service { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border: 1px solid var(--hwd-border); border-radius: var(--hwd-radius-lg); background: var(--hwd-card-bg); transition: transform var(--hwd-transition), box-shadow var(--hwd-transition); } .hwd-service:hover { transform: translateY(-2px); box-shadow: var(--hwd-shadow); } .hwd-service-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--hwd-radius); background: var(--hwd-primary-tint); color: var(--hwd-accent-text); font-size: 20px; } .hwd-service h3 { margin: 0 0 6px; font-size: 16px; } .hwd-service p { margin: 0; color: var(--hwd-text); font-size: 13px; line-height: 1.5; } /* -- Offers ------------------------------------------------ */ .hwd-offer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .hwd-offer { position: relative; padding: 26px 18px; overflow: hidden; border: 1px solid var(--hwd-border); border-radius: var(--hwd-radius-lg); background: var(--hwd-card-bg); text-align: center; transition: transform .25s ease, box-shadow .25s ease; } .hwd-offer::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: var(--hwd-primary-gradient); opacity: 0; transition: opacity var(--hwd-transition); } .hwd-offer:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(13, 10, 70, .08); } .hwd-offer:hover::before, .hwd-offer:focus-within::before { opacity: 1; } .hwd-offer-icon { margin-block-end: 12px; color: var(--hwd-accent-text); font-size: 30px; } .hwd-offer h3 { margin: 0 0 8px; font-size: 16px; } .hwd-offer p { margin: 0; color: var(--hwd-text); font-size: 13px; } .hwd-offer-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 26px 18px; border-radius: var(--hwd-radius-lg); background: var(--hwd-card-bg); opacity: 0; visibility: hidden; transition: opacity var(--hwd-transition), visibility var(--hwd-transition); } .hwd-offer:hover .hwd-offer-back, .hwd-offer:focus-within .hwd-offer-back { opacity: 1; visibility: visible; } .hwd-offer-back a { margin-block-start: 10px; color: var(--hwd-accent-text); font-weight: 600; } /* -- Team -------------------------------------------------- */ .hwd-team { position: relative; padding-inline: 40px; } .hwd-team-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .hwd-team-card { overflow: hidden; border: 1px solid var(--hwd-border); border-radius: var(--hwd-radius-lg); background: var(--hwd-card-bg); text-align: start; } .hwd-team-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .hwd-team-card h3 { margin: 14px 16px 2px; font-size: 16px; } .hwd-team-card p { margin-inline: 16px; margin-block: 0; color: var(--hwd-muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } .hwd-team-social { display: flex; gap: 10px; padding: 12px 16px 16px; } .hwd-team-social a { color: var(--hwd-muted); } .hwd-team-social a:hover { color: var(--hwd-accent-text); } .hwd-slider-prev, .hwd-slider-next { position: absolute; inset-block-start: 50%; width: 36px; height: 36px; border: 1px solid var(--hwd-border); border-radius: 50%; background: var(--hwd-surface); color: var(--hwd-heading); transform: translateY(-50%); cursor: pointer; } .hwd-slider-prev { inset-inline-start: 0; } .hwd-slider-next { inset-inline-end: 0; } /* -- Counters ---------------------------------------------- */ .hwd-counters { padding-block: 28px; border-block: 1px solid var(--hwd-border); background: var(--hwd-card-bg); } .hwd-counters-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; text-align: center; } .hwd-counter strong { color: var(--hwd-heading); font-size: 36px; } .hwd-counter p { margin: 6px 0 0; color: var(--hwd-text); font-size: 13px; } /* -- Call to action ---------------------------------------- */ .hwd-cta { position: relative; padding-block: 64px; overflow: hidden; background: var(--hwd-primary-gradient); color: var(--hwd-on-accent); text-align: center; } .hwd-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .12), transparent 50%); } .hwd-cta .hwd-container { position: relative; } .hwd-cta h2 { color: var(--hwd-on-accent); font-size: 32px; } .hwd-cta-sub { color: rgba(255, 255, 255, .9); font-style: italic; } .hwd-cta-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; margin-block-start: 18px; } .hwd-cta-phone { font-size: 26px; font-weight: 800; } /* -- Approach / video -------------------------------------- */ .hwd-approach-img { position: relative; overflow: hidden; border-radius: var(--hwd-radius-lg); box-shadow: var(--hwd-shadow); } .hwd-approach-img img { display: block; width: 100%; } .hwd-video { position: relative; display: block; overflow: hidden; border-radius: var(--hwd-radius-lg); box-shadow: var(--hwd-shadow-modal); } .hwd-video img { display: block; width: 100%; } .hwd-video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(13, 10, 70, .12); } .hwd-video-play span { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--hwd-surface); color: var(--hwd-accent-text); font-size: 20px; box-shadow: 0 8px 20px rgba(13, 10, 70, .15); } /* -- Testimonials ------------------------------------------ */ .hwd-testimonial { padding-block: 70px; background: var(--hwd-surface-2); text-align: center; } .hwd-testimonial-track { position: relative; max-width: 720px; min-height: 180px; margin-inline: auto; } .hwd-testimonial-track > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .4s ease; } .hwd-testimonial-track > div.is-active { position: relative; opacity: 1; visibility: visible; } .hwd-testimonial-track img { width: 72px; height: 72px; margin-block-end: 12px; border-radius: 50%; object-fit: cover; } .hwd-testimonial-track h3 { margin: 0 0 10px; font-size: 16px; } .hwd-testimonial-track p { max-width: 640px; margin-inline: auto; color: var(--hwd-text); font-style: italic; } /* -- Clients ----------------------------------------------- */ .hwd-clients { padding-block: 40px; border-block: 1px solid var(--hwd-border); background: var(--hwd-card-bg); } .hwd-clients-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; gap: 24px; } .hwd-clients-grid img { width: 100%; max-width: 110px; margin-inline: auto; filter: grayscale(100%); opacity: .65; transition: filter var(--hwd-transition), opacity var(--hwd-transition); } .hwd-clients-grid img:hover { filter: none; opacity: 1; } /* -- Map & forms ------------------------------------------- */ .hwd-map { height: 420px; overflow: hidden; border: 1px solid var(--hwd-border); border-radius: var(--hwd-radius-lg); } .hwd-map iframe { width: 100%; height: 100%; border: 0; } .hwd-form { display: grid; gap: 12px; } .hwd-form input, .hwd-form select, .hwd-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--hwd-input-border); border-radius: var(--hwd-radius); background: var(--hwd-input-bg); color: var(--hwd-input-text); font-family: inherit; font-size: 14px; } .hwd-form input::placeholder, .hwd-form textarea::placeholder { color: var(--hwd-placeholder); } .hwd-form input:focus, .hwd-form select:focus, .hwd-form textarea:focus { outline: none; border-color: var(--hwd-primary); box-shadow: 0 0 0 3px rgba(111, 64, 241, .12); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hwd-primary) 12%, transparent); } .hwd-form input:focus-visible, .hwd-form select:focus-visible, .hwd-form textarea:focus-visible { outline: var(--hwd-focus-width) solid var(--hwd-focus); outline-offset: 1px; } .hwd-form textarea { min-height: 120px; resize: vertical; } .hwd-form :disabled { opacity: .6; cursor: not-allowed; } /* -- Language switcher ------------------------------------- */ .hwd-lang { display: flex; } .hwd-lang-svg { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .hwd-lang-svg.hwd-lang-block { flex-direction: column; align-items: flex-start; } .hwd-lang-svg li { list-style: none; } .hwd-lang-svg a { display: inline-flex; padding: 2px; border-radius: 5px; transition: opacity var(--hwd-transition), transform var(--hwd-transition); } .hwd-lang-svg svg { display: block; width: 20px; height: 14px; border-radius: 3px; outline: 1px solid rgba(0, 0, 0, .15); outline-offset: -1px; } .hwd-lang-svg li:not(.lang-active) a { opacity: .55; } .hwd-lang-svg li:not(.lang-active) a:hover, .hwd-lang-svg li:not(.lang-active) a:focus-visible { opacity: 1; transform: translateY(-1px); } .hwd-lang-svg li.lang-active a { opacity: 1; outline: 2px solid var(--hwd-primary); outline-offset: 1px; } .hwd-lang-code { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 14px; padding-inline: 3px; border-radius: 3px; background: var(--hwd-surface-2); color: var(--hwd-heading); font-size: 9px; font-weight: 700; letter-spacing: .04em; } /* -- Back to top ------------------------------------------- */ .hwd-backtop { position: fixed; inset-inline-end: 18px; inset-block-end: 18px; z-index: var(--hwd-z-backtop); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--hwd-border); border-radius: 50%; background: var(--hwd-surface); color: var(--hwd-heading); box-shadow: var(--hwd-shadow-modal); transition: background var(--hwd-transition), color var(--hwd-transition), border-color var(--hwd-transition); } .hwd-backtop:hover { background: var(--hwd-primary); border-color: var(--hwd-primary); color: var(--hwd-on-accent); } .hwd-backtop[hidden] { display: none; } /* ============================================================ 6. JOOMLA COMPONENT VIEWS ============================================================ */ /* Cassiopeia's own header container is not used by this template. */ .container-header { display: none; } /* -- Cards / messages -------------------------------------- */ .card { overflow: hidden; border: 1px solid var(--hwd-border); border-radius: var(--hwd-radius); background: var(--hwd-card-bg); } .card-header { background: var(--hwd-surface-2); color: var(--hwd-heading); font-weight: 600; } /* Pagination. Bootstrap lays this out as a non-wrapping flex row, which is what pushes narrow screens sideways on long result sets. */ .pagination { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; } .pagination .page-link { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } .pagination__wrapper, .hwd-blog-pagination, .hwd-sc-pagination { max-width: 100%; } /* Optional module subtitle, printed by a module layout directly beneath the title that the module chrome emits. Sized between the heading and body copy so it reads as a deck, not as a second heading. */ .hwd-module-subtitle { max-width: 68ch; margin: -.25em 0 1.25em; color: var(--hwd-muted); font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.55; } /* When the title block is centred or end-aligned, the measure has to move with it - otherwise the text centres inside a box still hugging the start edge. */ .hwd-module-subtitle.text-center { margin-inline: auto; } .hwd-module-subtitle.text-end { margin-inline: auto 0; } .hwd-section-head .hwd-module-subtitle { margin-inline: auto; text-align: center; } /* Article info list rendered by joomla.content.info_block. */ .article-info dd { float: inline-start; margin-inline-end: 10px; padding: 0; } /* -- Category blog (html/com_content/category/blog.php) ----- */ .hwd-blog { min-width: 0; } .hwd-blog-header { margin-block-end: 2rem; } .hwd-blog-header h1, .hwd-blog-header h2 { margin: 0 0 .5rem; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; } .hwd-blog-header .category-desc { max-width: 720px; color: var(--hwd-text); } .hwd-blog-empty { padding: 1.25rem; border-radius: var(--hwd-radius); background: var(--hwd-surface-2); color: var(--hwd-text); } .hwd-blog-leading, .hwd-blog-grid { display: grid; gap: var(--hwd-gap); margin-block-end: var(--hwd-gap); } .hwd-blog-grid.columns-2, .hwd-blog-grid.masonry-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hwd-blog-grid.columns-3, .hwd-blog-grid.masonry-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hwd-blog-grid.columns-4, .hwd-blog-grid.masonry-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hwd-blog-grid__item { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--hwd-border); border-radius: var(--hwd-radius-lg); background: var(--hwd-card-bg); transition: transform var(--hwd-transition), box-shadow var(--hwd-transition); } .hwd-blog-grid__item:hover { transform: translateY(-3px); box-shadow: var(--hwd-shadow); } .hwd-blog-grid__item > figure, .hwd-blog-grid__item .item-image { margin: 0; overflow: hidden; } .hwd-blog-grid__item img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .hwd-blog-grid__item .item-content { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; } .hwd-blog-grid__item .page-header, .hwd-blog-grid__item h2, .hwd-blog-grid__item h3 { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 700; line-height: 1.3; } .hwd-blog-grid__item .readmore { margin-block-start: auto; } .hwd-blog-more, .hwd-blog-children, .hwd-blog-pagination { margin-block: var(--hwd-gap); } .hwd-blog-children h2 { margin: 0 0 .75rem; font-size: 1.1rem; font-weight: 700; } /* -- Category showcase (html/com_content/category/showcase.php) */ .hwd-showcase { min-width: 0; } .hwd-sc-head { display: flex; align-items: flex-start; gap: 2rem; margin-block-end: 2.5rem; padding-block-end: 2rem; border-block-end: 1px solid var(--hwd-separator); } .hwd-sc-cat-image { flex-shrink: 0; width: 120px; height: 120px; overflow: hidden; border-radius: var(--hwd-radius-xl); } .hwd-sc-cat-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .hwd-sc-head-text { flex: 1; min-width: 0; } .hwd-sc-head-text h1, .hwd-sc-head-text h2, .hwd-sc-title { margin: 0 0 .5rem; color: var(--hwd-heading); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; } .hwd-sc-count { display: flex; align-items: baseline; gap: .5rem; margin-block: 10px 1rem; padding: 5px 12px; border-radius: var(--hwd-radius-pill); background: var(--hwd-surface-2); color: var(--hwd-accent-text); font-size: 12.5px; font-weight: 700; letter-spacing: .03em; } .hwd-sc-count-num { color: var(--hwd-accent-text); font-size: 2.5rem; font-weight: 800; line-height: 1; } .hwd-sc-count-label { color: var(--hwd-text); font-size: 1rem; font-weight: 500; } .hwd-sc-desc { max-width: 700px; margin-block-start: 14px; color: var(--hwd-text); font-size: .95rem; line-height: 1.7; } .hwd-sc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; /* Rendered as a

: reset the Bootstrap paragraph margin. */ margin: 0; color: var(--hwd-muted); font-size: .8rem; } .hwd-sc-chip { display: inline-block; padding: .2rem .65rem; border-radius: var(--hwd-radius-pill); background: var(--hwd-primary); color: var(--hwd-btn-text); font-size: .7rem; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; } /* Hero card: image on one side, copy on the other. */ .hwd-sc-hero { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 400px; margin-block-end: 2.5rem; overflow: hidden; border: 1px solid var(--hwd-border); border-radius: var(--hwd-radius-xl); background: var(--hwd-card-bg); } .hwd-sc-hero--text { grid-template-columns: minmax(0, 1fr); } .hwd-sc-hero-media { position: relative; min-height: 400px; overflow: hidden; } .hwd-sc-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .hwd-sc-hero-body { display: flex; flex-direction: column; justify-content: center; max-width: 760px; padding: 2.5rem; } .hwd-sc-hero-body h2 { margin: .75rem 0; color: var(--hwd-heading); font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 800; line-height: 1.2; letter-spacing: -.015em; } .hwd-sc-hero-body h2 a { color: inherit; } .hwd-sc-hero-body h2 a:hover { color: var(--hwd-accent-text); } .hwd-sc-hero-body p { margin: 0 0 1.5rem; color: var(--hwd-text); font-size: .95rem; line-height: 1.7; } /* Card grid */ .hwd-sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1.5rem; margin-block-end: 2.5rem; } .hwd-sc-grid--1col { grid-template-columns: minmax(0, 1fr); } .hwd-sc-grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hwd-sc-grid--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hwd-sc-grid--4col { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hwd-sc-card-item { display: flex; min-width: 0; } .hwd-sc-card { display: flex; flex: 1; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--hwd-border); border-radius: var(--hwd-radius-xl); background: var(--hwd-card-bg); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .hwd-sc-card:hover { transform: translateY(-3px); box-shadow: var(--hwd-shadow); } .hwd-sc-card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; } .hwd-sc-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .hwd-sc-card:hover .hwd-sc-card-media img { transform: scale(1.04); } .hwd-sc-card-media .hwd-sc-chip { position: absolute; inset-block-start: .75rem; inset-inline-start: .75rem; } /* Placeholder used when an article has no image, so a row of cards keeps one baseline instead of some starting with a picture and some with text. */ .hwd-sc-card-media--empty { background: linear-gradient(135deg, var(--hwd-surface-2) 0%, var(--hwd-surface-3) 100%); } .hwd-sc-card-media--empty::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, var(--hwd-primary-tint), transparent 60%); } .hwd-sc-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; } .hwd-sc-card-body h3 { margin: .5rem 0; color: var(--hwd-heading); font-size: 1.05rem; font-weight: 700; line-height: 1.3; } .hwd-sc-card-body h3 a { color: inherit; } .hwd-sc-card-body h3 a:hover { color: var(--hwd-accent-text); } .hwd-sc-ex { margin-block-end: .75rem; color: var(--hwd-text); font-size: .85rem; line-height: 1.6; } .hwd-sc-more { display: inline-flex; align-items: center; gap: .35rem; margin-block-start: auto; color: var(--hwd-accent-text); font-size: .8rem; font-weight: 600; } .hwd-sc-more span { transition: transform var(--hwd-transition); } .hwd-sc-more:hover { text-decoration: underline; } .hwd-sc-more:hover span { transform: translateX(4px); } /* Numbered link list */ .hwd-sc-links { display: flex; flex-direction: column; margin-block-end: 2rem; border-block-start: 1px solid var(--hwd-separator); } .hwd-sc-links a { display: flex; align-items: center; gap: 1rem; padding-block: .85rem; padding-inline: 0; border-block-end: 1px solid var(--hwd-separator); color: var(--hwd-text); transition: color var(--hwd-transition), background var(--hwd-transition), padding-inline-start var(--hwd-transition); } .hwd-sc-links a:hover { padding-inline-start: 14px; background: var(--hwd-surface-2); color: var(--hwd-accent-text); } .hwd-sc-links-num { min-width: 2.5rem; color: var(--hwd-accent-text); font-size: 1.4rem; font-weight: 800; } .hwd-sc-links-title { flex: 1; color: var(--hwd-heading); font-size: .95rem; font-weight: 600; } .hwd-sc-links-date { color: var(--hwd-muted); font-size: .8rem; } /* Child categories */ .hwd-sc-children { margin-block-end: 2rem; } .hwd-sc-children h2 { margin: 0 0 .75rem; color: var(--hwd-heading); font-size: 1.1rem; font-weight: 700; } .hwd-sc-children-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 36px; } .hwd-sc-children .hwd-sc-chip { padding: .4rem 1rem; background: var(--hwd-surface-2); color: var(--hwd-text); font-size: .85rem; text-transform: none; } .hwd-sc-children .hwd-sc-chip:hover { background: var(--hwd-primary); color: var(--hwd-btn-text); } .hwd-sc-empty { margin: 0; padding: 2rem; border-radius: var(--hwd-radius-xl); background: var(--hwd-surface-2); color: var(--hwd-muted); text-align: center; } .hwd-sc-pagination { margin-block: 2rem; } /* -- Article "blog" layout (html/com_content/article/blog.php) */ .hwd-ab { max-width: 100%; margin: 0; padding: 0; } .hwd-ab-hero { width: 100%; max-height: 520px; margin-block-end: 2.5rem; overflow: hidden; } .hwd-ab-hero img { display: block; width: 100%; height: 100%; max-height: 520px; object-fit: cover; } .hwd-ab-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: start; gap: 3rem; max-width: 1100px; margin-inline: auto; padding-inline: 1rem; } .hwd-ab-sidebar { position: sticky; inset-block-start: 100px; display: flex; flex-direction: column; gap: 1.25rem; } .hwd-ab-cat { display: inline-block; width: fit-content; padding: .3rem .85rem; border-radius: var(--hwd-radius-pill); background: var(--hwd-primary); color: var(--hwd-btn-text); font-size: .75rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; } .hwd-ab-cat:hover { color: var(--hwd-btn-text); } .hwd-ab-date { color: var(--hwd-muted); font-size: .85rem; } .hwd-ab-share { display: flex; flex-direction: column; gap: .5rem; } .hwd-ab-share-label { color: var(--hwd-muted); font-size: .8rem; font-weight: 600; } .hwd-ab-share-icons { display: flex; gap: .5rem; } .hwd-ab-share-icons a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--hwd-surface-2); color: var(--hwd-text); transition: background var(--hwd-transition), color var(--hwd-transition); } .hwd-ab-share-icons a:hover { background: var(--hwd-primary); color: var(--hwd-btn-text); } .hwd-ab-body { min-width: 0; } .hwd-ab-title { margin: 0 0 2rem; color: var(--hwd-heading); font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 800; line-height: 1.2; } .hwd-ab-edit { margin-block-end: 1rem; } .hwd-ab-badge { display: inline-block; margin-block-end: 1rem; padding: .25rem .75rem; border-radius: var(--hwd-radius-pill); background: var(--hwd-warning); color: #fff; font-size: .75rem; font-weight: 600; } /* Long-form typography shared by the article body. */ .hwd-ab-content { color: var(--hwd-text); font-size: 1.05rem; line-height: 1.85; } .hwd-ab-content h2 { margin: 2.5rem 0 1rem; font-size: 1.5rem; font-weight: 700; } .hwd-ab-content h3 { margin: 2rem 0 .75rem; font-size: 1.25rem; font-weight: 600; } .hwd-ab-content p { margin-block-end: 1.25rem; } .hwd-ab-content img { max-width: 100%; height: auto; border-radius: var(--hwd-radius); } .hwd-ab-content blockquote { margin: 1.5rem 0; padding: 1rem 1.5rem; border-inline-start: 4px solid var(--hwd-primary); border-start-end-radius: var(--hwd-radius); border-end-end-radius: var(--hwd-radius); background: var(--hwd-surface-2); font-style: italic; } .hwd-ab-content a { color: var(--hwd-link); text-decoration: underline; text-underline-offset: 2px; } .hwd-ab-content ul, .hwd-ab-content ol { margin-block: 1rem 1.25rem; margin-inline-start: 1.5rem; padding: 0; } .hwd-ab-content li { margin-block-end: .4rem; } .hwd-ab-content pre { margin: 1.5rem 0; padding: 1.25rem; overflow-x: auto; border-radius: var(--hwd-radius); background: var(--hwd-surface-3); color: var(--hwd-text); font-size: .9rem; line-height: 1.6; } .hwd-ab-content code { padding: .15em .4em; border-radius: 4px; background: var(--hwd-surface-3); font-size: .9em; } .hwd-ab-content pre code { padding: 0; background: none; } .hwd-ab-content table { width: 100%; border-collapse: collapse; } .hwd-ab-content th, .hwd-ab-content td { padding: .5rem .75rem; border: 1px solid var(--hwd-border); text-align: start; } .hwd-ab-tags { margin-block: 2rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--hwd-separator); } .hwd-ab-tags .tags a, .hwd-ab-tags .tag-name { display: inline-block; padding: .35rem .85rem; border-radius: var(--hwd-radius-pill); background: var(--hwd-surface-2); color: var(--hwd-text); font-size: .8rem; font-weight: 500; transition: background var(--hwd-transition), color var(--hwd-transition); } .hwd-ab-tags .tags a:hover { background: var(--hwd-primary); color: var(--hwd-btn-text); } .hwd-ab-pagination { display: flex; justify-content: space-between; gap: 1rem; margin-block-end: 2rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--hwd-separator); } .hwd-ab-pagination a { color: var(--hwd-link); font-weight: 600; } /* -- Error page -------------------------------------------- */ .hwd-error-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .hwd-error-header { padding-block: 20px; border-block-end: 1px solid var(--hwd-border); } .hwd-error-header .hwd-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 0; } .hwd-error-hero { display: flex; flex: 1; align-items: center; justify-content: center; padding: 72px var(--hwd-gutter); text-align: center; } .hwd-error-inner { max-width: 640px; } .hwd-error-code { margin: 0 0 10px; background: var(--hwd-primary-gradient); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: clamp(96px, 18vw, 170px); font-weight: 800; line-height: 1; letter-spacing: -.03em; } .hwd-error-hero h1 { margin: 0 0 14px; color: var(--hwd-heading); font-size: clamp(26px, 4vw, 38px); } .hwd-error-msg { margin: 0 0 32px; color: var(--hwd-text); font-size: 17px; line-height: 1.65; } .hwd-error-modules { margin-block-start: 32px; } .hwd-error-footer { padding-block: 20px; border-block-start: 1px solid var(--hwd-border); color: var(--hwd-muted); font-size: 14px; text-align: center; } .hwd-error-debug { width: 100%; max-width: min(var(--hwd-container), 100%); margin-inline: auto; padding: 20px var(--hwd-gutter); font-size: 12px; } /* ============================================================ 7. FOOTER ============================================================ */ .hwd-footer { position: relative; padding: 60px 0 40px; border-block-start: 6px solid var(--hwd-primary); background: var(--hwd-footer-bg); color: var(--hwd-footer-text); } .hwd-footer a { color: var(--hwd-footer-text); } .hwd-footer a:hover { color: var(--hwd-footer-heading); } .hwd-footer h1, .hwd-footer h2, .hwd-footer h3, .hwd-footer h4, .hwd-footer h5, .hwd-footer h6 { color: var(--hwd-footer-heading); } .hwd-footer h3 { margin: 0 0 14px; font-size: 15px; font-weight: 700; } .hwd-footer ul { margin: 0; padding: 0; list-style: none; } .hwd-footer li { padding-block: 6px; font-size: 13px; } .hwd-footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } .hwd-copyright { padding-block: 18px; background: var(--hwd-footer-bottom-bg); color: var(--hwd-footer-text); font-size: 12px; } .hwd-copyright p { margin: 0; } .hwd-copyright a { color: var(--hwd-footer-text); } .hwd-copyright a:hover { color: var(--hwd-footer-heading); } .hwd-copyright-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .hwd-copyright-left, .hwd-copyright-right { display: flex; align-items: center; gap: 10px; } .hwd-copyright-right { margin-inline-start: auto; } /* ============================================================ 8. UTILITIES ============================================================ */ /* Wide content - tables, code, diagrams - scrolls inside its own box so it can never widen the page. */ .hwd-scroll-x { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; } .hwd-social { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; } .hwd-social a { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; } .hwd-contact { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; } /* ============================================================ 9. RESPONSIVE ============================================================ */ @media (max-width: 1100px) { .hwd-menu { display: none; } .hwd-burger { display: inline-flex; } } @media (min-width: 1101px) { .hwd-burger { display: none; } /* The off-canvas panel is a mobile affordance only. */ .hwd-mobile-nav { display: none; } } @media (max-width: 991px) { .hwd-grid-main, body.has-sidebar-left .hwd-grid-main, body.has-sidebar-right .hwd-grid-main, body.has-sidebar-left.has-sidebar-right .hwd-grid-main { grid-template-columns: minmax(0, 1fr); } .hwd-col-3, .hwd-col-4, .hwd-col-6, .hwd-col-8, .hwd-col-9 { flex: 0 0 100%; max-width: 100%; } .hwd-offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hwd-team { padding-inline: 0; } .hwd-team-track { grid-template-columns: minmax(0, 1fr); } .hwd-clients-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hwd-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hwd-sc-grid--3col, .hwd-sc-grid--4col { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hwd-blog-grid.columns-3, .hwd-blog-grid.masonry-3, .hwd-blog-grid.columns-4, .hwd-blog-grid.masonry-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .hwd-header-inner { gap: 12px; } .hwd-header-actions { gap: 6px; } .hwd-logo-img { max-height: 36px; } .hwd-header-strip-inner { justify-content: center; } :root { --hwd-section-y: 56px; --hwd-band-y: 44px; --hwd-gap: 20px; } .hwd-module-col { grid-column: 1 / -1; } .hwd-hero { min-height: 560px; padding-block: 120px 60px; } .hwd-hero-prev, .hwd-hero-next { display: none; } .hwd-counters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hwd-copyright-inner { flex-direction: column; text-align: center; } .hwd-copyright-right { margin-inline-start: 0; justify-content: center; } .hwd-sc-head { flex-direction: column; gap: 1rem; } .hwd-sc-cat-image { width: 80px; height: 80px; } .hwd-sc-grid, .hwd-sc-grid--2col, .hwd-sc-grid--3col, .hwd-sc-grid--4col { grid-template-columns: minmax(0, 1fr); } .hwd-sc-hero { grid-template-columns: minmax(0, 1fr); } .hwd-sc-hero-media { min-height: 250px; } .hwd-sc-hero-body { padding: 1.5rem; } .hwd-blog-grid, .hwd-blog-grid.columns-2, .hwd-blog-grid.masonry-2, .hwd-blog-grid.columns-3, .hwd-blog-grid.masonry-3, .hwd-blog-grid.columns-4, .hwd-blog-grid.masonry-4 { grid-template-columns: minmax(0, 1fr); } .hwd-services-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 768px) { .hwd-ab-hero, .hwd-ab-hero img { max-height: 320px; } .hwd-ab-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } .hwd-ab-sidebar { position: static; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 1rem; padding-block-end: 1.5rem; border-block-end: 1px solid var(--hwd-separator); } .hwd-ab-content { font-size: 1rem; } } @media (max-width: 575px) { .hwd-offer-grid { grid-template-columns: minmax(0, 1fr); } .hwd-footer-grid { grid-template-columns: minmax(0, 1fr); } .hwd-clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============================================================ 10. MOTION PREFERENCES ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .hwd-service:hover, .hwd-offer:hover, .hwd-btn-primary:hover, .hwd-btn-dark:hover, .hwd-sc-card:hover, .hwd-blog-grid__item:hover, .hwd-hero-icon:hover img, .hwd-sc-card:hover .hwd-sc-card-media img { transform: none; } } /* ============================================================ 11. PRINT ============================================================ */ @media print { .hwd-topbar, .hwd-header-top, .hwd-header, .hwd-header-bottom, .hwd-mobile-nav, .hwd-search-modal, .hwd-backtop, .hwd-skip-link, .hwd-sidebar-left, .hwd-sidebar-right, .hwd-hero-prev, .hwd-hero-next, .hwd-hero-dots, .hwd-dots, .hwd-slider-pause, .hwd-ab-share, .hwd-ab-edit, .hwd-copyright, .hwd-footer { display: none !important; } body { background: #fff; color: #000; font-size: 12pt; } .hwd-container, .hwd-grid, .hwd-ab-layout { max-width: none; padding: 0; } .hwd-ab-layout { display: block; } .hwd-component, .hwd-sc-card, .hwd-blog-grid__item { border: 0; background: none; box-shadow: none; } .hwd-ab-content a::after, .hwd-sc-card-body a::after { content: " (" attr(href) ")"; font-size: 9pt; } .hwd-ab-content a[href^="#"]::after, .hwd-ab-content a[href^="javascript:"]::after { content: ""; } h1, h2, h3, h4, h5, h6 { break-after: avoid; } img, figure, blockquote, pre, table { break-inside: avoid; } }