/* ============================================================================ materials.css -- which season wears which material, and nothing else. The materials themselves are defined in texture_metals.css (brushed silver and brass) and texture_brick.css (the face of one brick). Each exposes its own knobs -- base colour, grain scale, grain strength -- so Joseph can dial them from the visual settings panel without touching CSS. This file only says WHERE each one goes: the large surfaces, per his rule that a texture belongs on a big face and a thin outline gets the colour that texture averages to. The averages are computed by tools/material_average.py, not eyeballed. ============================================================================ */ :root { /* Computed by tools/material_average.py -- do not hand-edit. Used for OUTLINES, which cannot show a texture. */ --mat-brass-avg: #ba9934; --mat-silver-avg: #9e9ea6; --mat-brick-avg: #9c4c3e; /* The chimney mark is transparent artwork, so its plate is a knob. Joseph: "have the icon background be an easy-to-change value. Default set it to white." */ --chimney-mark-bg: #ffffff; } /* The large surfaces, per page. Every accent button is a RENDER now (tools/metal_render): winter -> brass chimney -> silver main -> copper, averaging the main accent (--bp-accent), so every other accent stays as is summer -> brick, one brick's face (not a metal; it uses the same slots) texture_metals.css / texture_brick.css say how each is built and which knobs it has. Here: which material each page wears, which face render each button shape gets, and how the layers stack. The --metal-* names are slots, brick included. */ html[data-season="winter"] { --metal-base: var(--tex-brass-base); --metal-shine: var(--tex-brass-shine); --metal-blend: var(--tex-brass-blend); --metal-wide: var(--tex-brass-face-wide); --metal-mid: var(--tex-brass-face-mid); --metal-round: var(--tex-brass-face-round); --metal-rim-top: var(--tex-brass-rim-top); --metal-rim-side: var(--tex-brass-rim-side); --metal-rim-bottom: var(--tex-brass-rim-bottom); --metal-on: var(--tex-brass-on); --metal-on-glow: var(--tex-brass-on-glow); } html[data-season="chimney"] { --metal-base: var(--tex-silver-base); --metal-shine: var(--tex-silver-shine); --metal-blend: var(--tex-silver-blend); --metal-wide: var(--tex-silver-face-wide); --metal-mid: var(--tex-silver-face-mid); --metal-round: var(--tex-silver-face-round); --metal-rim-top: var(--tex-silver-rim-top); --metal-rim-side: var(--tex-silver-rim-side); --metal-rim-bottom: var(--tex-silver-rim-bottom); --metal-on: var(--tex-silver-on); --metal-on-glow: var(--tex-silver-on-glow); } html[data-season="main"] { --metal-base: var(--tex-copper-base); --metal-shine: var(--tex-copper-shine); --metal-blend: var(--tex-copper-blend); --metal-wide: var(--tex-copper-face-wide); --metal-mid: var(--tex-copper-face-mid); --metal-round: var(--tex-copper-face-round); --metal-rim-top: var(--tex-copper-rim-top); --metal-rim-side: var(--tex-copper-rim-side); --metal-rim-bottom: var(--tex-copper-rim-bottom); --metal-on: var(--tex-copper-on); --metal-on-glow: var(--tex-copper-on-glow); } html[data-season="summer"] { --metal-base: var(--tex-brick-base); --metal-shine: var(--tex-brick-shine); --metal-blend: var(--tex-brick-blend); --metal-wide: var(--tex-brick-face-wide); --metal-mid: var(--tex-brick-face-mid); --metal-round: var(--tex-brick-face-round); --metal-rim-top: var(--tex-brick-rim-top); --metal-rim-side: var(--tex-brick-rim-side); --metal-rim-bottom: var(--tex-brick-rim-bottom); --metal-on: var(--tex-brick-on); --metal-on-glow: var(--tex-brick-on-glow); --tex-metal-bevel: var(--tex-brick-bevel); /* matte brick: a fainter top light on the rim */ } /* Which render each shape wears, so the light keeps its shape. */ .hero-cta, .btn-hiring, .cta-strip .btn-light { --metal-face: var(--metal-wide); } .topnav-cta, .btn-main, .tcta, .rc-btn, #mnmChatLauncher { --metal-face: var(--metal-mid); } @media (max-width: 480px) { /* the launcher is a 52px circle here (landing.html) */ #mnmChatLauncher { --metal-face: var(--metal-round); } } /* Winter, chimney, summer: the season pages. Written out (not :is()) so the ID in the list does not lift every button to ID weight. :hover is listed so the older season hovers (winter's amber, the brand fills) cannot show through. The 1px border is the rim; these buttons already had it. */ html[data-season="winter"] .topnav-cta, html[data-season="winter"] #mnmChatLauncher, html[data-season="winter"] .btn-main, html[data-season="winter"] .hero-cta, html[data-season="winter"] .btn-hiring, html[data-season="winter"] .tcta, html[data-season="winter"] .cta-strip .btn-light, html[data-season="winter"] .rc-btn, html[data-season="winter"] .topnav-cta:hover, html[data-season="winter"] #mnmChatLauncher:hover, html[data-season="winter"] .btn-main:hover, html[data-season="winter"] .hero-cta:hover, html[data-season="winter"] .btn-hiring:hover, html[data-season="winter"] .tcta:hover, html[data-season="winter"] .cta-strip .btn-light:hover, html[data-season="winter"] .rc-btn:hover, html[data-season="chimney"] .topnav-cta, html[data-season="chimney"] #mnmChatLauncher, html[data-season="chimney"] .btn-main, html[data-season="chimney"] .hero-cta, html[data-season="chimney"] .btn-hiring, html[data-season="chimney"] .tcta, html[data-season="chimney"] .cta-strip .btn-light, html[data-season="chimney"] .rc-btn, html[data-season="chimney"] .topnav-cta:hover, html[data-season="chimney"] #mnmChatLauncher:hover, html[data-season="chimney"] .btn-main:hover, html[data-season="chimney"] .hero-cta:hover, html[data-season="chimney"] .btn-hiring:hover, html[data-season="chimney"] .tcta:hover, html[data-season="chimney"] .cta-strip .btn-light:hover, html[data-season="chimney"] .rc-btn:hover, html[data-season="summer"] .topnav-cta, html[data-season="summer"] #mnmChatLauncher, html[data-season="summer"] .btn-main, html[data-season="summer"] .hero-cta, html[data-season="summer"] .btn-hiring, html[data-season="summer"] .tcta, html[data-season="summer"] .cta-strip .btn-light, html[data-season="summer"] .rc-btn, html[data-season="summer"] .topnav-cta:hover, html[data-season="summer"] #mnmChatLauncher:hover, html[data-season="summer"] .btn-main:hover, html[data-season="summer"] .hero-cta:hover, html[data-season="summer"] .btn-hiring:hover, html[data-season="summer"] .tcta:hover, html[data-season="summer"] .cta-strip .btn-light:hover, html[data-season="summer"] .rc-btn:hover { --metal-veil: color-mix(in srgb, var(--metal-base) calc(100% - var(--metal-shine) * 100%), var(--tex-metal-clear)); background-color: var(--metal-base); background-image: var(--tex-metal-bevel), linear-gradient(var(--metal-veil), var(--metal-veil)), var(--metal-face); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; background-blend-mode: normal, normal, var(--metal-blend); border-color: var(--metal-rim-top) var(--metal-rim-side) var(--metal-rim-bottom); color: var(--metal-on); text-shadow: 0 1px 0 var(--metal-on-glow); border: 1px solid; border-color: var(--metal-rim-top) var(--metal-rim-side) var(--metal-rim-bottom); } /* SUMMER ONLY (brick/rim, Joseph's pick B, 2026-09-23; round 2 via Juno, same day): "render the edge in Blender along with the face -- same cracks and chips running over it -- and drop the flat CSS border on brick only." The brick face render is now "full" mode: it already IS the rounded plate with its own bevelled rim and edge wear (texture_brick.css), so the flat 1px rim colour and the CSS bevel gradient are dropped here -- both would sit on top of a rim the image already draws, doubling it. These rules repeat the summer selector list above and must stay AFTER it (same specificity; source order decides), so they override only background-image and border-color. Winter, chimney and main keep the block above untouched. The border itself (width, box size) is NOT touched, so the button's box and click area stay exactly as they were; --metal-base still shows while the image loads (the colour knob keeps working as before -- at --tex-brick-shine:1 it was already invisible once the image was in, only a pre-load fallback). topnav-cta gets its OWN render (round 5, question 1): its real corner is 6px, much flatter than the h/2 pill the "mid" shape shares with the chat launcher, and a second Blender render was cheap enough in this pipeline to just do it rather than leave it as an open question. */ html[data-season="summer"] .topnav-cta, html[data-season="summer"] .topnav-cta:hover { background-image: var(--tex-brick-face-topnav); border-color: transparent; } html[data-season="summer"] #mnmChatLauncher, html[data-season="summer"] .btn-main, html[data-season="summer"] .hero-cta, html[data-season="summer"] .btn-hiring, html[data-season="summer"] .tcta, html[data-season="summer"] .cta-strip .btn-light, html[data-season="summer"] .rc-btn, html[data-season="summer"] #mnmChatLauncher:hover, html[data-season="summer"] .btn-main:hover, html[data-season="summer"] .hero-cta:hover, html[data-season="summer"] .btn-hiring:hover, html[data-season="summer"] .tcta:hover, html[data-season="summer"] .cta-strip .btn-light:hover, html[data-season="summer"] .rc-btn:hover { background-image: var(--metal-face); border-color: transparent; } /* Nothing flat behind the brick (Joseph, 2026-09-23: "the 3D cap is good but its still sitting on a 2D button ... the crumbling bits should (or at least appear to) be transparent and show the page below"). The render carries its own silhouette with chips cut out of it, but the shared rule above still painted --metal-base under the whole box, so every bite and corner showed brick red. Brick only: no background colour, and the chat button's glow becomes a drop-shadow filter, which follows the chipped outline instead of drawing a smooth pill. The label sits on the opaque face, so its contrast is unchanged. */ html[data-season="summer"] .topnav-cta, html[data-season="summer"] #mnmChatLauncher, html[data-season="summer"] .btn-main, html[data-season="summer"] .hero-cta, html[data-season="summer"] .btn-hiring, html[data-season="summer"] .tcta, html[data-season="summer"] .cta-strip .btn-light, html[data-season="summer"] .rc-btn, html[data-season="summer"] .topnav-cta:hover, html[data-season="summer"] #mnmChatLauncher:hover, html[data-season="summer"] .btn-main:hover, html[data-season="summer"] .hero-cta:hover, html[data-season="summer"] .btn-hiring:hover, html[data-season="summer"] .tcta:hover, html[data-season="summer"] .cta-strip .btn-light:hover, html[data-season="summer"] .rc-btn:hover { background-color: transparent; } /* The chat launcher keeps its glow, as a drop-shadow that follows the chipped outline (--tex-brick-glow, so the shared hover below can add to it rather than replace it). Its pulse only scales now: the glow stays put, so a hover during the first pulses looks like every other brick's hover. */ html[data-season="summer"] #mnmChatLauncher { --tex-brick-glow: drop-shadow(0 8px 14px color-mix(in srgb, var(--mnm-glow) 45%, transparent)); box-shadow: none; filter: var(--tex-brick-glow); animation-name: mnm-pulse-brick; /* landing.html's mnm-pulse animates a pill-shaped box-shadow */ } @keyframes mnm-pulse-brick { 0%, 100% { box-shadow: none; scale: 1; } 50% { box-shadow: none; scale: 1.04; } } /* ONE HOVER FOR EVERY BRICK BUTTON (brick/real, Joseph 2026-09-23: "Hover should be the same for all versions of the button as well"). Before this, each button kept its own older hover: the hero and hiring buttons rose with a pill-shaped glow, the launcher's glow grew, the top-bar button did nothing. Now all of them, and both brick types: the brick rises (--tex-brick-hover-lift), the key light comes up a little (--tex-brick-hover-light) and a soft shadow follows the chipped outline underneath (--tex-brick-hover-shadow); knobs in texture_brick.css. No box-shadow at rest or on hover: a box-shadow is a smooth pill, not the brick. Keyboard focus gets the same lift plus a two-tone ring (light label colour inside, ink outside), so it shows on the white bar and the dark hero alike. The launcher's glow stays in front of the shared filter. Same specificity as the rules above, so this block must stay after them. */ html[data-season="summer"] .topnav-cta, html[data-season="summer"] #mnmChatLauncher, html[data-season="summer"] .btn-main, html[data-season="summer"] .hero-cta, html[data-season="summer"] .btn-hiring, html[data-season="summer"] .tcta, html[data-season="summer"] .cta-strip .btn-light, html[data-season="summer"] .rc-btn { box-shadow: none; transition: transform .15s, filter .15s; } html[data-season="summer"] .topnav-cta:hover, html[data-season="summer"] #mnmChatLauncher:hover, html[data-season="summer"] .btn-main:hover, html[data-season="summer"] .hero-cta:hover, html[data-season="summer"] .btn-hiring:hover, html[data-season="summer"] .tcta:hover, html[data-season="summer"] .cta-strip .btn-light:hover, html[data-season="summer"] .rc-btn:hover, html[data-season="summer"] .topnav-cta:focus-visible, html[data-season="summer"] #mnmChatLauncher:focus-visible, html[data-season="summer"] .btn-main:focus-visible, html[data-season="summer"] .hero-cta:focus-visible, html[data-season="summer"] .btn-hiring:focus-visible, html[data-season="summer"] .tcta:focus-visible, html[data-season="summer"] .cta-strip .btn-light:focus-visible, html[data-season="summer"] .rc-btn:focus-visible { box-shadow: none; transform: translateY(var(--tex-brick-hover-lift)); filter: var(--tex-brick-glow,) brightness(var(--tex-brick-hover-light)) drop-shadow(var(--tex-brick-hover-shadow)); } html[data-season="summer"] .topnav-cta:focus-visible, html[data-season="summer"] #mnmChatLauncher:focus-visible, html[data-season="summer"] .btn-main:focus-visible, html[data-season="summer"] .hero-cta:focus-visible, html[data-season="summer"] .btn-hiring:focus-visible, html[data-season="summer"] .tcta:focus-visible, html[data-season="summer"] .cta-strip .btn-light:focus-visible, html[data-season="summer"] .rc-btn:focus-visible { outline: 2px solid var(--tex-brick-on); outline-offset: 2px; box-shadow: 0 0 0 5px var(--mnm-ink); } /* The main page. Its buttons are styled by design_blueprint.css, which loads after this file, so the selector carries [data-design] to outrank it. Several of its buttons have NO border, and a new 1px one would change their size, so here only the colour of an existing border is set; the bevel layer gives every button its top light and bottom shade either way. The CTA strip's button is the inverse (ink on a copper strip), so it keeps its colours and only gets the 3D rim. */ html[data-season="main"][data-design="blueprint"] .topnav-cta, html[data-season="main"][data-design="blueprint"] #mnmChatLauncher, html[data-season="main"][data-design="blueprint"] .btn-main, html[data-season="main"][data-design="blueprint"] .hero-cta, html[data-season="main"][data-design="blueprint"] .btn-hiring, html[data-season="main"][data-design="blueprint"] .tcta, html[data-season="main"][data-design="blueprint"] .rc-btn, html[data-season="main"][data-design="blueprint"] .topnav-cta:hover, html[data-season="main"][data-design="blueprint"] #mnmChatLauncher:hover, html[data-season="main"][data-design="blueprint"] .btn-main:hover, html[data-season="main"][data-design="blueprint"] .hero-cta:hover, html[data-season="main"][data-design="blueprint"] .btn-hiring:hover, html[data-season="main"][data-design="blueprint"] .tcta:hover, html[data-season="main"][data-design="blueprint"] .rc-btn:hover { --metal-veil: color-mix(in srgb, var(--metal-base) calc(100% - var(--metal-shine) * 100%), var(--tex-metal-clear)); background-color: var(--metal-base); background-image: var(--tex-metal-bevel), linear-gradient(var(--metal-veil), var(--metal-veil)), var(--metal-face); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; background-blend-mode: normal, normal, var(--metal-blend); border-color: var(--metal-rim-top) var(--metal-rim-side) var(--metal-rim-bottom); color: var(--metal-on); text-shadow: 0 1px 0 var(--metal-on-glow); } html[data-season="main"][data-design="blueprint"] .cta-strip .btn-light, html[data-season="main"][data-design="blueprint"] .cta-strip .btn-light:hover { background-image: var(--tex-metal-bevel); } /* Winter's older amber finish laid two overlays over these buttons (season_winter.css): a noise grain (::after) and a white snow haze over the lower 60% (::before). Over a rendered face the grain muddies the brushing and the haze whitewashes half the metal, so both are off on the metal (Joseph, MB-5: keep the haze off). */ html[data-season="winter"] .topnav-cta::after, html[data-season="winter"] .hero-cta::after, html[data-season="winter"] .btn-hiring::after, html[data-season="winter"] .cta-strip .btn-light::after, html[data-season="winter"] .rc-btn::after, html[data-season="winter"] .topnav-cta::before, html[data-season="winter"] .hero-cta::before, html[data-season="winter"] .btn-hiring::before, html[data-season="winter"] .cta-strip .btn-light::before, html[data-season="winter"] .rc-btn::before { content: none; } /* Outlines and rules: the average, never the texture. */ .mat-brass-line { border-color: var(--mat-brass-avg) !important; } .mat-silver-line { border-color: var(--mat-silver-avg) !important; } .mat-brick-line { border-color: var(--mat-brick-avg) !important; } /* .hdr (print headers, e.g. financials_report_print.html) keeps its own plate; this file loads after season_chimney.css so this is the rule that actually shows there. */ html[data-season="chimney"] .hdr img { background: var(--chimney-mark-bg); } /* Report 143 (Joseph, 2026-09-28, WL-1), permanent since LG-1 (2026-09-29, "use full logos everywhere"): the topnav mark is the dark-background full logo, no plate -- ever. (Used to be cancelled only when the now-removed logos_light_dark switch was ON; that was always the case except OFF, which no longer exists.) */ html[data-season="chimney"] .topnav-brand img { background: transparent; } /* Joseph 2026-09-22: "Chat with us should be the same pill-type shape even on main, same size and shape". The blueprint design squares every pill (today: --mnm-radius-pill's ROLE repoint to 3px, design_blueprint.css -- was --mnm-radius-100px: 3px before the 2026-09-23 radius re-judge, same escape, new name) and the main page's launcher had no border, so it was a 169x60 rectangle beside the season pages' 171x62 pill. Same radius and the same 1px rim (coloured by the copper rule above) as the season pages; on phones it stays the 52px circle. Radius re-judge (2026-09-23): kept as a LITERAL 100px on purpose, not var(--mnm-radius-pill) -- that role token IS repointed to 3px on the main page (the line just above), so reading it here would let the squaring re-catch this element and undo this fix; the more specific selector's literal value is what makes it win. */ html[data-season="main"][data-design="blueprint"] #mnmChatLauncher { border-radius: 100px; border-width: 1px; border-style: solid; }