/* Shared styles for static SEO service pages (public/hotel.html, restaurant.html, banquet.html). Plain hand-written CSS — these pages are served as-is by Netlify and never pass through the Vite/Tailwind/PostCSS pipeline, so Tailwind utility classes and the tailwind.config.js token scale aren't available here. Values below are copied from tailwind.config.js / DESIGN.md by hand; keep in sync manually if the brand palette changes. */ :root { --brand: #ec6e05; --brand-dark: #c75100; --brand-50: #fff7ed; --brand-100: #ffedd5; --brand-200: #fed7aa; --ink-900: #1f2937; --ink-700: #374151; --ink-500: #6b7280; --ink-400: #9ca3af; --border: #e5e7eb; --footer-bg: #111827; --footer-bg-dark: #030712; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Inter", sans-serif; color: var(--ink-700); background: #ffffff; line-height: 1.55; } h1, h2, h3 { font-family: "Poppins", sans-serif; color: var(--ink-900); margin: 0 0 0.5em; } a { color: inherit; } img { max-width: 100%; display: block; } .wrap { max-width: 85rem; margin: 0 auto; padding: 0 1.5rem; } /* Header — mirrors src/pages/landing/component/LandingNav.tsx + SubNav.tsx (white bar, fixed height, logo left, text-link nav, Register/Login on the right — same spacing, colors, and hover states as the SPA header, so these static pages don't read as a visually separate product). Full scroll-shadow and the hamburger/RightMenu behavior aren't reproduced — these pages carry no JS framework, so below the "tb" breakpoint the secondary nav links are dropped in favor of just logo + Register/Login, which stay reachable at every width. See ticket Decisions & Notes. */ .site-header { background: #ffffff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40; height: 70px; } .site-header .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand-mark { display: flex; align-items: center; gap: 0; text-decoration: none; flex-shrink: 0; } .brand-mark img { height: 32px; width: auto; } .brand-word { height: 32px; overflow: visible; } .nav-links { display: flex; align-items: center; gap: 0.25rem; margin-right: auto; margin-left: 2rem; font-family: "Poppins", sans-serif; } .nav-links a, .nav-actions a { padding: 0.5rem 0.6rem; border-radius: 0.375rem; color: #4b5563; font-size: 0.9rem; font-weight: 400; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease; } .nav-links a:hover, .nav-actions a:hover { background: var(--brand-100); } .nav-links a[aria-current="page"], .nav-actions a[aria-current="page"] { color: var(--brand); } .nav-actions { display: flex; align-items: center; flex-shrink: 0; } @media (max-width: 1024px) { .nav-links { display: none; } } @media (max-width: 640px) { .site-header { height: 60px; } } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1.4rem; border-radius: 999px; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: opacity 0.2s ease, transform 0.2s ease; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #ffffff; } .btn-outline { background: #ffffff; color: var(--brand); border: 1px solid var(--brand-200); } /* Breadcrumb — mirrors the BreadcrumbList JSON-LD in each page's */ .breadcrumb { padding: 0.75rem 0; font-size: 0.8rem; color: var(--ink-400); border-bottom: 1px solid var(--border); } .breadcrumb a { color: var(--ink-500); text-decoration: none; } .breadcrumb a:hover { color: var(--brand); } /* Hero */ .hero { background: linear-gradient(180deg, var(--brand-50), #ffffff); padding: 4rem 0 3rem; text-align: center; } .eyebrow { display: inline-block; padding: 0.3rem 1rem; border-radius: 999px; background: var(--brand-100); color: var(--brand); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid var(--brand-200); margin-bottom: 1rem; } .hero h1 { font-size: 2.5rem; font-weight: 500; max-width: 42rem; margin-left: auto; margin-right: auto; } .hero .lede { max-width: 40rem; margin: 1rem auto 2rem; color: var(--ink-500); font-size: 1.05rem; } .hero .cta-row { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } /* Section */ section.block { padding: 3.5rem 0; border-top: 1px solid var(--border); } section.block.tinted { background: #fafafa; } .block h2 { font-size: 1.7rem; font-weight: 600; margin-bottom: 0.4rem; } .block .block-lede { color: var(--ink-500); max-width: 42rem; margin-bottom: 2rem; } /* Feature grid */ .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .feature-card { display: flex; gap: 0.75rem; padding: 1rem; border: 1px solid var(--border); border-radius: 0.85rem; background: #ffffff; } .feature-card .icon { font-size: 1.15rem; line-height: 1; } .feature-card h4 { margin: 0 0 0.2rem; font-size: 0.9rem; font-weight: 600; color: var(--ink-900); } .feature-card p { margin: 0; font-size: 0.82rem; color: var(--ink-500); } /* Evidence / comparison list */ .evidence-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; } .evidence-list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; color: var(--ink-700); } .evidence-list li::before { content: "✓"; color: var(--brand); font-weight: 700; flex-shrink: 0; } /* FAQ accordion (public/faq.html) */ .faq-list { display: grid; gap: 0.75rem; } .faq-item { border: 1px solid var(--border); border-radius: 0.85rem; background: #ffffff; padding: 0; overflow: hidden; } .faq-item summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 600; color: var(--ink-900); list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; float: right; color: var(--brand); font-weight: 700; } .faq-item[open] summary::after { content: "\2212"; } .faq-item p { margin: 0; padding: 0 1.25rem 1.1rem; color: var(--ink-500); font-size: 0.92rem; } /* CTA banner */ .cta-banner { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); border-radius: 1.25rem; padding: 3rem 2rem; text-align: center; color: #ffffff; } .cta-banner h2 { color: #ffffff; } .cta-banner p { color: rgba(255, 255, 255, 0.85); max-width: 34rem; margin: 0 auto 1.5rem; } .cta-banner .btn-primary { background: #ffffff; color: var(--brand-dark); } /* Footer — mirrors src/pages/landing/component/Footer.tsx */ footer.site-footer { background: var(--footer-bg); color: #9ca3af; margin-top: 3rem; } footer.site-footer .footer-main { padding: 3rem 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } footer.site-footer .footer-col p.col-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #6b7280; margin-bottom: 0.75rem; } footer.site-footer .footer-col a { display: block; font-size: 0.85rem; color: #9ca3af; text-decoration: none; margin-bottom: 0.6rem; } footer.site-footer .footer-col a:hover { color: #ffffff; } footer.site-footer .footer-bottom { background: var(--footer-bg-dark); border-top: 1px solid #1f2937; padding: 1rem 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem; color: #6b7280; } @media (max-width: 1024px) { footer.site-footer .footer-main { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .hero h1 { font-size: 1.9rem; } .feature-grid { grid-template-columns: 1fr; } footer.site-footer .footer-main { grid-template-columns: 1fr; } }