.hp-field { position:absolute; left:-9999px; opacity:0; height:0; width:0; overflow:hidden; } @font-face { font-family: "Orpheus Pro"; src: url("fonts/Orpheus_Pro.ttf") format("truetype"); font-weight: 300 500; font-style: normal; font-display: swap; } @font-face { font-family: "Orpheus Pro"; src: url("fonts/Orpheus_Pro.ttf") format("truetype"); font-weight: 300 500; font-display: swap; } /* Inter and Dancing Script loaded via Google Fonts in HTML */ /* ═══════════════════════════════════════════ GLOBAL TOKENS ═══════════════════════════════════════════ */ :root { --black: #0a0a08; --deep: #111109; --footer: #1a0f0a; --bg: #f5ede8; --dark: #1c1612; --gold: #c49a3c; --glt: #d9b458; --cream: #f0ece4; --muted: #9a8e8a; --stripe-light: rgba(210, 178, 168, .24); --stripe-dark: rgba(255, 255, 255, .055); --fh: 'Orpheus Pro', Georgia, serif; --fd: 'Orpheus Pro', Georgia, serif; --fb: 'Inter', sans-serif; --fs: 'Dancing Script', cursive; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--dark); overflow-x: hidden; cursor: none; } /* ═══════════════════════════════════════════ CURSOR ═══════════════════════════════════════════ */ #cdot { position: fixed; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: background .3s; } #cring { position: fixed; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(196, 154, 60, .42); pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); transition: width .28s, height .28s, border-color .28s; } body.hov #cring { width: 44px; height: 44px; border-color: rgba(196, 154, 60, .85); } body.light #cdot { background: var(--dark); } body.light #cring { border-color: rgba(28, 22, 18, .22); } body.light.hov #cring { border-color: rgba(196, 154, 60, .7); } /* ═══════════════════════════════════════════ SHARED REVEAL ═══════════════════════════════════════════ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; } .reveal.vis { opacity: 1; transform: translateY(0); } /* ═══════════════════════════════════════════ SHARED STRIPES ═══════════════════════════════════════════ */ .stripes { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(8, 1fr); pointer-events: none; } .stripe { border-right: 1px solid var(--stripe-light); } .stripe:nth-child(even) { background: rgba(210, 178, 168, .07); } .stripe:last-child { border-right: none; } /* ═══════════════════════════════════════════ 1. HERO ═══════════════════════════════════════════ */ .hero { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center top; background-repeat: no-repeat; transform: scale(1.08); animation: bgIn 2.6s cubic-bezier(.25, .46, .45, .94) forwards; will-change: transform; } @keyframes bgIn { from { transform: scale(1.14); filter: brightness(.5); } to { transform: scale(1.04); filter: brightness(1); } } .hero-vig { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to right, rgba(9, 8, 7, .88) 0%, rgba(9, 8, 7, .35) 48%, rgba(9, 8, 7, .04) 100%), linear-gradient(to top, rgba(9, 8, 7, .78) 0%, transparent 42%), linear-gradient(to bottom, rgba(9, 8, 7, .55) 0%, transparent 20%); } .hero-grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .038; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } /* nav */ .hero-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding: 32px 44px; display: flex; align-items: center; justify-content: center; opacity: 0; animation: fadeDown .8s 1.6s ease forwards; } .hamburger { position: absolute; left: 44px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 5px; cursor: none; padding: 4px; } .hamburger span { display: block; width: 22px; height: 1.5px; background: rgba(240, 236, 228, .75); transition: background .3s; } .hamburger:hover span { background: var(--gold); } .hero-logo { font-family: var(--fh); font-size: 1.65rem; font-weight: 400; color: var(--cream); text-decoration: none; letter-spacing: .03em; } .hero-nav-cta { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); font-family: var(--fb); font-size: .58rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(196, 154, 60, .4); padding: 10px 22px; text-decoration: none; cursor: none; transition: background .35s, color .35s; } .hero-nav-cta:hover { background: var(--gold); color: var(--black); } @keyframes fadeDown { from { opacity: 0; transform: translateY(-12px) } to { opacity: 1; transform: translateY(0) } } /* side indicator */ .hero-side { position: absolute; right: 36px; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; animation: fadeIn .7s 2.4s ease forwards; } .hero-side svg { width: 10px; fill: none; stroke: rgba(240, 236, 228, .32); stroke-width: 1.3; } .side-nums { display: flex; flex-direction: column; gap: 14px; align-items: center; } .sn { font-family: var(--fb); font-size: .55rem; font-weight: 300; letter-spacing: .08em; color: rgba(240, 236, 228, .28); line-height: 1; } .sn.on { color: var(--cream); font-weight: 400; } /* content */ .hero-content { position: relative; z-index: 10; text-align: center; max-width: 1060px; padding: 0 24px; margin-bottom: 80px; } .hero-eyebrow { font-family: var(--fb); font-size: .6rem; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: rgba(240, 236, 228, .48); margin-bottom: 28px; opacity: 0; animation: fadeUp .85s .85s ease forwards; } .hero-h1 { font-family: var(--fh); font-weight: 400; line-height: 1.1; margin-bottom: 42px; } .h1-a { display: block; color: var(--cream); font-size: clamp(2.2rem, 4.0vw, 4.1rem); opacity: 0; animation: fadeUp 1s 1.05s ease forwards; } .h1-b { display: block; font-style: normal; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; font-size: clamp(2.2rem, 4.8vw, 4.5rem); background: linear-gradient(100deg, var(--gold) 0%, var(--glt) 36%, #eac96a 50%, var(--gold) 64%, #b8881a 100%); background-size: 220% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: 0; animation: fadeUp 1s 1.25s ease forwards, shimmer 5.5s 2.4s linear infinite; } @keyframes shimmer { to { background-position: 220% center } } .hero-ctas { display: flex; align-items: center; justify-content: center; gap: 30px; opacity: 0; animation: fadeUp .85s 1.55s ease forwards; } .btn-prim { font-family: var(--fb); font-size: .59rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--black); background: var(--cream); border: 1px solid var(--cream); padding: 13px 32px; text-decoration: none; cursor: none; position: relative; overflow: hidden; transition: border-color .35s; } .btn-prim::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform: translateX(-101%); transition: transform .42s cubic-bezier(.77, 0, .18, 1); z-index: 0; } .btn-prim span { position: relative; z-index: 1; } .btn-prim:hover { border-color: var(--gold); } .btn-prim:hover::after { transform: translateX(0); } .btn-ghost-hero { font-family: var(--fb); font-size: .59rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: rgba(240, 236, 228, .72); background: none; border: none; text-decoration: none; cursor: none; position: relative; transition: color .3s; } .btn-ghost-hero::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: var(--gold); transition: width .35s ease; } .btn-ghost-hero:hover { color: var(--gold); } .btn-ghost-hero:hover::after { width: 100%; } /* scroll hint */ .hero-scroll { position: absolute; bottom: 102px; left: 50%; z-index: 10; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; animation: fadeIn .7s 2.2s ease forwards; } .sh-line { width: 1px; height: 44px; background: linear-gradient(to bottom, rgba(196, 154, 60, .7), transparent); animation: shPulse 2s 2.5s ease infinite; } .sh-txt { font-family: var(--fb); font-size: .48rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(240, 236, 228, .28); } @keyframes shPulse { 0%, 100% { opacity: .3; transform: scaleY(.7) translateY(0) } 50% { opacity: 1; transform: scaleY(1) translateY(5px) } } /* stats */ .hero-stats { position: absolute; bottom: 0; left: 0; right: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(240, 236, 228, .1); opacity: 0; animation: fadeUp .85s 1.95s ease forwards; } .stat-cell { padding: 18px 32px; border-right: 1px solid rgba(240, 236, 228, .08); position: relative; overflow: hidden; transition: background .4s; } .stat-cell:last-child { border-right: none; } .stat-cell::before { content: ''; position: absolute; inset: 0; background: rgba(196, 154, 60, .045); opacity: 0; transition: opacity .4s; } .stat-cell:hover::before { opacity: 1; } .stat-lbl { display: block; font-family: var(--fb); font-size: .5rem; font-weight: 300; letter-spacing: .16em; text-transform: uppercase; color: rgba(240, 236, 228, .36); margin-bottom: 6px; } .stat-val { display: block; font-family: var(--fb); font-size: .76rem; font-weight: 500; letter-spacing: .02em; color: var(--cream); } @keyframes fadeUp { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: translateY(0) } } @keyframes fadeIn { to { opacity: 1 } } /* ═══════════════════════════════════════════ 2. PHILOSOPHY ═══════════════════════════════════════════ */ .philosophy { position: relative; padding: 90px 0 100px; overflow: hidden; background: var(--bg); } .phil-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 300px 1fr; gap: 0; max-width: 1280px; margin: 0 auto; padding: 0 60px; } .phil-left { padding-right: 40px; padding-top: 4px; } .phil-title { font-family: var(--fh); font-size: clamp(2rem, 3.2vw, 2.9rem); font-weight: 400; color: var(--dark); line-height: 1.15; margin-bottom: 12px; } .phil-body { font-family: var(--fb); font-size: .72rem; font-weight: 300; line-height: 1.8; color: var(--muted); margin-bottom: 24px; } .img-stack { position: relative; height: 340px; } .img-back { position: absolute; left: 80px; top: 0; width: 160px; height: 220px; overflow: hidden; background: linear-gradient(145deg, #c4937a 0%, #9e6e55 40%, #7a4f3a 100%); box-shadow: 0 12px 40px rgba(28, 22, 18, .18); } .img-back::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 40% 30%, rgba(255, 200, 160, .15), transparent 70%); } .img-front { position: absolute; left: 0; top: 80px; width: 175px; height: 225px; overflow: hidden; background: linear-gradient(155deg, #b8856a 0%, #8c5c44 50%, #6b3f2c 100%); box-shadow: 0 16px 50px rgba(28, 22, 18, .22); z-index: 2; } .img-front::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 70%, rgba(255, 160, 100, .12), transparent 60%); } .phil-right { padding-left: 60px; display: flex; flex-direction: column; justify-content: space-between; } .big-quote { font-family: var(--fh); font-size: clamp(1.7rem, 2.8vw, 2.55rem); font-weight: 300; line-height: 1.42; color: var(--dark); margin-bottom: 32px; max-width: 620px; } .sub-texts { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .sub-left { font-family: var(--fb); font-size: .72rem; font-weight: 300; line-height: 1.85; color: var(--muted); } .sub-right { font-family: var(--fh); font-size: .95rem; font-weight: 300; line-height: 1.75; color: var(--dark); cursor: none; position: relative; text-decoration: none; transition: color .3s; } .sub-right::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--gold); transform: scaleX(1); transform-origin: left; transition: transform .4s ease; } .sub-right:hover { color: var(--gold); } .sub-right:hover::after { transform: scaleX(0); } /* ═══════════════════════════════════════════ 3. QUOTE ═══════════════════════════════════════════ */ .quote-section { position: relative; padding: 90px 0 100px; overflow: hidden; background: var(--bg); } .quote-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1280px; margin: 0 auto; padding: 0 0 0 60px; align-items: center; } .quote-left { padding-right: 60px; } .q-label { font-family: var(--fb); font-size: .52rem; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; display: block; } .q-text { font-family: var(--fh); font-size: clamp(1.45rem, 2vw, 1.85rem); font-weight: 300; line-height: 1.55; color: var(--dark); margin-bottom: 32px; } .q-sig { font-family: var(--fs); font-size: 1.6rem; font-weight: 400; color: var(--dark); display: block; } .quote-right { position: relative; height: 480px; overflow: hidden; } .q-photo { position: absolute; inset: 0; background: linear-gradient(135deg, #3d2510 0%, #6b3c1a 30%, #8c5a2a 55%, #5a3010 100%); transform: scale(1.04); transition: transform 6s ease; } .q-photo::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255, 180, 80, .1), transparent 65%), radial-gradient(ellipse 60% 80% at 50% 100%, rgba(20, 10, 5, .45), transparent 60%); } /* ═══════════════════════════════════════════ 4. STATEMENT ═══════════════════════════════════════════ */ .statement-section { position: relative; padding: 110px 60px 100px; overflow: hidden; background: var(--bg); } .statement-inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; text-align: center; } .stmt-heading { margin-bottom: 72px; } .line-dark { display: block; font-family: var(--fh); font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 400; color: var(--dark); line-height: 1.2; } .line-gold { display: block; font-family: var(--fh); font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 400; color: var(--gold); line-height: 1.2; letter-spacing: .04em; } .body-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; text-align: left; max-width: 860px; margin: 0 auto; } .body-col { font-family: var(--fb); font-size: .72rem; font-weight: 300; line-height: 1.85; color: var(--muted); } /* ═══════════════════════════════════════════ 5. ABOUT ═══════════════════════════════════════════ */ .about-section { position: relative; padding: 80px 0 100px; overflow: hidden; background: var(--bg); } .about-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1280px; margin: 0 auto; padding: 0 60px; align-items: center; } .collage { position: relative; height: 560px; padding-right: 40px; } .img-main { position: absolute; left: 0; top: 0; width: 390px; height: 410px; overflow: hidden; background: linear-gradient(155deg, #2a1510 0%, #5a2820 40%, #3a1810 100%); } .img-main::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 40% 30%, rgba(200, 140, 100, .12), transparent 60%); } .img-main::after, .img-sm1::after, .img-sm2::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(10, 5, 3, .3)); } .img-sm1 { position: absolute; left: 130px; bottom: 0; width: 140px; height: 120px; overflow: hidden; z-index: 2; background: linear-gradient(135deg, #1a0c08 0%, #3a1a12 60%, #220e08 100%); } .img-sm2 { position: absolute; left: 280px; bottom: 20px; width: 180px; height: 160px; overflow: hidden; z-index: 3; background: linear-gradient(135deg, #3a1812 0%, #6a2e20 50%, #2a1008 100%); } .img-main, .img-sm1, .img-sm2 { transition: transform .08s linear; will-change: transform; } .about-content { padding-left: 40px; } .drop-cap-block { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 36px; } .drop-cap { font-family: var(--fh); font-size: 5.5rem; font-weight: 400; color: var(--dark); line-height: .75; flex-shrink: 0; margin-top: 4px; } .drop-cap-text { font-family: var(--fb); font-size: .75rem; font-weight: 300; line-height: 1.85; color: var(--muted); } .about-checklist { list-style: none; margin-bottom: 44px; } .about-checklist li { display: flex; align-items: flex-start; gap: 14px; font-family: var(--fb); font-size: .74rem; font-weight: 300; line-height: 1.75; color: var(--dark); padding: 10px 0; border-bottom: 1px solid rgba(28, 22, 18, .06); } .about-checklist li:last-child { border-bottom: none; } .check-icon { flex-shrink: 0; margin-top: 3px; width: 14px; height: 14px; fill: none; stroke: var(--gold); stroke-width: 2; } .about-btns { display: flex; align-items: center; gap: 16px; } .btn-dark { font-family: var(--fb); font-size: .58rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #fff; background: var(--dark); border: 1px solid var(--dark); padding: 13px 28px; text-decoration: none; cursor: none; position: relative; overflow: hidden; } .btn-dark::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform: translateX(-101%); transition: transform .4s cubic-bezier(.77, 0, .18, 1); z-index: 0; } .btn-dark span { position: relative; z-index: 1; } .btn-dark:hover { border-color: var(--gold); } .btn-dark:hover::after { transform: translateX(0); } .btn-ghost-light { font-family: var(--fb); font-size: .58rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--dark); background: transparent; border: 1px solid rgba(28, 22, 18, .3); padding: 13px 28px; text-decoration: none; cursor: none; transition: border-color .3s, color .3s; } .btn-ghost-light:hover { border-color: var(--gold); color: var(--gold); } /* ═══════════════════════════════════════════ 6A. FIVESTAR DARK ═══════════════════════════════════════════ */ .dark-section { position: relative; background: var(--black); padding: 80px 60px 60px; overflow: visible; } .dark-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(196, 154, 60, .04), transparent 70%); } .section-eyebrow { position: relative; z-index: 2; text-align: center; font-family: var(--fb); font-size: .58rem; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; color: rgba(196, 154, 60, .7); margin-bottom: 16px; } .dark-title { position: relative; z-index: 2; text-align: center; font-family: var(--fh); font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 400; color: var(--cream); margin-bottom: 20px; } .gold-divider { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 64px; } .gdiv-line { width: 80px; height: 1px; background: rgba(196, 154, 60, .3); } .gdiv-diamond { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); } .phases { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); max-width: 1200px; margin: 0 auto; border: 1px solid rgba(255, 255, 255, .07); } .phase { padding: 44px 28px; border-right: 1px solid rgba(255, 255, 255, .07); text-align: center; position: relative; transition: background .4s ease; } .phase:last-child { border-right: none; } .phase::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(196, 154, 60, .06), transparent); opacity: 0; transition: opacity .4s; } .phase:hover::before { opacity: 1; } .phase-roman { font-family: var(--fh); font-size: 2.8rem; font-weight: 300; color: rgba(196, 154, 60, .18); display: block; margin-bottom: 20px; line-height: 1; } .phase-diamond { width: 48px; height: 48px; margin: 0 auto 22px; border: 1px solid rgba(196, 154, 60, .45); transform: rotate(45deg); display: flex; align-items: center; justify-content: center; transition: border-color .3s; } .phase:hover .phase-diamond { border-color: rgba(196, 154, 60, .9); } .phase-diamond svg { transform: rotate(-45deg); width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 1.4; } .phase-name { font-family: var(--fb); font-size: .6rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--cream); margin-bottom: 16px; } .phase-desc { font-family: var(--fb); font-size: .65rem; font-weight: 300; line-height: 1.8; color: rgba(240, 236, 228, .4); } /* 6B. FIVESTAR LIGHT */ .bottom-wrap { position: relative; background: var(--bg); overflow: visible; } .bottom-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; max-width: 1200px; margin: 0 auto; padding: 0 60px; align-items: start; } .pos-left { padding: 80px 60px 80px 0; } .pos-title { font-family: var(--fh); font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 400; color: var(--dark); margin-bottom: 10px; } .pos-subtitle { font-family: var(--fb); font-size: .68rem; font-weight: 300; color: var(--muted); margin-bottom: 44px; display: block; } .pos-quote { font-family: var(--fh); font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 300; color: var(--dark); line-height: 1.55; } .right-col { display: flex; flex-direction: column; margin-top: -40px; position: relative; z-index: 10; padding-bottom: 80px; } .accordion { background: #fff; box-shadow: 0 12px 60px rgba(0, 0, 0, .15); } .acc-item { border-bottom: 1px solid rgba(28, 22, 18, .08); } .acc-item:last-child { border-bottom: none; } .acc-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 28px; cursor: none; transition: background .3s; } .acc-header:hover { background: rgba(196, 154, 60, .04); } .acc-title { font-family: var(--fb); font-size: .78rem; font-weight: 400; color: var(--dark); transition: color .3s; } .acc-header:hover .acc-title { color: var(--gold); } .acc-arrow { width: 16px; height: 16px; fill: none; stroke: rgba(154, 142, 138, .6); stroke-width: 1.5; transition: transform .35s, stroke .3s; flex-shrink: 0; } .acc-item.open .acc-arrow { transform: rotate(180deg); stroke: var(--gold); } .acc-body { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.25, .46, .45, .94); } .acc-item.open .acc-body { max-height: 400px; } .acc-content { padding: 0 28px 28px; } .acc-checklist { list-style: none; margin-bottom: 20px; } .acc-checklist li { display: flex; align-items: flex-start; gap: 12px; font-family: var(--fb); font-size: .72rem; font-weight: 300; color: var(--dark); line-height: 1.65; padding: 6px 0; } .acc-checklist li::before { content: '✓'; color: var(--gold); font-size: .7rem; flex-shrink: 0; margin-top: 2px; } .acc-btn { display: inline-block; font-family: var(--fb); font-size: .58rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #fff; background: var(--gold); border: none; padding: 11px 26px; cursor: none; transition: background .3s; } .acc-btn:hover { background: var(--glt); } .fivestar-subtexts { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 40px 0 80px; } .sub-col { font-family: var(--fb); font-size: .7rem; font-weight: 300; line-height: 1.85; color: var(--muted); } /* ═══════════════════════════════════════════ 7. PARTNERSHIPS ═══════════════════════════════════════════ */ .partnerships { background: var(--black); padding: 140px 60px; text-align: center; position: relative; overflow: hidden; border-top: 1px solid rgba(201, 169, 110, .1); } .partnerships::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(201, 169, 110, .04), transparent 70%); } .p-label { font-family: var(--fb); font-size: .6rem; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; display: block; } .p-title { font-family: var(--fd); font-size: clamp(2rem, 3vw, 3rem); font-weight: 300; color: var(--cream); margin-bottom: 20px; } .p-divider { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 60px; } .p-div-line { width: 80px; height: 1px; background: rgba(201, 169, 110, .3); } .p-div-diamond { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); } .p-intro { font-family: var(--fb); font-size: .72rem; font-weight: 300; color: #8a8a80; max-width: 580px; margin: 0 auto 80px; line-height: 1.85; } .p-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(201, 169, 110, .1); max-width: 1200px; margin: 0 auto 80px; border: 1px solid rgba(201, 169, 110, .1); } .p-item { background: var(--black); padding: 50px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; transition: background .4s; } .p-item:hover { background: rgba(201, 169, 110, .04); } .p-item-name { font-family: var(--fd); font-size: 1.15rem; font-weight: 300; color: rgba(201, 169, 110, .4); transition: color .4s; } .p-item:hover .p-item-name { color: rgba(201, 169, 110, .85); } .p-item-cat { font-family: var(--fb); font-size: .52rem; font-weight: 300; letter-spacing: .22em; text-transform: uppercase; color: rgba(138, 138, 128, .45); transition: color .4s; } .p-item:hover .p-item-cat { color: rgba(138, 138, 128, .7); } .p-bottom-text { font-family: var(--fb); font-size: .68rem; font-weight: 300; color: #8a8a80; max-width: 500px; margin: 0 auto 36px; line-height: 1.85; display: block; } .p-cta { display: inline-block; font-family: var(--fb); font-size: .6rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(201, 169, 110, .35); padding: 14px 36px; text-decoration: none; cursor: none; position: relative; overflow: hidden; } .p-cta::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform: translateX(-101%); transition: transform .42s cubic-bezier(.77, 0, .18, 1); z-index: 0; } .p-cta span { position: relative; z-index: 1; } .p-cta:hover { color: var(--black); border-color: var(--gold); } .p-cta:hover::after { transform: translateX(0); } /* ═══════════════════════════════════════════ 8. CONTACT ═══════════════════════════════════════════ */ .contact-section { position: relative; padding: 120px 0 130px; overflow: hidden; background: var(--bg); } .contact-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 100px; max-width: 1280px; margin: 0 auto; padding: 0 60px; align-items: start; } .contact-info { opacity: 0; transform: translateX(-28px); transition: opacity .9s ease, transform .9s ease; } .contact-info.vis { opacity: 1; transform: translateX(0); } .c-label { font-family: var(--fb); font-size: .58rem; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; display: block; } .c-heading { font-family: var(--fh); font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 300; line-height: 1.2; color: var(--dark); margin-bottom: 24px; } .c-heading em { color: var(--gold); } .c-text { font-family: var(--fb); font-size: .73rem; font-weight: 300; line-height: 1.85; color: var(--muted); margin-bottom: 50px; } .c-detail { padding: 18px 0; border-top: 1px solid rgba(196, 154, 60, .15); display: flex; flex-direction: column; gap: 4px; } .c-detail:last-child { border-bottom: 1px solid rgba(196, 154, 60, .15); } .c-det-lbl { font-family: var(--fb); font-size: .55rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } .c-det-val { font-family: var(--fb); font-size: .78rem; font-weight: 300; color: var(--dark); } .c-det-val a { color: var(--dark); text-decoration: none; } .c-det-val a:hover { color: var(--gold); } .contact-form-wrap { background: #fff; padding: 52px; border: 1px solid rgba(196, 154, 60, .15); position: relative; opacity: 0; transform: translateX(28px); transition: opacity .9s .1s ease, transform .9s .1s ease; } .contact-form-wrap.vis { opacity: 1; transform: translateX(0); } .contact-form-wrap::before { content: ''; position: absolute; top: -1px; left: 30px; right: 30px; height: 2px; background: linear-gradient(to right, transparent, var(--gold), transparent); } .form-title { font-family: var(--fd); font-size: 1.5rem; font-weight: 300; color: var(--dark); margin-bottom: 34px; display: block; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-family: var(--fb); font-size: .56rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .form-group input, .form-group select, .form-group textarea { width: 100%; background: rgba(245, 237, 232, .4); border: 1px solid rgba(196, 154, 60, .2); color: var(--dark); font-family: var(--fb); font-size: .75rem; font-weight: 300; padding: 12px 16px; outline: none; transition: border-color .3s, background .3s; resize: none; -webkit-appearance: none; border-radius: 0; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--gold); background: rgba(196, 154, 60, .04); } .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(154, 142, 138, .5); } .form-group select option { background: #fff; color: var(--dark); } .form-submit { width: 100%; padding: 16px; background: var(--dark); color: #fff; border: none; font-family: var(--fb); font-size: .6rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; cursor: none; position: relative; overflow: hidden; } .form-submit::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform: translateX(-101%); transition: transform .42s cubic-bezier(.77, 0, .18, 1); z-index: 0; } .form-submit span { position: relative; z-index: 1; } .form-submit:hover::after { transform: translateX(0); } /* ═══════════════════════════════════════════ 9. BLOG ═══════════════════════════════════════════ */ .blog-section { position: relative; padding: 100px 0 60px; overflow: hidden; background: var(--bg); } .blog-title { position: relative; z-index: 2; text-align: center; font-family: var(--fh); font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; letter-spacing: .15em; text-transform: uppercase; color: var(--dark); margin-bottom: 70px; } .slide-outer { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 0 20px; overflow: hidden; } .slides { display: flex; transition: transform .7s cubic-bezier(.25, .46, .45, .94); } .slide { min-width: 100%; } /* ── BLOG CARDS ──────────────────────────── */ .slide-outer { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 0 60px; } .slides { display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 8px; } .slides::-webkit-scrollbar { display: none; } .slide { min-width: 0; flex: none; width: 320px; scroll-snap-align: start; display: flex; flex-direction: column; } .article { display: block; } .article-1, .article-2 {} .article-2 .spacer { display: none; } .art-box { width: 100%; } .art-img { overflow: hidden; width: 100%; margin-bottom: 14px; } .art-img-inner { width: 100%; height: 320px; transition: transform .6s; position: relative; } .art-img-inner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(10, 5, 3, .2)); } .art-img:hover .art-img-inner { transform: scale(1.04); } .art-text { width: 100%; display: flex; flex-direction: column; flex: 1; } .art-heading { font-family: var(--fh); font-size: 1.4rem; font-weight: 400; color: var(--dark); line-height: 1.25; margin-bottom: 8px; } .art-body { font-family: var(--fb); font-size: .72rem; font-weight: 300; line-height: 1.85; color: var(--muted); margin-bottom: 12px; flex: 1; } .art-btn { display: inline-block; font-family: var(--fb); font-size: .56rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #fff; background: var(--dark); padding: 11px 24px; text-decoration: none; cursor: none; position: relative; overflow: hidden; align-self: flex-start; margin-top: auto; } .art-btn::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform: translateX(-101%); transition: transform .42s cubic-bezier(.77, 0, .18, 1); z-index: 0; } .art-btn span { position: relative; z-index: 1; } .art-btn:hover::after { transform: translateX(0); } .blog-divider { display: none; } .art-heading { font-family: var(--fh); font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 400; color: var(--dark); line-height: 1.25; margin-bottom: 8px; } .art-body { font-family: var(--fb); font-size: .72rem; font-weight: 300; line-height: 1.85; color: var(--muted); margin-bottom: 12px; flex: 1; } .art-btn { display: inline-block; font-family: var(--fb); font-size: .56rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #fff; background: var(--dark); padding: 11px 24px; text-decoration: none; cursor: none; position: relative; overflow: hidden; align-self: flex-start; margin-top: auto; } .art-btn::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform: translateX(-101%); transition: transform .42s cubic-bezier(.77, 0, .18, 1); z-index: 0; } .art-btn span { position: relative; z-index: 1; } .art-btn:hover::after { transform: translateX(0); } .blog-divider { display: flex; align-items: center; margin: 40px 0; } .dash-line { flex: 1; border-top: 1px dashed rgba(196, 154, 60, .3); } .dash-center { width: 26px; height: 26px; border: 1px solid rgba(196, 154, 60, .4); transform: rotate(45deg); display: flex; align-items: center; justify-content: center; margin: 0 14px; flex-shrink: 0; } .dash-dot { width: 5px; height: 5px; background: var(--gold); border-radius: 50%; transform: rotate(-45deg); } .blog-nav { position: relative; z-index: 2; max-width: 1280px; margin: 16px auto 0; padding: 0 20px; display: flex; justify-content: space-between; align-items: flex-start; } .blog-nav-prev, .blog-nav-next { cursor: none; max-width: 240px; transition: opacity .4s; } .blog-nav-next { text-align: right; } .nav-label { font-family: var(--fb); font-size: .52rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; display: block; } .nav-art-title { font-family: var(--fh); font-size: .95rem; color: var(--dark); line-height: 1.3; display: block; transition: color .3s; } .blog-nav-prev:hover .nav-art-title, .blog-nav-next:hover .nav-art-title { color: var(--gold); } .nav-hidden { opacity: 0; pointer-events: none; } .blog-dots { position: relative; z-index: 2; display: flex; justify-content: center; gap: 10px; margin-top: 48px; padding-bottom: 40px; } .blog-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(28, 22, 18, .18); cursor: none; transition: background .3s, transform .3s; } .blog-dot.on { background: var(--gold); transform: scale(1.35); } /* ═══════════════════════════════════════════ 10. FOOTER (newsletter + gallery + dark) ═══════════════════════════════════════════ */ .newsletter { position: relative; background: var(--bg); padding: 60px 0 70px; overflow: hidden; } .nl-stripes { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(8, 1fr); pointer-events: none; } .nl-stripe { border-right: 1px solid rgba(210, 178, 168, .24); } .nl-stripe:nth-child(even) { background: rgba(210, 178, 168, .07); } .nl-stripe:last-child { border-right: none; } .nl-inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 0 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .nl-label { font-family: var(--fb); font-size: .58rem; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; display: block; } .nl-heading { font-family: var(--fh); font-size: clamp(1.5rem, 2.5vw, 2.2rem); font-weight: 400; color: var(--dark); line-height: 1.3; } .nl-form { display: flex; margin-bottom: 14px; border: 1px solid rgba(28, 22, 18, .15); } .nl-input { flex: 1; padding: 13px 18px; background: #fff; border: none; outline: none; font-family: var(--fb); font-size: .72rem; font-weight: 300; color: var(--dark); } .nl-input::placeholder { color: rgba(154, 142, 138, .5); } .nl-btn { padding: 13px 24px; background: var(--dark); color: #fff; border: none; font-family: var(--fb); font-size: .58rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; cursor: none; white-space: nowrap; position: relative; overflow: hidden; } .nl-btn::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform: translateX(-101%); transition: transform .4s cubic-bezier(.77, 0, .18, 1); z-index: 0; } .nl-btn span { position: relative; z-index: 1; } .nl-btn:hover::after { transform: translateX(0); } .nl-check { display: flex; align-items: center; gap: 10px; cursor: none; } .nl-check input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--gold); flex-shrink: 0; } .nl-check label { font-family: var(--fb); font-size: .62rem; font-weight: 300; color: var(--muted); } .nl-check label a { color: var(--dark); text-decoration: underline; } .gallery { display: grid; grid-template-columns: repeat(6, 1fr); height: 185px; } .gal-cell { overflow: hidden; position: relative; cursor: none; } .gal-inner { width: 100%; height: 100%; transition: transform .6s; background-size: cover; background-position: center; } .gal-cell:hover .gal-inner { transform: scale(1.06); } .g1 { background: linear-gradient(155deg, #8b4a2a, #c4713a, #6b3520); } .g2 { background: linear-gradient(135deg, #3d2510, #7a4a28, #5a3018); } .g3 { background: linear-gradient(145deg, #6a3820, #a05830, #4a2810); } .g4 { background: linear-gradient(155deg, #5a2c18, #8a4828, #3a1c10); } .g5 { background: linear-gradient(135deg, #7a4028, #b05838, #5a2c18); } .g6 { background: linear-gradient(145deg, #4a2818, #8a5030, #3a1e10); } .site-footer { background: var(--footer); padding: 60px 60px 0; } .footer-top { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 60px; padding-bottom: 50px; border-bottom: 1px solid rgba(255, 255, 255, .07); } .f-logo { font-family: var(--fd); font-size: 1.6rem; font-weight: 300; color: var(--cream); display: block; margin-bottom: 4px; } .f-tagline { font-family: var(--fb); font-size: .52rem; font-weight: 300; letter-spacing: .16em; text-transform: uppercase; color: rgba(240, 236, 228, .3); margin-bottom: 20px; display: block; } .f-desc { font-family: var(--fb); font-size: .68rem; font-weight: 300; line-height: 1.8; color: rgba(240, 236, 228, .35); max-width: 240px; } .f-col-title { font-family: var(--fb); font-size: .58rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--cream); margin-bottom: 22px; display: block; } .f-col ul { list-style: none; } .f-col ul li { margin-bottom: 11px; display: flex; align-items: center; gap: 8px; } .f-col ul li::before { content: '›'; color: rgba(196, 154, 60, .5); font-size: .8rem; flex-shrink: 0; } .f-col ul a { font-family: var(--fb); font-size: .68rem; font-weight: 300; color: rgba(240, 236, 228, .4); text-decoration: none; transition: color .3s; } .f-col ul a:hover { color: var(--gold); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; } .f-copy { font-family: var(--fb); font-size: .58rem; font-weight: 300; color: rgba(240, 236, 228, .25); letter-spacing: .06em; } .f-copy strong { color: rgba(240, 236, 228, .4); font-weight: 400; } .f-socials { display: flex; gap: 20px; align-items: center; } .f-social { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: center; cursor: none; transition: border-color .3s, background .3s; text-decoration: none; } .f-social:hover { border-color: var(--gold); background: rgba(196, 154, 60, .08); } .f-social svg { width: 13px; height: 13px; fill: rgba(240, 236, 228, .4); transition: fill .3s; } .f-social:hover svg { fill: var(--gold); } /* ═══ SCROLL REVEAL DELAYS ═══ */ .reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; } .reveal-d4 { transition-delay: .32s; } .reveal-d5 { transition-delay: .40s; } .reveal-d6 { transition-delay: .48s; } .reveal-xl { opacity: 0; transform: translateX(-30px); transition: opacity 1s ease, transform 1s ease; } .reveal-xl.vis { opacity: 1; transform: translateX(0); } .reveal-xr { opacity: 0; transform: translateX(28px); transition: opacity .9s .1s ease, transform .9s .1s ease; } .reveal-xr.vis { opacity: 1; transform: translateX(0); } /* p-item stagger */ .p-item:nth-child(1) { transition-delay: .04s } .p-item:nth-child(2) { transition-delay: .10s } .p-item:nth-child(3) { transition-delay: .16s } .p-item:nth-child(4) { transition-delay: .22s } .p-item:nth-child(5) { transition-delay: .28s } .p-item:nth-child(6) { transition-delay: .34s } .p-item:nth-child(7) { transition-delay: .40s } .p-item:nth-child(8) { transition-delay: .46s } .p-item { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease, background .4s; } .p-item.vis { opacity: 1; transform: translateY(0); } /* phase stagger */ .phase:nth-child(1) { transition-delay: .05s } .phase:nth-child(2) { transition-delay: .13s } .phase:nth-child(3) { transition-delay: .21s } .phase:nth-child(4) { transition-delay: .29s } .phase:nth-child(5) { transition-delay: .37s } .phase { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease, background .4s; } .phase.vis { opacity: 1; transform: translateY(0); } /* ═══════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════ */ @media (max-width: 1100px) { /* Hero */ .hero-stats { grid-template-columns: repeat(2, 1fr); } .stat-cell { padding: 18px 20px; } /* Philosophy */ .phil-grid { grid-template-columns: 1fr; padding: 60px 40px; gap: 60px; } .phil-left { padding-right: 0; text-align: center; } .phil-right { padding-left: 0; } .big-quote { text-align: center; max-width: 100%; } .sub-texts { text-align: center; } .sub-left { text-align: center; } .sub-right { text-align: center; display: inline-block; margin: 0 auto; } /* Philosophy images: container 360px, center both images */ .img-stack { height: 320px; width: 360px; margin: 0 auto; position: relative; } /* back: 200px wide → (360-200)/2 = 80 */ .img-back { left: 100px; width: 200px; height: 260px; } /* front: 210px wide → offset left of center */ .img-front { left: 40px; width: 210px; height: 270px; } /* Quote — reduce vertical gap */ .quote-section { padding: 60px 0; } /* About */ .about-section { padding: 60px 0 80px; } .about-inner { grid-template-columns: 1fr; padding: 0 40px; gap: 0; } /* Collage: 440px container, center images inside */ .collage { height: 380px; max-width: 440px; margin: 0 auto 50px; padding-right: 0; } /* main: 320w → (440-320)/2 = 60 */ .img-main { left: 60px; width: 320px; height: 340px; } .img-sm1 { left: 120px; width: 130px; height: 110px; } .img-sm2 { left: 240px; width: 160px; height: 140px; } .about-content { padding-left: 0; text-align: center; } .drop-cap-block { flex-direction: column; align-items: center; text-align: center; } .drop-cap-text { text-align: center; } .about-checklist { text-align: left; } .about-btns { justify-content: center; } /* Five Star phases */ .phases { grid-template-columns: repeat(3, 1fr); max-width: 100%; margin: 0 40px; } /* Bottom wrap */ .bottom-inner { grid-template-columns: 1fr; padding: 0 40px; } .pos-left { padding: 60px 0 40px; text-align: center; } .fivestar-subtexts { text-align: center; } .sub-col { text-align: center; } /* Partnerships */ .p-grid { grid-template-columns: repeat(2, 1fr); margin: 0 40px 80px; } /* Contact */ .contact-inner { grid-template-columns: 1fr; gap: 60px; padding: 0 40px; } .contact-info { text-align: center; } .c-detail { align-items: center; } /* Footer */ .footer-top { grid-template-columns: 1fr 1fr; gap: 48px; } .nl-inner { padding: 0 40px; gap: 48px; } .gallery { grid-template-columns: repeat(3, 1fr); height: 240px; } } @media (max-width: 768px) { /* Cursor — hide on touch devices */ #cdot, #cring { display: none; } body { cursor: auto; } /* Restore pointer cursors for all interactive elements on touch */ a, button, select, input, textarea, .hamburger, .acc-header, .p-cta, .btn-prim, .btn-dark, .btn-ghost-hero, .btn-ghost-light, .art-btn, .form-submit, .nl-btn, .acc-btn, .f-social, .art-share-icon, .art-tag, .blog-nav-prev, .blog-nav-next, .blog-dot, .hero-nav-cta, .art-nav-cta-light { cursor: pointer; } /* Hero nav */ .hero-nav { padding: 24px; } .hamburger { display: none; } .hero-nav-cta { right: 24px; font-size: .52rem; padding: 8px 14px; } .hero-nav-right { right: 24px; gap: 12px; } .hero-logo img, .hero-nav > img { height: 48px !important; } /* Hero content */ .hero-content { padding: 0 24px 120px; text-align: center; } .hero-side { display: none; } .hero-eyebrow { font-size: .58rem; } .hero-ctas { flex-direction: column; gap: 12px; align-items: center; } .btn-prim, .btn-ghost-hero { width: 100%; text-align: center; justify-content: center; } /* Hero stats */ .hero-stats { grid-template-columns: repeat(2, 1fr); } .stat-cell { padding: 14px 16px; text-align: center; } .stat-lbl { font-size: .5rem; } .stat-val { font-size: .72rem; } /* Hero scroll */ .hero-scroll { display: none; } /* Philosophy */ .philosophy { padding: 60px 0 60px; } .phil-grid { padding: 0 24px; } .phil-left { text-align: center; } .phil-title { text-align: center; } .phil-body { text-align: center; } /* Philosophy images: container 320px, center both */ .img-stack { height: 300px; width: 320px; margin: 0 auto; position: relative; } /* back: 180w → (320-180)/2 = 70, offset right a bit */ .img-back { left: 90px; width: 180px; height: 240px; } /* front: 190w → offset left */ .img-front { left: 30px; width: 190px; height: 250px; } .phil-right { padding-left: 0; padding-top: 40px; } .big-quote { font-size: clamp(1.1rem, 3.5vw, 1.5rem); text-align: center; } .sub-texts { grid-template-columns: 1fr; gap: 24px; text-align: center; } .sub-left { text-align: center; } .sub-right { text-align: center; display: inline-block; margin: 0 auto; } /* Quote */ .quote-section { padding: 40px 0 40px; } .quote-inner { padding: 0 24px; grid-template-columns: 1fr; } .quote-left { padding-right: 0; text-align: center; } .q-label { text-align: center; margin-bottom: 16px; } .q-text { font-size: clamp(1.3rem, 4vw, 1.8rem); text-align: center; margin-bottom: 20px; } .q-sig { text-align: center; } .quote-right { display: none; } /* Statement */ .statement-section { padding: 50px 24px 50px; } .statement-inner { padding: 0; text-align: center; } .stmt-heading { margin-bottom: 48px; } .body-cols { grid-template-columns: 1fr; gap: 24px; text-align: center; } .body-col { text-align: center; } /* About */ .about-section { padding: 40px 0 60px; } .about-inner { padding: 0 24px; } /* Collage: 380px max container, center images with left values */ .collage { height: 340px; width: 100%; max-width: 380px; margin: 0 auto 40px; padding-right: 0; } /* main: 260w → (380-260)/2 = 60 */ .img-main { position: absolute; left: 60px; top: 0; width: 260px; height: 280px; } .img-sm1 { left: 90px; bottom: 10px; width: 120px; height: 100px; } .img-sm2 { left: 200px; bottom: 30px; width: 140px; height: 120px; } .about-content { padding-left: 0; text-align: center; } .drop-cap-block { flex-direction: column; align-items: center; text-align: center; } .drop-cap { font-size: 4rem; } .drop-cap-text { text-align: center; } .about-checklist { text-align: left; } .about-btns { justify-content: center; flex-wrap: wrap; } /* Five Star */ .dark-section { padding: 80px 24px; } .phases { grid-template-columns: 1fr 1fr; margin: 0; } /* Bottom wrap / Positioning */ .bottom-inner { padding: 0 24px; } .pos-left { padding: 60px 0 40px; text-align: center; } .pos-title { text-align: center; } .pos-subtitle { text-align: center; } .pos-quote { text-align: center; } .right-col { padding: 0 0 60px; } .fivestar-subtexts { grid-template-columns: 1fr; gap: 24px; text-align: center; } .sub-col { text-align: center; } /* Partnerships */ .partnerships { padding: 80px 24px; } .p-grid { grid-template-columns: 1fr 1fr; margin: 0 0 60px; } .p-item { padding: 36px 20px; } .p-intro { text-align: center; } .p-bottom-text { text-align: center; } /* Contact */ .contact-section { padding: 80px 0; } .contact-inner { padding: 0 24px; gap: 48px; } .contact-info { text-align: center; } .c-label { text-align: center; } .c-heading { text-align: center; } .c-text { text-align: center; } .c-detail { text-align: center; align-items: center; } .contact-form-wrap { padding: 32px 20px; } /* Blog */ .blog-title { padding: 0 24px; text-align: center; } .slide { width: 260px; } .art-text { text-align: center; } .art-heading { text-align: center; } .art-body { text-align: center; } .slide-outer { padding: 0 24px; } .blog-nav { padding: 0 24px; } /* Newsletter */ .newsletter { padding: 60px 0; } .nl-inner { padding: 0 24px; grid-template-columns: 1fr; gap: 32px; text-align: center; } .nl-label { text-align: center; } .nl-heading { font-size: clamp(1.2rem, 3.5vw, 1.6rem); text-align: center; } .nl-form { flex-direction: column; gap: 10px; } .nl-input { width: 100%; } .nl-check { justify-content: center; } /* Gallery */ .gallery { grid-template-columns: repeat(2, 1fr); height: 280px; } /* Footer */ .site-footer { padding: 60px 24px 0; } .footer-top { grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; text-align: center; } .f-brand { display: flex; flex-direction: column; align-items: center; } .f-desc { text-align: center; max-width: 100%; } .f-col { text-align: center; } .f-col ul li { justify-content: center; } .footer-bottom { flex-direction: column; gap: 16px; text-align: center; padding: 20px 24px; } .f-socials { justify-content: center; } .f-logo { font-size: 1.8rem; } } @media (max-width: 480px) { /* Hero */ .hero-nav-cta { display: none; } .hero-nav > img { height: 40px !important; } .h1-a, .h1-b { font-size: clamp(1.7rem, 7vw, 2.4rem); } .hero-content { padding: 0 20px 100px; } /* Stats */ .hero-stats { grid-template-columns: 1fr; } .stat-cell { padding: 14px 20px; text-align: center; border-right: none; border-bottom: 1px solid rgba(240, 236, 228, .08); } .stat-cell:last-child { border-bottom: none; } /* Philosophy */ .philosophy { padding: 48px 0; } .phil-grid { padding: 0 20px; gap: 32px; } /* Philosophy images: container 280px */ .img-stack { height: 260px; width: 280px; } /* back: 155w → (280-155)/2 = ~62, offset right */ .img-back { left: 80px; width: 155px; height: 200px; } /* front: 165w → offset left */ .img-front { left: 25px; width: 165px; height: 215px; } .big-quote { font-size: clamp(1rem, 4.5vw, 1.3rem); } /* Quote */ .quote-section { padding: 32px 0; } .quote-inner { padding: 0 20px; } .q-text { font-size: clamp(1.1rem, 4.5vw, 1.5rem); } /* Statement */ .statement-section { padding: 40px 20px; } .stmt-heading { margin-bottom: 36px; } .line-dark, .line-gold { font-size: clamp(1.5rem, 6vw, 2.2rem); } /* About */ .about-section { padding: 32px 0 48px; } .about-inner { padding: 0 20px; } /* Collage: 320px container */ .collage { height: 280px; max-width: 320px; } /* main: 220w → (320-220)/2 = 50 */ .img-main { left: 50px; width: 220px; height: 240px; } .img-sm1 { left: 70px; width: 100px; height: 85px; } .img-sm2 { left: 165px; width: 120px; height: 105px; } .drop-cap { font-size: 3.5rem; } .about-btns { flex-direction: column; gap: 12px; width: 100%; } .btn-dark, .btn-ghost-light { width: 100%; text-align: center; justify-content: center; } /* Five Star */ .dark-section { padding: 60px 20px; } .phases { grid-template-columns: 1fr; } .phase { padding: 36px 24px; } /* Positioning */ .bottom-inner { padding: 0 20px; } .pos-left { padding: 48px 0 32px; } /* Partnerships */ .partnerships { padding: 60px 20px; } .p-grid { grid-template-columns: 1fr; } .p-item { padding: 28px 20px; } /* Contact */ .contact-inner { padding: 0 20px; gap: 36px; } .contact-form-wrap { padding: 28px 16px; } .form-row { grid-template-columns: 1fr; gap: 0; } /* Blog */ .slide { width: 240px; } .slide-outer { padding: 0 20px; } .blog-nav { padding: 0 20px; } .blog-title { padding: 0 20px; margin-bottom: 48px; } /* Newsletter */ .nl-inner { padding: 0 20px; gap: 24px; } /* Gallery */ .gallery { grid-template-columns: repeat(2, 1fr); height: 200px; } /* Footer */ .site-footer { padding: 48px 20px 0; } .footer-top { gap: 28px; } .footer-bottom { padding: 16px 0; } } /* ═══════════════════════════════════════════ ARTICLE PAGES ═══════════════════════════════════════════ */ /* ── Article Nav (light, sticky) ─────────── */ .art-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 24px 60px; display: flex; align-items: center; justify-content: space-between; background: rgba(245, 237, 232, .96); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(196, 154, 60, .12); transition: padding .4s; } .art-nav-logo { font-family: var(--fh); font-size: 1.5rem; font-weight: 400; color: var(--dark); text-decoration: none; letter-spacing: .02em; } .art-nav-back { display: flex; align-items: center; gap: 10px; font-family: var(--fb); font-size: .58rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .3s; } .art-nav-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .3s; } .art-nav-back:hover { color: var(--gold); } .art-nav-back:hover svg { transform: translateX(-4px); } .art-nav-cta-light { font-family: var(--fb); font-size: .58rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(196, 154, 60, .4); padding: 9px 20px; text-decoration: none; cursor: none; transition: background .3s, color .3s; } .art-nav-cta-light:hover { background: var(--gold); color: var(--black); } /* ── Article Nav Right ──────────────────── */ .art-nav-right { display: flex; align-items: center; gap: 20px; } .art-lang-switch { display: flex; align-items: center; gap: 6px; } .art-lang-btn { font-family: var(--fb); font-size: .58rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .3s; } .art-lang-btn:hover { color: var(--gold); } .art-lang-btn.active { color: var(--gold); } .art-lang-sep { font-family: var(--fb); font-size: .5rem; color: rgba(154, 142, 138, .3); } /* ── Article Hero ───────────────────────── */ .art-hero { position: relative; height: 72vh; min-height: 480px; display: flex; align-items: flex-end; overflow: hidden; margin-top: 73px; } .art-hero-img { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center 30%; transform: scale(1.04); animation: artBgIn 2.2s cubic-bezier(.25, .46, .45, .94) forwards; } @keyframes artBgIn { from { transform: scale(1.1); filter: brightness(.6); } to { transform: scale(1.04); filter: brightness(1); } } .art-hero-vig { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(9, 8, 7, .88) 0%, rgba(9, 8, 7, .2) 50%, transparent 100%), linear-gradient(to bottom, rgba(9, 8, 7, .4) 0%, transparent 30%); } .art-hero-content { position: relative; z-index: 2; max-width: 860px; padding: 0 60px 60px; } .art-category { font-family: var(--fb); font-size: .58rem; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: block; opacity: 0; animation: artFadeUp .8s .4s ease forwards; } .art-hero-title { font-family: var(--fh); font-size: clamp(2rem, 4.5vw, 4rem); font-weight: 400; line-height: 1.12; color: var(--cream); margin-bottom: 24px; opacity: 0; animation: artFadeUp .9s .6s ease forwards; } .art-meta { display: flex; align-items: center; gap: 28px; opacity: 0; animation: artFadeUp .8s .8s ease forwards; } .art-meta-item { font-family: var(--fb); font-size: .62rem; font-weight: 300; color: rgba(240, 236, 228, .55); letter-spacing: .06em; } .art-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(196, 154, 60, .5); } @keyframes artFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ── Article Body ───────────────────────── */ .art-body-wrap { display: grid; grid-template-columns: 1fr 680px 1fr; gap: 0; background: var(--bg); position: relative; } .art-body-wrap::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0%, transparent calc(12.5% - 1px), rgba(210, 178, 168, .18) calc(12.5% - 1px), rgba(210, 178, 168, .18) 12.5%); pointer-events: none; z-index: 0; } .art-body-wrap > .art-body { grid-column: 2; position: relative; z-index: 1; padding: 80px 0 100px; } .art-lead { font-family: var(--fh); font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 400; line-height: 1.55; color: var(--dark); margin-bottom: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(196, 154, 60, .2); } .art-p { font-family: var(--fb); font-size: .82rem; font-weight: 300; line-height: 1.95; color: var(--dark); margin-bottom: 28px; } .art-h2 { font-family: var(--fh); font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 400; color: var(--dark); margin: 52px 0 20px; line-height: 1.2; } .art-pullquote { border-left: 3px solid var(--gold); padding: 24px 0 24px 36px; margin: 52px 0; } .art-pullquote p { font-family: var(--fh); font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 400; line-height: 1.5; color: var(--dark); } .art-pullquote cite { display: block; margin-top: 12px; font-family: var(--fb); font-size: .6rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); } .art-img-full { width: 100%; aspect-ratio: 16/9; object-fit: cover; margin: 48px 0; display: block; background: linear-gradient(135deg, #2a1510, #6a3020 40%, #3a1810); } .art-img-caption { font-family: var(--fb); font-size: .6rem; font-weight: 300; letter-spacing: .1em; color: var(--muted); margin-top: -36px; margin-bottom: 48px; padding-top: 12px; border-top: 1px solid rgba(196, 154, 60, .12); } .art-divider { display: flex; align-items: center; gap: 16px; margin: 52px 0; } .art-div-line { flex: 1; height: 1px; background: rgba(196, 154, 60, .2); } .art-div-diamond { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; } .art-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 52px; padding-top: 40px; border-top: 1px solid rgba(196, 154, 60, .15); } .art-tag { font-family: var(--fb); font-size: .56rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border: 1px solid rgba(196, 154, 60, .25); padding: 7px 16px; text-decoration: none; cursor: none; transition: color .3s, border-color .3s; } .art-tag:hover { color: var(--gold); border-color: var(--gold); } /* ── Article Author ─────────────────────── */ .art-author-wrap { grid-column: 2; position: relative; z-index: 1; padding: 0 0 80px; } .art-author { display: flex; align-items: center; gap: 24px; padding: 32px 36px; background: #fff; border: 1px solid rgba(196, 154, 60, .15); position: relative; } .art-author::before { content: ''; position: absolute; top: -1px; left: 24px; right: 24px; height: 2px; background: linear-gradient(to right, transparent, var(--gold), transparent); } .art-author-avatar { width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #c49a3c, #8b5a2b); display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-size: 1.6rem; color: #1a0f0a; overflow: hidden; } .art-author-label { font-family: var(--fb); font-size: .52rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; display: block; } .art-author-name { font-family: var(--fh); font-size: 1.1rem; font-weight: 400; color: var(--dark); margin-bottom: 6px; display: block; } .art-author-bio { font-family: var(--fb); font-size: .68rem; font-weight: 300; line-height: 1.7; color: var(--muted); } /* ── Article Progress Bar ───────────────── */ .art-progress { position: fixed; top: 73px; left: 0; z-index: 99; height: 2px; width: 0%; background: linear-gradient(to right, var(--gold), var(--glt)); transition: width .1s linear; } /* ── Article Share Sidebar ──────────────── */ .art-share { position: fixed; left: 32px; top: 50%; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 16px; } .art-share-label { font-family: var(--fb); font-size: .48rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); writing-mode: vertical-rl; transform: rotate(180deg); } .art-share-line { width: 1px; height: 30px; background: rgba(196, 154, 60, .3); } .art-share-icon { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(196, 154, 60, .25); display: flex; align-items: center; justify-content: center; cursor: none; transition: border-color .3s, background .3s; text-decoration: none; } .art-share-icon:hover { border-color: var(--gold); background: rgba(196, 154, 60, .06); } .art-share-icon svg { width: 12px; height: 12px; fill: var(--muted); transition: fill .3s; } .art-share-icon:hover svg { fill: var(--gold); } /* ── Article Related ────────────────────── */ .art-related { position: relative; padding: 80px 0 100px; overflow: hidden; background: var(--bg); } .art-related-stripes { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(8, 1fr); pointer-events: none; } .art-related-stripe { border-right: 1px solid rgba(210, 178, 168, .24); } .art-related-stripe:nth-child(even) { background: rgba(210, 178, 168, .07); } .art-related-stripe:last-child { border-right: none; } .art-related-inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 0 60px; } .art-related-label { font-family: var(--fb); font-size: .58rem; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; display: block; } .art-related-title { font-family: var(--fh); font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 400; color: var(--dark); margin-bottom: 52px; } .art-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .art-card { cursor: none; text-decoration: none; } .art-card-img { width: 100%; aspect-ratio: 3/2; overflow: hidden; margin-bottom: 20px; } .art-card-img-inner { width: 100%; height: 100%; transition: transform .6s ease; background-size: cover; background-position: center; } .art-card:hover .art-card-img-inner { transform: scale(1.04); } .art-card-cat { font-family: var(--fb); font-size: .54rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; display: block; } .art-card-title { font-family: var(--fh); font-size: 1.1rem; font-weight: 400; color: var(--dark); line-height: 1.3; margin-bottom: 10px; display: block; text-decoration: none; transition: color .3s; } .art-card:hover .art-card-title { color: var(--gold); } .art-card-excerpt { font-family: var(--fb); font-size: .68rem; font-weight: 300; line-height: 1.75; color: var(--muted); } /* ── Article Page — Newsletter (standalone) ── */ .art-page .newsletter { position: relative; background: #e4d9d1; overflow: hidden; } /* ── Article Responsive ─────────────────── */ @media (max-width: 900px) { body { cursor: auto; } .art-nav { padding: 20px 24px; } .art-nav-logo { font-size: 1.2rem; } .art-nav-logo img { height: 44px !important; } .art-nav-back span { display: none; } .art-body-wrap { grid-template-columns: 16px 1fr 16px; } .art-body-wrap > .art-body, .art-author-wrap { padding-left: 0; padding-right: 0; } .art-hero { height: 55vh; min-height: 360px; margin-top: 65px; } .art-hero-content { padding: 0 24px 40px; } .art-hero-title { font-size: clamp(1.5rem, 5vw, 2.4rem); } .art-lead { font-size: clamp(1.1rem, 3.5vw, 1.35rem); } .art-share { display: none; } .art-progress { top: 65px; } .art-related-grid { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 600px) { .art-nav { padding: 16px 20px; } .art-nav-cta-light { display: none; } .art-nav-logo img { height: 36px !important; } .art-nav-back { font-size: 0; } .art-nav-back svg { width: 20px; height: 20px; } .art-hero { height: 50vh; } .art-hero-title { font-size: clamp(1.3rem, 5.5vw, 2rem); } .art-meta { gap: 12px; flex-wrap: wrap; } .art-pullquote { padding: 16px 0 16px 20px; } .art-tags { gap: 6px; } .art-tag { padding: 6px 12px; } }