:root{--v17-border:#e4e0d7;--v17-soft:#f7f5ef;--v17-muted:#66635d;--v17-gold:#b88918} .site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);border-bottom:1px solid var(--v17-border);backdrop-filter:blur(14px)} .site-header__inner{min-height:72px;height:auto;display:flex;align-items:center;gap:24px}.brand{font-size:21px;font-weight:850;letter-spacing:-.045em}.site-nav{display:flex;align-items:center;gap:8px;margin-left:auto}.site-nav a{border:0!important;padding:9px 12px!important;border-radius:8px;color:#1d1d1b;font-size:14px;font-weight:750;line-height:1.2;text-decoration:none;transition:background .15s ease,color .15s ease}.site-nav a:hover{background:#f3f1eb;text-decoration:none}.site-nav a.is-active,.site-nav a[aria-current="page"]{background:#171717;color:#fff;border:0!important}.site-header__cta{min-height:42px;padding:0 16px;border:1px solid #222;border-radius:8px;font-size:14px;font-weight:800}.menu-button{display:none} .market-home{padding-top:46px}.market-page-heading{margin-bottom:26px}.market-page-heading h1{max-width:900px}.top-ad-wrap{display:flex;justify-content:center;margin:0 auto 28px}.top-ad-wrap .banner-placeholder,.top-ad-wrap .managed-banner{width:min(100%,970px)} .home-market-grid{align-items:start}.home-market-grid__banner{position:sticky;top:96px}.wide-banner-wrap{display:flex;justify-content:center;margin:46px auto 0}.wide-banner-wrap .banner-placeholder,.wide-banner-wrap .managed-banner{width:min(100%,970px)} .managed-banner{display:block;width:100%;max-width:100%;aspect-ratio:var(--banner-ratio-desktop);overflow:hidden;border-radius:14px}.managed-banner picture,.managed-banner img{display:block;width:100%;height:100%}.managed-banner img{object-fit:cover;object-position:center}.banner-placeholder{width:100%;min-height:0!important;aspect-ratio:auto!important;padding:34px 24px;border:1px dashed #c9c2b2;border-radius:14px;background:repeating-linear-gradient(-45deg,#fbfaf6,#fbfaf6 12px,#f2efe7 12px,#f2efe7 24px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.banner-placeholder span{font-size:11px;font-weight:900;letter-spacing:.16em;color:#7a6a48}.banner-placeholder strong{margin:8px 0 2px;font-size:clamp(28px,4vw,44px);line-height:1;color:#262522}.banner-placeholder small{color:#79756d}.home-market-grid__banner .banner-placeholder{min-height:600px!important}.top-ad-wrap .banner-placeholder{min-height:90px!important}.wide-banner-wrap .banner-placeholder,.content-wide-ad .banner-placeholder{min-height:90px!important} .home-tools-section,.home-explainer-section{padding:64px 0}.editorial-content .answer-first{max-width:780px;margin:0 0 30px;font-size:18px;line-height:1.75;color:#353330}.editorial-columns section{padding:22px 0;border-top:1px solid var(--v17-border)}.editorial-columns h3{margin:0 0 10px}.editorial-columns p{margin:0;color:#4c4943;line-height:1.75} .faq-section{padding:64px 0!important;background:#fff}.faq-heading{max-width:760px;margin-bottom:24px}.faq-heading h2{margin:4px 0 10px;font-size:clamp(30px,4vw,44px);line-height:1.12}.faq-heading>p:last-child{margin:0;color:var(--v17-muted)}.faq-list{display:grid!important;gap:0!important;margin-top:0!important;border-top:1px solid var(--v17-border)}.faq-list details{display:block!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-bottom:1px solid var(--v17-border)!important;border-radius:0!important;background:#fff!important}.faq-list summary{display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:0!important;margin:0!important;padding:20px 4px!important;list-style:none!important;cursor:pointer;font-size:17px!important;font-weight:800!important;line-height:1.4}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:"+"!important;float:none!important;margin-left:24px;color:#111!important;font-size:22px;font-weight:500}.faq-list details[open] summary:after{content:"−"!important}.faq-answer{padding:0 4px 20px!important;color:#4f4c46;line-height:1.7}.faq-answer p{margin:0!important;padding:0!important;color:inherit!important}.faq-section--content{padding:54px 0 0!important} .page-hero{padding-top:70px;padding-bottom:44px}.page-hero h1{max-width:900px;margin:8px 0 18px;font-size:clamp(42px,6vw,72px);line-height:1.02;letter-spacing:-.055em}.page-lead{max-width:820px;margin:0;color:#48453f;font-size:20px;line-height:1.65}.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}.content-aside{position:sticky;top:96px}.content-aside .banner-placeholder{min-height:600px!important}.content-sections{border-top:1px solid var(--v17-border)}.content-section{display:grid;grid-template-columns:56px minmax(0,1fr);gap:26px;padding:38px 0;border-bottom:1px solid var(--v17-border)}.section-number{margin:5px 0 0;color:var(--v17-gold);font-size:12px;font-weight:900;letter-spacing:.12em}.content-section h2{margin:0 0 14px;font-size:clamp(27px,3vw,38px);line-height:1.18}.prose{color:#45423c;font-size:17px;line-height:1.78}.prose p:first-child{margin-top:0}.prose p:last-child{margin-bottom:0}.content-wide-ad{display:flex;justify-content:center;margin-top:64px}.content-wide-ad>*{width:min(100%,970px)} .content-answer{max-width:880px;padding:34px 38px;margin:0 0 28px;border:1px solid var(--v17-border);border-left:3px solid var(--v17-gold);border-radius:12px;background:var(--v17-soft)}.content-answer__eyebrow{margin:0 0 8px;color:var(--v17-gold);font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.content-answer h2{margin:0 0 12px;font-size:clamp(25px,3vw,34px);line-height:1.2}.content-answer__body{font-size:18px;line-height:1.72}.content-jump{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 38px;padding:16px 0;border-top:1px solid var(--v17-border);border-bottom:1px solid var(--v17-border)}.content-jump>span{margin-right:6px;font-size:13px;font-weight:850}.content-jump a{padding:7px 10px;border:1px solid var(--v17-border);border-radius:999px;background:#fff;color:#35322d;font-size:13px;font-weight:700;line-height:1.3;text-decoration:none}.content-jump a:hover{border-color:var(--v17-gold);color:#171717}.content-sections__heading{padding:30px 0 4px}.content-sections__heading .eyebrow{margin-bottom:7px}.content-sections__heading h2{margin:0;font-size:clamp(30px,4vw,42px);line-height:1.12}.home-explainer-section__content{max-width:1080px}.home-explainer-section .content-answer{background:#fff} .error-page{min-height:62vh;padding-top:100px;padding-bottom:100px}.error-page h1{margin:6px 0 18px;font-size:clamp(48px,8vw,82px);line-height:1}.error-page>p:not(.eyebrow){max-width:650px;margin:0 0 28px;font-size:18px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 17px;border-radius:8px;font-weight:800;text-decoration:none}.button--outline{border:1px solid #171717} .site-footer{margin-top:82px;border-top:1px solid var(--v17-border);background:#f7f6f2}.site-footer__grid{display:grid;grid-template-columns:minmax(260px,1.5fr) repeat(3,minmax(150px,1fr));gap:48px;padding-top:52px;padding-bottom:42px}.site-footer__about{max-width:360px}.site-footer__brand{display:inline-block;margin-bottom:18px;font-size:22px;font-weight:850;letter-spacing:-.045em}.site-footer__about p{margin:0;color:#5d5a53;font-size:14px;line-height:1.7}.site-footer__column h2{margin:0 0 16px;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.site-footer__column nav{display:flex;flex-direction:column;gap:10px}.site-footer__column a{color:#54514b;font-size:14px}.site-footer__column a:hover{text-decoration:underline}.site-footer__bottom{display:flex;justify-content:space-between;gap:28px;padding:20px 0 24px;border-top:1px solid var(--v17-border)}.site-footer__bottom p{margin:0;color:#78746d;font-size:12px}.site-footer__bottom p:last-child{text-align:right} @media(max-width:1050px){.site-nav{gap:2px}.site-nav a{padding:8px!important;font-size:13px}.content-layout{grid-template-columns:1fr}.content-aside{position:static;display:flex;justify-content:center}.content-aside>*{width:min(100%,300px)}.content-aside .banner-placeholder{min-height:250px!important}.site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-market-grid__banner{position:static}.home-market-grid__banner .banner-placeholder{min-height:250px!important}} @media(max-width:820px){.site-nav{display:none;position:absolute;top:72px;left:0;right:0;padding:14px 20px 20px;background:#fff;border-bottom:1px solid var(--v17-border);flex-direction:column;align-items:stretch}.site-nav.is-open{display:flex}.site-nav a{padding:12px!important}.site-header__cta{display:none}.menu-button{display:flex;margin-left:auto;flex-direction:column;gap:4px;border:0;background:transparent}.menu-button span{display:block;width:22px;height:2px;background:#111}.menu-button b{display:none}.market-home{padding-top:32px}.content-section{grid-template-columns:1fr;gap:8px}.section-number{margin:0}.site-footer__grid{grid-template-columns:1fr}.site-footer__bottom{display:block}.site-footer__bottom p:last-child{margin-top:8px;text-align:left}} @media(max-width:640px){.container{width:min(calc(100% - 28px),var(--max))}.page-hero{padding-top:46px;padding-bottom:30px}.page-lead{font-size:18px}.faq-section{padding:48px 0!important}.faq-list summary{padding:18px 2px!important;font-size:16px!important}.faq-answer{padding:0 2px 18px!important}.top-ad-wrap .banner-placeholder,.wide-banner-wrap .banner-placeholder,.content-wide-ad .banner-placeholder{min-height:100px!important}.banner-placeholder strong{font-size:30px}.home-market-grid__banner .banner-placeholder{min-height:250px!important}.site-footer{margin-top:60px}} @media(max-width:640px){.content-answer{padding:26px 22px;margin-bottom:22px}.content-answer__body{font-size:17px}.content-jump{align-items:flex-start;margin-bottom:28px;padding:14px 0}.content-jump>span{width:100%;margin-bottom:2px}.content-jump a{font-size:12px;padding:7px 9px}.content-sections__heading{padding-top:24px}.home-explainer-section__content{width:min(calc(100% - 28px),var(--max))}} /* V28: compact answer-first row without a floating half-width card */ .content-answer{ box-sizing:border-box; display:grid; grid-template-columns:minmax(250px,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,72px); align-items:center; width:100%; max-width:none; margin:0 0 30px; padding:28px 32px; border:0; border-top:1px solid var(--v17-border); border-bottom:1px solid var(--v17-border); border-radius:0; background:transparent; } .content-answer__heading{min-width:0} .content-answer__eyebrow{margin-bottom:7px} .content-answer h2{margin:0;font-size:clamp(24px,2.4vw,32px);line-height:1.16} .content-answer__body{font-size:16px;line-height:1.7} .content-answer__body p{margin:0} @media(max-width:760px){ .content-answer{grid-template-columns:1fr;gap:12px;padding:22px 0;margin-bottom:24px} .content-answer h2{font-size:clamp(24px,8vw,30px)} .content-answer__body{font-size:16px;line-height:1.65} } /* V29: CMS banner rotation and post-market placement */ .banner-rotator{position:relative;width:100%} .banner-rotator__slide{display:none;animation:banner-fade .45s ease both} .banner-rotator__slide.is-active{display:block} .banner-rotator__dots{position:absolute;right:12px;bottom:8px;z-index:3;display:flex;gap:6px;padding:5px 7px;border-radius:999px;background:rgba(255,255,255,.82);backdrop-filter:blur(5px)} .banner-rotator__dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:#aaa;cursor:pointer} .banner-rotator__dots button.is-active{background:#171717} .home-after-market-ad{display:flex;justify-content:center;margin:24px 0 0} .home-after-market-ad .banner-rotator{width:min(100%,1080px)} @keyframes banner-fade{from{opacity:0}to{opacity:1}} @media(prefers-reduced-motion:reduce){.banner-rotator__slide{animation:none}} @media(max-width:640px){.home-after-market-ad{margin-top:18px}.banner-rotator__dots{right:8px;bottom:6px}} /* V18: shared metal chart and animated FAQ */ .content-market-terminal{margin-bottom:54px}.content-market-terminal .market-terminal{box-shadow:0 18px 52px rgba(30,26,18,.08)} .market-chart-wrap{position:relative;overflow:hidden}.market-chart-grid{position:absolute;inset:0;display:grid;grid-template-rows:repeat(5,1fr);pointer-events:none}.market-chart-grid i{display:block;border-bottom:1px solid rgba(40,38,34,.055)}.market-chart-empty{position:relative;z-index:1}.market-chart-canvas{position:absolute;inset:0;z-index:2}.market-chart-canvas svg{display:block;width:100%;height:100%}.chart-grid-line{stroke:rgba(40,38,34,.09);stroke-width:1}.chart-axis-label{fill:#777168;font:12px system-ui,sans-serif}.chart-crosshair{stroke:#83765c;stroke-width:1;stroke-dasharray:4 4}.chart-dot{fill:#fff;stroke:#a97808;stroke-width:3}.chart-tooltip rect{fill:#171717;opacity:.94}.chart-tooltip text{fill:#ddd;font:12px system-ui,sans-serif}.chart-tooltip .chart-tooltip-price{fill:#fff;font-weight:800}.market-chart-canvas [data-chart-hit]{cursor:crosshair;pointer-events:all} .faq-list summary:after{display:none!important}.faq-list summary i{position:relative;flex:0 0 20px;width:20px;height:20px;margin-left:24px}.faq-list summary i:before,.faq-list summary i:after{content:"";position:absolute;left:3px;top:9px;width:14px;height:2px;background:#111;transition:transform .28s ease}.faq-list summary i:after{transform:rotate(90deg)}.faq-list details[open] summary i:after{transform:rotate(0)} .faq-answer{height:0;overflow:hidden;opacity:0;padding:0 4px!important;transition:height .32s cubic-bezier(.2,.7,.2,1),opacity .22s ease}.faq-answer__inner{padding:0 0 20px;color:#4f4c46;line-height:1.75}.faq-answer__inner p{margin:0}.faq-list details[open] .faq-answer{opacity:1} @media(prefers-reduced-motion:reduce){.faq-answer,.faq-list summary i:after{transition:none!important}} @media(max-width:640px){.content-market-terminal{margin-bottom:38px}} .market-chart-tooltip{position:absolute;z-index:5;min-width:152px;max-width:calc(100% - 24px);padding:10px 12px;border-radius:9px;background:rgba(20,20,20,.94);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.2);pointer-events:none;transform:none}.market-chart-tooltip span{display:block;margin-bottom:3px;color:#d2d2d2;font-size:11px}.market-chart-tooltip strong{display:block;overflow:hidden;text-overflow:ellipsis;font-size:14px;white-space:nowrap}.market-chart-tooltip[hidden]{display:none} /* V19: revenue-focused ad map with controlled density */ .ad-slot{display:flex;justify-content:center}.ad-slot>*{width:100%}.ad-slot--top{margin:0 auto 34px}.ad-slot--top>*{max-width:970px}.ad-slot--wide{margin:48px auto 56px}.ad-slot--wide>*{max-width:970px}.ad-slot--inline{margin:42px 0}.ad-slot--inline>*{max-width:728px;margin-inline:auto}.ad-slot--footer{margin:64px auto 0}.ad-slot--footer>*{max-width:970px} .market-stage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;align-items:start;margin-bottom:0}.market-stage__main{min-width:0}.market-stage__rail{position:sticky;top:96px}.market-stage__rail .banner-placeholder{min-height:600px!important}.market-stage__main .market-terminal{height:100%}.content-layout--market{margin-top:58px}.content-aside--lower{position:sticky;top:96px}.content-aside--lower .banner-placeholder{min-height:250px!important} .ad-slot--top .banner-placeholder,.ad-slot--footer .banner-placeholder{min-height:90px!important}.ad-slot--inline .banner-placeholder{min-height:90px!important}.ad-slot--wide .banner-placeholder{min-height:90px!important} @media(max-width:1120px){.market-stage{grid-template-columns:1fr}.market-stage__rail{position:static;display:flex;justify-content:center}.market-stage__rail>*{width:min(100%,300px)}.market-stage__rail .banner-placeholder{min-height:250px!important}.content-layout--market{grid-template-columns:1fr}.content-aside--lower{position:static;display:flex;justify-content:center}.content-aside--lower>*{width:min(100%,300px)}} @media(max-width:640px){.ad-slot--top{margin-bottom:24px}.ad-slot--wide{margin:34px auto 40px}.ad-slot--inline{margin:30px 0}.ad-slot--footer{margin-top:42px}.ad-slot--top .banner-placeholder,.ad-slot--footer .banner-placeholder,.ad-slot--inline .banner-placeholder,.ad-slot--wide .banner-placeholder{min-height:100px!important}.market-stage{gap:24px}} /* V27: compact editorial and advertising rhythm */ .wide-banner-wrap{margin-top:24px} .wide-banner-wrap .banner-placeholder,.wide-banner-wrap .managed-banner{width:min(100%,1080px)} .top-ad-wrap .banner-placeholder,.top-ad-wrap .managed-banner{width:min(100%,1080px)} .ad-slot--top>*,.ad-slot--wide>*,.ad-slot--footer>*{max-width:1080px} .content-wide-ad>*{width:min(100%,1080px)} .home-tools-section{padding:42px 0 28px} .home-explainer-section{padding:34px 0 54px} .ad-slot--top{margin-bottom:24px} .ad-slot--wide{margin:32px auto 38px} .ad-slot--inline{margin:30px 0} .ad-slot--footer{margin-top:42px} .content-wide-ad{margin-top:42px} .content-layout--market{margin-top:40px} .fineness-market-stage{margin-bottom:28px} /* Wide placeholders must occupy the advertised 1080x90 canvas. */ .top-ad-wrap .banner-placeholder, .wide-banner-wrap .banner-placeholder, .content-wide-ad .banner-placeholder, .ad-slot--top .banner-placeholder, .ad-slot--wide .banner-placeholder, .ad-slot--footer .banner-placeholder{ box-sizing:border-box; height:auto!important; min-height:0!important; aspect-ratio:12/1!important; padding:10px 20px; gap:2px; } .top-ad-wrap .banner-placeholder strong, .wide-banner-wrap .banner-placeholder strong, .content-wide-ad .banner-placeholder strong, .ad-slot--top .banner-placeholder strong, .ad-slot--wide .banner-placeholder strong, .ad-slot--footer .banner-placeholder strong{margin:3px 0 0;font-size:34px} .banner-placeholder__mobile-size{display:none} @media(max-width:640px){ .managed-banner{aspect-ratio:var(--banner-ratio-mobile)} .wide-banner-wrap{margin-top:20px} .home-tools-section{padding:34px 0 24px} .home-explainer-section{padding:28px 0 44px} .ad-slot--wide{margin:26px auto 30px} .ad-slot--inline{margin:24px 0} .ad-slot--footer{margin-top:32px} .content-wide-ad{margin-top:30px} .content-layout--market{margin-top:30px} .banner-placeholder__desktop-size{display:none} .banner-placeholder__mobile-size{display:block} .home-market-grid__banner .banner-placeholder, .market-stage__rail .banner-placeholder, .fineness-market-stage__rail .banner-placeholder, .content-aside .banner-placeholder{ width:320px; max-width:100%; min-height:0!important; aspect-ratio:16/5!important; padding:10px 14px; } .home-market-grid__banner, .market-stage__rail, .fineness-market-stage__rail, .content-aside{justify-content:center} .site-nav,.fineness-menu,.fineness-menu__panel{min-width:0;max-width:100%} .fineness-menu__panel{box-sizing:border-box;padding-inline:10px!important} .fineness-menu__intro{display:block} .fineness-menu__intro>a{display:none!important} .fineness-menu__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px} .fineness-menu__grid>a{min-width:0;min-height:58px;padding:8px!important} .top-ad-wrap .banner-placeholder, .wide-banner-wrap .banner-placeholder, .content-wide-ad .banner-placeholder, .ad-slot--top .banner-placeholder, .ad-slot--wide .banner-placeholder, .ad-slot--footer .banner-placeholder{ aspect-ratio:16/5!important; min-height:0!important; padding:10px 16px; } } /* AUKSOKAINA_FINAL_AD_STANDARDS_V3 */ /* * Production banner standards * * 300x600 desktop chart/sidebar * 300x250 rectangle/sidebar * 970x90 wide desktop * 728x90 inline/content * 320x100 mobile * * CMS media files remain independent. * Images are never cropped or stretched. */ :root { --ak-ad-sidebar-w: 300px; --ak-ad-sidebar-h: 600px; --ak-ad-rectangle-w: 300px; --ak-ad-rectangle-h: 250px; --ak-ad-wide-w: 970px; --ak-ad-wide-h: 90px; --ak-ad-inline-w: 728px; --ak-ad-inline-h: 90px; --ak-ad-mobile-w: 320px; --ak-ad-mobile-h: 100px; } /* ========================================================= GENERIC CMS BANNER ========================================================= */ .managed-banner { display: block; width: 100%; max-width: 100%; overflow: hidden; background: #f5f2ea; isolation: isolate; } .managed-banner picture { display: block; width: 100%; height: 100%; } .managed-banner img { display: block; width: 100%; height: 100% !important; max-width: 100%; object-fit: contain !important; object-position: center !important; } .managed-banner--failed { display: none !important; } /* ========================================================= CHART + 300x600 RIGHT RAIL ========================================================= */ .market-stage, .home-market-grid, .metal-market-grid, .fineness-market-stage { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; } .market-stage__main, .home-market-grid__terminal, .metal-market-grid__terminal, .fineness-market-stage__main { min-width: 0; } .market-stage__rail, .home-market-grid__banner, .metal-market-grid__banner, .fineness-market-stage__rail { position: sticky; top: 96px; align-self: start; width: 300px; max-width: 300px; } .market-stage__rail .banner-rotator, .home-market-grid__banner .banner-rotator, .metal-market-grid__banner .banner-rotator, .fineness-market-stage__rail .banner-rotator { width: 300px; max-width: 300px; } .market-stage__rail .managed-banner, .home-market-grid__banner .managed-banner, .metal-market-grid__banner .managed-banner, .fineness-market-stage__rail .managed-banner { width: 300px; max-width: 300px; aspect-ratio: 300 / 600 !important; } /* ========================================================= 300x250 RECTANGLE ========================================================= */ .content-aside--lower .banner-rotator, .ad-slot--rectangle .banner-rotator { width: 300px; max-width: 300px; margin-inline: auto; } .content-aside--lower .managed-banner, .ad-slot--rectangle .managed-banner { width: 300px; max-width: 300px; aspect-ratio: 300 / 250 !important; } /* ========================================================= 970x90 WIDE DESKTOP ========================================================= */ .top-ad-wrap, .wide-banner-wrap, .content-wide-ad, .home-after-market-ad, .ad-slot--top, .ad-slot--wide, .ad-slot--footer { display: flex; justify-content: center; } .top-ad-wrap > *, .wide-banner-wrap > *, .content-wide-ad > *, .home-after-market-ad > *, .ad-slot--top > *, .ad-slot--wide > *, .ad-slot--footer > * { width: min(100%, 970px) !important; max-width: 970px !important; } .top-ad-wrap .managed-banner, .wide-banner-wrap .managed-banner, .content-wide-ad .managed-banner, .home-after-market-ad .managed-banner, .ad-slot--top .managed-banner, .ad-slot--wide .managed-banner, .ad-slot--footer .managed-banner { aspect-ratio: 970 / 90 !important; } /* ========================================================= 728x90 INLINE ========================================================= */ .ad-slot--inline { display: flex; justify-content: center; width: 100%; } .ad-slot--inline > *, .ad-slot--inline .banner-rotator { width: min(100%, 728px) !important; max-width: 728px !important; margin-inline: auto; } .ad-slot--inline .managed-banner { aspect-ratio: 728 / 90 !important; } /* ========================================================= ROTATOR ========================================================= */ .banner-rotator { position: relative; } .banner-rotator__slide { display: none; } .banner-rotator__slide.is-active { display: block; } .banner-rotator__dots { position: absolute; z-index: 10; right: 9px; bottom: 7px; } /* ========================================================= EMPTY CMS SLOT = NO EMPTY SPACE ========================================================= */ .market-stage__rail:not(:has(.managed-banner)), .home-market-grid__banner:not(:has(.managed-banner)), .metal-market-grid__banner:not(:has(.managed-banner)), .fineness-market-stage__rail:not(:has(.managed-banner)), .ad-slot:not(:has(.managed-banner)), .wide-banner-wrap:not(:has(.managed-banner)), .top-ad-wrap:not(:has(.managed-banner)), .content-wide-ad:not(:has(.managed-banner)), .home-after-market-ad:not(:has(.managed-banner)) { display: none !important; } .market-stage:not(:has(.market-stage__rail .managed-banner)), .home-market-grid:not(:has(.home-market-grid__banner .managed-banner)), .metal-market-grid:not(:has(.metal-market-grid__banner .managed-banner)), .fineness-market-stage:not(:has(.fineness-market-stage__rail .managed-banner)) { grid-template-columns: minmax(0, 1fr) !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1120px) { .market-stage, .home-market-grid, .metal-market-grid, .fineness-market-stage { grid-template-columns: minmax(0, 1fr) !important; gap: 22px; } .market-stage__rail, .home-market-grid__banner, .metal-market-grid__banner, .fineness-market-stage__rail { position: static !important; display: flex !important; justify-content: center; width: 100%; max-width: none; } /* * Side rail no longer squeezes the chart. * * Existing mobile creative is used for this rail * unless a separate 728x90 inline CMS slot is used. */ .market-stage__rail .banner-rotator, .home-market-grid__banner .banner-rotator, .metal-market-grid__banner .banner-rotator, .fineness-market-stage__rail .banner-rotator { width: min(100%, 320px) !important; max-width: 320px !important; margin-inline: auto; } .market-stage__rail .managed-banner, .home-market-grid__banner .managed-banner, .metal-market-grid__banner .managed-banner, .fineness-market-stage__rail .managed-banner { width: 320px !important; max-width: 100% !important; aspect-ratio: 320 / 100 !important; } } /* ========================================================= PHONE ========================================================= */ @media (max-width: 767px) { .market-stage, .home-market-grid, .metal-market-grid, .fineness-market-stage { gap: 18px; } .market-stage__rail .banner-rotator, .home-market-grid__banner .banner-rotator, .metal-market-grid__banner .banner-rotator, .fineness-market-stage__rail .banner-rotator, .top-ad-wrap .banner-rotator, .wide-banner-wrap .banner-rotator, .content-wide-ad .banner-rotator, .home-after-market-ad .banner-rotator, .ad-slot .banner-rotator { width: min(100%, 320px) !important; max-width: 320px !important; margin-inline: auto; } .market-stage__rail .managed-banner, .home-market-grid__banner .managed-banner, .metal-market-grid__banner .managed-banner, .fineness-market-stage__rail .managed-banner, .top-ad-wrap .managed-banner, .wide-banner-wrap .managed-banner, .content-wide-ad .managed-banner, .home-after-market-ad .managed-banner, .ad-slot .managed-banner { width: 320px !important; max-width: 100% !important; aspect-ratio: 320 / 100 !important; } } /* AUKSOKAINA_FINAL_AD_STANDARDS_V3_END */ /* ========================================================= AUKSOKAINA_ALL_CHART_BANNERS_V1 Every market-terminal chart uses the same CMS banner rail. ========================================================= */ .market-stage, .fineness-market-stage, .home-market-grid, .metal-market-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; } .market-stage__main, .fineness-market-stage__main, .home-market-grid__terminal, .metal-market-grid__terminal { min-width: 0; } .market-stage__rail, .fineness-market-stage__rail, .home-market-grid__banner, .metal-market-grid__banner { width: 300px; max-width: 300px; position: sticky; top: 96px; align-self: start; } .market-stage__rail .banner-rotator, .fineness-market-stage__rail .banner-rotator, .home-market-grid__banner .banner-rotator, .metal-market-grid__banner .banner-rotator { width: 300px; max-width: 300px; } .market-stage__rail .managed-banner, .fineness-market-stage__rail .managed-banner, .home-market-grid__banner .managed-banner, .metal-market-grid__banner .managed-banner { width: 300px; max-width: 300px; aspect-ratio: 300 / 600 !important; } /* --------------------------------------------------------- No active CMS banner = chart becomes full width --------------------------------------------------------- */ .market-stage__rail:not(:has(.managed-banner)), .fineness-market-stage__rail:not(:has(.managed-banner)), .home-market-grid__banner:not(:has(.managed-banner)), .metal-market-grid__banner:not(:has(.managed-banner)) { display: none !important; } .market-stage:not(:has(.market-stage__rail .managed-banner)), .fineness-market-stage:not(:has(.fineness-market-stage__rail .managed-banner)), .home-market-grid:not(:has(.home-market-grid__banner .managed-banner)), .metal-market-grid:not(:has(.metal-market-grid__banner .managed-banner)) { grid-template-columns: minmax(0, 1fr) !important; } /* --------------------------------------------------------- Tablet --------------------------------------------------------- */ @media (max-width: 1120px) { .market-stage, .fineness-market-stage, .home-market-grid, .metal-market-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 22px; } .market-stage__rail, .fineness-market-stage__rail, .home-market-grid__banner, .metal-market-grid__banner { position: static !important; width: 100%; max-width: none; display: flex; justify-content: center; } .market-stage__rail .banner-rotator, .fineness-market-stage__rail .banner-rotator, .home-market-grid__banner .banner-rotator, .metal-market-grid__banner .banner-rotator { width: min(100%, 320px); max-width: 320px; margin-inline: auto; } .market-stage__rail .managed-banner, .fineness-market-stage__rail .managed-banner, .home-market-grid__banner .managed-banner, .metal-market-grid__banner .managed-banner { width: 320px; max-width: 100%; aspect-ratio: 320 / 100 !important; } } /* --------------------------------------------------------- Phone --------------------------------------------------------- */ @media (max-width: 767px) { .market-stage, .fineness-market-stage, .home-market-grid, .metal-market-grid { gap: 18px; } .market-stage__rail, .fineness-market-stage__rail, .home-market-grid__banner, .metal-market-grid__banner { width: 100%; } .market-stage__rail .banner-rotator, .fineness-market-stage__rail .banner-rotator, .home-market-grid__banner .banner-rotator, .metal-market-grid__banner .banner-rotator { width: min(100%, 320px); max-width: 320px; } .market-stage__rail .managed-banner, .fineness-market-stage__rail .managed-banner, .home-market-grid__banner .managed-banner, .metal-market-grid__banner .managed-banner { width: 320px; max-width: 100%; aspect-ratio: 320 / 100 !important; } } /* AUKSOKAINA_ALL_CHART_BANNERS_V1_END */ /* ========================================================= AUKSOKAINA_VISIBLE_BANNER_TEMPLATES_V1 Visible templates remain until a real CMS banner exists. ========================================================= */ .banner-placeholder { box-sizing: border-box; display: flex !important; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px dashed #bdb6a5; border-radius: 12px; background: repeating-linear-gradient( -45deg, #faf9f5, #faf9f5 12px, #f1eee6 12px, #f1eee6 24px ); color: #706b61; text-align: center; } .banner-placeholder__type { font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; } .banner-placeholder strong { display: block; margin: 8px 0 4px; color: #24231f; font-size: 30px; line-height: 1; } .banner-placeholder small { font-size: 11px; color: #817c72; } .banner-placeholder__mobile-size { display: none; } /* ========================================================= CHART SIDEBAR TEMPLATE – 300x600 ========================================================= */ .home-market-grid, .market-stage, .fineness-market-stage, .metal-market-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) 300px !important; gap: 28px; align-items: start; } .home-market-grid__terminal, .market-stage__main, .fineness-market-stage__main, .metal-market-grid__terminal { min-width: 0; } .home-market-grid__banner, .market-stage__rail, .fineness-market-stage__rail, .metal-market-grid__banner { display: block !important; width: 300px; max-width: 300px; position: sticky; top: 96px; } .home-market-grid__banner .banner-placeholder, .market-stage__rail .banner-placeholder, .fineness-market-stage__rail .banner-placeholder, .metal-market-grid__banner .banner-placeholder { width: 300px !important; height: 600px !important; min-height: 600px !important; aspect-ratio: 300 / 600 !important; } /* Real CMS banner replaces template visually. */ .home-market-grid__banner .managed-banner, .market-stage__rail .managed-banner, .fineness-market-stage__rail .managed-banner, .metal-market-grid__banner .managed-banner { width: 300px !important; height: 600px !important; max-width: 300px; aspect-ratio: 300 / 600 !important; } /* ========================================================= RECTANGLE – 300x250 ========================================================= */ .content-aside--lower .banner-placeholder, .ad-slot--rectangle .banner-placeholder { width: 300px !important; height: 250px !important; min-height: 250px !important; aspect-ratio: 300 / 250 !important; } /* ========================================================= WIDE DESKTOP – 970x90 ========================================================= */ .top-ad-wrap, .wide-banner-wrap, .content-wide-ad, .home-after-market-ad, .ad-slot--top, .ad-slot--wide, .ad-slot--footer { display: flex !important; justify-content: center; } .top-ad-wrap .banner-placeholder, .wide-banner-wrap .banner-placeholder, .content-wide-ad .banner-placeholder, .home-after-market-ad .banner-placeholder, .ad-slot--top .banner-placeholder, .ad-slot--wide .banner-placeholder, .ad-slot--footer .banner-placeholder { width: min(100%, 970px) !important; height: auto !important; min-height: 90px !important; aspect-ratio: 970 / 90 !important; } /* ========================================================= INLINE – 728x90 ========================================================= */ .ad-slot--inline { display: flex !important; justify-content: center; } .ad-slot--inline .banner-placeholder { width: min(100%, 728px) !important; height: auto !important; min-height: 90px !important; aspect-ratio: 728 / 90 !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1120px) { .home-market-grid, .market-stage, .fineness-market-stage, .metal-market-grid { grid-template-columns: minmax(0, 1fr) !important; } .home-market-grid__banner, .market-stage__rail, .fineness-market-stage__rail, .metal-market-grid__banner { position: static; display: flex !important; justify-content: center; width: 100%; max-width: none; } .home-market-grid__banner .banner-placeholder, .market-stage__rail .banner-placeholder, .fineness-market-stage__rail .banner-placeholder, .metal-market-grid__banner .banner-placeholder, .home-market-grid__banner .managed-banner, .market-stage__rail .managed-banner, .fineness-market-stage__rail .managed-banner, .metal-market-grid__banner .managed-banner { width: 320px !important; height: 100px !important; max-width: 100%; min-height: 100px !important; aspect-ratio: 320 / 100 !important; } .banner-placeholder__desktop-size { display: none; } .banner-placeholder__mobile-size { display: block; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 640px) { .home-market-grid, .market-stage, .fineness-market-stage, .metal-market-grid { gap: 18px; } .home-market-grid__banner .banner-placeholder, .market-stage__rail .banner-placeholder, .fineness-market-stage__rail .banner-placeholder, .metal-market-grid__banner .banner-placeholder, .home-market-grid__banner .managed-banner, .market-stage__rail .managed-banner, .fineness-market-stage__rail .managed-banner, .metal-market-grid__banner .managed-banner { width: min(100%, 320px) !important; height: auto !important; min-height: 100px !important; aspect-ratio: 320 / 100 !important; } } /* AUKSOKAINA_VISIBLE_BANNER_TEMPLATES_V1_END */ /* ========================================================= AUKSOKAINA_PLACEHOLDER_FORCE_V2 CMS banner -> real creative No CMS creative -> visible size template ========================================================= */ /* * DESKTOP * * Override old :not(:has(.managed-banner)) collapsing rules. */ @media (min-width: 1121px) { body .home-market-grid, body .market-stage, body .fineness-market-stage, body .metal-market-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) 300px !important; gap: 28px !important; align-items: start !important; } body .home-market-grid__terminal, body .market-stage__main, body .fineness-market-stage__main, body .metal-market-grid__terminal { min-width: 0 !important; } /* * Critical: * even when there is NO .managed-banner, * the rail must remain visible for the template. */ body .home-market-grid .home-market-grid__banner:not(:has(.managed-banner)), body .market-stage .market-stage__rail:not(:has(.managed-banner)), body .fineness-market-stage .fineness-market-stage__rail:not(:has(.managed-banner)), body .metal-market-grid .metal-market-grid__banner:not(:has(.managed-banner)) { display: block !important; width: 300px !important; min-width: 300px !important; max-width: 300px !important; position: sticky !important; top: 96px !important; align-self: start !important; } /* * Override the old: * grid-template-columns: 1fr !important * when no real managed banner exists. */ body .home-market-grid:not( :has(.home-market-grid__banner .managed-banner) ), body .market-stage:not( :has(.market-stage__rail .managed-banner) ), body .fineness-market-stage:not( :has(.fineness-market-stage__rail .managed-banner) ), body .metal-market-grid:not( :has(.metal-market-grid__banner .managed-banner) ) { grid-template-columns: minmax(0, 1fr) 300px !important; } /* * Visible 300x600 development / CMS template. */ body .home-market-grid__banner .banner-placeholder, body .market-stage__rail .banner-placeholder, body .fineness-market-stage__rail .banner-placeholder, body .metal-market-grid__banner .banner-placeholder { box-sizing: border-box !important; display: flex !important; width: 300px !important; min-width: 300px !important; max-width: 300px !important; height: 600px !important; min-height: 600px !important; max-height: 600px !important; aspect-ratio: 300 / 600 !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 24px !important; border: 1px dashed #bdb6a5 !important; border-radius: 12px !important; background: repeating-linear-gradient( -45deg, #faf9f5, #faf9f5 12px, #f1eee6 12px, #f1eee6 24px ) !important; color: #706b61 !important; text-align: center !important; visibility: visible !important; opacity: 1 !important; } } /* ========================================================= PLACEHOLDER TEXT ========================================================= */ body .banner-placeholder__type { display: block !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: .14em !important; text-transform: uppercase !important; } body .banner-placeholder__desktop-size { display: block !important; margin: 10px 0 5px !important; color: #222 !important; font-size: 32px !important; font-weight: 800 !important; line-height: 1 !important; } body .banner-placeholder__mobile-size { display: none !important; } body .banner-placeholder small { display: block !important; color: #777168 !important; font-size: 11px !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1120px) { body .home-market-grid, body .market-stage, body .fineness-market-stage, body .metal-market-grid, body .home-market-grid:not( :has(.home-market-grid__banner .managed-banner) ), body .market-stage:not( :has(.market-stage__rail .managed-banner) ), body .fineness-market-stage:not( :has(.fineness-market-stage__rail .managed-banner) ) { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; } body .home-market-grid .home-market-grid__banner:not(:has(.managed-banner)), body .market-stage .market-stage__rail:not(:has(.managed-banner)), body .fineness-market-stage .fineness-market-stage__rail:not(:has(.managed-banner)), body .home-market-grid__banner, body .market-stage__rail, body .fineness-market-stage__rail, body .metal-market-grid__banner { display: flex !important; position: static !important; width: 100% !important; min-width: 0 !important; max-width: none !important; justify-content: center !important; } body .home-market-grid__banner .banner-placeholder, body .market-stage__rail .banner-placeholder, body .fineness-market-stage__rail .banner-placeholder, body .metal-market-grid__banner .banner-placeholder { width: 320px !important; min-width: 0 !important; max-width: 100% !important; height: 100px !important; min-height: 100px !important; max-height: none !important; aspect-ratio: 320 / 100 !important; padding: 10px 14px !important; } body .banner-placeholder__desktop-size { display: none !important; } body .banner-placeholder__mobile-size { display: block !important; margin: 5px 0 2px !important; color: #222 !important; font-size: 23px !important; font-weight: 800 !important; line-height: 1 !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 640px) { body .home-market-grid__banner .banner-placeholder, body .market-stage__rail .banner-placeholder, body .fineness-market-stage__rail .banner-placeholder, body .metal-market-grid__banner .banner-placeholder { width: min(100%, 320px) !important; height: auto !important; min-height: 100px !important; aspect-ratio: 320 / 100 !important; } } /* AUKSOKAINA_PLACEHOLDER_FORCE_V2_END */ /* AUKSOKAINA_CHART_AD_LAYOUT_V4 */ /* * Desktop composition: * * ┌──────────────────────────────────────┬──────────────┐ * │ │ │ * │ MARKET │ AD │ * │ TERMINAL │ 300x600 │ * │ │ │ * └──────────────────────────────────────┴──────────────┘ * * Both columns are visually aligned. */ /* ========================================================= WIDER MARKET AREA ========================================================= */ @media (min-width: 1280px) { body .market-home > .container { width: min( calc(100% - 40px), 1440px ) !important; max-width: 1440px !important; } body .market-stage, body .fineness-market-stage { width: min( calc(100% - 40px), 1440px ) !important; max-width: 1440px !important; margin-inline: auto !important; } /* ===================================================== CHART + 300x600 AD ===================================================== */ body .home-market-grid, body .market-stage, body .fineness-market-stage, body .metal-market-grid, body .home-market-grid:not( :has(.home-market-grid__banner .managed-banner) ), body .market-stage:not( :has(.market-stage__rail .managed-banner) ), body .fineness-market-stage:not( :has(.fineness-market-stage__rail .managed-banner) ) { display: grid !important; grid-template-columns: minmax(0, 1fr) 300px !important; gap: 28px !important; align-items: start !important; } body .home-market-grid__terminal, body .market-stage__main, body .fineness-market-stage__main, body .metal-market-grid__terminal { min-width: 0 !important; } /* ===================================================== TERMINAL = EXACTLY SAME HEIGHT AS AD ===================================================== */ body .home-market-grid .market-terminal, body .market-stage .market-terminal, body .fineness-market-stage .market-terminal, body .metal-market-grid .market-terminal { box-sizing: border-box !important; display: grid !important; grid-template-rows: auto auto minmax(0, 1fr) auto auto !important; width: 100% !important; height: 600px !important; min-height: 600px !important; overflow: hidden !important; } /* * The chart consumes whatever vertical space remains * between terminal controls and metrics. */ body .home-market-grid .market-chart-wrap, body .market-stage .market-chart-wrap, body .fineness-market-stage .market-chart-wrap, body .metal-market-grid .market-chart-wrap { width: 100% !important; height: auto !important; min-height: 0 !important; position: relative !important; overflow: hidden !important; } body .market-chart-container--lw, body [data-chart-container] { width: 100% !important; height: 100% !important; min-height: 100% !important; } /* ===================================================== RIGHT RAIL ===================================================== */ body .home-market-grid__banner, body .market-stage__rail, body .fineness-market-stage__rail, body .metal-market-grid__banner, body .home-market-grid__banner:not(:has(.managed-banner)), body .market-stage__rail:not(:has(.managed-banner)), body .fineness-market-stage__rail:not(:has(.managed-banner)) { box-sizing: border-box !important; display: block !important; width: 300px !important; min-width: 300px !important; max-width: 300px !important; height: 600px !important; min-height: 600px !important; position: sticky !important; top: 96px !important; align-self: start !important; } body .home-market-grid__banner .banner-rotator, body .market-stage__rail .banner-rotator, body .fineness-market-stage__rail .banner-rotator, body .metal-market-grid__banner .banner-rotator, body .home-market-grid__banner .managed-banner, body .market-stage__rail .managed-banner, body .fineness-market-stage__rail .managed-banner, body .metal-market-grid__banner .managed-banner, body .home-market-grid__banner .banner-placeholder, body .market-stage__rail .banner-placeholder, body .fineness-market-stage__rail .banner-placeholder, body .metal-market-grid__banner .banner-placeholder { box-sizing: border-box !important; width: 300px !important; min-width: 300px !important; max-width: 300px !important; height: 600px !important; min-height: 600px !important; max-height: 600px !important; aspect-ratio: 300 / 600 !important; } /* ===================================================== CLEANER TERMINAL SPACING ===================================================== */ body .market-terminal__topline { padding: 17px 20px !important; } body .market-terminal__controls { padding: 13px 16px !important; gap: 11px !important; } body .market-terminal__metrics div { padding: 11px 14px !important; } body .market-terminal__footer { padding: 7px 16px !important; } } /* ========================================================= MEDIUM DESKTOP / TABLET ========================================================= */ @media (max-width: 1279px) { body .home-market-grid, body .market-stage, body .fineness-market-stage, body .metal-market-grid, body .home-market-grid:not( :has(.home-market-grid__banner .managed-banner) ), body .market-stage:not( :has(.market-stage__rail .managed-banner) ), body .fineness-market-stage:not( :has(.fineness-market-stage__rail .managed-banner) ) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; } body .home-market-grid .market-terminal, body .market-stage .market-terminal, body .fineness-market-stage .market-terminal, body .metal-market-grid .market-terminal { height: auto !important; min-height: 0 !important; display: block !important; } body .home-market-grid .market-chart-wrap, body .market-stage .market-chart-wrap, body .fineness-market-stage .market-chart-wrap, body .metal-market-grid .market-chart-wrap { height: 390px !important; } body .home-market-grid__banner, body .market-stage__rail, body .fineness-market-stage__rail, body .metal-market-grid__banner, body .home-market-grid__banner:not(:has(.managed-banner)), body .market-stage__rail:not(:has(.managed-banner)), body .fineness-market-stage__rail:not(:has(.managed-banner)) { display: flex !important; position: static !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; } /* * We do NOT squash 300x600 into a landscape banner. * CMS mobile creative / placeholder is used instead. */ body .home-market-grid__banner .banner-rotator, body .market-stage__rail .banner-rotator, body .fineness-market-stage__rail .banner-rotator, body .metal-market-grid__banner .banner-rotator, body .home-market-grid__banner .managed-banner, body .market-stage__rail .managed-banner, body .fineness-market-stage__rail .managed-banner, body .metal-market-grid__banner .managed-banner, body .home-market-grid__banner .banner-placeholder, body .market-stage__rail .banner-placeholder, body .fineness-market-stage__rail .banner-placeholder, body .metal-market-grid__banner .banner-placeholder { width: 320px !important; min-width: 0 !important; max-width: 100% !important; height: 100px !important; min-height: 100px !important; max-height: 100px !important; aspect-ratio: 320 / 100 !important; } body .banner-placeholder__desktop-size { display: none !important; } body .banner-placeholder__mobile-size { display: block !important; } } /* ========================================================= PHONE ========================================================= */ @media (max-width: 767px) { body .market-home > .container, body .market-stage, body .fineness-market-stage { width: min( calc(100% - 24px), 1440px ) !important; } body .home-market-grid, body .market-stage, body .fineness-market-stage, body .metal-market-grid { gap: 16px !important; } body .home-market-grid .market-chart-wrap, body .market-stage .market-chart-wrap, body .fineness-market-stage .market-chart-wrap, body .metal-market-grid .market-chart-wrap { height: 315px !important; } body .market-terminal__topline { padding: 16px !important; } body .market-terminal__controls { padding: 13px 14px !important; } body .home-market-grid__banner .banner-rotator, body .market-stage__rail .banner-rotator, body .fineness-market-stage__rail .banner-rotator, body .metal-market-grid__banner .banner-rotator, body .home-market-grid__banner .managed-banner, body .market-stage__rail .managed-banner, body .fineness-market-stage__rail .managed-banner, body .metal-market-grid__banner .managed-banner, body .home-market-grid__banner .banner-placeholder, body .market-stage__rail .banner-placeholder, body .fineness-market-stage__rail .banner-placeholder, body .metal-market-grid__banner .banner-placeholder { width: min(100%, 320px) !important; height: auto !important; min-height: 100px !important; max-height: none !important; aspect-ratio: 320 / 100 !important; } } /* ========================================================= EXTRA SMALL PHONE ========================================================= */ @media (max-width: 480px) { body .home-market-grid .market-chart-wrap, body .market-stage .market-chart-wrap, body .fineness-market-stage .market-chart-wrap, body .metal-market-grid .market-chart-wrap { height: 290px !important; } body .market-terminal__quote strong { font-size: 24px !important; } } /* AUKSOKAINA_CHART_AD_LAYOUT_V4_END */ /* AUKSOKAINA_CHART_ALIGNMENT_V5 */ /* * One geometry for every page that contains a market chart. * * Desktop: * hero / chart / chart+ad stage use the same horizontal frame. * * Chart rail: * 300x600 on desktop. * * Tablet / phone: * rail moves below chart and uses 320x100 creative. */ /* ========================================================= DESKTOP — COMMON CONTENT FRAME ========================================================= */ @media (min-width: 1280px) { /* * Normal market pages + fineness pages. * Hero must start exactly where chart starts. */ body:has(.market-stage) .page-hero.container, body:has(.fineness-market-stage) .page-hero.container { box-sizing: border-box !important; width: min( calc(100% - 40px), 1440px ) !important; max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; } /* * Homepage heading already lives in market-home container, * so use the same 1440px frame. */ body .market-home > .container { box-sizing: border-box !important; width: min( calc(100% - 40px), 1440px ) !important; max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; } /* * Every chart stage gets identical width. */ html body section.container.market-stage, html body section.container.fineness-market-stage { box-sizing: border-box !important; width: min( calc(100% - 40px), 1440px ) !important; max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } /* ===================================================== TWO-COLUMN GEOMETRY ===================================================== */ html body .home-market-grid, html body section.market-stage, html body section.fineness-market-stage, html body .metal-market-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) 300px !important; column-gap: 28px !important; row-gap: 0 !important; align-items: start !important; } html body .home-market-grid__terminal, html body .market-stage__main, html body .fineness-market-stage__main, html body .metal-market-grid__terminal { display: block !important; min-width: 0 !important; width: 100% !important; } /* ===================================================== FORCE EVERY CHART AD RAIL VISIBLE ===================================================== */ html body .home-market-grid > aside.home-market-grid__banner, html body section.market-stage > aside.market-stage__rail, html body section.fineness-market-stage > aside.fineness-market-stage__rail, html body .metal-market-grid > aside.metal-market-grid__banner { box-sizing: border-box !important; display: block !important; visibility: visible !important; opacity: 1 !important; width: 300px !important; min-width: 300px !important; max-width: 300px !important; height: 600px !important; min-height: 600px !important; max-height: 600px !important; position: sticky !important; top: 96px !important; align-self: start !important; } /* * Most important override: * old CSS must NEVER hide an empty CMS rail. */ html body .home-market-grid > aside.home-market-grid__banner:not(:has(.managed-banner)), html body section.market-stage > aside.market-stage__rail:not(:has(.managed-banner)), html body section.fineness-market-stage > aside.fineness-market-stage__rail:not(:has(.managed-banner)), html body .metal-market-grid > aside.metal-market-grid__banner:not(:has(.managed-banner)) { display: block !important; visibility: visible !important; opacity: 1 !important; width: 300px !important; height: 600px !important; } /* * Also defeat old single-column rules. */ html body .home-market-grid:not( :has(.home-market-grid__banner .managed-banner) ), html body section.market-stage:not( :has(.market-stage__rail .managed-banner) ), html body section.fineness-market-stage:not( :has(.fineness-market-stage__rail .managed-banner) ) { grid-template-columns: minmax(0, 1fr) 300px !important; } /* ===================================================== REAL BANNER + PLACEHOLDER SAME CANVAS ===================================================== */ html body .home-market-grid__banner > .banner-placeholder, html body .market-stage__rail > .banner-placeholder, html body .fineness-market-stage__rail > .banner-placeholder, html body .metal-market-grid__banner > .banner-placeholder, html body .home-market-grid__banner .managed-banner, html body .market-stage__rail .managed-banner, html body .fineness-market-stage__rail .managed-banner, html body .metal-market-grid__banner .managed-banner, html body .home-market-grid__banner .banner-rotator, html body .market-stage__rail .banner-rotator, html body .fineness-market-stage__rail .banner-rotator, html body .metal-market-grid__banner .banner-rotator { box-sizing: border-box !important; display: block !important; width: 300px !important; min-width: 300px !important; max-width: 300px !important; height: 600px !important; min-height: 600px !important; max-height: 600px !important; aspect-ratio: 300 / 600 !important; } /* * Placeholder itself needs flex centering. */ html body .home-market-grid__banner > .banner-placeholder, html body .market-stage__rail > .banner-placeholder, html body .fineness-market-stage__rail > .banner-placeholder, html body .metal-market-grid__banner > .banner-placeholder { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } /* ===================================================== TERMINAL HEIGHT ===================================================== */ html body .home-market-grid .market-terminal, html body section.market-stage .market-terminal, html body section.fineness-market-stage .market-terminal, html body .metal-market-grid .market-terminal { box-sizing: border-box !important; width: 100% !important; height: 600px !important; min-height: 600px !important; display: grid !important; grid-template-rows: auto auto minmax(0, 1fr) auto auto !important; overflow: hidden !important; } html body .home-market-grid .market-chart-wrap, html body section.market-stage .market-chart-wrap, html body section.fineness-market-stage .market-chart-wrap, html body .metal-market-grid .market-chart-wrap { height: auto !important; min-height: 0 !important; width: 100% !important; } } /* ========================================================= TABLET / SMALL DESKTOP ========================================================= */ @media (max-width: 1279px) { body:has(.market-stage) .page-hero.container, body:has(.fineness-market-stage) .page-hero.container, body .market-home > .container, html body section.container.market-stage, html body section.container.fineness-market-stage { width: min( calc(100% - 40px), 1320px ) !important; max-width: 1320px !important; margin-left: auto !important; margin-right: auto !important; } html body .home-market-grid, html body section.market-stage, html body section.fineness-market-stage, html body .metal-market-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; } html body .home-market-grid > aside.home-market-grid__banner, html body section.market-stage > aside.market-stage__rail, html body section.fineness-market-stage > aside.fineness-market-stage__rail, html body .metal-market-grid > aside.metal-market-grid__banner, html body .home-market-grid > aside.home-market-grid__banner:not(:has(.managed-banner)), html body section.market-stage > aside.market-stage__rail:not(:has(.managed-banner)), html body section.fineness-market-stage > aside.fineness-market-stage__rail:not(:has(.managed-banner)) { display: flex !important; visibility: visible !important; opacity: 1 !important; justify-content: center !important; position: static !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; } html body .home-market-grid__banner .banner-placeholder, html body .market-stage__rail .banner-placeholder, html body .fineness-market-stage__rail .banner-placeholder, html body .metal-market-grid__banner .banner-placeholder, html body .home-market-grid__banner .managed-banner, html body .market-stage__rail .managed-banner, html body .fineness-market-stage__rail .managed-banner, html body .metal-market-grid__banner .managed-banner { width: 320px !important; max-width: 100% !important; height: 100px !important; min-height: 100px !important; max-height: 100px !important; aspect-ratio: 320 / 100 !important; } html body .home-market-grid .market-terminal, html body section.market-stage .market-terminal, html body section.fineness-market-stage .market-terminal { height: auto !important; min-height: 0 !important; display: block !important; } html body .home-market-grid .market-chart-wrap, html body section.market-stage .market-chart-wrap, html body section.fineness-market-stage .market-chart-wrap { height: 390px !important; } .banner-placeholder__desktop-size { display: none !important; } .banner-placeholder__mobile-size { display: block !important; } } /* ========================================================= PHONE ========================================================= */ @media (max-width: 767px) { body:has(.market-stage) .page-hero.container, body:has(.fineness-market-stage) .page-hero.container, body .market-home > .container, html body section.container.market-stage, html body section.container.fineness-market-stage { width: calc(100% - 24px) !important; margin-left: auto !important; margin-right: auto !important; } html body .home-market-grid .market-chart-wrap, html body section.market-stage .market-chart-wrap, html body section.fineness-market-stage .market-chart-wrap { height: 315px !important; } } /* ========================================================= HERO RHYTHM ========================================================= */ /* * Same left edge, but keep readable text width. */ body:has(.market-stage) .page-hero > h1, body:has(.market-stage) .page-hero > .page-lead, body:has(.fineness-market-stage) .page-hero > h1, body:has(.fineness-market-stage) .page-hero > .page-lead { max-width: 900px; } /* AUKSOKAINA_CHART_ALIGNMENT_V5_END */ /* ========================================================= AUKSOKAINA_EDITORIAL_CONTENT_V1 Remove generic AI-card appearance. Content should read like an editorial publication. ========================================================= */ /* --------------------------------------------------------- Answer-first block --------------------------------------------------------- */ html body .content-answer { display: block !important; width: 100% !important; max-width: 900px !important; margin: 0 0 34px !important; padding: 0 0 30px !important; border: 0 !important; border-bottom: 1px solid var(--v17-border) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body .content-answer__heading { display: block !important; } html body .content-answer__eyebrow { display: none !important; } html body .content-answer h2 { max-width: 760px; margin: 0 0 14px !important; font-size: clamp( 28px, 3vw, 38px ) !important; line-height: 1.15 !important; letter-spacing: -.035em !important; } html body .content-answer__body { max-width: 780px !important; color: #45423c !important; font-size: 17px !important; line-height: 1.78 !important; } /* --------------------------------------------------------- Main content sections --------------------------------------------------------- */ html body .content-sections { border-top: 0 !important; } html body .content-section { display: block !important; max-width: 900px; padding: 36px 0 !important; border: 0 !important; border-bottom: 1px solid var(--v17-border) !important; background: transparent !important; box-shadow: none !important; } html body .content-section:first-of-type { border-top: 1px solid var(--v17-border) !important; } html body .section-number { display: none !important; } html body .content-section h2 { max-width: 780px; margin: 0 0 15px !important; font-size: clamp( 27px, 3vw, 36px ) !important; line-height: 1.18 !important; letter-spacing: -.035em !important; } html body .content-section .prose { max-width: 780px !important; color: #45423c; font-size: 17px !important; line-height: 1.78 !important; } html body .content-section .prose p { margin: 0 0 18px; } html body .content-section .prose p:last-child { margin-bottom: 0; } html body .content-section .prose ul, html body .content-section .prose ol { padding-left: 22px; } html body .content-section .prose li { margin: 8px 0; } /* --------------------------------------------------------- Old SEO explainer cards --------------------------------------------------------- */ html body .seo-explainer-grid { display: block !important; } html body .seo-explainer-card { display: block !important; max-width: 820px; margin: 0 !important; padding: 30px 0 !important; border: 0 !important; border-top: 1px solid var(--v17-border) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body .seo-explainer-card:last-child { border-bottom: 1px solid var(--v17-border) !important; } html body .seo-explainer-card > span { display: none !important; } html body .seo-explainer-card h3 { max-width: 720px; margin: 0 0 12px !important; font-size: 25px !important; line-height: 1.2 !important; } html body .seo-explainer-card p, html body .seo-explainer-card li { max-width: 760px; color: #4a4741 !important; font-size: 16px !important; line-height: 1.75 !important; } /* --------------------------------------------------------- Jump links less "generated UI" --------------------------------------------------------- */ html body .content-jump { gap: 6px !important; margin-bottom: 36px !important; padding: 13px 0 !important; } html body .content-jump a { padding: 4px 0 !important; margin-right: 14px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #57534c !important; text-decoration: underline !important; text-decoration-color: #c5ad6b !important; text-underline-offset: 4px !important; } /* --------------------------------------------------------- Privacy / legal pages --------------------------------------------------------- */ body:has(.page-hero h1) .content-main { min-width: 0; } html body .content-section a, html body .content-answer a { color: #6f5310; text-decoration: underline; text-underline-offset: 3px; } /* --------------------------------------------------------- Mobile --------------------------------------------------------- */ @media (max-width: 767px) { html body .content-answer { padding-bottom: 24px !important; } html body .content-section { padding: 28px 0 !important; } html body .content-answer__body, html body .content-section .prose { font-size: 16px !important; line-height: 1.7 !important; } html body .content-jump { display: block !important; } html body .content-jump > span { display: block; margin-bottom: 8px; } html body .content-jump a { display: inline-block; margin: 3px 12px 3px 0 !important; } } /* AUKSOKAINA_EDITORIAL_CONTENT_V1_END */ /* ========================================================= AUKSOKAINA_24H_CHANGE_V1 ========================================================= */ .market-terminal__quote { display: flex; flex-direction: column; align-items: flex-end; } .market-terminal__change { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 6px; margin-top: 3px; font-weight: 800; line-height: 1.1; } .market-terminal__change > span { font-size: 15px; letter-spacing: -.015em; } .market-terminal__change > small { font-size: 10px; font-weight: 700; color: #8a867e; } .market-terminal__change.is-positive, [data-metric="change-24h"].is-positive { color: #178344 !important; } .market-terminal__change.is-negative, [data-metric="change-24h"].is-negative { color: #c63d3d !important; } .market-terminal__change.is-neutral, [data-metric="change-24h"].is-neutral { color: #77736b !important; } [data-metric="change-24h"] { transition: color .15s ease; } @media (max-width: 767px) { .market-terminal__change > span { font-size: 14px; } .market-terminal__change > small { font-size: 9px; } } /* AUKSOKAINA_24H_CHANGE_V1_END */