/* ===================================================================== yesjo.au · 3D & AR Atelier showcase Direction: editorial dark-luxury. Cormorant Garamond display + Inter Tight UI, near-black field, champagne accent, warm grain. ===================================================================== */ :root { /* palette */ --bg: #0b0c0e; --bg-2: #0f1113; --surface: #15171b; --surface-2: #1b1e23; --text: #f3eee4; --text-dim: #aaa49a; --text-mute: #6d6a63; --gold: #c9a96a; --gold-soft: #e6d2a6; --gold-deep: #8c6f3f; --line: rgba(201,169,106,0.16); --line-soft: rgba(243,238,228,0.08); /* type */ --serif: "Cormorant Garamond", Georgia, serif; --sans: "Inter Tight", system-ui, -apple-system, sans-serif; --text-hero: clamp(2.6rem, 1.2rem + 5.6vw, 6.4rem); --text-section: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); --text-h3: clamp(1.3rem, 1.05rem + 0.9vw, 1.9rem); --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.1rem); /* rhythm + motion */ --wrap: 1240px; --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem); --section: clamp(4.5rem, 3rem + 6vw, 9rem); --radius: 18px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur: 0.7s; } /* ---- light theme — shared 'yj.theme' key, set on ---- */ html.theme-light { --bg: #f6f2ea; --bg-2: #efe9dd; --surface: #fffdf8; --surface-2: #f4eee2; --text: #1c1813; --text-dim: #5d564a; --text-mute: #8b8475; --gold: #9c7c3f; --gold-soft: #7a5f2c; --gold-deep: #6f561f; --line: rgba(60,48,24,0.20); --line-soft: rgba(28,24,19,0.10); } html.theme-light body::before { background: radial-gradient(120% 70% at 78% -5%, rgba(156,124,63,0.12), transparent 55%), radial-gradient(90% 60% at 0% 100%, rgba(156,124,63,0.06), transparent 60%), var(--bg); } html.theme-light .grain { opacity: 0.03; } html.theme-light .site-header { background: rgba(246,242,234,0.72); } html.theme-light .hero__viewer, html.theme-light .exp__media { box-shadow: 0 30px 70px -45px rgba(80,60,20,0.30); } html.theme-light .card:hover { box-shadow: 0 30px 60px -40px rgba(80,60,20,0.22); } html.theme-light .card__ar { background: rgba(255,253,248,0.82); color: var(--text); } /* theme toggle control (both themes) */ .theme-toggle { background: transparent; border: 1px solid var(--line); color: var(--text-dim); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 0.95rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s, color .2s; } .theme-toggle:hover { border-color: var(--gold); color: var(--gold-soft); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: var(--text-base); font-weight: 300; line-height: 1.6; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* warm radial wash behind the whole page */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(120% 70% at 78% -5%, rgba(201,169,106,0.10), transparent 55%), radial-gradient(90% 60% at 0% 100%, rgba(201,169,106,0.05), transparent 60%), var(--bg); } /* fine film grain */ .grain { position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--gold); color: #0b0c0e; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--gold); color: #0b0c0e; padding: 0.6rem 1rem; font-weight: 500; } .skip-link:focus { left: 1rem; top: 1rem; } /* ── typography helpers ───────────────────────────── */ .display { font-family: var(--serif); font-weight: 500; line-height: 1.02; letter-spacing: -0.01em; margin: 0; } .display em { font-style: italic; color: var(--gold-soft); font-weight: 500; } .eyebrow { font-size: 0.74rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin: 0 0 1.1rem; } .lede { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.28rem); color: var(--text-dim); font-weight: 300; max-width: 46ch; } /* ── buttons ──────────────────────────────────────── */ .btn { --pad: 0.85rem 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: var(--pad); font-family: var(--sans); font-size: 0.92rem; font-weight: 500; letter-spacing: 0.02em; border-radius: 100px; border: 1px solid transparent; cursor: pointer; transition: transform var(--dur) var(--ease), background .25s, color .25s, border-color .25s; will-change: transform; } .btn:hover { transform: translateY(-2px); } .btn--gold { background: var(--gold); color: #0b0c0e; } .btn--gold:hover { background: var(--gold-soft); } .btn--line { border-color: var(--line); color: var(--text); } .btn--line:hover { border-color: var(--gold); color: var(--gold-soft); } .btn--ghost { color: var(--text-dim); } .btn--ghost:hover { color: var(--text); } /* ── header ───────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px) saturate(1.2); background: rgba(11,12,14,0.62); border-bottom: 1px solid var(--line-soft); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.95rem; } .brand { display: inline-flex; align-items: center; gap: 0.65rem; line-height: 1.1; } .brand__logo { height: 30px; width: auto; display: block; } .brand__txt { display: inline-flex; flex-direction: column; } .brand__name { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.01em; } .brand__dot { color: var(--gold); } .brand__sub { font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-mute); margin-top: 2px; } .primary-nav { display: flex; gap: 2rem; } .primary-nav a { font-size: 0.9rem; color: var(--text-dim); position: relative; padding-block: 0.3rem; transition: color .25s; } .primary-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); } .primary-nav a:hover { color: var(--text); } .primary-nav a:hover::after { transform: scaleX(1); } /* ── hero ─────────────────────────────────────────── */ .hero { position: relative; padding-block: clamp(3rem, 1rem + 8vw, 7rem) var(--section); } .hero__glow { position: absolute; top: -10%; right: -5%; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; background: radial-gradient(circle, rgba(201,169,106,0.16), transparent 62%); filter: blur(20px); pointer-events: none; } .hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; } .hero h1 { margin: 0 0 1.6rem; font-size: var(--text-hero); } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 2rem 0 2.4rem; } .hero__stats { display: flex; gap: clamp(1.5rem, 0.5rem + 3vw, 3.2rem); list-style: none; margin: 0; padding: 1.8rem 0 0; border-top: 1px solid var(--line-soft); } .hero__stats li { display: flex; flex-direction: column; } .hero__stats b { font-family: var(--serif); font-size: 2.2rem; font-weight: 600; color: var(--gold-soft); line-height: 1; } .hero__stats span { font-size: 0.78rem; color: var(--text-mute); letter-spacing: 0.04em; margin-top: 0.4rem; } .hero__stage { position: relative; } .hero__viewer { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius); border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 18%, rgba(201,169,106,0.10), transparent 60%), linear-gradient(180deg, var(--surface-2), var(--bg-2)); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.04); } .hero__stage-cap { display: flex; align-items: center; gap: 0.55rem; margin: 1rem 0 0; font-size: 0.8rem; color: var(--text-mute); letter-spacing: 0.04em; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(201,169,106,0.6); animation: pulse 2.4s var(--ease) infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(201,169,106,0.55); } 70% { box-shadow: 0 0 0 8px rgba(201,169,106,0); } 100% { box-shadow: 0 0 0 0 rgba(201,169,106,0); } } /* ── shared model-viewer treatment ────────────────── */ model-viewer { --poster-color: transparent; --progress-bar-color: var(--gold); --progress-mask: transparent; width: 100%; height: 100%; background-color: transparent; } .mv-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--line-soft); } .mv-progress__bar { display: block; height: 100%; width: 0; background: var(--gold); transition: width .2s; } /* ── marquee ──────────────────────────────────────── */ .marquee { overflow: hidden; border-block: 1px solid var(--line-soft); padding-block: 1.1rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee__track { display: inline-flex; align-items: center; gap: 2.2rem; white-space: nowrap; animation: scroll 34s linear infinite; } .marquee__track span { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--text-dim); } .marquee__track i { color: var(--gold); font-style: normal; font-size: 0.7rem; } @keyframes scroll { to { transform: translateX(-50%); } } /* ── section heads ────────────────────────────────── */ .section-head { padding-top: var(--section); max-width: 720px; } .section-head h2 { font-size: var(--text-section); margin: 0; } .section-head__sub { color: var(--text-mute); margin: 1rem 0 0; font-size: 1rem; } /* ── flagship experiences ─────────────────────────── */ .exp-list { display: flex; flex-direction: column; gap: clamp(3rem, 1.5rem + 4vw, 5.5rem); padding-top: 3.2rem; } .exp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 0.5rem + 3vw, 4rem); align-items: center; } .exp--rev .exp__media { order: 2; } .exp__media { aspect-ratio: 5 / 4; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; position: relative; background: radial-gradient(110% 80% at 50% 15%, rgba(201,169,106,0.08), transparent 60%), linear-gradient(180deg, var(--surface), var(--bg-2)); box-shadow: 0 30px 70px -45px rgba(0,0,0,0.85); } .exp__num { font-family: var(--serif); font-size: 0.95rem; color: var(--gold); letter-spacing: 0.1em; } .exp__kicker { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-mute); margin: 0.5rem 0 0.6rem; } .exp__body h3 { font-family: var(--serif); font-weight: 500; font-size: var(--text-h3); margin: 0 0 0.9rem; line-height: 1.1; } .exp__body p { color: var(--text-dim); margin: 0 0 1.5rem; max-width: 44ch; } /* ── gallery ──────────────────────────────────────── */ .gallery-section { padding-bottom: var(--section); } .filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 2.2rem 0 2.4rem; } .chip { font-family: var(--sans); font-size: 0.85rem; font-weight: 400; color: var(--text-dim); background: transparent; border: 1px solid var(--line-soft); border-radius: 100px; padding: 0.5rem 1.1rem; cursor: pointer; transition: color .25s, border-color .25s, background .25s; } .chip:hover { color: var(--text); border-color: var(--line); } .chip[aria-selected="true"] { color: #0b0c0e; background: var(--gold); border-color: var(--gold); } .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: clamp(1rem, 0.5rem + 1.5vw, 1.6rem); } .card { border: 1px solid var(--line-soft); border-radius: var(--radius); background: linear-gradient(180deg, var(--surface), var(--bg-2)); overflow: hidden; transition: transform var(--dur) var(--ease), border-color .3s, box-shadow .3s; will-change: transform; } .card:hover { transform: translateY(-4px); border-color: var(--line); box-shadow: 0 30px 60px -40px rgba(0,0,0,0.9); } .card__viewer { position: relative; aspect-ratio: 1 / 1; cursor: pointer; background: radial-gradient(120% 90% at 50% 12%, rgba(201,169,106,0.09), transparent 60%), var(--bg-2); border-bottom: 1px solid var(--line-soft); } .card__viewer model-viewer { position: absolute; inset: 0; } .card__ar { position: absolute; right: 0.7rem; bottom: 0.7rem; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.02em; color: var(--text); background: rgba(11,12,14,0.66); border: 1px solid var(--line); border-radius: 100px; padding: 0.4rem 0.75rem; backdrop-filter: blur(8px); cursor: pointer; transition: color .2s, border-color .2s; } .card__ar:hover { color: var(--gold-soft); border-color: var(--gold); } .card__body { display: block; padding: 1.1rem 1.2rem 1.3rem; } .card__cta { display: inline-block; margin-top: 0.85rem; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; color: var(--gold); opacity: 0.85; transition: opacity .25s var(--ease), transform .35s var(--ease); } .card:hover .card__cta { opacity: 1; transform: translateX(3px); } .card:focus-within { border-color: var(--gold); } .card__tag { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .card__body h3 { font-family: var(--serif); font-weight: 500; font-size: 1.32rem; line-height: 1.12; margin: 0.5rem 0 0.5rem; } .card__body p { font-size: 0.88rem; color: var(--text-mute); margin: 0; line-height: 1.5; } .card.is-hidden { display: none; } /* ── process ──────────────────────────────────────── */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 0.5rem + 2vw, 2.4rem); padding-top: 3rem; } .step { border-top: 1px solid var(--line); padding-top: 1.6rem; } .step__num { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); font-family: var(--serif); font-size: 1.2rem; margin-bottom: 1rem; } .step h3 { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; margin: 0 0 0.6rem; } .step p { color: var(--text-dim); margin: 0; } /* ── cta ──────────────────────────────────────────── */ .cta { position: relative; padding-block: var(--section); text-align: center; overflow: hidden; } .cta__glow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80vw; height: 80vw; max-width: 900px; max-height: 900px; background: radial-gradient(circle, rgba(201,169,106,0.14), transparent 60%); pointer-events: none; } .cta__inner { position: relative; max-width: 680px; margin-inline: auto; } .cta h2 { font-size: var(--text-section); margin: 0 0 1.2rem; } .cta .lede { margin-inline: auto; } .cta__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-top: 2.2rem; } /* ── footer ───────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--line-soft); padding-block: 3rem; } .site-footer__inner { display: grid; gap: 1.4rem; } .footer-note { font-size: 0.8rem; color: var(--text-mute); max-width: 70ch; margin: 0; line-height: 1.6; } .footer-copy { font-size: 0.8rem; color: var(--text-mute); margin: 0; } /* ── reveal-on-scroll ─────────────────────────────── */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .reveal[data-delay="1"] { transition-delay: 0.1s; } .reveal[data-delay="2"] { transition-delay: 0.2s; } .reveal.is-in { opacity: 1; transform: none; } /* ── responsive ───────────────────────────────────── */ @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .hero__stage { order: -1; max-width: 460px; } .exp, .exp--rev { grid-template-columns: 1fr; } .exp--rev .exp__media { order: -1; } .exp__media { max-width: 560px; } .steps { grid-template-columns: 1fr; } .primary-nav { display: none; } } @media (max-width: 560px) { .header-cta { display: none; } .hero__stats { gap: 1.4rem; } .hero__stats b { font-size: 1.8rem; } } /* ── reduced motion ───────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .marquee__track { animation: none; } .dot { animation: none; } .btn:hover, .card:hover { transform: none; } }