/* ============================================================
FILE: css/styles.css
PROJECT: Tailored Tastes — Landing Page (PROJECT 1)
PURPOSE: All visual styling for Aaron's Tailored Tastes
catering business landing page. This file is SEPARATE from
error-handler.css (Project 2) — it only handles the look
and feel of the landing page itself.
STRUCTURE OF THIS FILE:
1. CSS Custom Properties (variables) — color/spacing system
2. Google Fonts import — typography
3. CSS Reset — consistent cross-browser baseline
4. Page Background & Layout
5. 3D Menu Scene (the standing folded menu effect)
6. Individual Panel Styles (left, center, right)
7. Panel Content Styles (headings, text, lists, buttons)
8. Navigation Bar
9. Animations & Hover Effects
10. Responsive / Mobile Styles
============================================================ */
/* ============================================================
SECTION 1: CSS CUSTOM PROPERTIES (CSS VARIABLES)
These are like settings at the top of the file.
Change a value here and it updates EVERYWHERE it's used.
TIP: Custom properties are declared with -- prefix and
accessed with var(--name). They cascade like normal CSS.
============================================================ */
:root {
/* ---- COLOR PALETTE ----------------------------------------
Designed to complement the Tailored Tastes logo which is
black background, gold (#C9A050 approx), and white.
The palette uses deep forest green as the primary
background — a rich, natural, food-appropriate color that
makes gold accents POP dramatically. */
/* Primary background colors (the page background) */
--color-bg-deep: #0C2218; /* deep forest green — the darkest background shade */
--color-bg-mid: #163A26; /* mid forest green — used in gradient backgrounds */
--color-bg-light: #1F5234; /* lighter forest green — for subtle section backgrounds */
/* Gold accent colors (matching the logo gold) */
--color-gold: #C9A050; /* primary gold — exact match to logo gold tones */
--color-gold-light: #E8C778; /* lighter gold — for hover states and highlights */
--color-gold-dark: #A07B2A; /* darker gold — for active/pressed states */
--color-gold-glow: rgba(201, 160, 80, 0.25); /* transparent gold for glows and shadows */
/* Warm amber — a complementary accent color to gold */
--color-amber: #D4822A; /* warm amber/copper — energetic accent */
--color-amber-light: #F0A84E; /* lighter amber — for hover on amber elements */
/* Panel colors (the menu "pages" — warm cream/parchment)
These are LIGHT so all text and content is clearly visible. */
--color-panel: #FFF5DC; /* warm parchment cream — main panel background */
--color-panel-edge: #F0D9A8; /* slightly darker parchment — panel edge/shadow effect */
--color-panel-inner: #FFFBF0; /* very light cream — for cards/boxes inside panels */
--color-panel-hover: #FFF0CC; /* slightly warmer — panel background on hover */
/* Text colors */
--color-text-dark: #2C1508; /* very dark brown — main text on light (panel) backgrounds */
--color-text-mid: #5C3A18; /* medium brown — secondary/body text on panels */
--color-text-muted: #8B6540; /* muted brown — placeholder/caption text */
--color-text-light: #FFF5DC; /* warm cream — main text on dark backgrounds */
--color-text-gold: #C9A050; /* gold — headings and accents on dark backgrounds */
/* Divider/border colors */
--color-divider-light: rgba(201, 160, 80, 0.3); /* subtle gold divider on dark backgrounds */
--color-divider-panel: #D4B896; /* warm tan — dividers on light panel backgrounds */
/* ---- TYPOGRAPHY -------------------------------------------
Display font: Playfair Display — elegant serif, perfect for
premium food/catering brands. Pairs beautifully with gold.
Body font: Lora — highly readable humanist serif. Warm
and approachable for body text. */
--font-display: 'Playfair Display', 'Georgia', serif; /* headings, titles, logo text */
--font-body: 'Lora', 'Georgia', serif; /* body text, descriptions, lists */
--font-accent: 'Cormorant Garamond', 'Georgia', serif; /* labels, captions, fine print */
--font-mono: 'Courier New', monospace; /* phone/email/code */
/* ---- SPACING SYSTEM ---------------------------------------
Consistent spacing scale. Use multiples of --space-base (8px).
TIP: A consistent spacing scale makes the design feel
organized and professional. If things look "off", check
that you're using these variables instead of random values. */
--space-xs: 4px; /* extra small — tight gaps */
--space-sm: 8px; /* small — inner padding */
--space-md: 16px; /* medium — standard padding */
--space-lg: 24px; /* large — section padding */
--space-xl: 40px; /* extra large — major sections */
--space-2xl: 64px; /* section breaks */
/* ---- PANEL DIMENSIONS -------------------------------------
These control the menu panel sizes. */
--panel-width-side: 280px; /* width of left and right panels */
--panel-width-center: 360px; /* width of the center panel (slightly wider = hero) */
--panel-min-height: 80vh; /* minimum panel height — 80% of viewport height */
/* NOTE: --panel-angle removed. 3D rotateY transforms were removed from the
design because CSS filter properties on the parent element were silently
flattening all 3D child transforms, making the angles invisible regardless
of the angle value. Flat panels look cleaner and render reliably everywhere. */
/* ---- SHADOWS & EFFECTS ------------------------------------ */
--shadow-panel: 0 20px 60px rgba(0,0,0,0.5), /* large dark shadow under panels */
0 2px 8px rgba(0,0,0,0.3); /* close subtle shadow */
--shadow-gold: 0 0 30px rgba(201, 160, 80, 0.4); /* gold glow effect */
--shadow-panel-edge:inset -4px 0 20px rgba(0,0,0,0.15); /* inner shadow on panel edges */
/* ---- TRANSITIONS ------------------------------------------
Reusable transition values for consistent animations. */
--transition-fast: 0.2s ease; /* quick hover responses */
--transition-med: 0.4s ease; /* medium — panel hover effects */
--transition-slow: 0.7s ease; /* slow — page load animations */
}
/* ============================================================
SECTION 2: GOOGLE FONTS IMPORT
Loads the custom fonts from Google's CDN.
TIP: This @import must be at the TOP of the CSS file
(or in a in HTML) before any font usage.
TIP: The 'display=swap' parameter prevents invisible text
while fonts are loading — the browser uses a fallback first.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Lora:ital,wght@0,400;0,500;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&display=swap');
/* ============================================================
SECTION 3: CSS RESET & BOX MODEL
Normalizes browser inconsistencies so the site looks the
same in Chrome, Firefox, Safari, and Edge.
============================================================ */
/* Universal selector (*) applies to EVERY element on the page.
box-sizing: border-box means padding and border are INCLUDED
in the element's width/height — much more predictable.
TIP: This is considered a best practice in modern CSS. */
*, *::before, *::after {
box-sizing: border-box; /* padding and border included in width/height calculations */
margin: 0; /* remove default browser margins */
padding: 0; /* remove default browser padding */
}
/* Base styles for the HTML element. */
html {
font-size: 16px; /* base font size — 1rem = 16px. Change this to scale all rem units */
scroll-behavior: smooth; /* smooth scrolling when clicking anchor links (#section) */
height: 100%; /* allow body to fill full height */
}
/* Base styles for the body element. */
body {
font-family: var(--font-body); /* Lora — our chosen body font */
font-size: 1rem; /* 16px — inherited from html */
color: var(--color-text-light); /* cream text on the dark background */
background: var(--color-bg-deep); /* deep forest green base background */
min-height: 100vh; /* always at least full viewport height */
overflow-x: hidden; /* prevent horizontal scrollbar on wide effects */
line-height: 1.6; /* comfortable line spacing for body text */
/* Background gradient — creates depth and visual interest */
background: radial-gradient(
ellipse at 50% 0%, /* radial gradient starting from top center */
var(--color-bg-light) 0%, /* lighter green at the top */
var(--color-bg-mid) 40%, /* mid green in the middle */
var(--color-bg-deep) 100% /* deepest green at the bottom edges */
);
/* TIP: radial-gradient creates a circular/oval gradient.
'ellipse at 50% 0%' means oval shape centered at top.
This creates a subtle "spotlight from above" feeling. */
}
/* Remove default list styling (bullets, numbers, indent) */
ul, ol {
list-style: none; /* removes bullet points — we'll add custom styling */
}
/* Remove default link styling */
a {
text-decoration: none; /* removes underlines */
color: inherit; /* inherits text color from parent */
}
/* Make images responsive by default — never wider than container */
img {
max-width: 100%; /* image won't overflow its container */
height: auto; /* maintain aspect ratio */
display: block; /* removes inline image bottom gap */
}
/* Consistent button base — reset browser defaults */
button {
cursor: pointer; /* hand cursor to indicate clickability */
border: none; /* remove default border */
background: none; /* remove default background */
font-family: inherit; /* use the page's font instead of browser default */
}
/* ============================================================
SECTION 4: NAVIGATION BAR
Fixed top navigation that stays visible while scrolling.
============================================================ */
/* The navigation bar container */
.tt-nav {
position: fixed; /* stays at top of viewport while scrolling */
top: 0; /* stick to the very top */
left: 0; /* start at left edge */
right: 0; /* stretch to right edge */
z-index: 1000; /* above the 3D menu but below error notifications */
display: flex; /* horizontal row layout */
align-items: center; /* vertically center items */
justify-content: space-between; /* logo on left, links on right */
padding: 12px var(--space-xl); /* comfortable padding */
/* Semi-transparent dark background — lets the green show through slightly.
TIP: rgba() allows transparency: rgba(red, green, blue, alpha).
alpha = 0 is fully transparent, 1 is fully opaque. */
background: rgba(12, 34, 24, 0.85); /* 85% opaque deep green */
border-bottom: 1px solid var(--color-divider-light); /* subtle gold bottom border */
/* Backdrop blur creates a frosted glass effect on modern browsers.
TIP: backdrop-filter only works on non-opaque backgrounds.
The -webkit- prefix handles Safari compatibility. */
backdrop-filter: blur(10px); /* blur background content showing through */
-webkit-backdrop-filter: blur(10px); /* Safari support */
}
/* The brand name / logo text in the navigation bar */
.tt-nav__brand {
font-family: var(--font-display); /* Playfair Display — elegant and on-brand */
font-size: 1.3rem; /* slightly larger than body text */
font-weight: 600; /* semi-bold */
color: var(--color-gold); /* gold color — brand recognition */
letter-spacing: 2px; /* wider spacing for elegant feel */
text-transform: uppercase; /* ALL CAPS for logo styling */
}
/* Navigation links container */
.tt-nav__links {
display: flex; /* horizontal row of links */
gap: var(--space-lg); /* 24px space between each link */
align-items: center; /* vertically centered */
}
/* Individual navigation links */
.tt-nav__link {
font-family: var(--font-accent); /* Cormorant Garamond — refined label style */
font-size: 0.85rem; /* slightly smaller than body */
color: var(--color-text-light); /* cream color */
letter-spacing: 1.5px; /* wide spacing for nav link style */
text-transform: uppercase; /* uppercase for nav links */
padding-bottom: 2px; /* space for the underline animation below */
transition: color var(--transition-fast); /* smooth color change on hover */
/* Custom underline using a pseudo-element (::after) rather than
text-decoration — this allows animated underlines. */
position: relative; /* required for ::after absolute positioning */
}
/* The animated underline for nav links */
.tt-nav__link::after {
content: ''; /* empty content — just a visible line */
position: absolute; /* position relative to the link */
bottom: 0; /* at the bottom of the link */
left: 50%; /* start at center (then transform to stretch from center) */
width: 0; /* start with 0 width (invisible) */
height: 1px; /* 1px thin underline */
background: var(--color-gold); /* gold underline */
/* Transition: width and left animate together to create
a "grow from center" effect on hover. */
transition: width var(--transition-fast), left var(--transition-fast);
}
/* Nav link hover state — underline grows, text turns gold */
.tt-nav__link:hover {
color: var(--color-gold); /* gold text on hover */
}
/* Nav link hover pseudo-element — underline stretches to full width */
.tt-nav__link:hover::after {
width: 100%; /* full width underline */
left: 0; /* start at left edge (was 50%, now stretches both ways) */
}
/* ============================================================
SECTION 5: PAGE WRAPPER & MAIN CONTENT AREA
============================================================ */
/* The main page container — holds everything below the nav bar */
.tt-page {
min-height: 100vh; /* at least full viewport height */
padding-top: 70px; /* account for fixed nav bar height (~60px + buffer) */
display: flex; /* flex column for stacked sections */
flex-direction: column; /* stack sections vertically */
align-items: center; /* center all content horizontally */
overflow: hidden; /* prevent horizontal overflow from 3D effects */
}
/* ============================================================
SECTION 6: 3D MENU SCENE
This is the heart of the visual design — three menu panels
arranged like a standing folded menu.
HOW THE 3D EFFECT WORKS:
1. .tt-scene sets the "camera" perspective (how far away the
viewer is conceptually — higher value = flatter/less 3D).
2. perspective-origin positions the camera slightly ABOVE
center to create the "peering over the menu" effect.
3. .tt-menu is a flex row containing the three panels.
4. Left and right panels have rotateY() transforms applied,
making them angle inward like a standing folded menu.
============================================================ */
/* The outermost container. With 3D transforms removed, this is now
a straightforward flex centering wrapper. The perspective properties
have been removed — they were only needed for the rotateY() 3D effect
on the side panels, which has been replaced with a clean flat layout. */
.tt-scene {
width: 100%; /* full page width */
display: flex; /* flex for centering */
justify-content: center; /* horizontally center the menu */
align-items: flex-start; /* align to top */
padding: var(--space-xl) var(--space-lg); /* breathing room around the menu */
/* Subtle shadow UNDER the whole menu scene — applied here instead of
on .tt-menu to avoid the CSS filter stacking-context issue that was
previously breaking the 3D transforms. */
filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45));
}
/* The actual three-panel menu row.
This is a flex row — left panel, center panel, right panel.
IMPORTANT: Do NOT add a 'filter' property to this element.
CSS filter properties (drop-shadow, blur, etc.) create a new
flat stacking context that CANCELS all rotateY() 3D transforms
on child elements — the panels would appear completely flat.
Shadow effect is applied via box-shadow on the center panel instead. */
.tt-menu {
display: flex; /* horizontal row of three panels */
align-items: stretch; /* all panels same height */
}
/* ============================================================
SECTION 7: INDIVIDUAL PANEL STYLES
============================================================ */
/* Base styles shared by ALL three panels */
.tt-panel {
position: relative; /* for absolute-positioned child elements */
min-height: var(--panel-min-height); /* 80vh — tall enough for content */
overflow-y: auto; /* scrollable if content exceeds height */
scroll-behavior: smooth; /* animates when JS sets panel.scrollTop directly —
simpler than scrollTo({behavior:'smooth'}) which
has inconsistent support on non-window elements */
overflow-x: hidden; /* no horizontal overflow */
padding: var(--space-xl) var(--space-lg); /* generous padding inside panels */
background: var(--color-panel); /* warm parchment cream */
display: flex; /* flex column for stacked content sections */
flex-direction: column; /* stack content vertically */
gap: var(--space-lg); /* spacing between content sections */
/* Panel border — subtle warm tan that defines the edges
without looking heavy. */
border: 1px solid var(--color-panel-edge);
/* TIP: overflow-y: auto means a scrollbar only appears
when the content is actually too tall. On touchscreens,
this enables touch scrolling within the panel. */
}
/* Custom scrollbar styling for panels (Chrome/Safari/Edge)
TIP: Firefox uses different scrollbar CSS (scrollbar-width: thin)
which is handled below. */
.tt-panel::-webkit-scrollbar {
width: 4px; /* thin scrollbar — unobtrusive */
}
.tt-panel::-webkit-scrollbar-track {
background: var(--color-panel-edge); /* track matches panel background */
}
.tt-panel::-webkit-scrollbar-thumb {
background: var(--color-gold-dark); /* gold scrollbar thumb */
border-radius: 2px; /* rounded ends */
}
/* Firefox scrollbar styling */
.tt-panel {
scrollbar-width: thin; /* thin scrollbar width */
scrollbar-color: var(--color-gold-dark) var(--color-panel-edge); /* thumb track */
}
/* ---- LEFT PANEL -------------------------------------------
Left page of the open menu — flat, no 3D rotation.
A thick right border acts as the spine/binding between
this panel and the center panel, giving the triptych
its "open book/menu" visual separation. */
.tt-panel--left {
width: var(--panel-width-side); /* 280px */
border-right: 3px solid var(--color-panel-edge); /* the spine — emphasised right edge */
/* TIP: 3D rotateY transforms were removed from this panel.
CSS filter on a parent element creates a flat stacking context
that cancels all 3D child transforms. The flat design renders
consistently across all browsers and devices. */
background: linear-gradient(
135deg,
var(--color-panel-inner) 0%,
var(--color-panel) 100%
);
}
/* ---- CENTER PANEL -----------------------------------------
The main/hero panel. Faces the viewer directly with no rotation.
Slightly wider and given more visual prominence.
Box-shadow provides the depth effect previously handled by
.tt-menu's filter property (which had to be removed to allow
the 3D rotateY transforms to work on the side panels). */
.tt-panel--center {
width: var(--panel-width-center); /* 360px — wider than side panels */
z-index: 2; /* in front of side panels in stacking order */
border-left: 2px solid var(--color-panel-edge); /* left spine edge */
border-right: 2px solid var(--color-panel-edge); /* right spine edge */
box-shadow: 0 25px 60px rgba(0,0,0,0.5), /* dramatic shadow below */
0 0 40px rgba(201,160,80,0.12); /* subtle gold glow around center */
/* Slightly brighter background to draw the eye to the center. */
background: linear-gradient(
180deg, /* vertical gradient */
var(--color-panel-inner) 0%, /* slightly brighter at top */
var(--color-panel) 60%, /* parchment through the middle */
var(--color-panel-edge) 100% /* slightly darker at bottom */
);
}
/* ---- RIGHT PANEL ------------------------------------------
Right page of the open menu — flat, mirrors the left panel.
Left border acts as the spine between center and right. */
.tt-panel--right {
width: var(--panel-width-side); /* 280px — same as left */
border-left: 3px solid var(--color-panel-edge); /* the spine — left edge */
background: linear-gradient(
225deg,
var(--color-panel-inner) 0%,
var(--color-panel) 100%
);
}
/* ============================================================
SECTION 8: PANEL CONTENT STYLES
Typography and components inside the menu panels.
============================================================ */
/* ---- HERO SLIDESHOW (center panel) ------------------------
Replaces the static logo. Shows logo first, then auto-advances
through all 9 gallery photos. See .tt-slideshow section in
Section 9 below for full slideshow CSS. */
/* ---- PANEL SECTION DIVIDER --------------------------------
A decorative gold divider line used between content sections
on the panels. */
.tt-divider {
width: 100%; /* full width of the panel content area */
height: 1px; /* thin line */
background: linear-gradient( /* gradient so it fades at the edges */
to right,
transparent 0%, /* invisible at left edge */
var(--color-gold) 20%, /* solid gold in the middle */
var(--color-gold) 80%, /* stays gold across most of width */
transparent 100% /* invisible at right edge */
);
margin: var(--space-sm) 0; /* vertical spacing above/below */
}
/* ---- PANEL SECTION LABEL ----------------------------------
Small uppercase label above headings (e.g., "— ABOUT US —") */
.tt-label {
font-family: var(--font-accent); /* Cormorant Garamond */
font-size: 0.7rem; /* very small */
font-weight: 400; /* regular weight */
letter-spacing: 3px; /* widely spaced uppercase letters */
text-transform: uppercase; /* ALL CAPS */
color: var(--color-text-muted); /* muted brown */
display: flex; /* flex for centering and icon placement */
align-items: center; /* vertically center the dashes and text */
gap: 8px; /* space between dashes and text */
}
/* The decorative dashes on either side of section labels
TIP: ::before and ::after are pseudo-elements — they add
visual content without needing extra HTML elements. */
.tt-label::before,
.tt-label::after {
content: ''; /* no text — just a line */
flex: 1; /* grow to fill available space */
height: 1px; /* thin line */
background: var(--color-divider-panel); /* warm tan color */
}
/* ---- PANEL HEADINGS ---------------------------------------*/
/* Main heading style (h2, also used via .tt-heading) */
.tt-heading,
h2 {
font-family: var(--font-display); /* Playfair Display — elegant serif */
font-size: 1.6rem; /* large heading size */
font-weight: 600; /* semi-bold */
color: var(--color-text-dark); /* very dark brown on panel */
line-height: 1.2; /* tight line height for headings */
margin-bottom: var(--space-sm); /* space below heading */
}
/* Italic variation (Playfair Display supports beautiful italics) */
.tt-heading--italic {
font-style: italic; /* elegant italic for emphasis */
color: var(--color-gold-dark); /* slightly darker gold for italic headings */
}
/* Sub-heading style (h3) */
.tt-subheading,
h3 {
font-family: var(--font-display); /* Playfair Display */
font-size: 1.1rem; /* medium heading */
font-weight: 600; /* semi-bold */
color: var(--color-text-dark); /* dark on light panel */
margin-bottom: var(--space-xs); /* small margin below */
}
/* Hero tagline — large italic display text in center panel */
.tt-hero-tagline {
font-family: var(--font-display); /* Playfair Display */
font-size: 1.4rem; /* large but not overwhelming */
font-style: italic; /* elegant italic */
font-weight: 400; /* normal weight (italic is the emphasis) */
color: var(--color-text-dark); /* dark text on cream panel */
text-align: center; /* centered in the middle panel */
line-height: 1.4; /* comfortable line height for multi-line */
margin: var(--space-sm) 0; /* vertical breathing room */
}
/* The business name displayed large in center panel */
.tt-hero-name {
font-family: var(--font-display); /* Playfair Display */
font-size: 2rem; /* large display size */
font-weight: 700; /* bold */
color: var(--color-gold-dark); /* gold for the business name */
text-align: center; /* centered */
letter-spacing: 2px; /* elegant letter spacing */
text-transform: uppercase; /* ALL CAPS for brand name */
line-height: 1.1;
}
/* ---- BODY TEXT -------------------------------------------*/
/* Standard paragraph text inside panels */
.tt-body,
p {
font-family: var(--font-body); /* Lora */
font-size: 0.9rem; /* slightly smaller for dense panel content */
color: var(--color-text-mid); /* medium brown — readable but not harsh */
line-height: 1.7; /* generous line height for readability */
}
/* Centered text modifier (used for center panel content) */
.tt-body--center {
text-align: center; /* centers the paragraph */
}
/* ---- SERVICE LIST -----------------------------------------
List of services displayed in the left panel. */
.tt-service-list {
display: flex; /* flex column for list items */
flex-direction: column; /* stack items vertically */
gap: var(--space-md); /* space between each service item */
margin: var(--space-sm) 0; /* top/bottom breathing room */
}
/* Individual service list item */
.tt-service-item {
display: flex; /* flex row: icon + text */
align-items: flex-start; /* align icon to top of multi-line text */
gap: var(--space-sm); /* space between icon and text */
}
/* The icon/emoji for each service item */
.tt-service-item__icon {
font-size: 1.3rem; /* slightly larger than body text */
flex-shrink: 0; /* don't let the icon shrink or wrap */
margin-top: 1px; /* nudge down slightly to align with first line of text */
}
/* Service item text content (name + description) */
.tt-service-item__text {
display: flex; /* flex column for name above description */
flex-direction: column;
gap: 2px; /* tiny gap between name and description */
}
/* Service name — bold label */
.tt-service-item__name {
font-family: var(--font-body); /* Lora */
font-size: 0.85rem; /* slightly smaller than body */
font-weight: 600; /* bold — makes the name stand out */
color: var(--color-text-dark); /* dark brown */
}
/* Service description — lighter supporting text */
.tt-service-item__desc {
font-family: var(--font-accent); /* Cormorant Garamond — lighter feel */
font-size: 0.78rem; /* small */
color: var(--color-text-muted); /* muted color — secondary info */
font-style: italic; /* italic for description styling */
}
/* ---- HOW IT WORKS STEPS -----------------------------------
Three-step numbered process list in the left panel.
Each step has a gold circle number, a bold title, and
a short italic description. */
/* The ordered list container — stacks steps vertically */
.tt-steps {
list-style: none; /* remove default numbers — we use custom circles */
display: flex;
flex-direction: column;
gap: 14px; /* space between each step */
margin: var(--space-sm) 0;
}
/* Individual step row: number circle + text content side by side */
.tt-step {
display: flex;
align-items: flex-start; /* align number to top of multi-line text */
gap: var(--space-sm); /* 8px between circle and text */
}
/* The numbered gold circle badge */
.tt-step__num {
flex-shrink: 0; /* never shrink — always stays circular */
width: 24px;
height: 24px;
border-radius: 50%; /* circle */
background: rgba(201, 160, 80, 0.12); /* faint gold fill */
border: 1px solid rgba(201, 160, 80, 0.45);
color: var(--color-gold-dark);
font-family: var(--font-display); /* Playfair Display */
font-size: 0.68rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px; /* nudge down to align with first line of text */
}
/* Text block to the right of the number */
.tt-step__body {
display: flex;
flex-direction: column;
gap: 2px;
}
/* Step title — bold label */
.tt-step__name {
font-family: var(--font-body); /* Lora */
font-size: 0.82rem;
font-weight: 600;
color: var(--color-text-dark);
line-height: 1.3;
}
/* Step description — lighter italic supporting text */
.tt-step__desc {
font-family: var(--font-accent); /* Cormorant Garamond */
font-size: 0.76rem;
font-style: italic;
color: var(--color-text-muted);
line-height: 1.5;
}
/* ---- KNOWN FOR LIST ---------------------------------------
Signature dishes list in the left panel.
Each item has an emoji icon and a text label. */
.tt-known-for {
list-style: none;
display: flex;
flex-direction: column;
gap: 9px;
margin: var(--space-sm) 0;
}
/* Individual known-for item row */
.tt-known-item {
display: flex;
align-items: center;
gap: 8px;
}
/* The emoji icon */
.tt-known-item__icon {
font-size: 1rem;
flex-shrink: 0;
width: 22px; /* fixed width so text always aligns */
text-align: center;
}
/* The dish name text */
.tt-known-item__text {
font-family: var(--font-body);
font-size: 0.82rem;
color: var(--color-text-mid);
line-height: 1.3;
}
.tt-contact-list {
display: flex;
flex-direction: column;
gap: var(--space-md); /* spacing between contact items */
}
/* Individual contact row (icon + label + value) */
.tt-contact-item {
display: flex;
align-items: center;
gap: var(--space-sm); /* space between icon and text */
}
/* Contact icon */
.tt-contact-item__icon {
font-size: 1.1rem; /* slightly larger */
flex-shrink: 0; /* don't shrink */
width: 24px; /* fixed width so text always starts at same point */
text-align: center; /* center the icon in its fixed width */
}
/* Contact text (the actual phone/email/address value) */
.tt-contact-item__text {
font-family: var(--font-body); /* Lora */
font-size: 0.85rem; /* comfortable reading size */
color: var(--color-text-mid); /* medium brown */
line-height: 1.4; /* good for two-line addresses */
}
/* Contact item label (small text above the value, e.g., "Phone") */
.tt-contact-item__label {
font-family: var(--font-accent); /* Cormorant Garamond */
font-size: 0.65rem; /* very small */
letter-spacing: 2px; /* wide spacing */
text-transform: uppercase; /* ALL CAPS */
color: var(--color-text-muted); /* muted */
display: block; /* block so value goes on next line */
margin-bottom: 1px; /* tiny space before value */
}
/* Phone and email values — monospace for alignment and clarity */
.tt-contact-item__value {
font-family: var(--font-mono); /* Courier New */
font-size: 0.82rem;
color: var(--color-text-dark); /* darker — more important than label */
}
/* ---- INQUIRY FORM -----------------------------------------
The contact/booking form in the right panel. */
.tt-form {
display: flex;
flex-direction: column;
gap: var(--space-sm); /* space between form fields */
margin-top: var(--space-sm); /* space above the form */
}
/* Form field group — label above input */
.tt-form-group {
display: flex;
flex-direction: column;
gap: 4px; /* small gap between label and input */
}
/* Form field labels */
.tt-form-label {
font-family: var(--font-accent); /* Cormorant Garamond */
font-size: 0.7rem; /* small */
letter-spacing: 1.5px; /* wide spacing */
text-transform: uppercase; /* ALL CAPS */
color: var(--color-text-muted); /* muted */
}
/* Text inputs, select dropdowns, and textarea */
.tt-form-input,
.tt-form-select,
.tt-form-textarea {
width: 100%; /* full width of the panel */
padding: 8px 10px; /* comfortable internal padding */
background: var(--color-panel-inner); /* slightly lighter than panel */
border: 1px solid var(--color-divider-panel); /* warm tan border */
border-radius: 4px; /* slightly rounded */
font-family: var(--font-body); /* Lora */
font-size: 0.8rem; /* small, fits in panel */
color: var(--color-text-dark); /* dark text */
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
/* Appearance reset for select dropdowns — different browsers
render selects differently by default. */
appearance: none; /* removes default OS-style dropdown arrow */
-webkit-appearance: none; /* Safari prefix */
}
/* Input/textarea focused state — gold border highlight */
.tt-form-input:focus,
.tt-form-select:focus,
.tt-form-textarea:focus {
outline: none; /* remove default browser focus ring */
border-color: var(--color-gold); /* gold border when focused */
box-shadow: 0 0 0 2px var(--color-gold-glow); /* subtle gold glow around input */
}
/* Textarea specific — don't let the user resize horizontally */
.tt-form-textarea {
resize: vertical; /* only allow vertical resizing (more rows, not wider) */
min-height: 70px; /* minimum textarea height */
max-height: 120px; /* maximum — prevents it from growing too large in the panel */
}
/* ---- CTA BUTTONS ------------------------------------------
Call-to-action buttons used throughout the panels. */
/* Primary CTA button — solid gold background */
.tt-btn {
display: inline-flex; /* flex for icon + text alignment */
align-items: center; /* vertically center contents */
justify-content: center; /* horizontally center contents */
gap: var(--space-sm); /* space between icon and text */
padding: 12px 24px; /* comfortable click target */
background: var(--color-gold); /* gold background */
color: #1A1208; /* very dark text on gold — high contrast */
font-family: var(--font-accent); /* Cormorant Garamond */
font-size: 0.8rem; /* small label size */
font-weight: 600; /* bold */
letter-spacing: 2px; /* wide spacing */
text-transform: uppercase; /* ALL CAPS */
border-radius: 3px; /* slightly rounded */
width: 100%; /* full width of panel */
transition: background var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
/* TIP: transition on multiple properties (comma-separated)
allows each to animate at the same speed/easing. */
}
/* Primary button hover state */
.tt-btn:hover {
background: var(--color-gold-light); /* lighter gold on hover */
transform: translateY(-2px); /* slight upward lift */
box-shadow: 0 6px 20px rgba(201, 160, 80, 0.4); /* gold glow shadow */
}
/* Primary button active (being clicked) state */
.tt-btn:active {
transform: translateY(0); /* remove lift — presses down */
box-shadow: none; /* remove shadow when pressed */
}
/* Secondary (outline) button variant */
.tt-btn--outline {
background: transparent; /* no fill */
color: var(--color-text-dark); /* dark text */
border: 1px solid var(--color-divider-panel); /* panel-color border */
}
/* Secondary button hover */
.tt-btn--outline:hover {
background: var(--color-panel-edge); /* slight fill on hover */
border-color: var(--color-gold); /* gold border on hover */
color: var(--color-gold-dark); /* gold text on hover */
}
/* ---- HIGHLIGHT/BADGE CHIP ---------------------------------
Small colored pill used for "Available in Erie, PA" etc. */
.tt-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
background: rgba(201, 160, 80, 0.15); /* transparent gold fill */
border: 1px solid rgba(201, 160, 80, 0.4); /* gold border */
border-radius: 20px; /* fully rounded pill shape */
font-family: var(--font-accent); /* Cormorant Garamond */
font-size: 0.68rem; /* very small */
letter-spacing: 1.5px; /* wide for label */
text-transform: uppercase; /* ALL CAPS */
color: var(--color-text-dark); /* readable dark text */
}
/* ---- TESTIMONIAL / QUOTE BLOCK ----------------------------
Pull quote or testimonial styling for the center panel. */
.tt-quote {
border-left: 3px solid var(--color-gold); /* gold left accent border */
padding: var(--space-sm) var(--space-md); /* inner padding */
background: rgba(201, 160, 80, 0.06); /* very faint gold background tint */
border-radius: 0 4px 4px 0; /* round only the right corners */
margin: var(--space-sm) 0; /* vertical breathing room */
}
/* Quote text */
.tt-quote__text {
font-family: var(--font-display); /* Playfair Display */
font-style: italic; /* italic for quotes */
font-size: 0.85rem;
color: var(--color-text-dark);
line-height: 1.6;
}
/* Quote attribution */
.tt-quote__attr {
font-family: var(--font-accent); /* Cormorant Garamond */
font-size: 0.68rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-text-muted);
margin-top: var(--space-xs);
}
/* ---- SOCIAL MEDIA LINKS -----------------------------------
Social icons row in the right panel. */
.tt-social {
display: flex; /* horizontal row */
gap: var(--space-sm); /* space between icons */
flex-wrap: wrap; /* wrap if too many for one row */
}
/* Individual social link */
.tt-social__link {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(201, 160, 80, 0.1); /* faint gold background */
border: 1px solid rgba(201, 160, 80, 0.25); /* gold border */
border-radius: 4px;
font-family: var(--font-accent);
font-size: 0.7rem;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--color-text-dark);
transition: background var(--transition-fast), border-color var(--transition-fast);
}
/* Social link hover state */
.tt-social__link:hover {
background: rgba(201, 160, 80, 0.25); /* stronger gold fill on hover */
border-color: var(--color-gold); /* solid gold border on hover */
}
/* ---- FOOTER -----------------------------------------------
Minimal footer below the menu on the page. */
.tt-footer {
width: 100%; /* full page width */
text-align: center; /* centered text */
padding: var(--space-lg) var(--space-xl); /* comfortable padding */
border-top: 1px solid var(--color-divider-light); /* gold divider above footer */
margin-top: var(--space-xl); /* space between menu and footer */
}
/* Footer text */
.tt-footer__text {
font-family: var(--font-accent); /* Cormorant Garamond */
font-size: 0.72rem; /* very small */
letter-spacing: 2px; /* wide */
text-transform: uppercase; /* ALL CAPS */
color: rgba(255, 245, 220, 0.4); /* very faint cream — unobtrusive */
}
/* ============================================================
SECTION 9: ANIMATIONS
Keyframe animations for page load reveal effects.
============================================================ */
/* Fade in and rise up — used for initial page load animation.
Elements start invisible and below their final position. */
@keyframes fadeRise {
from {
opacity: 0; /* start invisible */
transform: translateY(30px); /* start 30px below final position */
}
to {
opacity: 1; /* end fully visible */
transform: translateY(0); /* end at natural position */
}
}
/* The 3D menu scene fades in on load */
.tt-scene {
animation: fadeRise 1s ease-out both; /* 'both' applies animation start state before it begins */
}
/* Center panel delays slightly to appear after the scene */
.tt-panel--center {
animation: fadeRise 0.8s ease-out 0.3s both; /* 0.3s delay */
}
/* Side panels fade in after center panel */
.tt-panel--left {
animation: fadeRise 0.8s ease-out 0.5s both; /* 0.5s delay */
}
.tt-panel--right {
animation: fadeRise 0.8s ease-out 0.5s both; /* 0.5s delay (same as left) */
}
/* Gold glow pulse on the logo in center panel */
@keyframes goldPulse {
0%, 100% { box-shadow: 0 0 15px rgba(201, 160, 80, 0.2); } /* subtle glow */
50% { box-shadow: 0 0 35px rgba(201, 160, 80, 0.5); } /* stronger glow at midpoint */
}
/* Apply the pulse animation to the logo wrapper */
.tt-logo-wrap {
animation: goldPulse 4s ease-in-out infinite; /* infinite loop, 4 second cycle */
}
/* ============================================================
SECTION 9: HERO SLIDESHOW STYLES
The auto-advancing slideshow that replaces the static logo
in the center panel. Slide 0 = logo, Slides 1-9 = gallery photos.
JavaScript in main.js handles the auto-advance timer (4.5s),
pause-on-hover, prev/next buttons, dot navigation, and swipe.
============================================================ */
/* Slideshow outer container — square aspect ratio works for both
the square logo and portrait/landscape food photos. */
.tt-slideshow {
position: relative; /* required for absolute-positioned slides inside */
width: 100%; /* fills the center panel content width */
aspect-ratio: 1 / 1; /* square — logo is square, photos crop nicely */
overflow: hidden; /* clip slides to container bounds */
border-radius: 8px; /* softened corners */
background: #0C0C0C; /* dark bg visible behind the logo */
margin: var(--space-sm) 0;
}
/* Each slide — all absolutely stacked. Only the active slide is visible. */
.tt-slide {
position: absolute;
inset: 0; /* shorthand for top/right/bottom/left: 0 */
opacity: 0;
transition: opacity 0.9s ease; /* smooth cross-fade between slides */
}
.tt-slide--active { opacity: 1; } /* visible slide */
/* All slide images fill their slide completely */
.tt-slide-img {
width: 100%;
height: 100%;
object-fit: cover; /* fill, crop to center */
display: block;
}
/* Logo slide: contain (no cropping) on a dark background */
.tt-slide-img--logo {
object-fit: contain;
padding: 20px;
background: #0C0C0C;
}
/* Prev / Next arrow buttons — overlaid on the left and right edges */
.tt-slide-prev,
.tt-slide-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.45);
border: 1px solid rgba(201, 160, 80, 0.35);
color: var(--color-gold);
width: 34px;
height: 34px;
border-radius: 50%;
font-size: 22px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: background 0.2s;
padding: 0;
line-height: 1;
user-select: none;
}
.tt-slide-prev { left: 8px; }
.tt-slide-next { right: 8px; }
.tt-slide-prev:hover,
.tt-slide-next:hover { background: rgba(201, 160, 80, 0.3); }
/* Dot indicators row at the bottom of the slideshow */
.tt-slide-dots {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 6px;
z-index: 2;
}
.tt-slide-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 0;
cursor: pointer;
transition: background 0.25s, transform 0.25s;
}
.tt-slide-dot--active {
background: var(--color-gold);
border-color: var(--color-gold);
transform: scale(1.35);
}
/* ============================================================
SECTION 10: GALLERY STYLES (kept for reference — gallery grid
removed from HTML but styles preserved in case it is re-added)
============================================================ */
/* Gallery grid — 2 columns inside the center panel.
auto-fill lets it add more columns if the panel is wider. */
.tt-gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 equal columns */
gap: 8px; /* 8px between all photos */
margin: var(--space-sm) 0;
}
/* Each photo item — fixed aspect ratio so all thumbs are the same size.
cursor: pointer indicates these are clickable (opens the lightbox). */
.tt-gallery-item {
aspect-ratio: 4 / 3; /* landscape rectangle — good for food photos */
overflow: hidden; /* clip image to the rounded rectangle */
border-radius: 4px;
border: 1px solid rgba(201, 160, 80, 0.2); /* subtle gold border */
background: var(--color-panel-edge); /* fallback while image loads */
position: relative; /* for potential caption overlays later */
cursor: pointer; /* hand cursor — tells user the image is clickable */
}
/* The actual inside each gallery item */
.tt-gallery-item img {
width: 100%; /* fill the container */
height: 100%; /* fill the container */
object-fit: cover; /* crop to fill — preserves aspect ratio */
display: block; /* remove inline gap */
transition: transform 0.4s ease; /* smooth zoom on hover */
}
/* Zoom and gold ring on hover — clearly signals these are clickable */
.tt-gallery-item:hover img {
transform: scale(1.08); /* 8% zoom — noticeable invitation to click */
}
/* Gold border highlight on hover — reinforces that the item is clickable */
.tt-gallery-item:hover {
border-color: rgba(201, 160, 80, 0.7); /* brighter gold border on hover */
}
/* Placeholder slot shown before real photos are uploaded.
Uses dashed gold border and faint gold background. */
.tt-gallery-placeholder {
aspect-ratio: 4 / 3;
background: rgba(201, 160, 80, 0.04);
border: 1px dashed rgba(201, 160, 80, 0.22);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 4px;
color: rgba(201, 160, 80, 0.35); /* faint gold text */
font-family: var(--font-accent);
font-size: 0.65rem;
letter-spacing: 1px;
text-align: center;
padding: 8px;
}
/* ============================================================
SECTION 11: SECTION HIGHLIGHT ANIMATION
When a button or nav link navigates to a section,
that section's panel briefly glows with a gold border
so the user knows exactly where they landed.
On mobile (Option C), the correct panel scrolls into view
AND the highlight plays.
============================================================ */
/* Keyframe: gold border pulses from 0 to full intensity then fades.
box-shadow with 'inset' draws the border INSIDE the element.
The outer shadow adds a glow effect outside the panel. */
@keyframes tt-highlight-pulse {
0% {
box-shadow: inset 0 0 0 0px rgba(201, 160, 80, 0),
0 0 0px rgba(201, 160, 80, 0);
}
18% {
box-shadow: inset 0 0 0 4px rgba(201, 160, 80, 0.9),
0 0 35px rgba(201, 160, 80, 0.35);
}
55% {
box-shadow: inset 0 0 0 2px rgba(201, 160, 80, 0.5),
0 0 20px rgba(201, 160, 80, 0.15);
}
100% {
box-shadow: inset 0 0 0 0px rgba(201, 160, 80, 0),
0 0 0px rgba(201, 160, 80, 0);
}
}
/* The class added by JavaScript to trigger the highlight.
'forwards' keeps the final state (invisible) after animation ends.
TIP: JavaScript removes this class after 2s so it can be
re-triggered if the user clicks the same button again. */
/* The tt-highlight class is added by JavaScript when a button is clicked.
!important is required here because the mobile CSS resets animation with
!important on all .tt-panel elements. The double-class selector gives this
rule higher specificity, and !important makes it win regardless. */
.tt-panel.tt-highlight {
animation: tt-highlight-pulse 2s ease-out forwards !important;
}
/* ============================================================
SECTION 12: MOBILE OPTION C — SWIPEABLE PANELS
On screens 768px and under, the 3D menu transforms into
a full-screen swipeable card carousel.
HOW IT WORKS:
- .tt-menu becomes a horizontal scroll container
- scroll-snap-type: x mandatory makes it snap to each panel
- Each .tt-panel fills 100vw and is a scroll-snap target
- The 3D transforms (rotateY) are removed with transform: none
- A dots indicator row lets users see which panel they're on
- Dots update automatically via a scroll event listener in main.js
TABLET (769px–1100px): Still uses 3D effect, just smaller.
============================================================ */
/* ---- TABLET (769px – 1100px) ----------------------------
Keep the 3D effect but make panels narrower to fit. */
@media (max-width: 1100px) and (min-width: 769px) {
:root {
--panel-width-side: 185px; /* narrower side panels on tablet */
--panel-width-center: 260px; /* narrower center on tablet */
--panel-angle: 30deg; /* slightly less angle to avoid cutoff */
}
.tt-panel {
padding: var(--space-lg) var(--space-md); /* less padding = more content space */
}
.tt-hero-name { font-size: 1.5rem; }
.tt-heading { font-size: 1.3rem; }
.tt-hero-tagline { font-size: 1.1rem; }
.tt-nav {
padding: 10px var(--space-lg); /* less horizontal nav padding on tablet */
}
}
/* ============================================================
SECTION 13: GALLERY LIGHTBOX / SLIDESHOW
Full-screen overlay that opens when a gallery image is clicked.
Lets the user browse all 9 images with prev/next arrows,
keyboard navigation (← → keys and Escape), or clicking the
dark background to close.
z-index: 999998 — below error notifications (999999) but
above everything else including the 3D menu panels.
============================================================ */
/* The full-screen dark overlay backdrop.
display:none by default — JavaScript adds .tt-lightbox--active
to show it. Using display:none/flex instead of opacity so screen
readers don't announce the hidden lightbox content. */
#tt-lightbox {
display: none; /* hidden until JS adds --active class */
position: fixed; /* covers the entire viewport */
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.93); /* nearly opaque dark backdrop */
z-index: 999998; /* above everything except error notifications */
align-items: center; /* vertically center the image */
justify-content: center; /* horizontally center the image */
padding: 20px; /* breathing room on small screens */
gap: 16px; /* space between prev arrow, image, next arrow */
}
/* Active state — display:flex makes the lightbox visible.
JavaScript adds this class when a gallery image is clicked. */
#tt-lightbox.tt-lightbox--active {
display: flex; /* show the lightbox — flex centers the contents */
}
/* The image + caption + counter container */
.tt-lb-content {
display: flex;
flex-direction: column;
align-items: center;
max-width: min(90vw, 800px); /* never wider than 90% of viewport or 800px */
max-height: 90vh; /* never taller than 90% of viewport height */
}
/* The main displayed image */
.tt-lb-img {
max-width: 100%; /* never wider than its container */
max-height: 75vh; /* leave room for caption and counter below */
object-fit: contain; /* show full image — no cropping */
border-radius: 4px; /* slight rounding on corners */
display: block;
/* TIP: object-fit: contain (not cover) ensures the full photo
is always visible regardless of its aspect ratio. */
}
/* Caption below the image — shows the alt text description */
.tt-lb-caption {
color: rgba(255, 245, 220, 0.65); /* faint warm cream */
font-family: var(--font-accent); /* Cormorant Garamond */
font-size: 0.72rem;
font-style: italic;
letter-spacing: 0.5px;
margin-top: 10px;
text-align: center;
max-width: 80vw; /* prevent very long captions from overflowing */
line-height: 1.5;
}
/* Counter showing current position — e.g. "3 / 9" */
.tt-lb-counter {
color: rgba(201, 160, 80, 0.75); /* muted gold */
font-family: var(--font-accent);
font-size: 0.7rem;
letter-spacing: 2px;
margin-top: 6px;
}
/* Shared styles for close, prev, and next buttons */
.tt-lb-close,
.tt-lb-prev,
.tt-lb-next {
background: rgba(201, 160, 80, 0.1); /* faint gold fill */
border: 1px solid rgba(201, 160, 80, 0.35); /* gold border */
color: var(--color-gold); /* gold icon/text */
cursor: pointer;
border-radius: 50%; /* circle shape */
width: 48px;
height: 48px;
font-size: 28px; /* large arrow/× character */
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, border-color 0.2s;
flex-shrink: 0; /* don't let flex shrink these buttons */
line-height: 1;
user-select: none; /* prevent text selection on rapid clicks */
}
/* Button hover — brighter gold fill */
.tt-lb-close:hover,
.tt-lb-prev:hover,
.tt-lb-next:hover {
background: rgba(201, 160, 80, 0.28);
border-color: rgba(201, 160, 80, 0.7);
}
/* Close (×) button — positioned in the top-right corner */
.tt-lb-close {
position: fixed; /* stays in corner regardless of image size */
top: 20px;
right: 20px;
font-size: 22px; /* slightly smaller × than nav arrows */
z-index: 1; /* above the image */
}
/* Keyboard shortcut hint below the counter */
.tt-lb-hint {
color: rgba(255, 245, 220, 0.25); /* very faint */
font-family: var(--font-accent);
font-size: 0.62rem;
letter-spacing: 1.5px;
margin-top: 8px;
text-transform: uppercase;
}
/* ============================================================
MOBILE — 768px and under
Panels stack VERTICALLY. Standard page scroll.
No scroll-snap. No swipe. window.scrollTo() in main.js handles
all button navigation reliably across every browser.
============================================================ */
/* Error notification adjustments for mobile */
@media (max-width: 768px) {
.tt-lb-hint { display: none; }
.tt-lb-close,.tt-lb-prev,.tt-lb-next { width:40px; height:40px; font-size:22px; }
}
/* Main mobile layout */
@media (max-width: 768px) {
/* Less top padding for shorter mobile nav */
.tt-page {
padding-top: 56px;
overflow-x: hidden;
}
/* Scene becomes a plain block — no flex centering needed */
.tt-scene {
display: block;
padding: 0;
filter: none;
animation: none;
width: 100%;
}
/* Menu row stacks vertically — no horizontal scroll, no scroll-snap */
.tt-menu {
display: block;
width: 100%;
overflow: visible;
/* Explicitly cancel any scroll-snap properties */
scroll-snap-type: none;
overflow-x: visible;
}
/* All panels: full width, auto height, stacked on top of each other */
.tt-panel,
.tt-panel--left,
.tt-panel--center,
.tt-panel--right {
width: 100% !important;
min-height: unset !important;
border: none !important;
border-bottom: 2px solid rgba(201,160,80,0.2) !important;
border-radius: 0 !important;
transform: none !important;
transform-origin: unset !important;
animation: none !important;
scroll-snap-align: none !important;
overflow-y: visible !important;
overflow-x: hidden !important;
scroll-behavior: auto !important;
padding: 40px 24px;
/* Remove any fixed height that would constrain the panel */
height: auto !important;
max-height: none !important;
flex: none !important;
}
/* Nav bar: compact on mobile */
.tt-nav { padding: 10px 16px; }
/* Footer: tighter padding */
.tt-footer { padding: 24px 16px; }
/* Form textarea: taller on mobile for easier typing */
.tt-form-textarea { min-height: 100px; }
/* Email: wrap text instead of overflowing */
.tt-contact-item__value {
word-break: break-all;
font-size: 0.75rem !important;
font-family: 'Lora','Georgia',serif !important;
}
/* Slideshow dots on mobile: a bit larger for easier tapping */
.tt-slide-dot { width:9px; height:9px; }
}
/* Very small phones */
@media (max-width: 480px) {
.tt-nav__links { display: none; }
.tt-panel,
.tt-panel--left,
.tt-panel--center,
.tt-panel--right { padding: 24px 16px !important; }
}
/* Panel navigation dots — hidden entirely (not used in vertical layout) */
.tt-panel-dots { display: none !important; }
/* VIDEO */
.tt-video-wrap{width:100%;border-radius:8px;overflow:hidden;border:1px solid rgba(201,160,80,0.3);background:#0C0C0C;}
.tt-video{width:100%;display:block;max-height:260px;object-fit:cover;}
/* PRICING CARDS */
.tt-pricing-grid{display:flex;flex-direction:column;gap:10px;margin:4px 0;}
.tt-pricing-card{background:rgba(201,160,80,0.07);border:1px solid rgba(201,160,80,0.25);border-radius:6px;padding:10px 14px;}
.tt-pricing-card__name{font-family:'Playfair Display','Georgia',serif;font-size:0.9rem;font-weight:600;color:#2C1508;line-height:1.2;}
.tt-pricing-card__desc{font-family:'Cormorant Garamond','Georgia',serif;font-size:0.76rem;font-style:italic;color:#8B6540;line-height:1.5;margin-top:2px;}
.tt-pricing-card__note{font-family:'Cormorant Garamond','Georgia',serif;font-size:0.7rem;color:#A07B2A;margin-top:4px;letter-spacing:0.5px;}
/* FAQ */
.tt-faq{display:flex;flex-direction:column;gap:12px;margin:4px 0;}
.tt-faq-item{border-left:2px solid rgba(201,160,80,0.4);padding:4px 12px;}
.tt-faq-q{font-family:'Lora','Georgia',serif;font-size:0.82rem;font-weight:600;color:#2C1508;line-height:1.4;}
.tt-faq-a{font-family:'Cormorant Garamond','Georgia',serif;font-size:0.78rem;font-style:italic;color:#5C3A18;line-height:1.5;margin-top:3px;}