/* responsive.css — mobile & tablet layout for the Altamira site. The chrome + repeated content patterns are class-based (site.css); the remaining one-off inline styles are overridden here via attribute selectors + !important. NOTE on [style*=…] matching: an element's style attribute stays in its AUTHORED form ("font-size:40px", no space) until some JS touches el.style, which re-serializes it to the BROWSER form ("font-size: 40px", colors as rgb()). Since the site went static (2026-07-01), only motion-touched elements carry the browser form — so every value-keyed selector must list BOTH forms (done 2026-07-02; keep new selectors dual-form). Loaded from every page's after site.css; pairs with responsive.js. */ /* ============ INTERACTIVE CTA BUTTONS (site-wide, always on) ================ Premium micro-interactions for the solid call-to-action buttons. Opt-in via class: .am-btn carries the shared mechanics (lift, soft shadow, glint sweep, tactile press, focus ring); a variant tints it (-fill blue / -light white / -ghost translucent). The exported runtime does NOT process the style-hover="" attributes, so before this the CTAs had no hover at all — these classes ARE the hover behaviour (and reinstate the intended hover colour). Buttons hold bare text nodes (no wrapper to z-index above an overlay), so the glint sweeps over the label — kept faint + fast so the text stays legible. Inline styles set `background`, so the hover-colour override needs !important; transform / box-shadow / position have no inline counterpart and don't. */ .am-btn { position: relative; overflow: hidden; /* clip the skewed glint to the button box */ transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s cubic-bezier(.22,.61,.36,1), background-color .2s ease, color .2s ease, border-color .2s ease; } .am-btn::before { /* the glint */ content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 60%; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.38) 50%, transparent 100%); transform: skewX(-18deg); pointer-events: none; opacity: 0; } .am-btn:hover::before { animation: amBtnSheen .7s cubic-bezier(.22,.61,.36,1); } @keyframes amBtnSheen { 0% { left: -75%; opacity: 0; } 12% { opacity: 1; } 100% { left: 130%; opacity: 0; } } .am-btn:hover { transform: translateY(-2px); } .am-btn:active { transform: translateY(0) scale(.985); transition-duration: .06s; } .am-btn:focus-visible { outline: 2px solid #7AA0D4; outline-offset: 3px; } /* Primary — blue solid */ .am-btn-fill:hover { background-color: #4d7cc0 !important; box-shadow: 0 10px 24px -8px rgba(58,107,176,.6), 0 3px 8px -3px rgba(11,18,30,.32); } .am-btn-fill:active { box-shadow: 0 4px 10px -6px rgba(58,107,176,.55); } /* Light — white solid on a dark hero. White can't shift fill like the blue does, so the hover cue is: label adopts the brand blue + a higher lift + a stronger shadow + a wider, more visible dark glint — livelier, still premium. */ .am-btn-light::before { background: linear-gradient(100deg, transparent 0%, rgba(20,24,31,.16) 50%, transparent 100%); width: 72%; } .am-btn-light:hover { background-color: #fff !important; color: #3A6BB0 !important; /* label + arrow take the brand blue */ transform: translateY(-3px); box-shadow: 0 16px 32px -10px rgba(0,0,0,.5), 0 4px 10px -4px rgba(0,0,0,.32); } .am-btn-light:active { transform: translateY(-1px) scale(.985); box-shadow: 0 6px 14px -8px rgba(0,0,0,.45); } /* Ghost — translucent on a dark hero. Resting fill/border bumped up from the inline .08/.18 so the button shape holds against a busy photo; hover brightens further. Stays a secondary outline, subordinate to the solid blue primary. */ .am-btn-ghost { background-color: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.30) !important; } .am-btn-ghost:hover { background-color: rgba(255,255,255,.18) !important; border-color: rgba(255,255,255,.5) !important; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); } /* Download arrow — nudges DOWN on hover for FLAT text download links (news-release "PDF ↓", the reserves file rows): nothing else moves there, so the nudge is the affordance. Vertical counterpart to .am-ar's rightward nudge for → links. The bare ↓ is wrapped in so only the arrow moves. */ .am-dl { display: inline-block; transition: transform .2s cubic-bezier(.22,.61,.36,1); } a:hover .am-dl { transform: translateY(3px); } /* On solid/ghost CTA buttons the whole button already lifts on hover, so the arrow rides the lift as one unit instead of sliding down against it (avoids the up-vs-down motion conflict). */ .am-btn:hover .am-dl { transform: none; } @media (prefers-reduced-motion: reduce) { .am-btn, .am-btn:hover, .am-btn:active { transform: none; } .am-btn::before { display: none; } a:hover .am-dl { transform: none; } } /* ============ SEGMENTED TOGGLE / FILTER BUTTONS (site-wide) ================= Filing filters (ALL/ANNUAL/QUARTERLY), chart ranges (1M/3M/1Y), metric tabs (Revenue/EBITDA), and map view toggles (Dark/Satellite). The runtime sets each option's active/inactive bg+fg inline, so the INACTIVE options had no hover feedback. Scope the hover to the inactive options by EXCLUDING the active background from the (browser-normalized) inline style: .am-seg = light controls on white → active is dark rgb(20, 24, 31) (#14181F) .am-segd = map toggles on imagery → active is blue rgb(58, 107, 176) (#3A6BB0) The active option is excluded, so only the inactive ones light up on hover. */ .am-seg, .am-segd { transition: background-color .15s ease, color .15s ease; } .am-seg:not([style*="rgb(20, 24, 31)"]):hover { background-color: #EEF2F8 !important; color: #14181F !important; } .am-segd:not([style*="rgb(58, 107, 176)"]):hover { background-color: rgba(255,255,255,.10) !important; color: #fff !important; } /* Grey utility links — top utility-bar ("Investor alerts", "Search") and the hero breadcrumb ("Home / Investors / …"): grey → white on hover (the intent the inert style-hover="color:#fff" never delivered). Smooth via the global `a { transition: color }`. !important beats the inline grey. */ .am-toplink:hover { color: #fff !important; } /* ============ DESKTOP (≥1025px): cap the content column at 1680px ============ Sections stay full-width so their backgrounds bleed edge-to-edge; only the horizontal page gutter grows on wide screens, so the content inside never exceeds 1680px. Below 1824px the gutter stays at the original 72px, so this is a no-op for typical laptops and only engages on very wide displays. The whole site uses a 72px horizontal page gutter, applied as the left/right value of a `padding` shorthand. Matching [style*="padding"][style*=" 72px"] selects exactly those guttered CONTENT blocks (section bands) while skipping the gap:72px / font-size:72px elements (no `padding`) and the absolute hero blocks (insets, not padding — handled below by class). The chrome (topbar, header, mega-menus, footer) is class-based and gets the same treatment via the --am-gutter custom property in site.css — keep the two in sync. Scoped to a min-width query so it never collides with the 20px mobile gutter set at ≤720px. */ @media (min-width: 1025px) { [style*="padding"][style*=" 72px"] { padding-left: max(72px, calc((100% - 1680px) / 2)) !important; padding-right: max(72px, calc((100% - 1680px) / 2)) !important; } /* Home hero blocks are absolutely positioned (left/right insets, no padding), so align them to the same 1680px column by hand. */ .am-home-copy { left: max(72px, calc((100% - 1680px) / 2)) !important; } .am-home-shelf { left: max(72px, calc((100% - 1680px) / 2)) !important; right: max(72px, calc((100% - 1680px) / 2)) !important; } /* Hero top-right "[ replace · … ]" caption (home + sub-pages). */ [style*="top: 108px"][style*="right: 72px"], [style*="top:108px"][style*="right:72px"] { right: max(72px, calc((100% - 1680px) / 2)) !important; } } /* ============ TABLET & PHONE (≤1024px): no horizontal overflow + nav swap =========== The desktop layout is designed for 1440px; below ~1024px the horizontal nav stops fitting and some fixed-width blocks (e.g. the 430px production chart) would overflow. We swap in the hamburger and keep everything within the viewport, but leave multi-column grids intact (they just get narrower). */ @media (max-width: 1024px) { html { overflow-x: hidden; } /* cap any fixed-width element to the viewport (only shrinks oversized ones) */ [style*="width:"] { max-width: 100% !important; } /* let horizontal flex rows wrap instead of overflowing */ [style*="display: flex"], [style*="display:flex"] { flex-wrap: wrap; } /* swap the horizontal nav for the hamburger (injected by responsive.js) */ header nav { display: none !important; } /* Hide the sub-page side nav (the sticky