/* Alloy Capital Commodities Inc. — site styles Fonts: Bodoni Moda (display), Familjen Grotesk (UI), IBM Plex Mono (data). To remove the third-party font request, drop WOFF2 files into assets/fonts/ and replace the in each page's with the @font-face block noted in README.md. */ :root { --porcelain: #F3F4F1; --paper: #FFFFFF; --graphite: #101413; --slate: #6C7573; --slate-dim: #8C948F; --mist: #C9CFCB; --rule: #D8DAD5; --vault: #123B33; --vault-deep: #0B2A24; --assay: #A8874C; --assay-lift: #B99A5E; --assay-light: #C4A468; --bid: #1E6E52; --ask: #9E3B24; --display: 'Bodoni Moda', Didot, 'Times New Roman', serif; --sans: 'Familjen Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; --max: 1320px; --gutter: clamp(20px, 4vw, 32px); --rhythm: clamp(72px, 9vw, 140px); --ease: cubic-bezier(.16, .84, .44, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--porcelain); color: var(--graphite); font: 400 17px/1.65 var(--sans); overflow-wrap: break-word; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: var(--vault); text-decoration: none; } a:hover { color: var(--vault-deep); } button, input, select, textarea { font-family: inherit; } :focus-visible { outline: 2px solid var(--vault); outline-offset: 3px; } ::selection { background: var(--vault); color: var(--porcelain); } /* ---------- primitives ---------- */ .wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .section { padding-top: var(--rhythm); padding-bottom: var(--rhythm); } .section--tight-top { padding-top: clamp(48px, 6vw, 80px); } .section--no-top { padding-top: 0; } .section--no-bottom { padding-bottom: 0; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .04em; } .eyebrow { margin: 0 0 20px; font: 500 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--slate); } .eyebrow--light { color: var(--mist); } h1, h2, h3 { text-wrap: pretty; } .h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(32px, 6.2vw, 76px); line-height: 1; letter-spacing: -.02em; } .h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 1.02; letter-spacing: -.02em; } .h3 { margin: 0; font: 500 22px var(--sans); letter-spacing: -.01em; } .lede { margin: 0; max-width: 68ch; } .small { font-size: 15px; line-height: 1.6; } .footnote { margin: 0; font-size: 14px; line-height: 1.6; color: var(--slate); } .btn { display: inline-block; border: 1px solid transparent; border-radius: 2px; padding: 16px 28px; font: 500 15px var(--sans); cursor: pointer; transition: background 180ms ease, border-color 180ms ease, color 180ms ease; } .btn--solid { background: var(--vault); color: #fff; } .btn--solid:hover { background: var(--vault-deep); color: #fff; } .btn--ghost { border-color: rgba(255, 255, 255, .7); color: #fff; } .btn--ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; } .btn--brass { background: var(--assay); color: var(--graphite); } .btn--brass:hover { background: var(--assay-lift); color: var(--graphite); } .btn--outline-light { border-color: rgba(255, 255, 255, .5); color: #fff; font-family: var(--mono); font-weight: 400; font-variant-numeric: tabular-nums; } .btn--outline-light:hover { background: rgba(255, 255, 255, .1); color: #fff; } .btn--block { display: block; width: 100%; min-height: 50px; font-size: 16px; } /* brass underline drawn left to right */ .ul { padding-bottom: 2px; background-image: linear-gradient(var(--assay), var(--assay)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size 180ms ease; } .ul:hover, .ul[aria-current="page"] { background-size: 100% 1px; } /* ---------- hallmark rule ---------- */ .hallmark { display: flex; align-items: center; width: 100%; } .hallmark__short { flex: 0 0 30%; height: 1px; background: var(--rule); } .hallmark__long { flex: 1 1 auto; height: 1px; background: var(--rule); } .hallmark__stamp { position: relative; flex: 0 0 auto; width: 36px; height: 32px; margin: 0 12px; } .hallmark__stamp span { position: absolute; inset: 0; display: grid; place-items: center; font: 400 11.5px var(--mono); font-variant-numeric: tabular-nums; color: var(--assay); transform: translateY(-.5px); } .hallmark--light .hallmark__short, .hallmark--light .hallmark__long { background: rgba(255, 255, 255, .24); } .hallmark--light .hallmark__stamp span { color: var(--assay-light); } /* ---------- header ---------- */ .site-head { position: sticky; top: 0; z-index: 120; background: rgba(243, 244, 241, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); } .site-head__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 82px; } .brand { display: flex; align-items: center; gap: 12px; color: var(--graphite); } .brand__mark { position: relative; flex: 0 0 auto; width: 34px; height: 34px; background: var(--vault); display: grid; place-items: center; } .brand__mark i { font: 400 21px var(--display); font-style: normal; color: var(--porcelain); line-height: 1; padding-bottom: 5px; } .brand__mark::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 8px; height: 1px; background: var(--assay); } .brand__name { display: block; font: 400 20px var(--display); letter-spacing: .04em; line-height: 1.1; } .brand__sub { display: block; font: 500 10px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--slate); line-height: 1.4; } .nav { display: flex; align-items: center; gap: 32px; } .nav a:not(.btn) { font: 500 14px var(--sans); color: var(--graphite); } .nav a.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 400; font-size: 14px; letter-spacing: .02em; } .nav .btn { padding: 13px 22px; font: 500 14px var(--sans); } .nav a.btn--solid { color: #fff; } .nav a.btn--solid:hover { background: var(--vault-deep); color: #fff; } .burger { display: none; width: 46px; height: 46px; padding: 0; background: none; border: 1px solid var(--rule); border-radius: 2px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .burger span { display: block; width: 20px; height: 1px; background: var(--graphite); } .menu { position: fixed; inset: 0; z-index: 9999; background: var(--porcelain); display: none; flex-direction: column; padding: 28px 24px 40px; } .menu[data-open="true"] { display: flex; } .menu__top { display: flex; align-items: center; justify-content: space-between; } .menu__close { width: 46px; height: 46px; padding: 0; background: none; border: 1px solid var(--rule); border-radius: 2px; display: grid; place-items: center; cursor: pointer; } .menu__nav { margin-top: 56px; display: flex; flex-direction: column; } .menu__nav a { font: 400 32px var(--display); letter-spacing: -.02em; color: var(--graphite); padding: 20px 0; border-bottom: 1px solid var(--rule); } .menu__nav a.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 400; } .menu .btn { margin-top: auto; text-align: center; padding: 18px; font-size: 16px; } /* ---------- hero ---------- */ .hero { position: relative; background: var(--graphite); overflow: hidden; min-height: min(88svh, 860px); } .hero__media { position: absolute; inset: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(16, 20, 19, .86) 0%, rgba(16, 20, 19, .62) 40%, rgba(16, 20, 19, 0) 74%); } .hero__inner { position: relative; min-height: min(88svh, 860px); display: flex; flex-direction: column; justify-content: center; padding-top: clamp(72px, 10vh, 132px); padding-bottom: clamp(40px, 6vh, 56px); } .hero__content { max-width: 900px; } .hero .h1 { color: #fff; } .hero .h1 span { display: block; animation: acLine 480ms var(--ease) both; } .hero .h1 span:nth-child(2) { animation-delay: 60ms; } .hero .h1 span:nth-child(3) { animation-delay: 120ms; } .hero__lede { margin: 28px 0 0; max-width: 58ch; color: rgba(255, 255, 255, .82); } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; } @keyframes acLine { from { clip-path: inset(0 0 108% 0); opacity: 0; } to { clip-path: inset(0 0 -8% 0); opacity: 1; } } /* page header (contact) */ .pagehead { position: relative; background: var(--graphite); overflow: hidden; min-height: min(52svh, 560px); } .pagehead__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(16, 20, 19, .86) 0%, rgba(16, 20, 19, .6) 44%, rgba(16, 20, 19, .12) 100%); } .pagehead__inner { position: relative; min-height: min(52svh, 560px); display: flex; flex-direction: column; justify-content: center; padding-top: clamp(40px, 6vh, 112px); padding-bottom: clamp(36px, 5vh, 80px); } .pagehead .h1 { color: #fff; animation: acLine 480ms var(--ease) both; } .pagehead__lede { margin: 24px 0 0; max-width: 56ch; color: rgba(255, 255, 255, .82); } .pagehead__media { position: absolute; inset: 0; } .pagehead__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; } /* ---------- reveals ---------- */ .reveal { will-change: opacity; transition: opacity 500ms var(--ease), transform 500ms var(--ease); } .reveal[data-hidden="true"] { opacity: 0; transform: translateY(16px); } /* ---------- the desk ---------- */ .split { display: flex; flex-wrap: wrap; gap: 48px 80px; } .split__lead { flex: 1 1 380px; min-width: 0; } .split__body { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 22px; } .stats { margin-top: 64px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 0 48px; } .stats > div { flex: 1 1 240px; padding: 22px 0; border-bottom: 1px solid var(--rule); font: 500 14px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .05em; } /* ---------- image plate ---------- */ .plate { margin: 0; width: 100%; } .plate__frame { border: 1px solid var(--rule); background: var(--porcelain); padding: 12px; } .plate__crop { width: 100%; overflow: hidden; background: #E6E8E3; aspect-ratio: 16 / 9; } .plate__crop img { width: 100%; height: 100%; object-fit: cover; transition: transform 520ms var(--ease); } .plate:hover .plate__crop img { transform: scale(1.02); } /* ---------- services ---------- */ .cards { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .card { background: var(--paper); padding: 34px 30px 30px; display: flex; flex-direction: column; gap: 14px; } .card__ref { font: 400 12px var(--mono); letter-spacing: .1em; color: var(--assay); } .card p { margin: 0; font-size: 15px; line-height: 1.6; } .card .ul { margin-top: auto; align-self: flex-start; font: 500 14px var(--sans); } /* ---------- settlement steps ---------- */ .steps { margin-top: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .step { position: relative; min-width: 0; border-top: 1px solid var(--rule); padding: 28px 28px 0 0; } .step:last-child { padding-right: 0; padding-left: 28px; } .step:not(:first-child):not(:last-child) { padding-left: 28px; } .step__node { position: absolute; top: -4px; left: 0; width: 9px; height: 9px; background: var(--assay); } .step__meta { display: flex; align-items: baseline; gap: 14px; font: 500 14px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .05em; } .step__meta span:last-child { color: var(--slate); } .step h3 { margin: 16px 0 10px; } .step p { margin: 0; font-size: 15px; line-height: 1.6; } /* full-bleed image band */ .band { position: relative; height: clamp(320px, 42vw, 520px); background: var(--graphite); } .band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---------- custody ---------- */ .custody { position: relative; background: var(--graphite); overflow: hidden; } .custody__media { position: absolute; inset: 0; opacity: .3; } .custody__media img { width: 100%; height: 100%; object-fit: cover; } .custody__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(16, 20, 19, .72), rgba(16, 20, 19, .86)); } .custody__inner { position: relative; } .custody__cols { display: flex; flex-wrap: wrap; gap: 56px 80px; margin-top: 56px; } .custody__text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; color: rgba(255, 255, 255, .82); } .custody__text p { margin: 0; max-width: 60ch; } .spec { flex: 1 1 400px; min-width: 0; margin: 0; border-top: 1px solid rgba(255, 255, 255, .24); } .spec > div { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); font: 400 12px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .05em; } .spec dt { margin: 0; color: var(--slate-dim); } .spec dd { margin: 0; color: #fff; text-align: right; } /* ---------- inventory ---------- */ .inv__head { margin-top: 0; display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-end; justify-content: space-between; } .inv__grid { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 4vw, 32px); } .inv__item { display: flex; flex-direction: column; gap: 18px; } .inv__item .plate__crop { aspect-ratio: 4 / 5; } .inv__name { margin: 0 0 8px; font: 500 18px var(--sans); } .inv__spec { margin: 0; font: 400 12px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .05em; color: var(--slate); } .inv__spec b { font-weight: 400; color: var(--assay); } /* ---------- pull quote ---------- */ .quote { margin: 0 auto; max-width: 860px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 36px; } .quote__rule { width: 96px; height: 1px; background: var(--assay); } .quote p { margin: 0; font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(24px, 3vw, 32px); line-height: 1.3; letter-spacing: -.01em; } .quote cite { font: 400 12px var(--mono); font-style: normal; letter-spacing: .06em; color: var(--slate); } /* ---------- FAQ ---------- */ .faq { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 48px 80px; } .faq__lead { flex: 1 1 300px; min-width: 0; } .faq__list { flex: 1 1 520px; min-width: 0; border-top: 1px solid var(--rule); } .faq__row { border-bottom: 1px solid var(--rule); } .faq__q { width: 100%; padding: 26px 0; background: none; border: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; text-align: left; cursor: pointer; font: 500 18px var(--sans); color: var(--graphite); } .faq__sign { flex: 0 0 auto; font: 400 18px var(--mono); color: var(--assay); } .faq__a { margin: 0; padding: 0 0 26px; max-width: 62ch; font-size: 16px; line-height: 1.65; } .faq__a[hidden] { display: none; } /* ---------- CTA ---------- */ .cta { background: var(--vault); } .cta__inner { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(72px, 9vw, 120px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; } .cta .h2 { color: #fff; max-width: 22ch; } .cta p { margin: 0; max-width: 56ch; color: rgba(255, 255, 255, .8); } .cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 8px; } /* ---------- footer ---------- */ .site-foot { background: var(--graphite); color: var(--slate-dim); } .foot__grid { padding-top: clamp(64px, 8vw, 96px); padding-bottom: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; align-items: start; } .foot__col { min-width: 0; display: flex; flex-direction: column; gap: 14px; } .foot__col--brand { gap: 18px; } .foot__col--brand .brand__mark { background: none; border: 1px solid var(--assay); } .foot__col--brand .brand__mark::after { left: 8px; right: 8px; bottom: 7px; } .foot__col--brand .brand__name { color: var(--porcelain); } .foot__col--brand p { margin: 0; max-width: 40ch; font-size: 15px; line-height: 1.65; color: var(--slate-dim); } .foot__label { margin: 0 0 4px; font: 500 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--assay); } .foot__col a { font-size: 15px; color: var(--mist); } .foot__col a:hover { color: #fff; } .foot__col a.mono { font-size: 14px; } .foot__col p.mono { margin: 0; font-size: 12px; line-height: 1.8; color: var(--slate); } .foot__addr { margin: 0; font-size: 15px; line-height: 1.65; color: var(--mist); } .foot__bar { padding-bottom: 56px; } .foot__bar > div { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 28px; display: flex; flex-wrap: wrap; gap: 20px 48px; justify-content: space-between; font: 400 11px var(--mono); font-variant-numeric: tabular-nums; line-height: 1.8; color: var(--slate); } .foot__bar p { margin: 0; } .foot__bar p:last-child { flex: 1 1 420px; max-width: 70ch; } /* ---------- contact ---------- */ .contact { display: flex; flex-wrap: wrap; gap: 64px 80px; align-items: flex-start; } .details { flex: 1 1 460px; min-width: 0; border-top: 1px solid var(--rule); } .details__block { padding: 26px 0; border-bottom: 1px solid var(--rule); } .details__block p { margin: 0; } .details__label { margin: 0 0 12px; font: 500 12px var(--mono); letter-spacing: .12em; color: var(--assay); } .details__block a.mono { display: block; color: var(--graphite); font-size: 17px; } .details__block a.mono:hover { color: var(--vault); } .details__hours { font: 400 14px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .03em; line-height: 2; } .details__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; } .details__list li { display: flex; gap: 14px; font-size: 16px; line-height: 1.6; } .details__list li::before { content: "—"; color: var(--assay); flex: 0 0 auto; } .form-col { flex: 1 1 420px; min-width: 0; scroll-margin-top: 110px; } .panel { background: var(--paper); border: 1px solid var(--rule); border-radius: 2px; padding: clamp(22px, 5vw, 40px); } .form { display: flex; flex-direction: column; gap: 22px; } .field { display: flex; flex-direction: column; gap: 7px; } .field label { font: 500 13px var(--sans); letter-spacing: .02em; } .field label span { color: var(--slate); } .field input, .field select, .field textarea { border: 1px solid var(--rule); border-radius: 2px; background: #FDFDFC; color: var(--graphite); font-size: 16px; } .field input, .field select { height: 46px; padding: 0 14px; } .field textarea { padding: 12px 14px; line-height: 1.6; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--vault); outline-offset: 0; } .field input[type="tel"] { font-family: var(--mono); font-variant-numeric: tabular-nums; } .field__error { margin: 0; font: 500 13px var(--sans); color: var(--ask); } .field__error[hidden] { display: none; } .field__foot { display: flex; justify-content: space-between; gap: 16px; } .counter { margin: 0 0 0 auto; font: 400 12px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--slate); } .consent { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; } .consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--vault); flex: 0 0 auto; } .consent span { font-size: 14px; line-height: 1.6; } .sent { display: flex; flex-direction: column; gap: 20px; animation: acFade 240ms var(--ease) both; } .sent[hidden], .form[hidden] { display: none; } .sent .h2 { font-size: 32px; line-height: 1.05; } .sent p { margin: 0; font-size: 16px; line-height: 1.65; } .sent button { align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer; font: 500 15px var(--sans); color: var(--vault); background-image: linear-gradient(var(--assay), var(--assay)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; } @keyframes acFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------- breakpoints ---------- */ @media (max-width: 939px) { .nav { display: none; } .burger { display: flex; } .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .step, .step:last-child, .step:not(:first-child):not(:last-child) { padding: 28px 20px 32px 0; } .steps .step:nth-child(even) { padding-right: 0; padding-left: 20px; } .inv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inv__item .plate__crop { aspect-ratio: 1 / 1; } .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pagehead, .pagehead__inner { min-height: 300px; } .contact { gap: 48px; } .form-col { order: -1; flex: 1 1 100%; } .details { flex: 1 1 100%; } } @media (max-width: 559px) { .steps { grid-template-columns: 1fr; } .steps .step, .steps .step:nth-child(even) { padding: 28px 0 32px; } .foot__grid { grid-template-columns: 1fr; gap: 40px; } .pagehead, .pagehead__inner { min-height: 250px; } .hero__actions .btn, .cta__actions .btn { flex: 1 1 100%; text-align: center; } .quote { gap: 28px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal[data-hidden="true"] { opacity: 1; transform: none; } } @media print { .site-head, .burger, .menu { position: static; } .hero, .pagehead, .band, .custody { break-inside: avoid; } }