/* Theme Name: FiveOnine Catering Theme URI: https://fiveoninecatering.com Author: FiveOnine Catering Description: A custom theme for FiveOnine Catering, a Boston wedding caterer. Brand colors, external links, and gallery photos are all managed from Appearance > Customize > FiveOnine Theme Options. Version: 1.0.0 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: fiveonine */ /* ========================================================================= BASE VARIABLES Fallback only -- live values (plus derived light/dark shades) are printed dynamically in by inc/customizer.php, driven by Appearance > Customize > FiveOnine Theme Options > Brand Colors. ========================================================================= */ :root{ --color-primary: #6B1F2A; /* Merlot */ --color-primary-dark: #4A151C; --color-secondary: #7C8B6F; /* Sage */ --color-secondary-lt: #A8B69A; --color-accent: #B98B3E; /* Brass */ --color-bg: #F0E6D2; /* Parchment */ --color-bg-light: #F8F3E7; --color-card: #FFFDF8; --color-text: #2B211C; /* Charcoal */ --color-text-soft: #6B5F52; --font-display: 'Fraunces', serif; --font-body: 'Work Sans', sans-serif; --font-mono: 'IBM Plex Mono', monospace; } /* ---------------- BASE ---------------- */ *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ font-family:var(--font-body); color:var(--color-text); background:var(--color-bg); line-height:1.6; -webkit-font-smoothing:antialiased; } img,svg{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} ul{list-style:none;} .wrap{max-width:1180px;margin:0 auto;padding:0 32px;} .eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-accent); } h1,h2,h3{font-family:var(--font-display);font-weight:500;letter-spacing:-0.01em;color:var(--color-primary-dark);} .btn{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase; padding:15px 28px;border-radius:2px; border:1px solid var(--color-primary-dark); transition:background .25s ease, color .25s ease, transform .25s ease; } .btn-solid{background:var(--color-primary-dark);color:var(--color-bg-light);} .btn-solid:hover{background:var(--color-primary);transform:translateY(-1px);} .btn-line{background:transparent;color:var(--color-primary-dark);} .btn-line:hover{background:var(--color-primary-dark);color:var(--color-bg-light);} /* ---------------- NAV ---------------- */ header.site-nav{ position:sticky;top:0;z-index:100; background:rgba(240,230,210,0.96); backdrop-filter:blur(6px); border-bottom:1px solid rgba(43,33,28,0.1); } .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;max-width:1180px;margin:0 auto;} .wordmark{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:0.01em;color:var(--color-primary-dark);white-space:nowrap;} .wordmark span{color:var(--color-accent);} .wordmark .tag{font-size:13px;font-family:var(--font-mono);letter-spacing:0.1em;color:var(--color-text);text-transform:uppercase;margin-left:6px;} .nav-links-desktop{display:flex;align-items:center;gap:34px;} .nav-links-desktop a{ font-family:var(--font-mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase; color:var(--color-text);position:relative; } .nav-links-desktop a:not(.btn){padding-bottom:4px;} .nav-links-desktop a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--color-accent);transition:width .25s ease;} .nav-links-desktop a:not(.btn):hover::after{width:100%;} .nav-links-desktop a.current:not(.btn)::after{width:100%;} .nav-links-desktop a.btn-solid{color:var(--color-bg-light) !important;} .nav-links-desktop a.btn-solid:hover{color:var(--color-bg-light) !important;} .nav-toggle{display:none;background:none;border:0;cursor:pointer;width:36px;height:36px;position:relative;} .nav-toggle span{display:block;width:24px;height:1.5px;background:var(--color-text);margin:5px auto;transition:transform .25s ease, opacity .25s ease;} .nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);} .nav-toggle.open span:nth-child(2){opacity:0;} .nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);} /* Mobile full-screen nav: a top-level sibling of header, NOT nested inside it. (backdrop-filter on the header would otherwise make it the containing block for any position:fixed descendant, breaking full-viewport coverage.) */ .nav-links-mobile{display:none;} /* ---------------- HERO ---------------- */ .hero{padding:88px 0 100px;} .hero-inner{display:grid;grid-template-columns:1fr 0.9fr;gap:64px;align-items:center;} .hero h1{font-size:clamp(38px,5vw,58px);line-height:1.08;margin:18px 0 22px;} .hero h1 em{font-style:italic;color:var(--color-primary);} .hero p{max-width:440px;color:var(--color-text-soft);font-size:17px;margin-bottom:34px;} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;} .hero-art{position:relative;height:480px;} .hero-art svg{width:100%;height:100%;} /* ---------------- INTRO CARDS ---------------- */ .intro-cards{padding:0 0 100px;} .intro-cards .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .intro-card{ background:var(--color-card); border:1px solid rgba(43,33,28,0.08); padding:38px 30px; transition:transform .25s ease, box-shadow .25s ease; } .intro-card:hover{transform:translateY(-4px);box-shadow:0 18px 30px -18px rgba(43,33,28,0.35);} .intro-card .icon{width:38px;height:38px;color:var(--color-secondary);margin-bottom:20px;} .intro-card h3{font-size:21px;margin-bottom:10px;} .intro-card p{color:var(--color-text-soft);font-size:15px;margin-bottom:18px;} .intro-card a{font-family:var(--font-mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-primary);border-bottom:1px solid var(--color-primary);padding-bottom:2px;} /* ---------------- STORY / THE NAME ---------------- */ .story{background:var(--color-primary-dark);color:var(--color-bg-light);padding:100px 0;position:relative;overflow:hidden;} .story-inner{display:grid;grid-template-columns:0.8fr 1fr;gap:64px;align-items:center;} .story .eyebrow{color:var(--color-secondary-lt);} .story h2{color:var(--color-bg-light);font-size:clamp(30px,3.6vw,42px);margin:16px 0 20px;line-height:1.15;} .story p{color:#D8CBBB;font-size:16px;max-width:480px;margin-bottom:14px;} .address-plate{ justify-self:end; border:1px solid rgba(248,243,231,0.35); padding:36px 40px; font-family:var(--font-mono); text-align:center; max-width:280px; } .address-plate .num{font-family:var(--font-display);font-size:64px;color:var(--color-accent);line-height:1;margin-bottom:10px;} .address-plate .line{font-size:11px;letter-spacing:0.12em;color:#D8CBBB;text-transform:uppercase;} /* ---------------- MENU TICKETS ---------------- */ .menu-preview{padding:110px 0;} .section-head{text-align:center;max-width:560px;margin:0 auto 56px;} .section-head h2{font-size:clamp(30px,3.6vw,42px);margin:14px 0 16px;} .section-head p{color:var(--color-text-soft);} .ticket-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;} .ticket{ position:relative; background:var(--color-card); font-family:var(--font-mono); padding:30px 26px 26px; border-left:3px solid var(--color-secondary); clip-path:polygon( 0% 0%, 100% 0%, 100% 96%, 96% 100%, 92% 96%, 88% 100%, 84% 96%, 80% 100%, 76% 96%, 72% 100%, 68% 96%, 64% 100%, 60% 96%, 56% 100%, 52% 96%, 48% 100%, 44% 96%, 40% 100%, 36% 96%, 32% 100%, 28% 96%, 24% 100%, 20% 96%, 16% 100%, 12% 96%, 8% 100%, 4% 96%, 0% 100% ); box-shadow:0 14px 26px -20px rgba(43,33,28,0.4); } .ticket .punch{ position:absolute;top:16px;right:16px;width:9px;height:9px;border-radius:50%; background:var(--color-bg);border:1px solid rgba(43,33,28,0.2); } .ticket .station{font-family:var(--font-display);font-size:22px;color:var(--color-primary-dark);letter-spacing:0;margin-bottom:4px;} .ticket .station-no{font-size:11px;color:var(--color-accent);letter-spacing:0.1em;text-transform:uppercase;display:block;margin-bottom:16px;} .ticket ul{border-top:1px dashed rgba(43,33,28,0.25);padding-top:14px;margin-bottom:22px;} .ticket li{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0;color:var(--color-text-soft);} .ticket li span:last-child{color:var(--color-text);} .ticket-foot{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-primary);border-bottom:1px solid var(--color-primary);display:inline-block;padding-bottom:2px;} /* ---------------- TESTIMONIAL ---------------- */ .testimonial{background:var(--color-secondary);color:var(--color-bg-light);padding:100px 0;text-align:center;} .testimonial .quote-mark{font-family:var(--font-display);font-size:80px;color:var(--color-accent);line-height:1;margin-bottom:8px;} .testimonial blockquote{ font-family:var(--font-display);font-style:italic;font-weight:400; font-size:clamp(22px,2.6vw,30px);max-width:760px;margin:0 auto 24px;line-height:1.4; } .testimonial cite{font-family:var(--font-mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;font-style:normal;color:#EDE7D6;} /* ---------------- INSTAGRAM STRIP ---------------- */ .insta{padding:90px 0;text-align:center;} .insta .eyebrow{display:block;margin-bottom:10px;} .insta h2{font-size:clamp(26px,3vw,34px);margin-bottom:36px;} .insta-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:34px;} .insta-grid div{aspect-ratio:1/1;background:linear-gradient(135deg,var(--color-secondary-lt),var(--color-secondary));display:flex;align-items:center;justify-content:center;} .insta-grid svg{width:26px;height:26px;opacity:0.55;} /* ---------------- FOOTER ---------------- */ footer{background:var(--color-primary-dark);color:#D8CBBB;padding:70px 0 30px;} .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:50px;margin-bottom:60px;} footer .wordmark{color:var(--color-bg-light);margin-bottom:14px;} footer .wordmark span{color:var(--color-accent);} footer p{font-size:14px;max-width:280px;color:#B9AB99;} footer h4{font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-accent);margin-bottom:16px;} footer .col a, footer .col address{display:block;font-size:14px;margin-bottom:10px;color:#D8CBBB;font-style:normal;} footer .col a:hover{color:var(--color-bg-light);} .social-row{display:flex;gap:14px;margin-top:6px;} .social-row a{width:34px;height:34px;border:1px solid rgba(216,203,187,0.3);border-radius:50%;display:flex;align-items:center;justify-content:center;} .social-row svg{width:15px;height:15px;} .social-row a:hover{border-color:var(--color-accent);background:rgba(185,139,62,0.12);} .footer-bottom{border-top:1px solid rgba(216,203,187,0.15);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.05em;color:#9C8F7D;} /* ---------------- RESPONSIVE ---------------- */ @media (max-width:900px){ .nav-links-desktop{display:none;} .nav-toggle{display:block;} .nav-links-mobile{ display:flex;flex-direction:column; position:fixed;inset:0; background:var(--color-bg); padding:26px 32px 40px; transform:translateX(100%); transition:transform .3s ease; z-index:200; overflow-y:auto; } .nav-links-mobile.open{transform:translateX(0);} .mobile-nav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;} .mobile-nav-head .wordmark{font-size:20px;} .nav-close{background:none;border:0;font-family:var(--font-display);font-size:32px;line-height:1;color:var(--color-primary-dark);cursor:pointer;padding:0 6px;} .nav-links-mobile a{width:100%;padding:16px 0;font-size:14px;font-family:var(--font-mono);letter-spacing:0.1em;text-transform:uppercase;color:var(--color-text);border-bottom:1px solid rgba(43,33,28,0.12);} .nav-links-mobile a.btn{width:100%;justify-content:center;margin-top:18px;border-bottom:1px solid var(--color-primary-dark);} .nav-links-mobile a.btn-solid{color:var(--color-bg-light) !important;} .hero-inner{grid-template-columns:1fr;} .hero-art{height:320px;order:-1;} .intro-cards .grid{grid-template-columns:1fr;} .story-inner{grid-template-columns:1fr;} .address-plate{justify-self:start;} .ticket-grid{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr;gap:36px;} .insta-grid{grid-template-columns:repeat(3,1fr);} } body{font-family:var(--font-body);color:var(--color-text);background:var(--color-bg);line-height:1.6;-webkit-font-smoothing:antialiased;} .eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--color-accent);} .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;padding:15px 28px;border-radius:2px;border:1px solid var(--color-primary-dark);transition:background .25s ease, color .25s ease, transform .25s ease;cursor:pointer;} /* PAGE HERO */ .page-hero{padding:72px 0 56px;text-align:center;} .page-hero h1{font-size:clamp(34px,4.6vw,50px);margin:16px 0 18px;} .page-hero p{max-width:600px;margin:0 auto;color:var(--color-text-soft);font-size:17px;} /* STATS BAND */ .stats-band{background:var(--color-primary-dark);padding:50px 0;} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .stat{text-align:center;color:var(--color-bg-light);} .stat .num{font-family:var(--font-display);font-size:clamp(32px,3.4vw,44px);color:var(--color-accent);line-height:1;margin-bottom:8px;} .stat .label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.06em;color:#D8CBBB;text-transform:uppercase;line-height:1.5;} /* PROCESS TIMELINE */ .process-section{padding:110px 0;} .section-head{text-align:center;max-width:580px;margin:0 auto 64px;} .timeline{position:relative;max-width:820px;margin:0 auto;} .timeline::before{content:"";position:absolute;top:6px;bottom:6px;left:23px;width:1px;background:repeating-linear-gradient(180deg,var(--color-accent) 0 6px,transparent 6px 12px);} .t-item{position:relative;padding-left:70px;margin-bottom:52px;} .t-item:last-child{margin-bottom:0;} .t-item .no{position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;background:var(--color-card);border:1px solid var(--color-accent);color:var(--color-primary-dark);font-family:var(--font-mono);font-size:14px;display:flex;align-items:center;justify-content:center;z-index:2;} .t-item h3{font-size:21px;margin-bottom:8px;} .t-item p{color:var(--color-text-soft);font-size:15px;max-width:600px;} /* CREDENTIALS */ .credentials{background:var(--color-secondary);padding:100px 0;} .credentials .section-head h2{color:var(--color-bg-light);} .credentials .section-head p{color:#EDF2E7;} .credentials .eyebrow{color:var(--color-bg-light);opacity:0.8;} .cred-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .cred-card{background:var(--color-card);padding:30px 24px;text-align:center;} .cred-card .icon{width:34px;height:34px;color:var(--color-primary);margin:0 auto 16px;} .cred-card h3{font-size:15.5px;margin-bottom:8px;} .cred-card p{font-size:13px;color:var(--color-text-soft);} /* KITCHEN NOTE */ .kitchen-note{padding:100px 0;} .kitchen-inner{display:grid;grid-template-columns:0.9fr 1fr;gap:60px;align-items:center;} .kitchen-inner .eyebrow{margin-bottom:14px;display:block;} .kitchen-inner h2{font-size:clamp(28px,3.4vw,36px);margin-bottom:18px;line-height:1.2;} .kitchen-inner p{color:var(--color-text-soft);font-size:15.5px;margin-bottom:14px;max-width:480px;} .kitchen-art{height:340px;} .kitchen-art svg{width:100%;height:100%;} /* CTA BAND */ .cta-band{background:var(--color-primary-dark);padding:80px 0;text-align:center;} .cta-band .eyebrow{color:var(--color-secondary-lt);} .cta-band h2{color:var(--color-bg-light);font-size:clamp(28px,3.4vw,38px);margin:14px 0 26px;} /* FOOTER */ footer{background:var(--color-primary-dark);color:#D8CBBB;padding:70px 0 30px;} .social-row{display:flex;gap:12px;margin-top:6px;} /* PAGE HERO */ .page-hero{padding:72px 0 44px;text-align:center;} .page-hero p{max-width:560px;margin:0 auto;color:var(--color-text-soft);font-size:17px;} /* MENU FILTER TABS */ .menu-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:0 0 60px;} .menu-tabs button{ font-family:var(--font-mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase; padding:10px 20px;border:1px solid rgba(43,33,28,0.25);background:transparent;color:var(--color-text-soft); border-radius:999px;cursor:pointer;transition:all .2s ease; } .menu-tabs button:hover{border-color:var(--color-primary);color:var(--color-primary-dark);} .menu-tabs button.active{background:var(--color-primary-dark);border-color:var(--color-primary-dark);color:var(--color-bg-light);} /* MENU SECTIONS */ .menu-section{padding:0 0 90px;} .menu-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-bottom:2px solid var(--color-primary-dark);padding-bottom:14px;margin-bottom:34px;} .menu-section-head h2{font-size:clamp(26px,3vw,34px);} .menu-section-head span{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-accent);white-space:nowrap;} .dish-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(43,33,28,0.08);} .dish{background:var(--color-card);padding:22px 26px;display:flex;justify-content:space-between;gap:20px;} .dish-name{font-size:16px;color:var(--color-text);margin-bottom:5px;font-weight:500;} .dish-desc{font-size:13.5px;color:var(--color-text-soft);} .dish-tags{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.06em;color:var(--color-secondary);white-space:nowrap;padding-top:2px;} /* NOTE BAND */ .menu-note{background:var(--color-secondary);color:var(--color-bg-light);padding:56px 0;text-align:center;} .menu-note .eyebrow{color:var(--color-bg-light);opacity:0.75;} .menu-note h2{color:var(--color-bg-light);font-size:clamp(24px,3vw,30px);margin:12px 0 14px;} .menu-note p{max-width:600px;margin:0 auto 26px;color:#EDE7D6;font-size:15px;} /* PACKAGES */ .packages{padding:100px 0;} .package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .package{background:var(--color-card);border:1px solid rgba(43,33,28,0.08);padding:36px 30px;position:relative;} .package.featured{border-color:var(--color-accent);box-shadow:0 18px 34px -22px rgba(43,33,28,0.4);} .package.featured::before{ content:"Most Booked";position:absolute;top:-13px;left:30px; background:var(--color-accent);color:var(--color-bg-light);font-family:var(--font-mono); font-size:10px;letter-spacing:0.08em;text-transform:uppercase;padding:5px 12px; } .package h3{font-size:22px;margin-bottom:6px;} .package .price{font-family:var(--font-mono);font-size:14px;color:var(--color-accent);margin-bottom:18px;} .package ul{margin-bottom:24px;} .package li{font-size:13.5px;color:var(--color-text-soft);padding:8px 0;border-top:1px dashed rgba(43,33,28,0.2);} .package li:first-child{border-top:none;} .nav-links-mobile{display:none;} /* GALLERY FILTER TABS */ .gallery-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:0 0 50px;} .gallery-tabs button{ font-family:var(--font-mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase; padding:10px 20px;border:1px solid rgba(43,33,28,0.25);background:transparent;color:var(--color-text-soft); border-radius:999px;cursor:pointer;transition:all .2s ease; } .gallery-tabs button:hover{border-color:var(--color-primary);color:var(--color-primary-dark);} .gallery-tabs button.active{background:var(--color-primary-dark);border-color:var(--color-primary-dark);color:var(--color-bg-light);} /* GALLERY GRID — forced aspect-ratio cells so any uploaded image drops in cleanly */ .gallery-section{padding:0 0 100px;} .gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .g-item{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--color-card); cursor:default; } .g-item.wide{grid-column:span 2;aspect-ratio:8/5;} .g-item img{ width:100%;height:100%; object-fit:cover;object-position:center; display:block; } .g-item .placeholder-fill{ width:100%;height:100%; display:flex;align-items:center;justify-content:center; transition:transform .4s ease; } .g-item:hover .placeholder-fill{transform:scale(1.04);} .g-item .placeholder-fill svg{width:34%;height:34%;opacity:0.55;} .g-item .g-caption{ position:absolute;left:0;right:0;bottom:0; padding:14px 16px; background:linear-gradient(0deg, rgba(43,33,28,0.55), transparent 70%); color:var(--color-bg-light); font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase; opacity:0;transition:opacity .25s ease; } .g-item:hover .g-caption{opacity:1;} .g-item.hidden{display:none;} /* NOTE BAND */ .gallery-note{background:var(--color-primary-dark);padding:56px 0;text-align:center;} .gallery-note .eyebrow{color:var(--color-secondary-lt);} .gallery-note h2{color:var(--color-bg-light);font-size:clamp(24px,3vw,30px);margin:12px 0 14px;} .gallery-note p{max-width:600px;margin:0 auto;color:#D8CBBB;font-size:15px;} /* INSTAGRAM STRIP */ .insta{padding:90px 0 100px;text-align:center;} .insta h2{font-size:clamp(26px,3vw,34px);margin-bottom:12px;} .insta > .wrap > p{color:var(--color-text-soft);max-width:460px;margin:0 auto 30px;} /* PAGE HERO */ .page-hero{padding:72px 0 60px;text-align:center;} .page-hero p{max-width:520px;margin:0 auto;color:var(--color-text-soft);font-size:17px;} /* PROCESS STEPS */ .process{padding:0 0 90px;} .process .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;} .process .grid::before{content:"";position:absolute;top:19px;left:8%;right:8%;height:1px;background:repeating-linear-gradient(90deg,var(--color-accent) 0 6px,transparent 6px 12px);} .step{text-align:center;padding:0 18px;position:relative;} .step .no{width:38px;height:38px;border-radius:50%;background:var(--color-card);border:1px solid var(--color-accent);color:var(--color-primary-dark);font-family:var(--font-mono);font-size:13px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;position:relative;z-index:2;} .step h3{font-size:16px;margin-bottom:6px;} .step p{font-size:13.5px;color:var(--color-text-soft);} /* CONTACT GRID */ .contact-section{padding:0 0 110px;} .contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:44px;align-items:start;} .form-ticket{ background:var(--color-card); border-left:3px solid var(--color-secondary); padding:42px 40px; box-shadow:0 18px 34px -24px rgba(43,33,28,0.4); } .form-ticket .station-no{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-accent);display:block;margin-bottom:6px;} .form-ticket h2{font-size:26px;margin-bottom:6px;} .form-ticket > p{color:var(--color-text-soft);font-size:14.5px;margin-bottom:30px;} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;} .field{margin-bottom:22px;} .field label{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-soft);margin-bottom:8px;} .field input, .field select, .field textarea{ width:100%; border:none; border-bottom:1px solid rgba(43,33,28,0.25); background:transparent; padding:10px 2px; font-family:var(--font-body); font-size:15px; color:var(--color-text); transition:border-color .2s ease; } .field input:focus, .field select:focus, .field textarea:focus{ outline:none;border-bottom-color:var(--color-primary); } .field textarea{resize:vertical;min-height:100px;border:1px solid rgba(43,33,28,0.25);padding:12px;} .field textarea:focus{border-color:var(--color-primary);} .form-note{font-family:var(--font-mono);font-size:11.5px;color:var(--color-text-soft);margin-top:6px;} .side-col{display:flex;flex-direction:column;gap:24px;} .info-card{background:var(--color-primary-dark);color:var(--color-bg-light);padding:34px 32px;} .info-card .eyebrow{color:var(--color-secondary-lt);display:block;margin-bottom:10px;} .info-card h3{color:var(--color-bg-light);font-size:20px;margin-bottom:14px;} .info-card p{color:#D8CBBB;font-size:14.5px;margin-bottom:18px;} .info-list a, .info-list address{display:block;font-size:14.5px;color:#EDE7D6;margin-bottom:10px;font-style:normal;} .info-list a:hover{color:var(--color-accent);} .social-row{display:flex;gap:12px;margin-top:16px;} .faq-card{background:var(--color-card);border:1px solid rgba(43,33,28,0.08);padding:30px 32px;} .faq-card h3{font-size:17px;margin-bottom:16px;} .faq-item{border-top:1px dashed rgba(43,33,28,0.2);padding:14px 0;} .faq-item:first-of-type{border-top:none;padding-top:0;} .faq-item .q{font-size:14px;font-weight:600;color:var(--color-primary-dark);margin-bottom:6px;} .faq-item .a{font-size:13.5px;color:var(--color-text-soft);} /* ---------------- RESPONSIVE ---------------- */ @media (max-width:900px){ .nav-links-desktop{display:none;} .nav-toggle{display:block;} .nav-links-mobile{ display:flex;flex-direction:column; position:fixed;inset:0; background:var(--color-bg); padding:26px 32px 40px; transform:translateX(100%); transition:transform .3s ease; z-index:200; overflow-y:auto; } .nav-links-mobile.open{transform:translateX(0);} .mobile-nav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;} .mobile-nav-head .wordmark{font-size:20px;} .nav-close{background:none;border:0;font-family:var(--font-display);font-size:32px;line-height:1;color:var(--color-primary-dark);cursor:pointer;padding:0 6px;} .nav-links-mobile a{width:100%;padding:16px 0;font-size:14px;font-family:var(--font-mono);letter-spacing:0.1em;text-transform:uppercase;color:var(--color-text);border-bottom:1px solid rgba(43,33,28,0.12);} .nav-links-mobile a.btn{width:100%;justify-content:center;margin-top:18px;border-bottom:1px solid var(--color-primary-dark);} .nav-links-mobile a.btn-solid{color:var(--color-bg-light) !important;} .stats-grid{grid-template-columns:1fr 1fr;row-gap:30px;} .cred-grid{grid-template-columns:1fr 1fr;} .kitchen-inner{grid-template-columns:1fr;} .kitchen-art{order:-1;height:260px;} .footer-grid{grid-template-columns:1fr;gap:36px;} .dish-grid{grid-template-columns:1fr;} .package-grid{grid-template-columns:1fr;} .gallery-grid{grid-template-columns:1fr 1fr;} .g-item.wide{grid-column:span 2;} .process .grid{grid-template-columns:1fr 1fr;row-gap:34px;} .process .grid::before{display:none;} .contact-grid{grid-template-columns:1fr;} .field-row{grid-template-columns:1fr;} } @media (max-width:560px){ .gallery-grid{grid-template-columns:1fr 1fr;gap:8px;} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{transition:none !important;} }