/* ============================================================ EliteObsidian — Shared site styles Loaded by every page so styling stays identical site-wide. Brand tokens (colors, fonts, radius) are configured inline via tailwind.config in each page . ============================================================ */ :root { color-scheme: dark; } html { scroll-behavior: smooth; } body { background-color: #080B0C; color: #F5F7F7; -webkit-font-smoothing: antialiased; } ::selection { background: #C2A15C; color: #080B0C; } /* Typographic system */ .h-eyebrow { font-family: Montserrat; font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; } .h-display { font-family: Montserrat; font-weight: 800; letter-spacing: -0.02em; line-height: 1.04; } .h-section { font-family: Montserrat; font-weight: 700; letter-spacing: 0.02em; } .h-title { font-family: Montserrat; font-weight: 600; } .serif { font-family: "Source Serif 4", Georgia, serif; } /* Metallic gold text */ .text-metallic { background: linear-gradient(95deg, #9C7E42 0%, #E6CC8A 45%, #C2A15C 70%, #E6CC8A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hairline-gold { background: linear-gradient(90deg, transparent, rgba(194,161,92,.55), transparent); height: 1px; } .hairline-teal { background: linear-gradient(90deg, transparent, rgba(58,168,189,.55), transparent); height: 1px; } /* Card crown borders (tonal elevation per brand) */ .crown-gold { border: 1px solid rgba(194,161,92,.12); border-top: 1px solid rgba(194,161,92,.55); background: #0F1416; } .crown-teal { border: 1px solid rgba(58,168,189,.12); border-top: 1px solid rgba(58,168,189,.55); background: #0F1416; } .card-soft { border: 1px solid rgba(255,255,255,.06); background: #0F1416; } /* Gold button shimmer micro-interaction */ .btn-gold { position: relative; overflow: hidden; transition: box-shadow .3s, transform .3s; } .btn-gold:hover { box-shadow: 0 0 28px rgba(194,161,92,.28); transform: translateY(-1px); } .btn-gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); transform: translateX(-130%); transition: transform .75s ease; } .btn-gold:hover::after { transform: translateX(130%); } .btn-ghost { transition: background .25s, border-color .25s, color .25s, transform .3s; } .btn-ghost:hover { transform: translateY(-1px); } /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1); } .reveal.in { opacity: 1; transform: none; } /* Image zoom container */ .img-zoom img { transition: transform .9s cubic-bezier(.16,.84,.44,1); } .img-zoom:hover img { transform: scale(1.06); } /* Ledger hover */ .ledger-row { transition: background .25s; } .ledger-row:hover { background: rgba(58,168,189,.05); } /* SOLD ribbon */ .ribbon { position: absolute; top: 18px; left: -34px; transform: rotate(-45deg); background: linear-gradient(95deg,#9C7E42,#E6CC8A); color: #080B0C; font-family: Montserrat; font-weight: 800; font-size: 11px; letter-spacing: .18em; padding: 6px 44px; box-shadow: 0 6px 18px rgba(0,0,0,.4); } /* Logo trust bar */ .trust-logo { opacity: .55; filter: grayscale(1); transition: opacity .3s, filter .3s, transform .3s; } .trust-logo:hover { opacity: 1; filter: grayscale(0); transform: translateY(-2px); } /* Nav active/scrolled */ .nav-scrolled { background: rgba(8,11,12,.82); backdrop-filter: blur(14px); border-bottom-color: rgba(255,255,255,.08) !important; } .nav-link { position: relative; } .nav-link::after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:#C2A15C; transition: width .3s; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* Mobile menu */ #mobileMenu { transition: transform .4s cubic-bezier(.16,.84,.44,1), opacity .3s; } #mobileMenu.closed { transform: translateX(100%); opacity: 0; pointer-events: none; } /* ============ PREMIUM ANIMATION LAYER ============ */ /* Scroll progress bar */ #progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 70; background: linear-gradient(90deg,#9C7E42,#E6CC8A 45%,#3AA8BD); box-shadow: 0 0 14px rgba(194,161,92,.5); } /* Hero Ken Burns slow drift */ .kenburns { animation: kenburns 26s ease-in-out infinite alternate; transform-origin: 60% 40%; } @keyframes kenburns { from { transform: scale(1.05); } to { transform: scale(1.16) translate(-1.5%, -1.5%); } } /* Animated metallic shimmer (slow, luxe sheen) */ .text-metallic { background-size: 220% auto; animation: sheen 7s ease-in-out infinite; } @keyframes sheen { 0%,100% { background-position: 0% center; } 50% { background-position: 180% center; } } /* Ambient floating glow orbs */ .orb { position: absolute; border-radius: 9999px; filter: blur(80px); pointer-events: none; z-index: 0; will-change: transform; } .orb-gold { background: radial-gradient(circle, rgba(194,161,92,.16), transparent 70%); animation: drift1 18s ease-in-out infinite alternate; } .orb-teal { background: radial-gradient(circle, rgba(58,168,189,.14), transparent 70%); animation: drift2 22s ease-in-out infinite alternate; } @keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(40px,-30px) scale(1.1); } } @keyframes drift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-30px,30px) scale(1.08); } } /* 3D tilt + cursor spotlight on cards */ .tilt { transform: perspective(900px) rotateX(0) rotateY(0); transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s; will-change: transform; } .spotlight { position: relative; } .spotlight::before { content:""; position:absolute; inset:0; border-radius: inherit; opacity:0; transition: opacity .35s; pointer-events:none; background: radial-gradient(520px circle at var(--mx,50%) var(--my,50%), rgba(194,161,92,.10), transparent 42%); } .spotlight-teal::before { background: radial-gradient(520px circle at var(--mx,50%) var(--my,50%), rgba(58,168,189,.12), transparent 42%); } .spotlight:hover::before { opacity:1; } /* Image clip-path reveal on scroll */ .clip-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.16,.84,.44,1); } .clip-reveal.in { clip-path: inset(0 0 0 0); } /* Magnetic buttons */ .magnetic { transition: transform .3s cubic-bezier(.16,.84,.44,1); } /* Back-to-top */ #toTop { transition: opacity .4s, transform .4s, box-shadow .3s; } #toTop.away { opacity: 0; transform: translateY(18px) scale(.9); pointer-events: none; } #toTop:hover { box-shadow: 0 0 26px rgba(194,161,92,.35); } /* Animated star pop for testimonials */ @keyframes starpop { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 70% { transform: scale(1.25); } 100% { transform: scale(1) rotate(0); opacity: 1; } } .stars.in .material-symbols-outlined { animation: starpop .5s backwards; } .stars.in .material-symbols-outlined:nth-child(2) { animation-delay: .08s; } .stars.in .material-symbols-outlined:nth-child(3) { animation-delay: .16s; } .stars.in .material-symbols-outlined:nth-child(4) { animation-delay: .24s; } .stars.in .material-symbols-outlined:nth-child(5) { animation-delay: .32s; } /* Calculator value flash on change */ #calc-monthly { transition: color .2s; } #calc-monthly.flash { color: #6FCAD9; } /* FAQ accordion (services / contact) */ details > summary { list-style: none; cursor: pointer; } details > summary::-webkit-details-marker { display: none; } .faq-chev { transition: transform .3s; } details[open] .faq-chev { transform: rotate(180deg); } /* Century 21 Masters seal mark (brand lockup) */ .c21-seal { background: linear-gradient(145deg, #E6CC8A 0%, #C2A15C 48%, #9C7E42 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 -2px 4px rgba(0,0,0,.18), 0 4px 16px rgba(194,161,92,.28); } .c21-num { font-family: Montserrat, sans-serif; font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: #080B0C; } /* Vertical timeline (about) */ .tl-item { position: relative; padding-left: 2.25rem; } .tl-item::before { content:""; position:absolute; left: 7px; top: 0; bottom: -2.25rem; width: 1px; background: rgba(194,161,92,.25); } .tl-item:last-child::before { display: none; } .tl-dot { position:absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 9999px; background: radial-gradient(circle, #E6CC8A, #9C7E42); box-shadow: 0 0 0 4px rgba(194,161,92,.12); } @media (prefers-reduced-motion: reduce) { .reveal, .clip-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; } .kenburns, .text-metallic, .orb, .stars.in .material-symbols-outlined { animation: none !important; } .tilt { transform: none !important; } html { scroll-behavior: auto; } }