/* New Apon Jewellers — luxury jewellery homepage Three switchable design directions via [data-direction] on : a = Onyx & Gold (dark, editorial) b = Ivory Luxe (light, airy boutique) c = Modern Noir (near-black, high-contrast feature grid) Accent + heading font are driven by CSS vars set from the Tweaks panel. */ :root { --accent: #c9a24b; --accent-soft: color-mix(in oklch, var(--accent) 22%, transparent); --font-head: "Tenor Sans", "Jost", sans-serif; --font-body: "Jost", system-ui, sans-serif; --maxw: 1280px; --gut: 40px; /* theme tokens — overridden per direction */ --bg: #15110d; --bg-2: #1c1610; --surface: #211a13; --line: color-mix(in oklch, var(--fg) 14%, transparent); --fg: #efe7d6; --muted: #b0a48c; --scrim: linear-gradient(to top, rgba(8,6,4,.86) 0%, rgba(8,6,4,.45) 38%, rgba(8,6,4,0) 72%); --shadow: 0 26px 60px -32px rgba(0,0,0,.7); } /* ---------- Direction themes ---------- */ html[data-direction="a"] { --bg: #15110d; --bg-2: #1b1510; --surface: #211a13; --fg: #efe7d6; --muted: #b0a48c; } html[data-direction="b"] { --bg: #f6f1e7; --bg-2: #efe7d7; --surface: #fffdf8; --fg: #2a2317; --muted: #756a55; --line: color-mix(in oklch, var(--fg) 13%, transparent); --scrim: linear-gradient(to top, rgba(28,22,14,.78) 0%, rgba(28,22,14,.30) 42%, rgba(28,22,14,0) 74%); --shadow: 0 26px 60px -34px rgba(74,58,30,.42); } html[data-direction="c"] { --bg: #0d0c0b; --bg-2: #131210; --surface: #181613; --fg: #f3efe6; --muted: #968d7c; } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--font-head); font-weight: 400; margin: 0; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); } .eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 500; color: var(--accent); margin: 0; display: inline-flex; align-items: center; gap: .8em; } .eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--accent); opacity: .7; } .eyebrow.center { justify-content: center; } /* diamond brand glyph (simple rotated square, layered) */ .diamond { width: 16px; height: 16px; flex: none; transform: rotate(45deg); background: linear-gradient(135deg, var(--accent), color-mix(in oklch, var(--accent) 55%, #fff)); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 60%, #000), 0 0 14px var(--accent-soft); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: .6em; font-family: var(--font-body); font-size: 14px; letter-spacing: .06em; padding: 14px 26px; border: 1px solid var(--line); cursor: pointer; transition: .28s ease; white-space: nowrap; } .btn-primary { background: var(--accent); color: #1a130a; border-color: var(--accent); } .btn-primary:hover { background: color-mix(in oklch, var(--accent) 84%, #fff); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--fg); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in oklch, var(--bg) 86%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 28px; } .brand { display: flex; align-items: center; gap: 14px; } .brand-name { font-family: var(--font-head); font-size: 22px; letter-spacing: .02em; line-height: 1.15; white-space: nowrap; } .brand-name em { font-style: normal; color: var(--accent); } .brand-sub { display:block; font-family: var(--font-body); font-size: 10px; letter-spacing: .2em; color: var(--muted); margin-top: 6px; } .nav { display: flex; gap: 34px; font-size: 14px; letter-spacing: .04em; } .nav a { color: var(--muted); transition: color .2s; position: relative; padding: 4px 0; } .nav a:hover { color: var(--fg); } .nav a::after { content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background: var(--accent); transition: width .25s; } .nav a:hover::after { width: 100%; } /* ---------- Hero ---------- */ .hero { position: relative; border-bottom: 1px solid var(--line); } .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; min-height: min(78vh, 720px); } .hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 72px var(--gut) 72px 0; } .hero-title { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.04; letter-spacing: .01em; max-width: 14ch; text-wrap: balance; } .hero-title .gold { color: var(--accent); font-style: italic; } .hero-sub { color: var(--muted); font-size: 18px; max-width: 46ch; margin: 0; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; } .hero-trust { display:flex; gap: 30px; margin-top: 14px; color: var(--muted); font-size: 13px; letter-spacing: .04em; flex-wrap: wrap; } .hero-trust span { display:flex; align-items:center; gap:8px; } .hero-trust b { color: var(--fg); font-weight: 500; font-family: var(--font-head); font-size: 16px; } .hero-media { position: relative; overflow: hidden; min-height: 360px; } .hero-media .frame { position:absolute; inset: 26px; border: 1px solid var(--accent); opacity: .35; pointer-events:none; z-index: 2; } /* media placeholder + image layering (shared) */ .media { position: relative; overflow: hidden; background: var(--bg-2); } .media img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; transition: transform .9s cubic-bezier(.2,.7,.2,1); } .media img.failed { display: none; } .ph { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; text-align:center; background: repeating-linear-gradient(45deg, color-mix(in oklch, var(--fg) 5%, transparent) 0 11px, transparent 11px 22px), var(--bg-2); color: var(--muted); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 16px; } /* ---------- Section heads ---------- */ .section { padding: 96px 0; } .section.alt { background: var(--bg-2); } .section-head { margin-bottom: 48px; } .section-head.center { text-align: center; display:flex; flex-direction:column; align-items:center; gap: 14px; } .section-title { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; margin-top: 14px; letter-spacing: .01em; } .section-head p.lead { color: var(--muted); max-width: 52ch; margin: 8px auto 0; } /* ---------- Category grid ---------- */ .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .cat-card { position: relative; display: block; overflow: hidden; background: var(--surface); border: 1px solid var(--line); transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease; } .cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in oklch, var(--accent) 50%, var(--line)); } .cat-card:hover .media img { transform: scale(1.06); } .cat-card .media { aspect-ratio: 4 / 5; } .cat-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 4px; } .cat-index { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .2em; color: var(--accent); margin-bottom: 6px; } .cat-name { font-size: 26px; letter-spacing: .02em; } .cat-count { color: var(--muted); font-size: 13px; letter-spacing: .03em; } .cat-cta { margin-top: 12px; font-size: 13px; letter-spacing: .06em; color: var(--fg); display:inline-flex; align-items:center; gap:8px; } .cat-cta .arrow { transition: transform .3s; color: var(--accent); } .cat-card:hover .cat-cta .arrow { transform: translateX(6px); } /* Direction B + C: overlay captions on full-bleed media */ html[data-direction="b"] .cat-card, html[data-direction="c"] .cat-card { background: var(--bg-2); } html[data-direction="b"] .cat-card .media, html[data-direction="c"] .cat-card .media { position: absolute; inset: 0; aspect-ratio: auto; } html[data-direction="b"] .cat-card, html[data-direction="c"] .cat-card { min-height: 460px; } html[data-direction="b"] .cat-body, html[data-direction="c"] .cat-body { position: relative; z-index: 2; height: 100%; justify-content: flex-end; padding: 28px; } html[data-direction="b"] .cat-card::after, html[data-direction="c"] .cat-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--scrim); } html[data-direction="b"] .cat-name, html[data-direction="c"] .cat-name, html[data-direction="b"] .cat-count, html[data-direction="c"] .cat-count, html[data-direction="b"] .cat-cta, html[data-direction="c"] .cat-cta { color: #f6efe0; } html[data-direction="b"] .cat-count, html[data-direction="c"] .cat-count { color: color-mix(in oklch, #f6efe0 78%, transparent); } /* Direction C: asymmetric feature — first card spans 2x2 */ html[data-direction="c"] .cat-grid { grid-auto-rows: 1fr; } html[data-direction="c"] .cat-card:first-child { grid-column: span 2; grid-row: span 2; min-height: 100%; } html[data-direction="c"] .cat-card:first-child .cat-name { font-size: 40px; } /* Direction B: light surface buttons keep contrast */ html[data-direction="b"] .btn-primary { color: #fff; } /* ---------- Featured rail ---------- */ .feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .prod-card { background: var(--surface); border: 1px solid var(--line); transition: transform .4s, box-shadow .4s; } .prod-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .prod-card:hover .media img { transform: scale(1.05); } .prod-card .media { aspect-ratio: 1 / 1; } .prod-body { padding: 18px 20px 22px; } .prod-name { font-family: var(--font-head); font-size: 19px; } .prod-mat { color: var(--muted); font-size: 12.5px; margin: 4px 0 12px; letter-spacing: .02em; } .prod-foot { display:flex; align-items:center; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 13px; } .prod-price { font-family: var(--font-head); font-size: 17px; color: var(--accent); } .prod-view { font-size: 12px; letter-spacing: .07em; color: var(--muted); transition: color .2s; } .prod-card:hover .prod-view { color: var(--fg); } /* ---------- Heritage strip ---------- */ .heritage { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .heritage .media { aspect-ratio: 5 / 4; border: 1px solid var(--line); } .heritage h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; } .heritage p { color: var(--muted); margin: 22px 0; } .hallmarks { display:flex; gap: 36px; margin-top: 28px; flex-wrap: wrap; } .hallmark b { display:block; font-family: var(--font-head); font-size: 30px; color: var(--fg); } .hallmark span { color: var(--muted); font-size: 13px; letter-spacing: .05em; } /* ---------- Footer ---------- */ .site-footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: 72px 0 36px; } .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; } .foot-brand .brand { margin-bottom: 18px; } .foot-blurb { color: var(--muted); max-width: 34ch; font-size: 15px; } .foot-col h4 { font-family: var(--font-body); font-size: 13px; letter-spacing: .08em; color: var(--accent); margin: 0 0 18px; } .foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .foot-col a, .foot-col li { color: var(--muted); font-size: 14.5px; transition: color .2s; } .foot-col a:hover { color: var(--fg); } .foot-bottom { display:flex; justify-content: space-between; align-items:center; flex-wrap: wrap; gap: 14px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; letter-spacing: .04em; } .socials { display:flex; gap: 12px; } .socials a { width: 38px; height: 38px; border: 1px solid var(--line); display:flex; align-items:center; justify-content:center; transition: .25s; font-size: 13px; letter-spacing: .04em; } .socials a:hover { border-color: var(--accent); color: var(--accent); } /* ---------- Responsive ---------- */ @media (max-width: 960px) { :root { --gut: 24px; } .hero-grid { grid-template-columns: 1fr; } .hero-copy { padding: 56px 0 56px; order: 2; } .hero-media { order: 1; min-height: 320px; } .cat-grid { grid-template-columns: repeat(2, 1fr); } .feat-grid { grid-template-columns: repeat(2, 1fr); } html[data-direction="c"] .cat-card:first-child { grid-column: span 2; grid-row: span 1; } .heritage { grid-template-columns: 1fr; gap: 32px; } .foot-grid { grid-template-columns: 1fr 1fr; } .nav { display: none; } } @media (max-width: 560px) { .cat-grid, .feat-grid { grid-template-columns: 1fr; } html[data-direction="c"] .cat-card:first-child { grid-column: span 1; } .foot-grid { grid-template-columns: 1fr; } } /* reduced motion */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }