/* ===================================================================== PROMO BUY PAGES — shared stylesheet for the two promotional buy pages (/en/buy-silver-montreal/, /en/buy-gold-montreal/ and their French counterparts). The first block is the site chrome used across every page (nav, page header, trust strip, section headings, price tables, cards, steps, FAQ, CTA band, footer). The PROMO COMPONENTS block at the end adds the pieces specific to these pages: the live spot/premium band, the quantity calculator, the value stack and the compliance bar. Set --pm on to the page's accent (gold or silver) so both pages share one stylesheet while reading as two distinct offers. ===================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --nv: #0f1b35; --nv2: #1a3060; --gd: #f0b429; --gl: #fcd34d; --wh: #ffffff; --bg: #f4f6fa; --bg2: #eef1f8; --dt: #1a2340; --dm: #4a5568; --dl: #6b7280; --blue: #3b82f6; --green: #10b981; --r: 14px; --sh: 0 4px 24px rgba(15,27,53,.10); --shh: 0 8px 32px rgba(15,27,53,.18); } html { scroll-behavior: smooth; } body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--dt); background: #fff; line-height: 1.6; } a { text-decoration: none; color: inherit; } img { display: block; max-width: 100%; } /* NAV */ nav { background: var(--nv); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 16px rgba(0,0,0,.35); } .nw { max-width: 1200px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 16px; flex-wrap: wrap; } .logo { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .logo img { height: 44px; width: auto; } /* LIVE PRICE TICKER (nav) */ .ticker { display: flex; align-items: center; gap: 18px; } .tk { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; } .tk-metal { color: rgba(255,255,255,.62); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; } .tk-arrow { font-size: 10px; line-height: 1; } .tk-arrow.up { color: var(--green); } .tk-arrow.down { color: #ef4444; } .tk-price { color: var(--gd); font-size: 14px; font-weight: 800; } .tk-unit { color: rgba(255,255,255,.4); font-size: 10.5px; font-weight: 600; } @media (max-width: 1024px) { .nw { justify-content: center; } .logo { flex: 1 1 100%; justify-content: flex-start; } .ticker { flex: 1 1 100%; order: 2; justify-content: center; flex-wrap: wrap; gap: 10px 26px; margin-top: 2px; } .nr { flex: 1 1 100%; order: 3; justify-content: center; } } .nr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .nb { display: inline-flex; align-items: center; gap: 5px; padding: 9px 15px; border: 2px solid var(--gd); border-radius: 8px; color: var(--gd); font-weight: 600; font-size: 13px; white-space: nowrap; } .nb:hover { background: rgba(240,180,41,.12); } .nb .lbl-min { display: none; } .lang-pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; background: rgba(240,180,41,.16); border: 2px solid var(--gd); border-radius: 8px; color: var(--gl); font-weight: 800; font-size: 13px; white-space: nowrap; letter-spacing: .4px; } .lang-pill:hover { background: var(--gd); color: var(--nv); } .menu { position: relative; } .menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 9px 17px; background: var(--gd); color: var(--nv); border-radius: 8px; font-weight: 800; font-size: 13px; white-space: nowrap; user-select: none; } .menu > summary::-webkit-details-marker { display: none; } .menu > summary .mx { display: none; } .menu[open] > summary .mo { display: none; } .menu[open] > summary .mx { display: inline; } .menu-panel { position: absolute; top: calc(100% + 12px); right: 0; width: 266px; max-height: 72vh; overflow-y: auto; background: var(--nv2); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; box-shadow: 0 16px 44px rgba(0,0,0,.55); padding: 8px; z-index: 200; display: flex; flex-direction: column; gap: 2px; -webkit-overflow-scrolling: touch; } .menu-panel a { color: rgba(255,255,255,.9); font-size: 14px; font-weight: 600; padding: 12px 14px; border-radius: 8px; display: flex; align-items: center; gap: 10px; } .menu-panel a:hover { background: rgba(255,255,255,.08); color: var(--gd); } .menu-panel a[aria-current="page"] { background: rgba(240,180,41,.16); color: var(--gd); } .menu-sep { margin: 6px 6px 2px; border-top: 1px solid rgba(255,255,255,.12); } .ls { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border: 1.5px solid rgba(255,255,255,.3); border-radius: 8px; color: rgba(255,255,255,.8); font-size: 13px; font-weight: 600; } /* PAGE HEADER */ .phead { background: linear-gradient(135deg, var(--nv) 0%, var(--nv2) 100%); padding: 64px 24px 56px; text-align: center; } .phead .badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(240,180,41,.15); border: 1px solid rgba(240,180,41,.4); border-radius: 50px; padding: 6px 16px; color: var(--gd); font-size: 12.5px; font-weight: 700; margin-bottom: 20px; } .phead h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 14px; } .phead h1 em { color: var(--gd); font-style: normal; } /* Two-line H1 — the offer, then the promise. Both lines used to be styled inline in the markup, which left the phone tier no way to resize the second one; it inherited .52em of an already viewport-shrunk H1 and landed below body-copy size. Desktop values are unchanged. */ .phead h1 .ph-line { display: block; } .phead h1 .ph-sub { display: block; margin-top: 12px; font-size: .52em; line-height: 1.3; letter-spacing: .4px; } .phead p { color: rgba(255,255,255,.78); font-size: 1rem; max-width: 640px; margin: 0 auto 26px; } .phead .phead-lead { color: rgba(255,255,255,.88); font-size: clamp(1.09rem, 1.55vw, 1.3rem); line-height: 1.68; letter-spacing: .1px; max-width: 720px; margin: 0 auto 20px; text-wrap: pretty; } .phead .phead-lead em { color: var(--gl); font-style: normal; font-weight: 800; white-space: nowrap; } /* The promise line. These three or four points used to sit as clipped little sentences at the tail of the lead paragraph, where they read as one grey mush; as a spaced, dotted strip they scan in a glance and give the hero a beat of air before the feature cards. */ .phead-terms { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 30px; max-width: 720px; margin: 0 auto 30px; padding: 0; list-style: none; } .phead-terms li { position: relative; color: #fff; font-size: .79rem; font-weight: 800; letter-spacing: 1.35px; text-transform: uppercase; } .phead-terms li + li::before { content: ""; position: absolute; left: -17px; top: 50%; width: 5px; height: 5px; margin-top: -3px; border-radius: 50%; background: var(--gd); } .phead-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 760px; margin: 4px auto 28px; padding: 0; list-style: none; } .pfeat { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 9px; background: rgba(240,180,41,.09); border: 1px solid rgba(240,180,41,.30); border-radius: 14px; padding: 18px 14px; backdrop-filter: blur(2px); } .pfeat svg { width: 22px; height: 22px; color: var(--gd); flex-shrink: 0; } .pfeat strong { color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.25; letter-spacing: .1px; } .pfeat span { color: rgba(255,255,255,.6); font-size: 12px; line-height: 1.4; } .phead-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .hb1 { padding: 14px 30px; background: var(--gd); color: var(--nv); font-weight: 800; font-size: .95rem; border-radius: 10px; } .hb2 { padding: 14px 30px; background: transparent; color: #fff; font-weight: 700; font-size: .95rem; border-radius: 10px; border: 2px solid rgba(255,255,255,.35); } /* TRUST STRIP */ .trust { background: linear-gradient(180deg, #fff 0%, var(--bg) 100%); border-bottom: 1px solid var(--bg2); padding: 24px 20px; } .trust-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .trust-item { display: inline-flex; align-items: center; gap: 13px; padding: 6px 26px; position: relative; } .trust-item:not(:first-child)::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 38px; width: 1px; background: linear-gradient(180deg, transparent, var(--bg2) 22%, var(--bg2) 78%, transparent); } .trust-ic { width: 42px; height: 42px; border-radius: 11px; background: rgba(240,180,41,.13); border: 1px solid rgba(240,180,41,.30); color: var(--gd); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .trust-ic svg { width: 21px; height: 21px; display: block; } .trust-tx { display: flex; flex-direction: column; line-height: 1.22; } .trust-tx b { font-size: .95rem; font-weight: 800; color: var(--dt); letter-spacing: .2px; } .trust-tx span { font-size: .69rem; font-weight: 700; color: var(--dl); text-transform: uppercase; letter-spacing: .5px; } .trust-rate { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 1px; } .trust-rate .num { font-size: 1.02rem; font-weight: 900; color: var(--dt); line-height: 1; } .trust-rate .stars { color: var(--gd); font-size: .82rem; letter-spacing: 1.5px; } @media (max-width: 860px) { .trust-inner { gap: 12px; } .trust-item { flex: 1 1 42%; padding: 12px 14px; background: #fff; border: 1px solid var(--bg2); border-radius: 12px; box-shadow: var(--sh); } .trust-item:not(:first-child)::before { display: none; } } @media (max-width: 460px) { .trust-item { flex: 1 1 100%; } } /* SECTION HEADERS */ .slbl { text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; } .sh { text-align: center; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; color: var(--dt); margin-bottom: 8px; } .sd { text-align: center; color: var(--dm); font-size: .93rem; max-width: 620px; margin: 0 auto 36px; } /* PRICE TABLES — matches the prices page live-price panel design */ .prices { padding: 62px 24px; background: radial-gradient(1200px 520px at 50% -8%, rgba(240,180,41,.12), transparent 62%), linear-gradient(135deg, var(--nv) 0%, var(--nv2) 100%); } .prices .slbl { color: var(--gl); } .prices .sh { color: #fff; } .prices .sd { color: rgba(255,255,255,.74); } .ptables { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; } .ptable { background: linear-gradient(145deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 100%), linear-gradient(145deg, var(--nv) 0%, var(--nv2) 100%); border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.2); overflow: hidden; } .ptable .thead { padding: 20px 22px 14px; } .ptable .thead .thead-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ptable .thead h3 { color: #fff; font-size: 1.05rem; font-weight: 800; display: flex; align-items: center; gap: 9px; letter-spacing: .3px; } .ptable .thead h3 span { color: var(--gd); } .ptable .thead .plive { display: inline-flex; align-items: center; gap: 6px; font-size: .66rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--green); background: rgba(16,185,129,.14); border-radius: 50px; padding: 4px 10px; white-space: nowrap; } .ptable .thead .plive .pdot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: hpPulse 1.8s infinite; } @keyframes hpPulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); } 70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } } .ptable .thead p { color: rgba(255,255,255,.6); font-size: .74rem; margin-top: 6px; } table { width: 100%; border-collapse: collapse; table-layout: fixed; } .ptable th { text-align: left; font-size: .62rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,.7); padding: 11px 10px; border-bottom: 1px solid rgba(255,255,255,.16); } .ptable th.num { text-align: right; } .ptable th:first-child { width: 40%; } .ptable td:first-child, .ptable th:first-child { padding-left: 22px; } .ptable td:last-child, .ptable th:last-child { padding-right: 22px; } .ptable td { padding: 11px 10px; font-size: .86rem; color: rgba(255,255,255,.78); border-bottom: 1px solid rgba(255,255,255,.08); } .ptable tr:last-child td { border-bottom: none; } .ptable td.item { color: #fff; font-weight: 700; } .ptable td.item small { display: block; color: var(--gl); font-weight: 600; font-size: .68rem; letter-spacing: .3px; margin-top: 2px; } .ptable td.unit { color: rgba(255,255,255,.55); font-size: .8rem; } .ptable td.desc { color: rgba(255,255,255,.78); font-size: .8rem; line-height: 1.45; } .ptable td.price { text-align: right; color: var(--gd); font-weight: 800; white-space: nowrap; } .ptable td.price.tbd { color: rgba(255,255,255,.55); font-weight: 700; font-size: .78rem; } .ptable tr.bullion td { background: rgba(240,180,41,.08); } /* Single centred table when the section renders one combined product list */ .ptables.single { grid-template-columns: 1fr; max-width: 760px; } .ptables.single .ptable th:first-child { width: 32%; } /* Wider variant for the three-column price comparison. The right-hand column carries a short phrase rather than a figure — we publish our own numbers, not a competitor's, so it names the line item and leaves the reader to fill in a real checkout total. */ .ptables.single.wide { max-width: 940px; } .ptables.single.wide .ptable th:first-child { width: 34%; } .ptable td.vs { text-align: right; color: rgba(255,255,255,.62); font-size: .8rem; line-height: 1.45; } .pnote { max-width: 1040px; margin: 28px auto 0; background: var(--bg); border-radius: var(--r); padding: 22px 26px; font-size: .84rem; color: var(--dm); line-height: 1.7; } .pnote strong { color: var(--dt); } /* WHAT WE CARRY */ .buy { background: var(--bg); padding: 60px 24px; } .cg { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .card { background: var(--wh); border-radius: var(--r); padding: 26px 22px 22px; box-shadow: var(--sh); } .ci { width: 46px; height: 46px; background: var(--bg); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 21px; margin-bottom: 14px; } .card h3 { font-size: .98rem; font-weight: 700; margin-bottom: 10px; } .card ul { list-style: none; } .card ul li { font-size: .84rem; color: var(--dm); padding: 6px 0 6px 15px; position: relative; border-bottom: 1px solid var(--bg2); } .card ul li:last-child { border-bottom: none; } .card ul li::before { content: "—"; color: var(--gd); position: absolute; left: 0; } .buy-note { max-width: 1100px; margin: 18px auto 0; text-align: center; font-size: .82rem; color: var(--dm); } /* WHY */ .feat { padding: 66px 24px; background: #fff; } .feat-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; } .fl { list-style: none; } .fl li { display: flex; gap: 12px; margin-bottom: 20px; align-items: flex-start; } .fck { width: 26px; height: 26px; background: rgba(240,180,41,.14); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--gd); flex-shrink: 0; margin-top: 2px; font-weight: 800; } .ftx strong { display: block; font-size: .91rem; font-weight: 700; color: var(--dt); margin-bottom: 2px; } .ftx span { font-size: .82rem; color: var(--dm); } .feat-img { border-radius: 18px; overflow: hidden; box-shadow: var(--shh); } .feat-img img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; } /* STEPS */ .hiw { background: var(--bg); padding: 66px 24px; } .sg { max-width: 940px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .step { background: var(--wh); border-radius: var(--r); padding: 34px 18px 22px; box-shadow: var(--sh); text-align: center; position: relative; } .snum { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; background: var(--gd); color: var(--nv); border-radius: 50%; font-size: .78rem; font-weight: 800; display: flex; align-items: center; justify-content: center; } .sico { font-size: 2rem; margin-bottom: 12px; } .step h3 { font-size: .91rem; font-weight: 700; margin-bottom: 7px; } .step p { font-size: .8rem; color: var(--dm); } /* FAQ */ .faq { padding: 66px 24px; background: #fff; } .fql { max-width: 780px; margin: 0 auto; } .fi { border: 1.5px solid var(--bg2); border-radius: 10px; margin-bottom: 12px; overflow: hidden; } .fi[open] { border-color: rgba(240,180,41,.5); box-shadow: var(--sh); } .fqr { padding: 17px 21px; font-weight: 700; font-size: .95rem; color: var(--dt); display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; list-style: none; } .fqr::-webkit-details-marker { display: none; } .fqa { color: var(--gd); flex-shrink: 0; font-size: 1.4rem; line-height: 1; transition: transform .2s ease; } .fi[open] .fqa { transform: rotate(90deg); } .fans { padding: 0 21px 18px; font-size: .88rem; color: var(--dm); line-height: 1.7; } .faq-note { max-width: 780px; margin: 28px auto 0; background: var(--bg); border-radius: var(--r); padding: 22px 26px; font-size: .86rem; color: var(--dm); line-height: 1.7; text-align: center; } .faq-note a { color: var(--blue); font-weight: 700; } /* CTA BAND */ .cband { background: linear-gradient(135deg, var(--nv) 0%, var(--nv2) 100%); padding: 62px 24px; text-align: center; } .cband h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); font-weight: 800; color: #fff; margin-bottom: 11px; } .cband p { color: rgba(255,255,255,.72); font-size: .96rem; max-width: 520px; margin: 0 auto 28px; } .cr { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .bcg { padding: 15px 38px; background: var(--gd); color: var(--nv); font-weight: 800; font-size: .96rem; border-radius: 10px; } .bcw { padding: 15px 38px; background: transparent; color: #fff; font-weight: 700; font-size: .96rem; border-radius: 10px; border: 2px solid rgba(255,255,255,.35); } /* FOOTER */ footer { background: #080f1f; color: rgba(255,255,255,.6); padding: 48px 24px 26px; } .fw { max-width: 1100px; margin: 0 auto; } .fgrid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 32px; } .fbrand-lockup { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .fbrand-lockup img { height: 38px; width: auto; } .fbrand-name { color: #fff; font-size: 1rem; font-weight: 900; letter-spacing: .7px; line-height: 1; } .fbrand-name span { color: var(--gd); } .fbrand-name small { display: block; margin-top: 5px; color: rgba(255,255,255,.72); font-size: .54rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; } .fbrand p { font-size: .81rem; line-height: 1.65; color: rgba(255,255,255,.5); } .fbrand p strong { color: rgba(255,255,255,.9); font-weight: 700; } .rbgs { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; } .rbg { background: rgba(240,180,41,.1); border: 1px solid rgba(240,180,41,.3); border-radius: 5px; padding: 3px 9px; font-size: .68rem; color: var(--gd); font-weight: 600; } .fcol h3 { color: var(--gd); font-size: .73rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 13px; } .fcol ul { list-style: none; } .fcol ul li { margin-bottom: 9px; } .fcol ul li a { color: rgba(255,255,255,.55); font-size: .82rem; } .fbot { border-top: 1px solid rgba(255,255,255,.08); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: .74rem; } .fbot a { color: var(--gd); } /* RESPONSIVE */ @media (max-width: 900px) { .feat-grid { grid-template-columns: 1fr; } .feat-img { order: -1; } } @media (max-width: 860px) { .ptables { grid-template-columns: 1fr; } } @media (max-width: 720px) { .fgrid { grid-template-columns: 1fr 1fr; } } @media (max-width: 460px) { .fgrid { grid-template-columns: repeat(3, 1fr); } } /* ===================================================================== MOBILE REFORMAT — small-screen overrides for a clean phone layout. ===================================================================== */ @media (max-width: 600px) { .nw { padding: 8px 14px; min-height: 0; row-gap: 10px; column-gap: 8px; align-items: center; } .logo { flex: 0 1 auto; order: 1; justify-content: flex-start; margin-right: auto; gap: 2px; } .lang-pill { order: 2; } .menu { order: 3; } .ticker { order: 4; flex: 1 1 100%; margin-top: 0; } .nr .nb:nth-of-type(1) { order: 5; } .nr .nb:nth-of-type(3) { order: 6; } .nr .nb:nth-of-type(2) { order: 7; } .nr .nb { flex: 1 1 0; min-width: 0; justify-content: center; } .nr .nb .lbl-full { display: none; } .nr .nb .lbl-min { display: inline; } .logo img { height: 36px; } .nr { display: contents; } .nr .nb, .lang-pill, .menu > summary { font-size: 12px; padding: 9px 13px; } .menu-panel { width: 260px; max-width: calc(100vw - 24px); } .menu-panel a { padding: 14px; font-size: 15px; } .phead, .buy, .feat, .hiw, .faq, .cband, .prices, .trust, footer { padding-left: 16px; padding-right: 16px; } .phead { padding-top: 44px; padding-bottom: 40px; } .buy, .feat, .hiw, .faq, .prices { padding-top: 46px; padding-bottom: 46px; } .cband { padding-top: 46px; padding-bottom: 46px; } .trust { padding-top: 22px; padding-bottom: 22px; } footer { padding-top: 40px; padding-bottom: 24px; } /* --- HEADINGS: one descending ramp for the phone ---------------------- H1 offer line > H1 promise line > section H2 > CTA H2 > band H2 > body. The H1 carries two separate statements, and on a phone the offer line wraps to two or three rows, so widening the gap between them was not enough: at a near-identical size and weight the promise still read as one more row of the same sentence. Three things now hold them apart — the H1 is a flex column, which blockifies both parts so they can never share a row whatever later rule touches their `display`; the promise drops to a clearly subordinate size; and a short accent rule marks the break. The !important flags and the body[data-promo-metal] prefix exist purely to outrank the site-wide `.phead h1` and `.phead h1 *` blocks in responsive-fixes.css, which loads after this file. */ body[data-promo-metal] .phead h1 { display: flex !important; flex-direction: column; font-size: min(6.6vw, 2rem) !important; line-height: 1.16; margin-bottom: 22px; } body[data-promo-metal] .phead h1 .ph-line { display: block !important; width: 100%; } body[data-promo-metal] .phead h1 .ph-sub { display: block !important; width: 100%; margin-top: 20px; font-size: min(4.4vw, 1.08rem); font-weight: 800; line-height: 1.34; letter-spacing: .3px; text-wrap: balance; } body[data-promo-metal] .phead h1 .ph-sub::before { content: ""; display: block; width: 46px; height: 2px; margin: 0 auto 14px; border-radius: 2px; background: currentColor; opacity: .5; } .phead .badge { font-size: 11.8px; line-height: 1.3; padding: 6px 13px; margin-bottom: 14px; letter-spacing: .1px; } .sh { font-size: min(5.6vw, 1.42rem); line-height: 1.26; } .cband h2 { font-size: min(6vw, 1.55rem); line-height: 1.24; } /* --- PARAGRAPHS: give the copy a shape ------------------------------- Centred prose on a 360px screen turns into a ragged wedge five or six lines deep. Headings stay centred; the long paragraphs go left-aligned so they read as blocks, and the smallest body copy comes up to a consistent floor instead of dropping to 12–13px. */ .phead .phead-lead { font-size: min(4.5vw, 1.08rem); line-height: 1.62; text-align: left; margin-bottom: 20px; } .sd { font-size: min(4.1vw, 1rem); line-height: 1.62; text-align: left; text-wrap: pretty; margin-bottom: 28px; } .fans { font-size: .93rem; line-height: 1.7; } .step p, .card ul li, .pstack-col li { font-size: .89rem; } .buy-note, .cband p { font-size: .93rem; } .pnote { font-size: .89rem; padding: 18px; } .faq-note { font-size: .9rem; padding: 18px; } /* --- THE PROMISE ROW: chips, not dotted fragments --------------------- As a wrapping flex row the four items broke into uneven lines and the absolutely positioned dot separators floated out into the left margin. A 2x2 grid wraps predictably and needs no separators at all. */ .phead-terms { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 420px; margin: 0 auto 22px; } .phead-terms li { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 7px 6px; background: rgba(240,180,41,.10); border: 1px solid rgba(240,180,41,.32); border-radius: 9px; font-size: .74rem; letter-spacing: .5px; line-height: 1.2; text-align: center; } .phead-terms li + li::before { content: none; } .phead-feats { grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 24px; } .pfeat { padding: 15px 11px; gap: 8px; border-radius: 12px; } .pfeat span { line-height: 1.38; } .phead-ctas { gap: 10px; } .phead-ctas .hb1, .phead-ctas .hb2 { width: 100%; text-align: center; } .cr { flex-direction: column; } .cr .bcg, .cr .bcw { width: 100%; text-align: center; } /* Price tables scroll gracefully on phones */ .ptable { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ptable table { min-width: 0; width: 100%; } .ptable th, .ptable td { padding: 9px 8px; font-size: .78rem; } .ptable td:first-child, .ptable th:first-child { padding-left: 12px; } .ptable td:last-child, .ptable th:last-child { padding-right: 12px; } .ptable td.vs { font-size: .72rem; line-height: 1.35; } .ptables { gap: 18px; } .fgrid { grid-template-columns: repeat(3, 1fr); gap: 22px 12px; } .fbrand { grid-column: 1 / -1; } .fcol ul li a { font-size: .78rem; } .rbgs { flex-wrap: wrap; gap: 6px; } .rbg { padding: 3px 6px; font-size: .62rem; } .fbot { flex-direction: column; text-align: center; gap: 6px; } } @media (max-width: 380px) { .nr .nb, .lang-pill, .menu > summary { font-size: 11px; padding: 8px 11px; } .fgrid { grid-template-columns: repeat(3, 1fr); } /* Never larger than the 600px tier above, or the H1 sprawls. */ body[data-promo-metal] .phead h1 { font-size: min(6.4vw, 1.62rem) !important; } body[data-promo-metal] .phead h1 .ph-sub { margin-top: 17px; font-size: min(4.3vw, .98rem); } body[data-promo-metal] .phead h1 .ph-sub::before { width: 40px; margin-bottom: 12px; } .phead .badge { font-size: 11px; padding: 5px 11px; } .phead-terms li { font-size: .7rem; letter-spacing: .3px; } } /* ===================================================================== PROMO COMPONENTS — specific to the two promotional buy pages. --pm : page metal accent used on dark backgrounds --pm-ink : the same accent darkened enough to read on light backgrounds --pm-soft : translucent accent for fills and hairlines ===================================================================== */ body { --pm: var(--gd); --pm-ink: #a9750a; --pm-soft: rgba(240,180,41,.14); } body.metal-silver { --pm: #d3dcea; --pm-ink: #56688a; --pm-soft: rgba(156,175,205,.18); } /* METAL SWITCH — silver/gold tabs so a visitor who lands on the wrong metal (or arrives from the retired combined page) is one tap from the other. */ .mswitch { background: #0b1730; border-bottom: 1px solid rgba(255,255,255,.09); padding: 10px 24px; } .mswitch-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mswitch-lbl { color: rgba(255,255,255,.45); font-size: .68rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; margin-right: 4px; } .mtab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 17px; border-radius: 50px; border: 1.5px solid rgba(255,255,255,.16); color: rgba(255,255,255,.7); font-size: .82rem; font-weight: 700; } .mtab:hover { border-color: var(--pm); color: #fff; } .mtab[aria-current="page"] { background: var(--pm); border-color: var(--pm); color: #10203d; } /* LIVE PRICE BAND — the promotional price itself: live spot from the shop's sheet, the premium we add, and the resulting per-ounce price. */ .pband { background: radial-gradient(900px 380px at 50% -30%, var(--pm-soft), transparent 60%), linear-gradient(135deg, #0b1730 0%, var(--nv2) 100%); padding: 34px 24px 38px; border-top: 1px solid rgba(255,255,255,.08); } .pband-head { max-width: 1120px; margin: 0 auto 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .pband-head h2 { color: #fff; font-size: 1.12rem; font-weight: 800; letter-spacing: .2px; } .pband-head .plive { display: inline-flex; align-items: center; gap: 6px; font-size: .66rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--green); background: rgba(16,185,129,.14); border-radius: 50px; padding: 5px 11px; } .pband-head .plive .pdot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: hpPulse 1.8s infinite; } .pband-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } /* The gold page quotes two promotional tiers — per ounce on coins and 1 oz bars, per gram on the small bars — so its band carries a fifth tile. */ .pband-grid.tiers-5 { grid-template-columns: repeat(5, 1fr); } .ptile { background: linear-gradient(150deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%); border: 1px solid rgba(255,255,255,.16); border-radius: 15px; padding: 20px 18px; text-align: center; } .ptile-lbl { display: block; color: rgba(255,255,255,.58); font-size: .69rem; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; margin-bottom: 9px; } .ptile-val { display: block; color: #fff; font-size: clamp(1.25rem, 2.4vw, 1.72rem); font-weight: 900; line-height: 1.1; letter-spacing: -.4px; font-variant-numeric: tabular-nums; } .ptile-sub { display: block; color: rgba(255,255,255,.45); font-size: .72rem; margin-top: 6px; } .ptile.is-premium { border-color: var(--pm); background: var(--pm-soft); } .ptile.is-premium .ptile-val { color: var(--pm); } .ptile.is-total { border-color: rgba(255,255,255,.3); background: linear-gradient(150deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.06) 100%); } .ptile.is-total .ptile-lbl { color: rgba(255,255,255,.75); } /* Special-pricing badge. Marks the promotional rate wherever it is quoted, so the offer reads as a standing promotion rather than a routine price list. The dark variant sits on the price band, the light one on white sections where the silver accent has too little contrast to carry text. */ .ppromo { display: inline-flex; align-items: center; gap: 7px; font-size: .66rem; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--pm); background: var(--pm-soft); border: 1px solid var(--pm); border-radius: 50px; padding: 5px 12px; } .ppromo-light { color: var(--pm-ink); background: var(--pm-soft); border-color: var(--pm-ink); } .pband-head .pband-title { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .pband-foot { max-width: 1120px; margin: 16px auto 0; color: rgba(255,255,255,.5); font-size: .77rem; text-align: center; line-height: 1.6; } .pband-foot b { color: rgba(255,255,255,.8); font-weight: 700; } /* VALUE STACK — what the premium does and does not include. */ .pstack { padding: 60px 24px; background: #fff; } .pstack-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .pstack-col { border-radius: 16px; padding: 26px 26px 22px; border: 1px solid var(--bg2); } .pstack-col.yes { background: linear-gradient(180deg, #f7fbf9 0%, #fff 100%); border-color: rgba(16,185,129,.3); } .pstack-col.no { background: linear-gradient(180deg, var(--bg) 0%, #fff 100%); } .pstack-col h3 { font-size: .96rem; font-weight: 800; margin-bottom: 16px; display: flex; align-items: center; gap: 9px; } .pstack-col ul { list-style: none; } .pstack-col li { font-size: .86rem; color: var(--dm); padding: 9px 0 9px 27px; position: relative; border-bottom: 1px solid var(--bg2); line-height: 1.55; } .pstack-col li:last-child { border-bottom: none; } .pstack-col li strong { color: var(--dt); font-weight: 700; } .pstack-col.yes li::before { content: "\2713"; position: absolute; left: 0; top: 9px; color: var(--green); font-weight: 900; } .pstack-col.no li::before { content: "\2715"; position: absolute; left: 2px; top: 9px; color: #ef4444; font-weight: 900; font-size: .82rem; } /* SAMPLE CALCULATION — shows the arithmetic behind the promotional price. */ .pcalcbox { background: #fff; border-radius: 16px; border: 1px solid rgba(255,255,255,.2); } .prow { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px dashed rgba(255,255,255,.14); font-size: .88rem; } .prow:last-of-type { border-bottom: none; } .prow .prow-l { color: rgba(255,255,255,.7); } .prow .prow-v { color: #fff; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; } .prow .prow-v.accent { color: var(--pm); } .prow.total { border-top: 2px solid rgba(255,255,255,.25); border-bottom: none; margin-top: 6px; padding-top: 15px; } .prow.total .prow-l { color: #fff; font-weight: 700; } .prow.total .prow-v { font-size: 1.2rem; } /* COMPLIANCE BAR */ .pcompliance { background: #0b1730; color: rgba(255,255,255,.6); padding: 26px 24px; font-size: .8rem; line-height: 1.7; text-align: center; } .pcompliance-inner { max-width: 900px; margin: 0 auto; } .pcompliance strong { color: rgba(255,255,255,.88); font-weight: 700; } /* CROSS-LINK to the other metal's promotional page. */ .pcross { max-width: 1000px; margin: 0 auto; padding: 0 24px 60px; } .pcross-card { display: flex; align-items: center; gap: 20px; background: var(--bg); border: 1px solid var(--bg2); border-left: 4px solid var(--gd); border-radius: 14px; padding: 22px 26px; flex-wrap: wrap; } .pcross-card .pcross-ico { font-size: 2rem; line-height: 1; } .pcross-card div { flex: 1 1 240px; min-width: 0; } .pcross-card strong { display: block; font-size: 1rem; font-weight: 800; color: var(--dt); margin-bottom: 3px; } .pcross-card span { font-size: .85rem; color: var(--dm); } .pcross-card a.pcross-cta { padding: 12px 24px; background: var(--gd); color: var(--nv); font-weight: 800; font-size: .87rem; border-radius: 9px; white-space: nowrap; } /* PRODUCT TABLE — the premium column is specific to these pages. */ .ptable td.prem { text-align: right; color: rgba(255,255,255,.62); font-size: .79rem; white-space: nowrap; font-variant-numeric: tabular-nums; } .ptable th.num.prem-h { text-align: right; } @media (max-width: 900px) { .pband-grid, .pband-grid.tiers-5 { grid-template-columns: repeat(2, 1fr); } .pstack-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .mswitch { padding: 10px 16px; } .mswitch-lbl { flex: 1 1 100%; margin-bottom: 2px; } .mtab { flex: 1 1 0; justify-content: center; padding: 10px 12px; } .pband { padding: 26px 16px 30px; } /* The band head was a space-between flex row, so on a phone the "Live" pill dropped under a heading that was itself left-ragged against the centred tiles below. Stack all three, centred, in reading order. */ .pband-head { flex-direction: column; align-items: center; text-align: center; gap: 9px; margin-bottom: 16px; } .pband-head .pband-title { align-items: center; gap: 8px; } .pband-head h2 { font-size: min(4.4vw, 1.06rem); line-height: 1.35; text-wrap: balance; } .pband-grid { gap: 10px; } .ptile { padding: 16px 12px; border-radius: 13px; } .ptile-lbl { font-size: .63rem; letter-spacing: .8px; } .pband-foot { font-size: .82rem; line-height: 1.62; text-align: left; margin-top: 14px; } .pexp-box { padding: 20px 18px 18px; } .pexp-txt p { font-size: .92rem; } .pcompliance { font-size: .84rem; text-align: left; padding: 24px 16px; } .pstack { padding-left: 16px; padding-right: 16px; padding-top: 44px; padding-bottom: 44px; } .pcross { padding-left: 16px; padding-right: 16px; padding-bottom: 46px; } .pcross-card { padding: 20px; } .pcross-card a.pcross-cta { width: 100%; text-align: center; } } /* PRICE EXPLAINER — the sample calculation beside the plain-language reason the premium is what it is. Sits on the dark .prices background. */ .pexp-grid { max-width: 1010px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; } .pexp-box { background: linear-gradient(150deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.035) 100%); border: 1px solid rgba(255,255,255,.2); border-radius: 16px; padding: 24px 26px 22px; } .pexp-box h3 { color: #fff; font-size: 1rem; font-weight: 800; margin-bottom: 10px; } .pexp-box > p.pexp-cap { color: rgba(255,255,255,.5); font-size: .76rem; margin-bottom: 12px; } .pexp-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.52); font-size: .77rem; line-height: 1.6; } .pexp-txt h3 { color: #fff; font-size: 1rem; font-weight: 800; margin-bottom: 12px; } .pexp-txt p { color: rgba(255,255,255,.72); font-size: .88rem; line-height: 1.75; margin-bottom: 13px; } .pexp-txt p:last-child { margin-bottom: 0; } .pexp-txt strong { color: var(--pm); font-weight: 700; } @media (max-width: 900px) { .pexp-grid { grid-template-columns: 1fr; } }