/* ========================================================================== Hotel Thattivilas — public website styles Palette per instruction.md §9.1 (brown + gold, from the signboard) ========================================================================== */ :root { --brown-deep: #4A2C17; --brown-warm: #6B3E23; --brown-mid: #8A5A2B; --gold: #C89B3C; --gold-light: #E0C070; --cream: #FAF6EF; --text: #1F1B16; --muted: #6d6156; --grey-100: #F4F4F4; --grey-200: #E5E5E5; --white: #FFFFFF; /* Header height at rest, and once the page has scrolled. Everything that has to line up with the header (body padding, the backdrop strip, the mobile menu's top offset) reads these two, so the three values can never drift apart again. */ --header-h: 84px; --header-h-sm: 70px; } * { box-sizing: border-box; } /* overflow-x on body alone does not stop the PAGE scrolling sideways — the viewport follows . This also absorbs the scrollbar width that a 100vw element (the hero) would otherwise overhang by. */ html { overflow-x: hidden; max-width: 100%; } body { margin: 0; /* Reserves the fixed header's space. This MUST track the header's current height: the header shrinks to --header-h-sm on scroll, and if the padding stayed at the full height the difference showed as a white band between the header and the content. Page sections must not add their own margin-top for the header. */ padding-top: var(--header-h); transition: padding-top .3s ease; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text); background: var(--white); line-height: 1.7; overflow-x: hidden; } /* The padding-top strip sits behind the translucent header. Tint it the header colour so the sliver revealed when the header shrinks reads as part of the header rather than as a white band. */ body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background: var(--brown-deep); z-index: 999; /* just under .site-header (1000) */ pointer-events: none; } /* Scrolled state: the header shrinks, so the reserved space and the backdrop strip shrink by exactly the same amount, in the same 0.3s as the header. */ body.header-scrolled { padding-top: var(--header-h-sm); } body.header-scrolled::before { height: var(--header-h-sm); } h1, h2, h3, h4, h5 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; color: var(--brown-deep); line-height: 1.25; } a { color: var(--brown-warm); text-decoration: none; transition: color .25s; } a:hover { color: var(--gold); } img { max-width: 100%; height: auto; } .container-tv { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* ---------- Section heading ---------- */ .section { padding: 80px 0; } .section-cream { background: var(--cream); } .section-head { text-align: center; margin-bottom: 48px; } .section-head .eyebrow { display: inline-block; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 8px; } .section-head h2 { font-size: 40px; margin: 0 0 14px; } .section-head .divider { width: 70px; height: 3px; background: var(--gold); margin: 0 auto; border-radius: 2px; } .section-head p { max-width: 640px; margin: 16px auto 0; color: var(--muted); } /* ---------- Buttons ---------- */ .btn-tv { display: inline-block; padding: 13px 30px; border-radius: 4px; font-weight: 600; font-size: 14px; letter-spacing: .5px; border: 2px solid transparent; cursor: pointer; transition: all .25s; text-transform: uppercase; } .btn-primary-tv { background: var(--brown-deep); color: #fff; border-color: var(--brown-deep); } .btn-primary-tv:hover { background: var(--brown-warm); border-color: var(--brown-warm); color: #fff; transform: translateY(-2px); } .btn-gold { background: var(--gold); color: #2b1a0e; border-color: var(--gold); } .btn-gold:hover { background: var(--gold-light); border-color: var(--gold-light); color: #2b1a0e; transform: translateY(-2px); } .btn-outline-tv { background: transparent; color: #fff; border-color: #fff; } .btn-outline-tv:hover { background: #fff; color: var(--brown-deep); } /* ---------- Header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(74,44,23,.97); transition: background .3s, box-shadow .3s, padding .3s; } .site-header.scrolled { box-shadow: 0 4px 22px rgba(0,0,0,.22); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); } .logo-tv { display: flex; align-items: center; gap: 12px; } .logo-tv img { max-height: 54px; } .logo-text { font-family: 'Playfair Display', Georgia, serif; line-height: 1.1; } .logo-text .l1 { display: block; font-size: 22px; font-weight: 700; color: #fff; letter-spacing: 1px; } .logo-text .l1 .gold { color: var(--gold); } .logo-text .l2 { display: block; font-size: 10px; letter-spacing: 3px; color: var(--gold-light); text-transform: uppercase; } .nav-tv { display: flex; align-items: center; gap: 30px; } .nav-tv a { color: #f3ece4; font-size: 14px; font-weight: 500; letter-spacing: .6px; text-transform: uppercase; position: relative; padding: 6px 0; } .nav-tv a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--gold); transition: width .28s; } .nav-tv a:hover, .nav-tv a.active { color: var(--gold); } .nav-tv a:hover::after, .nav-tv a.active::after { width: 100%; } .call-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--gold); color: #2b1a0e !important; padding: 11px 22px; border-radius: 40px; font-weight: 700; font-size: 14px; letter-spacing: .4px; transition: all .25s; white-space: nowrap; } .call-btn:hover { background: var(--gold-light); color: #2b1a0e !important; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(200,155,60,.4); } .call-btn::after { display: none; } .burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: #fff; font-size: 24px; } /* ---------- Hero slider ---------- */ /* Full-bleed banner, edge to edge. - No margin-top: the header is fixed and shrinks on scroll, so a fixed margin would leave a white strip. Body padding reserves that space. - Sized with an explicit HEIGHT, never aspect-ratio: with aspect-ratio the box is solved from whichever axis is constrained, so once a max-height applied the browser derived the WIDTH from the height and the band stopped filling the viewport - that was the white gap down both sides. - 100vw (not 100%) ties the width to the viewport rather than the parent; html{overflow-x:hidden} absorbs the scrollbar overhang that creates. */ .hero { position: relative; display: block; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); /* escape any centring on an ancestor */ height: 62vh; min-height: 460px; max-height: 760px; overflow: hidden; border-radius: 0; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.1s ease-in-out; display: flex; align-items: center; } .hero-slide.active { opacity: 1; } .hero-slide::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(31,27,22,.82) 0%, rgba(31,27,22,.55) 55%, rgba(31,27,22,.35) 100%); } .hero-content { position: relative; z-index: 2; max-width: 680px; color: #fff; } .hero-content .eyebrow { display: inline-block; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 16px; } .hero-content h1 { font-size: 52px; color: #fff; margin: 0 0 18px; } .hero-content p { font-size: 18px; color: #e8ded3; margin: 0 0 30px; } .hero-dots { position: absolute; bottom: 34px; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 10px; } .hero-dots span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer; transition: all .25s; } .hero-dots span.active { background: var(--gold); width: 30px; border-radius: 6px; } .hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: none; background: rgba(255,255,255,.16); color: #fff; font-size: 18px; cursor: pointer; transition: background .25s; } .hero-arrow:hover { background: var(--gold); color: #2b1a0e; } .hero-arrow.prev { left: 24px; } .hero-arrow.next { right: 24px; } /* ---------- Page banner (inner pages) ---------- */ .page-banner { /* See the note on .hero — spacing comes from body padding, not a margin that would stay behind when the header shrinks. */ /* Per-page backdrop is set by a .banner- class below; this is the fallback so the band is never a flat empty colour. */ background: linear-gradient(rgba(74,44,23,.82), rgba(74,44,23,.88)), url('../img/banner-default.webp') center/cover no-repeat, var(--brown-deep); padding: 70px 0; text-align: center; color: #fff; position: relative; overflow: hidden; } .page-banner .container-tv { position: relative; z-index: 2; } .banner-about { background-image: linear-gradient(rgba(74,44,23,.82), rgba(74,44,23,.88)), url('../img/banner-about.webp'); } .banner-gallery { background-image: linear-gradient(rgba(74,44,23,.82), rgba(74,44,23,.88)), url('../img/banner-gallery.webp'); } .banner-blogs { background-image: linear-gradient(rgba(74,44,23,.82), rgba(74,44,23,.88)), url('../img/banner-blogs.webp'); } .banner-menu { background-image: linear-gradient(rgba(74,44,23,.82), rgba(74,44,23,.88)), url('../img/banner-menu.webp'); } .banner-branches { background-image: linear-gradient(rgba(74,44,23,.82), rgba(74,44,23,.88)), url('../img/banner-branches.webp'); } .page-banner[class*="banner-"] { background-size: cover; background-position: center; background-repeat: no-repeat; } .page-banner h1 { color: #fff; font-size: 42px; margin: 0 0 10px; } .page-banner .crumb { color: var(--gold-light); font-size: 14px; letter-spacing: 1px; } .page-banner .crumb a { color: #e8ded3; } .page-banner .crumb a:hover { color: var(--gold); } /* ---------- Cards ---------- */ .grid { display: grid; gap: 28px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .card-tv { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 16px rgba(0,0,0,.07); transition: transform .3s, box-shadow .3s; display: flex; flex-direction: column; } .card-tv:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0,0,0,.14); } .card-media { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--grey-100); } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s; } .card-tv:hover .card-media img { transform: scale(1.07); } .card-body-tv { padding: 20px; flex: 1; display: flex; flex-direction: column; } .card-body-tv h3 { font-size: 19px; margin: 0 0 8px; } .card-body-tv .meta { font-size: 13px; color: var(--muted); margin-bottom: 10px; } .card-body-tv p { font-size: 14px; color: var(--muted); margin: 0 0 14px; } .card-foot { margin-top: auto; } .tel-link { color: var(--brown-warm); font-weight: 600; font-size: 14px; } .tel-link:hover { color: var(--gold); } /* ---------- History / content split ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; } .split.reverse .split-media { order: 2; } .split-media img { width: 100%; display: block; border-radius: 10px; box-shadow: 0 10px 34px rgba(0,0,0,.14); } /* Square, uniform panels — used on About, where the uploaded files are portrait and vary in size (1000x1328, 399x501, ...), so without a fixed ratio each section rendered at a different height. object-fit: cover crops to the square instead of squashing the picture. Not applied to .split-media globally: the home page's History image is a 16:9 storefront shot and squaring it would cut the signboard off. */ .media-square img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center; } /* Once the columns stack (<=991px) a full-width square is very tall, so cap it and centre the panel rather than letting it fill the viewport. */ @media (max-width: 991px) { .media-square { max-width: 460px; margin-left: auto; margin-right: auto; width: 100%; } } .split-body .eyebrow { display: inline-block; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 8px; } .split-body h2 { font-size: 36px; margin: 0 0 16px; } .split-body .divider { width: 60px; height: 3px; background: var(--gold); border-radius: 2px; margin-bottom: 20px; } .split-body p { color: var(--muted); margin: 0 0 14px; } /* ---------- Menu ---------- */ .filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 42px; } .filter-btn { padding: 10px 24px; border-radius: 40px; border: 2px solid var(--grey-200); background: #fff; color: var(--brown-warm); font-weight: 600; font-size: 14px; cursor: pointer; transition: all .25s; } .filter-btn:hover { border-color: var(--gold); color: var(--gold); } .filter-btn.active { background: var(--brown-deep); border-color: var(--brown-deep); color: #fff; } .dish { text-align: center; } .dish .card-media { aspect-ratio: 1/1; border-radius: 10px; } .dish h3 { font-size: 16px; margin: 14px 0 0; font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--text); } /* ---------- Gallery location chooser cards ---------- */ .loc-card { display: block; text-decoration: none; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 16px rgba(0,0,0,.07); transition: transform .3s, box-shadow .3s; } .loc-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,.13); } .loc-card-img { aspect-ratio: 4/3; overflow: hidden; } .loc-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; } .loc-card:hover .loc-card-img img { transform: scale(1.06); } .loc-card-body { padding: 18px 20px 22px; text-align: center; } .loc-card-body h3 { margin: 0; font-size: 19px; color: var(--brown-warm); font-family: 'Playfair Display', serif; } .loc-card-count { display: block; margin-top: 5px; font-size: 13px; color: var(--muted); } .loc-card-go { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; letter-spacing: .6px; color: var(--gold); } .loc-card-go i { transition: transform .25s; } .loc-card:hover .loc-card-go i { transform: translateX(4px); } /* ---------- Location page tabs ---------- */ .loc-tabs { display: flex; justify-content: center; gap: 36px; border-bottom: 1px solid var(--grey-200); margin-bottom: 44px; } .loc-tab { background: none; border: none; cursor: pointer; padding: 14px 6px; font-size: 15px; font-weight: 600; letter-spacing: 1.5px; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .25s, border-color .25s; } .loc-tab:hover { color: var(--brown-warm); } .loc-tab.active { color: var(--brown-deep); border-bottom-color: var(--gold); } .addr-card { background: #fff; border: 1px solid var(--grey-200); border-left: 4px solid var(--gold); border-radius: 8px; padding: 24px; } .addr-card h3 { font-size: 19px; margin: 0 0 12px; } .addr-card p { margin: 0 0 9px; color: var(--muted); font-size: 14px; } .addr-card i { color: var(--gold); width: 16px; } /* ---------- Gallery ---------- */ .gallery-item { cursor: pointer; border-radius: 8px; overflow: hidden; position: relative; aspect-ratio: 4/3; background: var(--grey-100); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .gallery-item:hover img { transform: scale(1.08); } .gallery-item .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 14px 12px; color: #fff; font-size: 14px; font-weight: 500; background: linear-gradient(transparent, rgba(0,0,0,.78)); opacity: 0; transition: opacity .3s; } .gallery-item:hover .cap { opacity: 1; } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 3000; display: none; background: rgba(15,11,8,.95); align-items: center; justify-content: center; } .lightbox.open { display: flex; } .lightbox img { max-width: 90vw; max-height: 82vh; border-radius: 6px; } .lightbox .lb-cap { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; color: #fff; font-size: 15px; } .lightbox .lb-close { position: absolute; top: 22px; right: 28px; background: none; border: none; color: #fff; font-size: 36px; cursor: pointer; line-height: 1; } .lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.14); border: none; color: #fff; width: 50px; height: 50px; border-radius: 50%; font-size: 22px; cursor: pointer; } .lightbox .lb-nav:hover { background: var(--gold); color: #2b1a0e; } .lightbox .lb-prev { left: 26px; } .lightbox .lb-next { right: 26px; } /* ---------- Video / reel tiles ---------- */ .video-tile { position: relative; border-radius: 10px; overflow: hidden; cursor: pointer; aspect-ratio: 16/9; background: #000; } .reel-tile { aspect-ratio: 9/16; } /* Keep the YouTube row to a sensible card size rather than letting three tiles stretch across the full 1200px container. */ .video-row { max-width: 1000px; margin-left: auto; margin-right: auto; } /* A 9:16 tile in a wide column gets very tall — on a large screen a quarter of the container is still ~300px across, which is 530px tall. Cap the height and let the tile narrow instead, so a row of reels stays a comfortable size and the tiles centre within their columns. */ .reel-row .video-tile { max-height: 440px; margin: 0 auto; width: 100%; } @media (min-width: 1200px) { .reel-row .video-tile { max-width: 260px; } } .video-tile img { width: 100%; height: 100%; object-fit: cover; opacity: .86; transition: opacity .3s, transform .5s; } .video-tile:hover img { opacity: 1; transform: scale(1.05); } .play-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 62px; height: 62px; border-radius: 50%; background: rgba(200,155,60,.94); color: #2b1a0e; display: flex; align-items: center; justify-content: center; font-size: 22px; transition: transform .3s; } .video-tile:hover .play-badge { transform: translate(-50%,-50%) scale(1.12); } .video-tile .v-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; color: #fff; font-size: 14px; font-weight: 500; background: linear-gradient(transparent, rgba(0,0,0,.82)); } /* ---------- Hover preview ---------- Injected by the hover handler in web/template/footer.php and removed on mouseleave. Sits above the thumbnail but below the title/play badge (z-index 5), and ignores pointer events so the tile's own click still reaches it. */ .video-tile .hover-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; pointer-events: none; opacity: 0; animation: tvFrameIn .45s ease forwards; } @keyframes tvFrameIn { to { opacity: 1; } } /* Instagram reel tiles are 9:16; YouTube pads its 16:9 player inside them with black bars, so the frame is scaled up and centre-cropped to fill the tile. */ .reel-tile .hover-frame { height: 178%; /* 16/9 of the tile width, vertically */ top: 50%; transform: translateY(-50%); } /* A Short shown in a 16:9 tile: its player is vertical, so the iframe is made wider than the tile and centred, cropping the pillarboxing off the sides. */ .yt-short .hover-frame { width: 178%; left: 50%; transform: translateX(-50%); } /* Same treatment for the still, so the poster matches what plays on hover. */ .yt-short img { object-fit: cover; object-position: center; } /* The still and the badge fade out once the video is actually running. These need to beat `.video-tile:hover img { opacity: 1 }` and the later hover-zoom block, hence the doubled class and the explicit transform reset — a scaled still behind the frame shows as a sliver at the edges. */ .video-tile.previewing.previewing img { opacity: 0; transform: none; transition: opacity .4s ease .25s, transform .4s ease; } .video-tile.previewing .play-badge { opacity: 0; animation: none; /* stops the idle pulse */ transition: opacity .3s ease; } /* Gold sheen sweep would slide across the playing video — suppress it. */ .video-tile.previewing::before { display: none; } /* Video modal */ .vmodal { position: fixed; inset: 0; z-index: 3000; display: none; background: rgba(15,11,8,.95); align-items: center; justify-content: center; } .vmodal.open { display: flex; } .vmodal .vwrap { width: 90%; max-width: 900px; aspect-ratio: 16/9; } /* YouTube Shorts: a true 9:16 player, so a tall narrow box fits exactly. */ .vmodal.portrait .vwrap { aspect-ratio: 9/16; width: auto; height: 88vh; max-width: 94vw; } /* Instagram embeds are NOT 9:16. Their player lays itself out at roughly 4:5 (padding-bottom:125%) and centres the video inside its own chrome. Forcing 9:16 on it left thick black pillars either side, so this matches the shape Instagram actually renders. */ .vmodal.ig .vwrap { aspect-ratio: 4/5; width: auto; height: 88vh; max-width: 94vw; } /* The embed's internal page has its own white background and rounded header, so keep the frame white rather than showing dark gaps at the corners. */ .vmodal.ig iframe { background: #fff; } .vmodal iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; } .vmodal .lb-close { position: absolute; top: 22px; right: 28px; background: none; border: none; color: #fff; font-size: 36px; cursor: pointer; line-height: 1; } /* ---------- Call band ---------- */ .call-band { background: linear-gradient(rgba(74,44,23,.93), rgba(74,44,23,.93)), var(--brown-warm); padding: 64px 0; text-align: center; color: #fff; } .call-band h2 { color: #fff; font-size: 34px; margin: 0 0 12px; } .call-band p { color: #e8ded3; margin: 0 0 26px; } /* ---------- Footer ---------- */ .site-footer { background: #33200f; color: #cbbdae; padding: 60px 0 0; font-size: 14px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 44px; } .site-footer h4 { color: #fff; font-size: 17px; margin: 0 0 18px; } .site-footer a { color: #cbbdae; } .site-footer a:hover { color: var(--gold); } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer ul li { margin-bottom: 9px; } .social-row { display: flex; gap: 12px; margin-top: 16px; } .social-row a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: #fff; transition: background .25s, transform .25s; } .social-row a:hover { background: var(--gold); color: #2b1a0e; transform: translateY(-3px); } .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0; text-align: center; font-size: 13px; } /* ---------- Blog detail ---------- */ .post-body { font-size: 16px; color: #3a332c; } .post-body p { margin: 0 0 18px; } .post-hero img { width: 100%; border-radius: 10px; margin-bottom: 28px; } .post-meta { color: var(--muted); font-size: 14px; margin-bottom: 20px; } .badge-tv { display: inline-block; background: var(--cream); color: var(--brown-warm); padding: 4px 13px; border-radius: 20px; font-size: 12px; font-weight: 600; } .empty-note { text-align: center; color: var(--muted); padding: 40px 0; } /* ========================================================================== Responsive (instruction.md §9.1) ========================================================================== */ /* Tablet */ @media (max-width: 1199px) { .grid-4 { grid-template-columns: repeat(3, 1fr); } .hero-content h1 { font-size: 44px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 991px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .split { grid-template-columns: 1fr; gap: 32px; } .split.reverse .split-media { order: 0; } .section { padding: 60px 0; } .section-head h2 { font-size: 32px; } .burger { display: block; } .nav-tv { position: fixed; top: var(--header-h); left: 0; right: 0; background: var(--brown-deep); flex-direction: column; align-items: stretch; gap: 0; padding: 10px 0; max-height: 0; overflow: hidden; transition: max-height .35s ease, top .3s ease; box-shadow: 0 10px 24px rgba(0,0,0,.3); } /* Follow the header up when it shrinks, or the open menu hangs below it with a gap showing between the two. */ body.header-scrolled .nav-tv { top: var(--header-h-sm); } .nav-tv.open { max-height: 80vh; overflow-y: auto; } .nav-tv a { padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,.08); } .nav-tv a::after { display: none; } .nav-tv .call-btn { display: none; } } /* Mobile */ @media (max-width: 767px) { /* Both values shrink on mobile; the scrolled height must stay smaller than the resting height or the header would grow on scroll. */ :root { --header-h: 70px; --header-h-sm: 60px; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } /* Video tiles stay 2-up on narrow screens. One tile across the full width is far too big: a 16:9 card fills most of the viewport, and a 9:16 one is taller than the screen. Cards and text still drop to a single column. */ .reel-row, .video-row { grid-template-columns: repeat(2, 1fr); gap: 12px; } .reel-row .video-tile { max-height: none; } .reel-row .v-title, .video-row .v-title { font-size: 12px; padding: 20px 9px 9px; } .reel-row .play-badge, .video-row .play-badge { width: 44px; height: 44px; font-size: 16px; } /* Taller on phones: a short band cannot hold the heading, subtitle and button. Explicit height for the same reason as the desktop rule. */ .hero { height: 66vh; min-height: 420px; max-height: none; } .hero-content h1 { font-size: 30px; } .hero-content p { font-size: 15px; } .hero-arrow { display: none; } .section { padding: 46px 0; } .section-head { margin-bottom: 30px; } .section-head h2 { font-size: 26px; } .page-banner { padding: 46px 0; } .page-banner h1 { font-size: 28px; } .split-body h2 { font-size: 26px; } .call-band h2 { font-size: 24px; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } .logo-text .l1 { font-size: 17px; } .logo-text .l2 { font-size: 8px; letter-spacing: 2px; } /* Keep the number visible on phones — it is the whole point of the button. Only the padding tightens so it still fits beside the logo. */ .call-btn { padding: 9px 14px; font-size: 12.5px; gap: 7px; } .filter-bar { gap: 8px; } .filter-btn { padding: 8px 16px; font-size: 13px; } } @media (max-width: 420px) { .container-tv { padding: 0 16px; } .hero-content h1 { font-size: 25px; } /* Very narrow phones (<=420px): logo + full number + burger together overrun the row, and .call-btn is nowrap so it cannot fold. Collapse the button to a circular icon — tapping still dials, and the full number is in the footer and the call band. */ .logo-text .l1 { font-size: 15px; } .logo-text .l2 { display: none; } .call-btn { padding: 0; gap: 0; width: 40px; height: 40px; justify-content: center; border-radius: 50%; } .call-btn .call-label { display: none; } } /* ========================================================================== MOTION LAYER Scroll reveals, hero Ken Burns, and micro-interactions. Everything here is decorative: each effect degrades to a plain visible element, and the whole layer is disabled under prefers-reduced-motion. ========================================================================== */ /* ---------- Scroll reveal ---------- JS adds .is-in when the element enters the viewport. Elements start hidden ONLY when JS is active (html.js), so the site stays readable if JS fails or is blocked. */ .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } /* Horizontal reveals used to slide in from the side (translateX ±34px). That offset widened the page: an element pushed 34px right sits outside the viewport until it animates, and the sideways scroll it created shifted the full-bleed hero off-centre and clipped its heading. overflow-x:hidden does not reliably contain a transformed child, so the offset itself is gone — these now rise like every other reveal. */ .js [data-reveal="left"], .js [data-reveal="right"] { transform: translateY(26px); } .js [data-reveal="zoom"] { transform: scale(.94); } .js [data-reveal].is-in { opacity: 1; transform: none; } /* Stagger for grid children — each card follows the one before it. */ .js [data-stagger] > * { opacity: 0; transform: translateY(26px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); } .js [data-stagger].is-in > * { opacity: 1; transform: none; } .js [data-stagger].is-in > *:nth-child(1) { transition-delay: .05s; } .js [data-stagger].is-in > *:nth-child(2) { transition-delay: .13s; } .js [data-stagger].is-in > *:nth-child(3) { transition-delay: .21s; } .js [data-stagger].is-in > *:nth-child(4) { transition-delay: .29s; } .js [data-stagger].is-in > *:nth-child(5) { transition-delay: .37s; } .js [data-stagger].is-in > *:nth-child(6) { transition-delay: .45s; } .js [data-stagger].is-in > *:nth-child(7) { transition-delay: .53s; } .js [data-stagger].is-in > *:nth-child(8) { transition-delay: .61s; } .js [data-stagger].is-in > *:nth-child(n+9) { transition-delay: .68s; } /* ---------- Hero ---------- */ /* Slow Ken Burns drift on the active slide; gives a still photo life. */ @keyframes tvKenBurns { from { transform: scale(1); } to { transform: scale(1.09); } } .hero-slide::after { content: ''; position: absolute; inset: 0; background: inherit; background-size: cover; background-position: center; z-index: -1; } .hero-slide.active { animation: tvKenBurns 9s ease-out forwards; } /* Hero text rises in behind the slide fade. */ @keyframes tvHeroUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } .hero-slide.active .hero-content > * { animation: tvHeroUp .85s cubic-bezier(.22,.61,.36,1) backwards; } .hero-slide.active .hero-content > *:nth-child(1) { animation-delay: .20s; } .hero-slide.active .hero-content > *:nth-child(2) { animation-delay: .34s; } .hero-slide.active .hero-content > *:nth-child(3) { animation-delay: .48s; } .hero-slide.active .hero-content > *:nth-child(4) { animation-delay: .62s; } /* Scroll cue at the base of the hero. */ .scroll-cue { position: absolute; bottom: 74px; left: 50%; transform: translateX(-50%); z-index: 3; color: rgba(255,255,255,.72); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .scroll-cue i { font-size: 15px; animation: tvBob 2s ease-in-out infinite; } @keyframes tvBob { 0%, 100% { transform: translateY(0); opacity: .65; } 50% { transform: translateY(7px); opacity: 1; } } /* ---------- Section heading accent ---------- */ /* The gold rule under each heading draws itself in. */ .js .section-head .divider, .js .split-body .divider { width: 0; transition: width .75s ease .25s; } .js .section-head.is-in .divider, .js [data-reveal].is-in .divider { width: 70px; } .js .split-body [data-reveal].is-in .divider { width: 60px; } /* ---------- Cards & tiles ---------- */ /* Gold edge that appears on hover — subtler than a border swap. */ .card-tv { position: relative; } .card-tv::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; } .card-tv:hover::after { transform: scaleX(1); } /* Play badge pulse invites the click. */ .video-tile .play-badge { transition: transform .3s ease, background .3s ease; } .video-tile:hover .play-badge { transform: translate(-50%, -50%) scale(1.14); } @keyframes tvPulse { 0% { box-shadow: 0 0 0 0 rgba(200,155,60,.55); } 70% { box-shadow: 0 0 0 16px rgba(200,155,60,0); } 100% { box-shadow: 0 0 0 0 rgba(200,155,60,0); } } .video-tile .play-badge { animation: tvPulse 2.6s infinite; } .video-tile:hover .play-badge { animation-play-state: paused; } /* Gallery tiles lift and brighten. */ .gallery-item { transition: transform .4s ease, box-shadow .4s ease; } .gallery-item:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(0,0,0,.2); } /* ---------- Buttons ---------- */ /* Sheen sweep on primary/gold buttons. */ .btn-tv { position: relative; overflow: hidden; } .btn-tv::before { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-22deg); transition: left .55s ease; } .btn-tv:hover::before { left: 125%; } /* Call button in the header gets a soft gold halo. */ .call-btn { transition: transform .25s ease, box-shadow .25s ease; } .call-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(200,155,60,.4); } /* ---------- Call band ---------- */ .call-band { position: relative; overflow: hidden; } .call-band .btn-tv { position: relative; z-index: 2; } /* ---------- Filter buttons ---------- */ .filter-btn { position: relative; } .filter-btn.active { animation: tvPop .3s ease; } @keyframes tvPop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } } /* Filtered grids fade their items back in rather than snapping. */ @keyframes tvFadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .filtered-in { animation: tvFadeIn .45s ease backwards; } /* ---------- Header ---------- */ /* Shrinks slightly once the page scrolls. */ .site-header.scrolled { background: rgba(74,44,23,.99); } .site-header.scrolled .header-inner { height: var(--header-h-sm); } .header-inner { transition: height .3s ease; } body::before { transition: height .3s ease; } /* ---------- Back to top ---------- */ .to-top { position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--brown-deep); color: var(--gold); font-size: 16px; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s, transform .3s, visibility .3s, background .25s; box-shadow: 0 6px 20px rgba(0,0,0,.26); } .to-top.show { opacity: 1; visibility: visible; transform: none; } .to-top:hover { background: var(--gold); color: var(--brown-deep); } /* ---------- Image loading ---------- */ /* Shimmer behind an image until it decodes, instead of a grey gap. */ @keyframes tvShimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } } .card-media, .gallery-item { background-image: linear-gradient(90deg, #efe9e1 0px, #f8f4ee 210px, #efe9e1 420px); background-size: 840px 100%; animation: tvShimmer 1.5s linear infinite; } /* Once the image is in, stop the shimmer so it does not burn CPU. */ .card-media.img-ready, .gallery-item.img-ready { animation: none; background-image: none; } /* ========================================================================== ONLINE ORDERING ========================================================================== */ .call-band-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .call-btn.order-btn { border: none; cursor: pointer; font-family: inherit; } .call-btn.call-tel { padding-left: 14px; padding-right: 14px; } /* ---------- Modal shell ---------- */ .order-modal { position: fixed; inset: 0; z-index: 3000; background: rgba(24,14,8,.72); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .order-modal.open { opacity: 1; visibility: visible; } .om-dialog { background: #fff; border-radius: 14px; width: 100%; max-width: 1020px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); transform: translateY(18px) scale(.98); transition: transform .3s cubic-bezier(.22,.61,.36,1); } .order-modal.open .om-dialog { transform: none; } .om-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; background: var(--brown-deep); color: #fff; } .om-head h2 { color: #fff; font-size: 17px; margin: 0; } .om-close { background: none; border: none; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; opacity: .8; transition: opacity .2s, transform .2s; } .om-close:hover { opacity: 1; transform: rotate(90deg); } .om-body { overflow-y: auto; position: relative; } .om-loading { padding: 60px; text-align: center; color: var(--muted); } /* ---------- Inline notice ---------- */ .of-notice { position: sticky; top: 0; z-index: 5; background: #7c2d12; color: #fff; padding: 11px 18px; font-size: 14px; font-weight: 500; transform: translateY(-100%); transition: transform .3s; } .of-notice.show { transform: none; } /* ---------- Layout ---------- */ .of-grid { display: grid; grid-template-columns: 1.15fr .85fr; } .of-menu { padding: 20px 22px; border-right: 1px solid var(--grey-200); } .of-side { padding: 20px 22px; background: var(--cream); display: flex; flex-direction: column; } .of-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .of-head h3 { font-size: 18px; margin: 0; } .of-search { flex: 1; max-width: 210px; padding: 8px 12px; border: 1px solid var(--grey-200); border-radius: 22px; font-size: 13px; font-family: inherit; outline: none; transition: border-color .2s; } .of-search:focus { border-color: var(--gold); } /* ---------- Item rows ---------- */ .of-items { max-height: 54vh; overflow-y: auto; padding-right: 6px; } .of-cat { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); font-weight: 700; padding: 14px 0 7px; border-bottom: 1px solid var(--grey-200); margin-bottom: 6px; } .of-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; } .of-thumb { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--grey-100); } .of-thumb img { width: 100%; height: 100%; object-fit: cover; } .of-info { flex: 1; min-width: 0; } .of-name { display: block; font-weight: 600; font-size: 14px; color: var(--text); } .of-price { display: block; font-size: 13px; color: var(--brown-warm); font-weight: 600; } .of-qty { display: flex; align-items: center; gap: 9px; flex-shrink: 0; } .qty-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--grey-200); background: #fff; font-size: 16px; line-height: 1; cursor: pointer; color: var(--brown-warm); transition: all .2s; } .qty-btn:hover { border-color: var(--gold); background: var(--gold); color: #2b1a0e; } .qty-val { min-width: 18px; text-align: center; font-weight: 700; font-size: 14px; } .of-qty.has-qty .qty-val { color: var(--gold); } .of-noresults { text-align: center; color: var(--muted); padding: 20px; font-size: 14px; } /* ---------- Cart ---------- */ .of-cart { background: #fff; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; } .of-cart h4 { font-size: 15px; margin: 0 0 10px; } .of-cart-list { max-height: 148px; overflow-y: auto; } .of-empty { color: var(--muted); font-size: 13px; margin: 6px 0; } .of-cart-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; } .ofc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ofc-qty { color: var(--muted); } .ofc-amt { font-weight: 600; color: var(--brown-warm); } .of-total { display: flex; justify-content: space-between; align-items: center; border-top: 2px solid var(--grey-200); margin-top: 10px; padding-top: 10px; font-size: 15px; } .of-total strong { font-size: 21px; color: var(--brown-deep); } /* ---------- Fields ---------- */ .of-fields { display: grid; gap: 11px; } .of-field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; color: var(--text); } .of-field .opt { font-weight: 400; color: var(--muted); } .of-field input, .of-field select, .of-field textarea { width: 100%; padding: 9px 12px; font-size: 14px; font-family: inherit; border: 1px solid #ded4c6; border-radius: 7px; background: #fff; outline: none; transition: border-color .2s, box-shadow .2s; } .of-field input:focus, .of-field select:focus, .of-field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,155,60,.16); } .of-field textarea { resize: vertical; } .of-err { display: block; color: #b91c1c; font-size: 12px; margin-top: 3px; } .of-toggle { display: flex; gap: 16px; } .of-toggle label { font-weight: 500; display: flex; align-items: center; gap: 6px; cursor: pointer; } .of-toggle input { width: auto; } .of-submit { width: 100%; margin-top: 16px; } .of-submit:disabled { opacity: .7; cursor: not-allowed; } .of-callnote { text-align: center; font-size: 13px; color: var(--muted); margin: 12px 0 0; } /* ---------- Success ---------- */ .of-success { padding: 46px 30px; text-align: center; } .of-tick { width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 18px; background: #16803d; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 30px; animation: tickPop .45s cubic-bezier(.22,1.2,.36,1) both; } @keyframes tickPop { from { transform: scale(0); } to { transform: scale(1); } } .of-success h3 { font-size: 25px; margin: 0 0 8px; } .of-success > p { color: var(--muted); margin: 0 0 18px; } .of-ref { display: inline-block; background: var(--cream); border: 1px dashed var(--gold); border-radius: 9px; padding: 11px 26px; margin-bottom: 8px; } .of-ref span { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); } .of-ref strong { font-size: 19px; color: var(--brown-deep); } @media (max-width: 860px) { .of-grid { grid-template-columns: 1fr; } .of-menu { border-right: none; border-bottom: 1px solid var(--grey-200); } .of-items { max-height: 38vh; } .om-dialog { max-height: 95vh; } } /* ---------- Photo credits page ---------- */ .credits-wrap { overflow-x: auto; } .credits-table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.07); border-radius: 8px; overflow: hidden; } .credits-table th { background: var(--brown-deep); color: #fff; text-align: left; padding: 12px 14px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; } .credits-table td { padding: 11px 14px; border-bottom: 1px solid var(--grey-200); color: var(--muted); } .credits-table tr:last-child td { border-bottom: none; } .credits-table code { font-size: 12px; color: var(--brown-warm); } .credits-table .lic { display: inline-block; padding: 3px 9px; border-radius: 20px; background: var(--cream); color: var(--brown-warm); font-size: 11px; font-weight: 600; white-space: nowrap; } .credits-foot { margin-top: 22px; font-size: 13px; color: var(--muted); text-align: center; } .credit-note a { color: var(--gold-light); } .credit-note a:hover { color: var(--gold); } /* ---------- Header social icons ---------- */ .header-social { display: flex; align-items: center; gap: 14px; margin-right: 6px; } .header-social a { color: #d8cabb; font-size: 14px; transition: color .25s, transform .25s; } .header-social a:hover { color: var(--gold); transform: translateY(-2px); } /* Hidden on small screens — the Call Us button is the priority there. */ @media (max-width: 991px) { .header-social { display: none; } } /* Enquiry form styles live inside app/Views/web/enquiry_form.php -- the fragment is injected by fetch(), so its CSS ships with it. Only the modal shell width is needed here. */ .om-narrow { max-width: 400px; } /* ---------- Signature dish caption ---------- */ .dish-cat { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-top: 4px; } /* ---------- Placeholder images ---------- */ /* Applied by the global image fallback when an upload is missing. */ img.is-placeholder { object-fit: cover; background: var(--brown-deep); } /* ---------- Stat counters (About) ---------- */ .stat-row > div { padding: 26px 18px; border-radius: 10px; background: rgba(255,255,255,.55); transition: transform .3s ease, box-shadow .3s ease; } .stat-row > div:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.09); } .stat-num { font-size: 46px; color: var(--gold); margin: 0; font-variant-numeric: tabular-nums; /* stops width jitter while counting */ } .stat-label { color: var(--muted); margin: 6px 0 0; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; } /* ========================================================================== IMAGE HOVER / TOUCH EFFECTS Every image tile responds to hover on desktop and to tap on touch devices (JS adds .touch-active on tap). Effects are layered so they read as one system: zoom + tilt + gold sheen + caption lift. ========================================================================== */ /* ---------- Shared frame ---------- */ .card-media, .gallery-item, .video-tile, .dish .card-media, .split-media { position: relative; overflow: hidden; isolation: isolate; /* keeps blend/overlay effects inside the frame */ } /* The image itself: slow zoom + a touch of brightness on hover. Declared after the base rules above so this timing wins. */ .card-media img, .gallery-item img, .video-tile img, .split-media img { transition: transform .85s cubic-bezier(.19,1,.22,1), filter .5s ease; will-change: transform; backface-visibility: hidden; /* avoids a shimmer during the scale */ } /* Play badge must sit above the darkening veil. */ .video-tile .play-badge { z-index: 5; } .video-tile .v-title { z-index: 5; } .card-tv:hover .card-media img, .gallery-item:hover img, .video-tile:hover img, .dish:hover .card-media img, .split-media:hover img, .gallery-item.touch-active img, .video-tile.touch-active img, .dish.touch-active .card-media img, .card-tv.touch-active .card-media img { transform: scale(1.11); filter: brightness(1.06) saturate(1.1); } /* ---------- Gold sheen sweep ---------- */ /* A diagonal highlight crosses the image once on hover. */ .card-media::before, .gallery-item::before, .video-tile::before, .dish .card-media::before { content: ''; position: absolute; top: 0; left: -85%; width: 60%; height: 100%; z-index: 3; background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.10) 40%, rgba(224,192,112,.38) 50%, rgba(255,255,255,.10) 60%, transparent 100%); transform: skewX(-18deg); transition: left .85s cubic-bezier(.19,1,.22,1); pointer-events: none; } .card-tv:hover .card-media::before, .gallery-item:hover::before, .video-tile:hover::before, .dish:hover .card-media::before, .gallery-item.touch-active::before, .video-tile.touch-active::before, .dish.touch-active .card-media::before, .card-tv.touch-active .card-media::before { left: 130%; } /* ---------- Darkening veil + gold frame ---------- */ .card-media::after, .gallery-item::after, .dish .card-media::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(31,21,12,.55), rgba(31,21,12,0) 55%); opacity: 0; transition: opacity .45s ease; pointer-events: none; } .card-tv:hover .card-media::after, .gallery-item:hover::after, .dish:hover .card-media::after, .gallery-item.touch-active::after, .dish.touch-active .card-media::after, .card-tv.touch-active .card-media::after { opacity: 1; } /* Inset gold rule that draws in on hover. */ .gallery-item .frame-line, .dish .frame-line { position: absolute; inset: 10px; z-index: 4; border: 1px solid rgba(224,192,112,.85); opacity: 0; transform: scale(1.06); transition: opacity .45s ease, transform .55s cubic-bezier(.19,1,.22,1); pointer-events: none; } .gallery-item:hover .frame-line, .dish:hover .frame-line, .gallery-item.touch-active .frame-line, .dish.touch-active .frame-line { opacity: 1; transform: scale(1); } /* ---------- Gallery caption lift ---------- The base rule leaves .cap at opacity 0; give it a starting offset so it rises into place, and lift it above the darkening veil (z-index 2). */ .gallery-item .cap { z-index: 4; transform: translateY(14px); transition: transform .45s cubic-bezier(.19,1,.22,1), opacity .4s ease; } .gallery-item:hover .cap, .gallery-item.touch-active .cap { transform: translateY(0); opacity: 1; } /* ---------- Zoom badge on gallery tiles ---------- */ .gallery-item .zoom-badge { position: absolute; top: 50%; left: 50%; z-index: 5; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(200,155,60,.94); color: #2b1a0e; display: flex; align-items: center; justify-content: center; font-size: 17px; opacity: 0; transform: scale(.4) rotate(-45deg); transition: opacity .4s ease, transform .5s cubic-bezier(.34,1.56,.64,1); pointer-events: none; } .gallery-item:hover .zoom-badge, .gallery-item.touch-active .zoom-badge { opacity: 1; transform: scale(1) rotate(0deg); } /* ---------- Card lift + tilt ---------- */ .card-tv, .dish { transition: transform .5s cubic-bezier(.19,1,.22,1), box-shadow .5s ease; transform-style: preserve-3d; } .card-tv:hover, .card-tv.touch-active { transform: translateY(-10px); box-shadow: 0 22px 46px rgba(74,44,23,.24); } .dish:hover, .dish.touch-active { transform: translateY(-8px); } /* Dish name slides up and turns gold. */ .dish h3 { transition: color .35s ease, transform .45s cubic-bezier(.19,1,.22,1); } .dish:hover h3, .dish.touch-active h3 { color: var(--brown-warm); transform: translateY(-3px); } /* Card heading shifts slightly on hover. */ .card-body-tv h3 { transition: color .35s ease, transform .4s ease; } .card-tv:hover .card-body-tv h3, .card-tv.touch-active .card-body-tv h3 { color: var(--brown-warm); } /* ---------- Split media (History / About) ---------- */ .split-media img { transition: transform .9s cubic-bezier(.19,1,.22,1); } .split-media::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--gold); border-radius: 10px; opacity: 0; transform: translate(12px, 12px); transition: opacity .5s ease, transform .6s cubic-bezier(.19,1,.22,1); pointer-events: none; } .split-media:hover::after { opacity: .9; transform: translate(0,0); } /* ---------- Branch / blog card media zoom origin ---------- */ .card-media { transform-origin: center; } /* ---------- Video tiles ---------- */ .video-tile { transition: transform .5s cubic-bezier(.19,1,.22,1), box-shadow .5s ease; } .video-tile:hover, .video-tile.touch-active { transform: translateY(-7px) scale(1.015); box-shadow: 0 20px 42px rgba(0,0,0,.28); } .video-tile .v-title { transition: transform .4s ease; } .video-tile:hover .v-title, .video-tile.touch-active .v-title { transform: translateY(-2px); } /* ---------- Filter buttons ---------- */ .filter-btn { transition: all .3s cubic-bezier(.19,1,.22,1); } .filter-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(200,155,60,.28); } /* ---------- Links in cards ---------- */ .tel-link { transition: color .3s ease, transform .3s ease; display: inline-block; } .tel-link:hover { transform: translateX(3px); } /* ---------- Section headings ---------- */ .section-head h2 { transition: transform .5s ease; } /* ---------- Footer links ---------- */ .site-footer ul a { transition: color .3s ease, padding-left .3s ease; display: inline-block; } .site-footer ul a:hover { padding-left: 6px; color: var(--gold); } .social-row a { transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease; } .social-row a:hover { transform: translateY(-4px) scale(1.12); } /* ---------- Touch devices: no hover, so soften the persistent states ---------- */ @media (hover: none) { .card-tv:hover, .dish:hover, .video-tile:hover { transform: none; } } /* ---------- Respect the user's motion preference ---------- */ @media (prefers-reduced-motion: reduce) { .js [data-reveal], .js [data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; } .js .section-head .divider, .js .split-body .divider { width: 70px; transition: none; } .hero-slide.active, .hero-slide.active .hero-content > *, .scroll-cue i, .video-tile .play-badge, .filter-btn.active, .filtered-in, .card-media, .gallery-item { animation: none !important; } .btn-tv::before { display: none; } * { scroll-behavior: auto !important; } /* Image hover layer: keep everything static. */ .card-media img, .gallery-item img, .video-tile img, .split-media img, .card-tv, .dish, .video-tile, .gallery-item .frame-line, .dish .frame-line, .gallery-item .zoom-badge, .gallery-item .cap, .split-media::after, .card-media::after, .gallery-item::after { transition: none !important; transform: none !important; filter: none !important; } .card-media::before, .gallery-item::before, .video-tile::before, .dish .card-media::before { display: none; } }