/** * ACE IOOT — brand layer * ====================== * * Loaded by PrestaShop as `theme-custom` at priority 1000, i.e. after * Hummingbird's own theme.css. That ordering is why this file can restyle the * parent without forking it: nothing here replaces Hummingbird, it lands on top. * * Do not add an assets/css/theme.css to this child theme — the stylesheet * manager resolves that name against the child first and would silently drop * Hummingbird's entire stylesheet. * * Tokens follow primitive -> semantic -> component. Components must never * reference a primitive directly; go through the semantic layer so the palette * can be retuned in one place. * * Colour values are sampled from the client mockups * (design/mockups/pasted-movie-70.png and 66.png). */ /* ========================================================================== 0. FONTS — self-hosted ========================================================================== Served from this theme rather than a font CDN. A CDN request would disclose every EU visitor's IP address to a third party, which is a GDPR question the shop does not need to answer. Outfit ships as a variable font, so one file covers the whole 400–700 range; declaring separate 600 and 700 faces would download the identical file twice. Latin-ext is split out so it is only fetched when a page actually needs the accented glyphs — which Italian copy will. font-display: swap renders body text immediately in the fallback rather than leaving the page blank while the face loads. ========================================================================== */ /* Outfit carries the headings. The client's two hero clips are lettered in a geometric sans - single-storey a, circular bowls, high x-height, tight fit - and the serif that used to sit here read as a different brand entirely. Of the open-licence geometrics, Outfit matches the clips closest: Poppins runs noticeably wider, Jost too loosely tracked. */ @font-face { font-family: "Outfit"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/outfit-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Outfit"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/outfit-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/lato-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/lato-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/lato-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/lato-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ========================================================================== 1. PRIMITIVES — raw brand values. Never referenced by components. ========================================================================== */ :root { /* Navy — headings and body copy */ --ai-navy-900: #14253a; --ai-navy-700: #23384f; --ai-navy-500: #3d5570; /* Indigo — the brand's primary accent: prices, links, eyebrows, selection */ --ai-indigo-700: #3d55d4; --ai-indigo-600: #516aed; --ai-indigo-500: #6b81f1; /* For indigo text on the navy contact band. indigo-500 measures only 3.74:1 there, which fails AA for anything but large text; this clears 4.5:1 against both the band and its lightened cards. */ --ai-indigo-300: #7f92f2; --ai-indigo-200: #d9e0fb; --ai-indigo-100: #e9edfd; /* Azure - sampled from the client's own artwork, not chosen. 800 is the blue the SIM retail pack is printed in; 600 is the landmass of the coverage map in the hero clip. White text measures 9.9:1 and 5.1:1 on them, so unlike the indigo pair they carry body-sized type as well as display. */ --ai-azure-800: #00408f; --ai-azure-600: #0073b9; /* Orange — reserved for commitment actions only (see --color-action). The mockup's #EE804E is kept exactly; only the text on it changed. See the note on --color-action-fg. */ --ai-orange-700: #cc4d14; /* dark enough to serve as a border/outline (3:1) */ --ai-orange-600: #e8703a; --ai-orange-500: #ee804e; /* brand orange, straight from the mockup */ --ai-orange-300: #f09468; /* hover: lighter, so dark text gains contrast */ --ai-orange-100: #fdeee6; /* Neutral greys are cool-tinted; grey-600 is set one notch darker than a typical slate-500 so it still clears 4.5:1 on the pale surface, not only on pure white. */ /* Neutrals — cool-tinted to sit with the indigo rather than fight it */ --ai-white: #ffffff; --ai-grey-50: #f6f8fe; --ai-grey-100: #e9f1fc; --ai-grey-200: #e4ecf3; --ai-grey-400: #94a3b8; --ai-grey-600: #63738a; /* Status — only these three carry meaning in the SIM dashboard */ --ai-green-600: #1b7f3b; --ai-green-100: #e7f6ec; --ai-red-600: #d92d20; --ai-amber-700: #a35b00; --ai-amber-100: #fff4e5; /* Type scale — 1.25 major third, 1rem base */ --ai-size-xs: 0.75rem; --ai-size-sm: 0.875rem; --ai-size-base: 1rem; --ai-size-lg: 1.25rem; --ai-size-xl: 1.5rem; --ai-size-2xl: 1.953rem; --ai-size-3xl: 2.441rem; --ai-size-4xl: 3.052rem; /* Spacing — 4px base */ --ai-space-1: 0.25rem; --ai-space-2: 0.5rem; --ai-space-3: 0.75rem; --ai-space-4: 1rem; --ai-space-5: 1.5rem; --ai-space-6: 2rem; --ai-space-7: 3rem; --ai-space-8: 4rem; --ai-radius-sm: 6px; --ai-radius-md: 10px; --ai-radius-lg: 16px; --ai-radius-pill: 999px; --ai-shadow-sm: 0 1px 2px rgba(20, 37, 58, 0.06); --ai-shadow-md: 0 4px 16px rgba(20, 37, 58, 0.08); --ai-shadow-lg: 0 12px 32px rgba(20, 37, 58, 0.12); } /* ========================================================================== 2. SEMANTIC — what a colour is *for*. This is the layer to retune. ========================================================================== */ :root { --color-page: var(--ai-white); --color-surface: var(--ai-grey-50); --color-surface-tint: var(--ai-grey-100); --color-border: var(--ai-grey-200); --color-border-strong: var(--ai-indigo-600); --color-heading: var(--ai-navy-900); --color-body: var(--ai-navy-700); --color-muted: var(--ai-grey-600); --color-on-dark: var(--ai-white); /* Primary = navigation, prices, links, selected state. */ --color-primary: var(--ai-indigo-600); --color-primary-hover: var(--ai-indigo-700); --color-primary-soft: var(--ai-indigo-100); /* One step down from soft. For a tinted surface that has to hold its own shape against a white card, where indigo-100 reads as a printing fault. */ --color-primary-tint: var(--ai-indigo-200); /* Use on navy/dark surfaces, never on white - it is too light there. */ --color-primary-on-dark: var(--ai-indigo-300); /* Indigo text sitting on the pale surface rather than pure white. indigo-600 measures 4.53:1 on white but only 4.27:1 on #F6F8FE, so links inside cards step one shade darker to stay above 4.5:1. */ --color-primary-on-surface: var(--ai-indigo-700); /* Action = orange. Deliberately scarce: in the mockups it appears only on Continue and Check-Out, i.e. the step that commits the customer. Using it for ordinary buttons would flatten that signal. ACCESSIBILITY DEVIATION FROM THE MOCKUP: the mockup sets white text on this orange, which measures 2.68:1 — below the 4.5:1 WCAG AA minimum, and below even the 3:1 large-text floor. Rather than darken the brand colour, the text is navy, which measures 5.78:1 against the identical background. The brand orange is therefore preserved exactly. Hover goes LIGHTER, not darker: with dark text on the button, a darker background would reduce contrast rather than increase it. */ --color-action: var(--ai-orange-500); --color-action-hover: var(--ai-orange-300); --color-action-fg: var(--ai-navy-900); --color-action-border: var(--ai-orange-700); --color-action-soft: var(--ai-orange-100); /* The artwork blues. The client asked for the trust cards to be "blue, like the SIM colour", and these two are that colour: the pack and the map. Used as a gradient pair and as text on white; never as a link or a price, which stay indigo so the primary keeps meaning "you can click this". */ --color-artwork-deep: var(--ai-azure-800); --color-artwork-blue: var(--ai-azure-600); --color-success: var(--ai-green-600); --color-success-soft: var(--ai-green-100); --color-danger: var(--ai-red-600); --color-warning: var(--ai-amber-700); --color-warning-soft: var(--ai-amber-100); --color-inactive: var(--ai-grey-400); /* Typography. Headings take Outfit, the geometric sans that matches the lettering in the client's own hero animations - the brand's actual voice. It replaced a high-contrast serif, which read as a different company beside the clips. Body copy stays on Lato: a humanist sans holds up better than a geometric one at paragraph sizes, and the pairing gives the headings something to contrast against. Both are self-hosted above. Fallbacks are listed so text stays readable if a font fails to load, and are metrically similar enough not to reflow noticeably. */ --font-display: "Outfit", "Avenir Next", "Century Gothic", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --leading-tight: 1.15; --leading-normal: 1.55; --tracking-eyebrow: 0.12em; } /* ========================================================================== 3. COMPONENTS ========================================================================== */ :root { --btn-action-bg: var(--color-action); --btn-action-bg-hover: var(--color-action-hover); --btn-action-fg: var(--color-action-fg); --btn-action-radius: var(--ai-radius-pill); --btn-primary-bg: var(--color-primary); --btn-primary-bg-hover: var(--color-primary-hover); --btn-primary-fg: var(--color-on-dark); --card-bg: var(--color-surface); --card-border: var(--color-border); --card-radius: var(--ai-radius-lg); --card-padding: var(--ai-space-5); --card-selected-border: var(--color-action-border); --badge-radius: var(--ai-radius-pill); --badge-font-size: var(--ai-size-xs); } /* -------------------------------------------------------------------------- Base typography -------------------------------------------------------------------------- */ body { background: var(--color-page); color: var(--color-body); font-family: var(--font-body); line-height: var(--leading-normal); } /* The negative tracking is part of matching the animations: geometric sans set at heading sizes fits tighter than a serif did, and the clips are lettered tight. Without it the headings read loose and undersized. */ h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { color: var(--color-heading); font-family: var(--font-display); line-height: var(--leading-tight); font-weight: 700; letter-spacing: -0.02em; } h1, .h1 { font-size: var(--ai-size-3xl); } h2, .h2 { font-size: var(--ai-size-2xl); } h3, .h3 { font-size: var(--ai-size-xl); } /* Buttons are excluded on purpose, and :not(.btn) is the whole reason this works. custom.css is unlayered and Hummingbird's is in @layer, so a bare `a` rule outranks every .btn rule in the parent whatever the specificity. Without the exclusion an anchor styled as a button took the link colour in both states - and on .btn-outline-primary that meant indigo text sitting on the indigo fill the button takes on hover, which is unreadable. It affected every anchor-button in the shop: "All packages", "Explore other plans", "Read the FAQ", "View this plan". Buttons carry their own colours; a link rule has no business reaching them. :where() and not a bare :not(.btn), because :not() takes the specificity of its argument and :where() contributes none. Written as a:not(.btn) this rule scores 0,1,1 and outranks .product-miniature__title at 0,1,0 - which turned every product name in the shop indigo. Wrapped, it stays at 0,0,1, exactly where a bare `a` was. */ a:not(:where(.btn)) { color: var(--color-primary); } a:not(:where(.btn)):hover, a:not(:where(.btn)):focus { color: var(--color-primary-hover); } /* The mockups label every section with a small uppercase indigo kicker ("STEP 1 — CHOOSE YOUR PACKAGE"). */ .ai-eyebrow { display: block; margin-bottom: var(--ai-space-2); color: var(--color-primary); font-family: var(--font-body); font-size: var(--ai-size-xs); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; } /* -------------------------------------------------------------------------- Buttons — mapped onto Hummingbird's Bootstrap classes -------------------------------------------------------------------------- */ .btn-primary { background-color: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-fg); } .btn-primary:hover, .btn-primary:focus { background-color: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); color: var(--btn-primary-fg); } /* Outline buttons - "All packages", "Explore other plans", "Read the FAQ". Mapped through Bootstrap's own variables rather than by setting colours, so the hover text stays the #fff Bootstrap already puts there and only the blue becomes ours. They used to take the brand indigo by accident, from the global link rule reaching into them; that rule now excludes buttons, so the mapping has to be stated. */ .btn-outline-primary { --bs-btn-color: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: var(--color-primary); --bs-btn-hover-border-color: var(--color-primary); --bs-btn-active-bg: var(--color-primary-hover); --bs-btn-active-border-color: var(--color-primary-hover); } /* Checkout and add-to-cart are the commitment steps the mockups paint orange. */ .btn-action, .add-to-cart, .checkout .btn-primary, #checkout .continue, .cart-detailed-actions .btn-primary { background-color: var(--btn-action-bg); border-color: var(--btn-action-bg); border-radius: var(--btn-action-radius); color: var(--btn-action-fg); font-weight: 600; padding-inline: var(--ai-space-5); } .btn-action:hover, .add-to-cart:hover, .checkout .btn-primary:hover, #checkout .continue:hover, .cart-detailed-actions .btn-primary:hover { background-color: var(--btn-action-bg-hover); border-color: var(--btn-action-bg-hover); color: var(--btn-action-fg); } /* Visible focus ring — Hummingbird's default is easy to lose against the pale surfaces used throughout this design. */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* -------------------------------------------------------------------------- Surfaces -------------------------------------------------------------------------- */ .card, .product-miniature .thumbnail-container, .block-categories, .page-content--checkout { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); } .page-header h1, .page-header .h1 { color: var(--color-heading); font-family: var(--font-display); } .product-price, .price { color: var(--color-primary); font-family: var(--font-display); font-weight: 700; } /* -------------------------------------------------------------------------- Package / top-up tier cards (mockup pages 02 and 04) -------------------------------------------------------------------------- */ .ai-tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ai-space-4); } .ai-tier { position: relative; display: flex; flex-direction: column; padding: var(--card-padding); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); } /* The highlighted tier is outlined, not filled — it must read as recommended without being mistaken for "already selected". */ .ai-tier--featured { border: 2px solid var(--card-selected-border); background: var(--color-page); } .ai-tier__flag { position: absolute; top: calc(var(--ai-space-4) * -1); left: 50%; transform: translateX(-50%); padding: var(--ai-space-1) var(--ai-space-4); background: var(--color-action); border-radius: var(--badge-radius); color: var(--color-action-fg); font-size: var(--badge-font-size); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; white-space: nowrap; } .ai-tier__name { margin: 0 0 var(--ai-space-1); font-family: var(--font-display); font-size: var(--ai-size-lg); } .ai-tier__tagline { margin: 0 0 var(--ai-space-3); color: var(--color-muted); font-size: var(--ai-size-sm); font-style: italic; } .ai-tier__spec { margin: 0 0 var(--ai-space-3); color: var(--color-muted); font-size: var(--ai-size-sm); } .ai-tier__price { margin: 0 0 var(--ai-space-4); color: var(--color-primary); font-family: var(--font-display); font-size: var(--ai-size-2xl); font-weight: 700; } .ai-tier__price-unit { color: var(--color-muted); font-family: var(--font-body); font-size: var(--ai-size-sm); font-weight: 400; } .ai-tier__note { margin-top: auto; padding-top: var(--ai-space-3); color: var(--color-muted); font-size: var(--ai-size-xs); } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ /* The logo file carries its true 184x84 dimensions so the img element reserves the right aspect ratio and nothing shifts on load; the header caps the rendered height. */ .logo, .header__logo img, #_desktop_logo img { height: auto; max-height: 44px; width: auto; } /* -------------------------------------------------------------------------- Homepage "how it works" band (ps_customtext content) -------------------------------------------------------------------------- */ .ps-customtext { padding-block: var(--ai-space-7); } .ai-home-section + .ai-home-section { margin-top: var(--ai-space-8); } .ai-home-section > h2 { margin: 0 0 var(--ai-space-5); } /* Three category cards (mockup 81). Each is a whole-card link rather than a card containing a link, so the click target matches what looks clickable. */ .ai-nav-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ai-space-4); } .ai-nav-card { display: flex; flex-direction: column; padding: var(--card-padding); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); color: inherit; text-decoration: none; transition: border-color 180ms ease, box-shadow 180ms ease; } .ai-nav-card:hover, .ai-nav-card:focus-visible { border-color: var(--color-primary); box-shadow: var(--ai-shadow-md); color: inherit; text-decoration: none; } .ai-nav-card__icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--ai-space-4); background: var(--color-primary); border-radius: 50%; color: var(--color-on-dark); } .ai-nav-card__icon svg { width: 1.5rem; height: 1.5rem; } .ai-nav-card__title { margin-bottom: var(--ai-space-2); color: var(--color-heading); font-family: var(--font-display); font-size: var(--ai-size-lg); font-weight: 700; } .ai-nav-card__note { color: var(--color-muted); font-size: var(--ai-size-sm); } /* "Why choose our prepaid SIMs?" trust row (mockup 81). Built on the pricing card the client sent as the reference for "more prominent": a coloured header curving into a white body, with a badge in the corner where that card puts its flag. Four cards, all the same size, two by two. It was five in two tiers - a pair at half-row each over three smaller ones - until the client struck the bandwidth card and asked for the rest to match the pair. With four, equal halves are the tidy arrangement and the hierarchy is no longer needed to make the row read. The blue is measured, not picked: #0073b9 is the landmass of the coverage map in the hero clip, sampled from the frame. Flat, at the client's word - it ran as a gradient into the SIM pack's deeper #00408f for a day, and they asked for the map's own single colour instead. The deeper blue still earns its keep on the badge and under the hero button. White measures 5.1:1 on it, so every piece of type on the band is above AA at any size; the indigo gradient this replaces only cleared it for display type. */ .ai-why__list { display: grid; grid-template-columns: 1fr; gap: var(--ai-space-4); margin: 0; padding: 0; list-style: none; } @media (min-width: 620px) { .ai-why__list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .ai-why__list { gap: var(--ai-space-5); } } .ai-why__item { display: flex; flex-direction: column; overflow: hidden; background: var(--color-page); border: 1px solid var(--color-border); border-radius: var(--card-radius); box-shadow: var(--ai-shadow-sm); } /* The coloured header. The bottom edge is an ellipse - 50% of the width horizontally, a fixed depth vertically - so the band hangs lowest in the middle and lifts away at both corners, which is the curve on the reference card. The extra bottom padding is what keeps the label clear of it: at the corners the band loses the full 1.75rem of that curve. */ .ai-why__band { display: flex; flex-direction: column; gap: var(--ai-space-5); padding: var(--ai-space-6) var(--ai-space-6) var(--ai-space-7); background: var(--color-artwork-blue); border-radius: 0 0 50% 50% / 0 0 1.75rem 1.75rem; color: var(--color-on-dark); } .ai-why__band-top { display: flex; align-items: center; justify-content: space-between; gap: var(--ai-space-3); } .ai-why__label { color: var(--color-on-dark); font-family: var(--font-display); font-size: var(--ai-size-xl); font-weight: 700; line-height: var(--leading-tight); } @media (min-width: 992px) { .ai-why__label { font-size: var(--ai-size-2xl); } } /* Solid white with the deep artwork blue on it, like the flag disc on the reference card, and not a tinted pill: white text on a lightened patch of the band drops to about 3.6:1, and this badge is the smallest type on the card. */ .ai-why__badge { flex: 0 0 auto; padding: var(--ai-space-1) var(--ai-space-3); background: var(--color-page); border-radius: var(--ai-radius-pill); color: var(--color-artwork-deep); font-size: var(--ai-size-xs); font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; } /* Lightened band rather than a solid disc, the same treatment the stat cards on the contact band use - a white disc this size would read as a hole punched in the gradient. */ .ai-why__icon { display: grid; place-items: center; flex: 0 0 auto; width: 3.25rem; height: 3.25rem; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 50%; color: var(--color-on-dark); } .ai-why__icon svg { width: 1.75rem; height: 1.75rem; } /* Centred in what is left of the card rather than sitting under the curve. The band is the tall half and the supporting line is short, so aligning it to the top left the bottom of every card visibly hollow; centred, the space reads as margin on both sides of the line. */ .ai-why__body { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; gap: var(--ai-space-2); padding: var(--ai-space-5) var(--ai-space-6) var(--ai-space-6); } .ai-why__note { max-width: 46ch; color: var(--color-body); font-size: var(--ai-size-base); line-height: var(--leading-normal); } /* Hero call to action inside the header caption. Indigo, not orange: the mockup reserves orange for Cart and checkout. */ .aceioot-hero__cta { margin-top: var(--ai-space-4); } .aceioot-hero__cta .btn { padding-inline: var(--ai-space-5); font-weight: 700; } /* -------------------------------------------------------------------------- Homepage header image -------------------------------------------------------------------------- */ /* The header is a single static image, so the carousel's controls and indicators have nothing to navigate between. They are hidden rather than removed from the markup, so adding a second slide in the Back Office brings them straight back. */ .ps-imageslider:has(.carousel-item:only-child) .carousel-control-prev, .ps-imageslider:has(.carousel-item:only-child) .carousel-control-next, .ps-imageslider:has(.carousel-item:only-child) .carousel-indicators { display: none; } .ps-imageslider__figcaption { /* A navy plate at 72% opacity, rather than relying on the photograph. Even over a pure-white area of the image the blended background still gives white text about 5.8:1, so the caption cannot become unreadable when the picture behind it is changed. */ left: 50%; right: auto; bottom: var(--ai-space-6); transform: translateX(-50%); width: min(90%, 46rem); padding: var(--ai-space-4) var(--ai-space-5); background: rgba(20, 37, 58, 0.72); border-radius: var(--ai-radius-md); } .ps-imageslider__figcaption h2, .ps-imageslider__figcaption h3 { margin: 0 0 var(--ai-space-2); color: var(--color-on-dark); font-family: var(--font-display); /* The mockup sets headings in mixed case; Hummingbird uppercases them here. */ text-transform: none; } .ps-imageslider__figcaption p { margin: 0; color: var(--color-on-dark); } /* The caption is hidden below lg by Hummingbird, which leaves the mobile header as a bare photograph with no message at all. */ @media (max-width: 991.98px) { .ps-imageslider__figcaption { display: block !important; position: static; width: 100%; transform: none; border-radius: 0; } .ps-imageslider__figcaption h2 { font-size: var(--ai-size-lg); } .ps-imageslider__figcaption p { font-size: var(--ai-size-sm); } } /* -------------------------------------------------------------------------- Main menu and mega dropdown Hummingbird lays the dropdown out as a two-column tablist: second-level categories down the left, their children across the right. Unstyled, the third level renders at the same weight as the second, so "Camera" shouted as loudly as "Shop by Devices". These rules restore the hierarchy. -------------------------------------------------------------------------- */ /* The client wants Support and the search bar held to the right of the header while the rest of the menu sits by the logo. ps_mainmenu prints one flat list, so the split is made here, by pushing the last entry across. The auto margin can only open a gap if the list has width to spare. The col-xl wrapper does stretch between the logo and the search box, but it is itself a flex container, so the