/* ============================================================ premium.css — Phase 1 UI polish Adds a desktop custom cursor and a full-page-hero scroll indicator, plus small non-conflicting touches. The existing card/button hover micro-animations live in style.css / enhancements.css and are intentionally left untouched here. ============================================================ */ /* ============ Custom cursor (Mouse Follower) ============ */ /* premium.js adds .yc-cursor-on to ONLY for fine-pointer, non-touch, motion-allowed, wide-enough devices. Everything below is scoped to that flag, so touch / reduced-motion users keep the native cursor completely untouched. */ html.yc-cursor-on, html.yc-cursor-on * { cursor: none !important; } .mf-cursor { z-index: 20060; } .mf-cursor::before { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--amber-500, #c59c6d); transition: width .25s ease, height .25s ease, margin .25s ease, background .25s ease, opacity .2s ease; } /* Grow into a soft ring over interactive elements (state toggled in JS). */ .mf-cursor.-active::before { width: 46px; height: 46px; margin: -23px 0 0 -23px; background: rgba(197, 156, 109, .16); box-shadow: inset 0 0 0 1px rgba(197, 156, 109, .6); } body.dark-mode .mf-cursor::before { background: var(--amber-400, #d4a843); } body.dark-mode .mf-cursor.-active::before { background: rgba(212, 168, 67, .18); } /* ============ Hero scroll indicator ============ */ /* .hero-section is position:relative, so this anchors to the hero's bottom edge — perfect now that the hero fills the viewport. */ .hero-scroll-indicator { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 4px 8px; color: rgba(255, 255, 255, .9); text-decoration: none; background: none; border: 0; cursor: pointer; font-size: 11.5px; font-weight: 500; letter-spacing: .06em; transition: opacity .3s ease, color .2s ease; } .hero-scroll-indicator:hover { color: #fff; } .hero-scroll-mouse { width: 25px; height: 40px; border: 2px solid rgba(255, 255, 255, .7); border-radius: 15px; display: flex; justify-content: center; padding-top: 7px; } .hero-scroll-dot { width: 4px; height: 8px; border-radius: 4px; background: #fff; animation: heroScrollDot 1.7s cubic-bezier(.4, 0, .2, 1) infinite; } .hero-scroll-text { display: inline-flex; align-items: center; gap: 5px; } .hero-scroll-chevron { animation: heroScrollBob 1.7s ease-in-out infinite; } @keyframes heroScrollDot { 0% { opacity: 0; transform: translateY(-5px); } 35% { opacity: 1; } 75% { opacity: 0; transform: translateY(11px); } 100% { opacity: 0; } } @keyframes heroScrollBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* Hide on phones (the hero is a shorter tuned slice there — no room). */ @media (max-width: 767.98px) { .hero-scroll-indicator { display: none; } } /* Honor reduced-motion for every animation premium.css introduces. */ @media (prefers-reduced-motion: reduce) { .hero-scroll-dot, .hero-scroll-chevron { animation: none; } .mf-cursor::before { transition: none; } } /* ============================================================ Phase 3 home sections — Brand Story, Promo Video, Instagram ============================================================ */ /* Dashboard drag-to-reorder: sections are flex children whose visual order is set by an inline `order` on each
(server-rendered from the admin order). No JS, so there's no reflow flash; falls back to DOM order. */ .home-sections { display: flex; flex-direction: column; min-width: 0; } .home-sections > section { min-width: 0; } /* ---------- Brand Story / lifestyle ---------- */ .brand-stories { padding: 30px 0; } .brand-story-row { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding: 30px 0; } .brand-story-row.image-end .brand-story-media { order: 2; } .brand-story-media { border-radius: 22px; overflow: hidden; box-shadow: 0 28px 54px -28px rgba(90, 58, 27, .5); } .brand-story-media img { width: 100%; height: 100%; max-height: 440px; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.22, 1, .36, 1); } .brand-story-row:hover .brand-story-media img { transform: scale(1.05); } .brand-story-tag { display: inline-block; padding: 6px 16px; border-radius: 60px; background: rgba(197, 156, 109, .14); color: var(--amber-700, #7a5626); font-size: 13px; font-weight: 600; margin-bottom: 14px; } .brand-story-title { font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.25; margin-bottom: 16px; color: var(--text-dark, #2d2724); } .brand-story-text { font-size: 1.02rem; line-height: 1.9; color: var(--text-muted, #6b5d4a); margin-bottom: 22px; max-width: 54ch; } .brand-story-cta i { margin-inline-start: 8px; transition: transform .25s ease; } .brand-story-cta:hover i { transform: translateX(-4px); } body.dark-mode .brand-story-title { color: var(--text-dark-mode, #F4EBDA); } body.dark-mode .brand-story-text { color: var(--text-muted-dark, #c9bca6); } @media (max-width: 767.98px) { .brand-story-row { grid-template-columns: 1fr; gap: 20px; padding: 22px 0; text-align: center; } .brand-story-row.image-end .brand-story-media { order: 0; } .brand-story-text { margin-inline: auto; } } /* ---------- Promo Video ---------- */ .video-section { padding: 24px 0 46px; } .video-hero { position: relative; border-radius: 24px; overflow: hidden; background-size: cover; background-position: center; min-height: 420px; display: flex; align-items: center; } .video-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 11, 8, .8) 0%, rgba(14, 11, 8, .45) 55%, rgba(14, 11, 8, .5) 100%); } .video-inner { position: relative; z-index: 2; text-align: center; color: #fff; width: 100%; } .video-eyebrow { display: inline-block; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; font-weight: 600; color: var(--amber-300, #e2c39a); margin-bottom: 12px; } .video-title { font-size: clamp(1.5rem, 3vw, 2.3rem); color: #fff; margin-bottom: 26px; text-shadow: 0 2px 18px rgba(0, 0, 0, .4); } .video-play { width: 86px; height: 86px; border-radius: 50%; background: linear-gradient(135deg, var(--amber-500, #c59c6d), var(--amber-700, #7a5626)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; text-decoration: none; box-shadow: 0 0 0 0 rgba(197, 156, 109, .6); animation: videoPulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite; transition: transform .2s ease; } .video-play:hover { transform: scale(1.08); color: #fff; } .video-play i { margin-inline-start: 5px; } @keyframes videoPulse { 0% { box-shadow: 0 0 0 0 rgba(197, 156, 109, .55); } 70% { box-shadow: 0 0 0 26px rgba(197, 156, 109, 0); } 100% { box-shadow: 0 0 0 0 rgba(197, 156, 109, 0); } } /* ---------- Instagram grid (modern) ---------- */ .instagram-section { padding: 46px 0; } .ig-head { text-align: center; margin-bottom: 30px; } .ig-eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 6px 16px; border-radius: 60px; background: linear-gradient(90deg, rgba(240,148,51,.14), rgba(220,39,67,.14), rgba(188,24,136,.14)); color: #c13584; font-size: 13px; font-weight: 700; margin-bottom: 12px; } .ig-title { font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--text-dark, #2d2724); margin-bottom: 8px; } .ig-sub { color: var(--text-muted, #6b5d4a); max-width: 60ch; margin: 0 auto 16px; font-size: .98rem; } body.dark-mode .ig-title { color: var(--text-dark-mode, #F4EBDA); } body.dark-mode .ig-sub { color: var(--text-muted-dark, #c9bca6); } /* Instagram-gradient follow button */ .ig-follow { display: inline-flex; align-items: center; gap: 9px; padding: 11px 26px; border-radius: 60px; color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); box-shadow: 0 12px 26px -10px rgba(204, 35, 102, .6); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .ig-follow:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 32px -10px rgba(204, 35, 102, .7); } .ig-follow i { font-size: 18px; } .ig-grid-home { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .ig-cell { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 16px; display: block; box-shadow: 0 10px 24px -16px rgba(90, 58, 27, .5); } .ig-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); } .ig-cell:hover img { transform: scale(1.12); } /* Instagram-gradient hover overlay with a popping icon */ .ig-cell-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; background: linear-gradient(45deg, rgba(240,148,51,.85), rgba(220,39,67,.82), rgba(188,24,136,.85)); opacity: 0; transition: opacity .3s ease; } .ig-cell-overlay i { transform: scale(.6); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); } .ig-cell:hover .ig-cell-overlay { opacity: 1; } .ig-cell:hover .ig-cell-overlay i { transform: scale(1); } @media (max-width: 991.98px) { .ig-grid-home { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 575.98px) { .ig-grid-home { grid-template-columns: repeat(3, 1fr); gap: 9px; } } @media (prefers-reduced-motion: reduce) { .brand-story-media img, .ig-cell img { transition: none; } .video-play { animation: none; } }