/* ═══════════════════════════════════════════════════════════════ hj-landing.css — High Jewellery editorial landing page Scoped to #page-hj-landing to avoid bleeding into other pages. Source: D:\Adamas v2\adamas-hj-v8 (5) - Copy.html ═══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Jost:wght@200;300;400;500&display=swap'); #page-hj-landing { /* ── Adamas v7 colour tokens ── */ --ad-black: #1A1714; --ad-black-2: #0E0D0B; --ad-brown: #242018; --ad-cream: #FAF8F5; --ad-cream-2: #F7F4EF; --ad-stone: #EDE8E1; --ad-text: #1A1714; --ad-muted: #7A7672; --ad-muted-light: #B8B2AC; --ad-gold: #B8966E; --ad-gold-2: #D4B896; --ad-border: #E8E4DE; /* "Trirong"/"Anuphan" = Thai fallbacks (loaded in index.html ) so TH text matches the site's serif/sans look instead of the system default font. */ --ad-serif: "Cormorant Garamond", "Trirong", Garamond, Georgia, serif; --ad-sans: "Jost", "Anuphan", "Futura", "Century Gothic", sans-serif; --ad-max: 1280px; --ad-x: clamp(24px, 6vw, 90px); background: var(--ad-cream); color: var(--ad-text); font-family: var(--ad-sans); font-weight: 300; line-height: 1.65; -webkit-font-smoothing: antialiased; } #page-hj-landing * { box-sizing: border-box; } #page-hj-landing a { color: inherit; text-decoration: none; } #page-hj-landing .hj-shell { width: min(var(--ad-max), calc(100% - var(--ad-x) * 2)); margin: 0 auto; } #page-hj-landing .hj-section { position: relative; padding: clamp(40px, 4vw, 40px) 0; } #page-hj-landing .hj-dark { background: var(--ad-black); color: #fffaf2; } #page-hj-landing .hj-cream { background: var(--ad-cream); color: var(--ad-text); } #page-hj-landing .sec-2 { background: #fff; padding-top: 70px; padding-bottom: 70px; } #page-hj-landing .sec-5 { padding-top: 70px; padding-bottom: 70px; } #page-hj-landing .sec-8 { background: var(--ad-black); padding-top: clamp(80px, 10vw, 130px); padding-bottom: 0; overflow: hidden; } #page-hj-landing .hj-stone { background: var(--ad-stone); color: var(--ad-text); } #page-hj-landing .hj-kicker { margin: 0 0 24px; color: var(--ad-gold); font-family: var(--ad-sans); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 400; } #page-hj-landing .hj-kicker::before { content: ""; display: inline-block; width: 36px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 18px; opacity: .8; } #page-hj-landing .hj-title, #page-hj-landing .hj-display, #page-hj-landing .hj-small-title { font-family: var(--ad-serif); font-weight: 300; letter-spacing: -0.025em; line-height: 0.98; margin: 0; } #page-hj-landing .hj-display { font-size: clamp(58px, 8vw, 104px); } #page-hj-landing .hj-title { font-size: clamp(42px, 6vw, 76px); } #page-hj-landing .hj-small-title { font-size: clamp(34px, 4vw, 56px); } #page-hj-landing .hj-title em, #page-hj-landing .hj-display em, #page-hj-landing .hj-small-title em { color: var(--ad-gold); font-style: italic; font-weight: 300; } #page-hj-landing .hj-copy { color: var(--ad-muted); max-width: 620px; margin: 0; font-family: var(--ad-serif); font-size: clamp(14px, 1.4vw, 16px); line-height: 1.85; font-weight: 300; } #page-hj-landing .hj-dark .hj-copy { color: rgba(255, 250, 242, .72); } #page-hj-landing .hj-thai { font-family: var(--ad-serif); font-size: 14px; line-height: 1.9; margin-top: 26px; color: var(--ad-muted); max-width: 640px; } #page-hj-landing .hj-dark .hj-thai { color: rgba(255, 250, 242, .64); } #page-hj-landing .hj-btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } #page-hj-landing .hj-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; min-height: 52px; padding: 0 28px; border: 1px solid currentColor; font-family: var(--ad-sans); font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase; font-weight: 400; transition: 0.25s ease; cursor: pointer; } #page-hj-landing .hj-btn:hover { transform: translateY(-2px); } #page-hj-landing .hj-btn--gold { background: var(--ad-gold); color: #0e0c0a; border-color: var(--ad-gold); } #page-hj-landing .hj-btn--dark { background: var(--ad-black); color: #fffaf2; border-color: var(--ad-black); } #page-hj-landing .hj-btn--ghost { color: inherit; background: transparent; opacity: .95; } #page-hj-landing .hj-line { width: 46px; height: 1px; background: var(--ad-gold); margin: 36px 0; } #page-hj-landing .hj-image-placeholder, #page-hj-landing .hj-video-placeholder { position: relative; background: radial-gradient(circle at 50% 38%, rgba(212, 182, 140, .10), transparent 30%), linear-gradient(145deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .10)), var(--ad-stone); border: 1px solid rgba(0, 0, 0, .06); overflow: hidden; } #page-hj-landing .hj-dark .hj-image-placeholder, #page-hj-landing .hj-dark .hj-video-placeholder { background: radial-gradient(circle at 50% 40%, rgba(212, 182, 140, .08), transparent 28%), linear-gradient(145deg, #2a241c, #17130f); border-color: rgba(255, 255, 255, .08); } #page-hj-landing .hj-image-placeholder::after, #page-hj-landing .hj-video-placeholder::after { content: attr(data-label); position: absolute; left: 18px; top: 16px; right: 18px; color: rgba(15, 13, 10, .50); font-size: 13px; line-height: 1.35; } #page-hj-landing .hj-image-placeholder > img, #page-hj-landing .hj-image-placeholder > video, #page-hj-landing .hj-video-placeholder > video, #page-hj-landing .thumb > img, #page-hj-landing .thumb > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 2; } #page-hj-landing .hj-dark .hj-image-placeholder::after, #page-hj-landing .hj-dark .hj-video-placeholder::after { color: rgba(255, 250, 242, .30); } #page-hj-landing .sec-1 { position: relative; display: flex; align-items: center; overflow: hidden; padding: clamp(20px, 3vw, 40px) 0 clamp(15px, 2.5vw, 30px); min-height: 600px; } #page-hj-landing .sec-1-img { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--ad-black); } #page-hj-landing .sec-1-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 8s ease; } #page-hj-landing .sec-1:hover .sec-1-img img { transform: scale(1.04); } #page-hj-landing .sec-1-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(14,13,11,0.92) 0%, rgba(14,13,11,0.78) 45%, rgba(14,13,11,0.55) 100%); z-index: 1; } #page-hj-landing .sec-1-panel { position: relative; z-index: 2; width: 100%; } #page-hj-landing .sec-1-content { width: min(var(--ad-max), calc(100% - var(--ad-x) * 2)); margin: 0 auto; } #page-hj-landing .sec-1-text { max-width: 720px; } #page-hj-landing .breadcrumb { font-family: var(--ad-sans); font-size: 9px; text-transform: uppercase; letter-spacing: 0.20em; color: rgba(255, 250, 242, .45); margin-bottom: 36px; } #page-hj-landing .sec-1 .hj-display { max-width: 780px; color: #fffaf2; } #page-hj-landing .sec-1 .hj-copy { margin-top: 20px; max-width: 620px; font-size: 16px; color: rgba(255, 250, 242, .82); } #page-hj-landing .sec-1-stats { display: grid; grid-template-columns: 160px 170px 1fr; gap: 46px; margin-top: 60px; padding-top: 34px; border-top: 1px solid rgba(255, 255, 255, .22); max-width: 920px; } #page-hj-landing .stat strong { font-family: var(--ad-serif); color: var(--ad-gold-2); font-size: 38px; font-weight: 300; display: block; line-height: 1; letter-spacing: -0.02em; } #page-hj-landing .stat span { display: block; margin-top: 12px; color: rgba(255, 250, 242, .60); font-family: var(--ad-sans); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; } #page-hj-landing .sec-1-bottom { position: relative; background: #2a261f; border-top: 1px solid rgba(255, 255, 255, .12); padding: 56px 0 64px; color: #fffaf2; } #page-hj-landing .principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 58px; } #page-hj-landing .principle-num { color: var(--ad-gold); font-size: 10px; letter-spacing: .22em; margin-bottom: 22px; } #page-hj-landing .principle h3 { margin: 0 0 14px; font-family: var(--ad-serif); color: var(--ad-gold-2); font-weight: 300; font-size: 26px; letter-spacing: -0.01em; } #page-hj-landing .principle p { margin: 0; font-family: var(--ad-serif); color: rgba(255, 250, 242, .68); font-size: 14px; line-height: 1.75; font-weight: 300; } #page-hj-landing .sec-2-grid { display: grid; grid-template-columns: .9fr 1fr; gap: clamp(60px, 10vw, 150px); align-items: start; } #page-hj-landing .sec-2 .hj-title { max-width: 450px; } #page-hj-landing .sec-2-copy { padding-top: 20px; } #page-hj-landing .sec-3 { padding: 0; display: grid; grid-template-columns: 54% 46%; min-height: 940px; background: var(--ad-cream); } #page-hj-landing .sec-3-left { padding: clamp(80px, 8vw, 128px) clamp(50px, 7vw, 110px); display: flex; flex-direction: column; justify-content: center; } #page-hj-landing .sec-3-right { background: var(--ad-stone); padding: 0; position: relative; overflow: hidden; } #page-hj-landing .sec-3 .hj-copy { margin-top: 28px; max-width: 520px; } #page-hj-landing .sec-3-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ad-stone); } #page-hj-landing .spec-table { width: min(100%, 540px); margin-top: 42px; border-top: 1px solid var(--ad-border); } #page-hj-landing .spec-row { display: grid; grid-template-columns: 180px 1fr; gap: 28px; padding: 18px 0; border-bottom: 1px solid var(--ad-border); } #page-hj-landing .spec-row dt { color: var(--ad-muted); font-family: var(--ad-sans); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; } #page-hj-landing .spec-row dd { margin: 0; font-family: var(--ad-serif); font-size: 15px; font-weight: 300; color: var(--ad-text); } #page-hj-landing .sec-4-grid { display: grid; grid-template-columns: .98fr 1fr; gap: clamp(54px, 7vw, 90px); align-items: center; } #page-hj-landing .sec-4 .hj-image-placeholder { min-height: 620px; background-color: #242018; } #page-hj-landing .thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; } #page-hj-landing .thumb { width: 100%; height: auto; aspect-ratio: 1.12 / 1; border: 1px solid rgba(255, 255, 255, .10); background: #242018; position: relative; overflow: hidden; } #page-hj-landing .sec-4 .spec-table { border-top-color: rgba(255, 255, 255, .16); width: 100%; } #page-hj-landing .sec-4 .spec-row { border-bottom-color: rgba(255, 255, 255, .16); } #page-hj-landing .sec-4 .spec-row dt { color: rgba(212, 182, 140, .80); } #page-hj-landing .sec-4 .spec-row dd { color: rgba(255, 250, 242, 0.90); font-family: var(--ad-serif); font-size: 15px; font-weight: 300; } #page-hj-landing .piece-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(34px, 4vw, 56px); margin-top: 86px; align-items: start; } #page-hj-landing .piece-card:nth-child(2) { margin-top: 0; } #page-hj-landing .piece-card .hj-image-placeholder { aspect-ratio: 3.5 / 4.65; min-height: 410px; } #page-hj-landing .piece-card h3 { font-family: var(--ad-serif); font-size: 28px; line-height: 1.12; font-weight: 300; letter-spacing: -0.01em; margin: 28px 0 12px; } #page-hj-landing .piece-type { font-family: var(--ad-sans); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ad-gold); margin-top: 30px; } #page-hj-landing .piece-meta { font-family: var(--ad-sans); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ad-muted); margin: 0 0 24px; } #page-hj-landing .piece-card { display: flex; flex-direction: column; } #page-hj-landing .piece-card p { font-family: var(--ad-serif); color: var(--ad-muted); font-size: 14px; line-height: 1.85; font-weight: 300; margin: 0; } #page-hj-landing .piece-card .enquire-link { margin-top: auto; padding-top: 30px; } #page-hj-landing .enquire-link { display: inline-flex; margin-top: 30px; align-items: center; gap: 12px; font-family: var(--ad-sans); font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase; font-weight: 400; color: var(--ad-gold); cursor: pointer; } #page-hj-landing .enquire-link::after { content: ""; width: 36px; height: 1px; background: var(--ad-gold); } #page-hj-landing .sec-6-grid { display: grid; grid-template-columns: .85fr 0.8fr; gap: clamp(56px, 7vw, 70px); align-items: center; margin-top: 20px; } #page-hj-landing .atelier-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } #page-hj-landing .atelier-gallery .large { grid-column: 1 / -1; min-height: 520px; } #page-hj-landing .atelier-gallery .small { min-height: 260px; } #page-hj-landing .process-list { display: grid; gap: 26px; margin-top: 48px; } #page-hj-landing .process-item { border-left: 1px solid var(--ad-gold); border-bottom: 1px solid rgba(255, 255, 255, .16); padding: 0 0 28px 28px; } #page-hj-landing .process-item h3 { color: var(--ad-gold); font-family: var(--ad-sans); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 400; margin: 0 0 14px; } #page-hj-landing .process-item p { font-family: var(--ad-serif); color: rgba(255, 250, 242, .68); margin: 0; font-size: 14px; font-weight: 300; line-height: 1.85; } #page-hj-landing .sec-7-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 720px; align-items: center; } #page-hj-landing .sec-10 { position: relative; padding-top: 0; background: var(--ad-black); /* prevent page cream from bleeding through after CTA */ } #page-hj-landing .private-cta { background: var(--ad-black); color: #fffaf2; text-align: center; /* Top/bottom: clamp 82-132px, then -50px each side per request — net 32-82px */ padding: calc(clamp(82px, 9vw, 132px) - 50px) var(--ad-x); } #page-hj-landing .private-cta h2 { font-family: var(--ad-serif); font-size: clamp(40px, 5vw, 58px); line-height: 1.16; font-weight: 300; letter-spacing: -0.02em; margin: 0; } #page-hj-landing .private-cta p { font-family: var(--ad-serif); font-size: 16px; font-weight: 300; color: rgba(255, 250, 242, .70); margin: 28px auto 0; max-width: 610px; } @media (max-width: 1020px) { #page-hj-landing .sec-1-stats, #page-hj-landing .principles, #page-hj-landing .sec-2-grid, #page-hj-landing .sec-3, #page-hj-landing .sec-4-grid, #page-hj-landing .piece-row, #page-hj-landing .sec-6-grid, #page-hj-landing .sec-7-grid { grid-template-columns: 1fr; } #page-hj-landing .sec-3 { display: block; } #page-hj-landing .sec-3-right { min-height: 620px; } #page-hj-landing .piece-card:nth-child(2) { margin-top: 0; } } @media (max-width: 640px) { #page-hj-landing .sec-1 { min-height: auto; padding: 100px 0 70px; } #page-hj-landing .sec-1-stats { grid-template-columns: 1fr 1fr; gap: 28px; } #page-hj-landing .stat:last-child { grid-column: 1 / -1; } #page-hj-landing .sec-3-left, #page-hj-landing .sec-3-right { padding: 70px 24px; } #page-hj-landing .spec-row { grid-template-columns: 1fr; gap: 6px; } #page-hj-landing .hj-btn-row { display: grid; } #page-hj-landing .hj-btn { width: 100%; } #page-hj-landing .thumbs { display: grid; grid-template-columns: repeat(3, 1fr); } #page-hj-landing .thumb { width: auto; } }