/* Mesa y Corazón Hospitality — site styles */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/fraunces-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Fraunces"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/fraunces-latin-600-italic.woff2") format("woff2"); } @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/fraunces-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); } :root { --bg: #f7eedf; --bg-deep: #efdcbc; --card: #fff8ec; --ink: #3b2317; --muted: #6b4a3a; --terracotta: #a3421e; --terracotta-dark: #7e2f14; --mustard: #d9a441; --teal: #1d6a63; --line: rgba(122, 58, 30, 0.2); --shadow: 0 1px 2px rgba(59, 35, 23, 0.06), 0 8px 24px rgba(59, 35, 23, 0.08); --radius: 14px; --serif: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --container: 1120px; --band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24'%3E%3Crect width='20' height='24' fill='%23f3e2c2'/%3E%3Cpath d='M0 1.5H20M0 22.5H20' stroke='%23a3421e' stroke-width='1.6'/%3E%3Cpath d='M0 4L10 20L20 4' fill='none' stroke='%23a3421e' stroke-width='1.4'/%3E%3Cpath d='M5.5 5.5H14.5L10 12.8Z' fill='%231d6a63'/%3E%3Ccircle cx='0' cy='16' r='2' fill='%23d9a441'/%3E%3Ccircle cx='20' cy='16' r='2' fill='%23d9a441'/%3E%3C/svg%3E"); color-scheme: light; } /* Language switching: or */ html[lang="es"] .en { display: none !important; } html:not([lang="es"]) .es { display: none !important; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--terracotta); text-underline-offset: 3px; } a:hover { color: var(--terracotta-dark); } :focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; } h1, h2, h3 { text-wrap: balance; font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0 0 0.5em; color: var(--ink); letter-spacing: -0.01em; } h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); } h3 { font-size: 1.25rem; font-weight: 600; } p { margin: 0 0 1em; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 16px; } @media (min-width: 640px) { .container { padding: 0 24px; } } .skip-link { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; } .skip-link:focus { left: 8px; color: #fff; } .band { height: 24px; background: var(--band) repeat-x left center / auto 24px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 48px; padding: 0.7em 1.4em; border-radius: 999px; border: 2px solid transparent; font-family: var(--sans); font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .btn svg { width: 20px; height: 20px; flex: none; } .btn-primary { background: var(--terracotta); color: #fff8ec; } .btn-primary:hover { background: var(--terracotta-dark); color: #fff8ec; } .btn-outline { background: transparent; color: var(--ink); border-color: rgba(59, 35, 23, 0.35); } .btn-outline:hover { border-color: var(--terracotta); color: var(--terracotta); } .btn-sm { min-height: 40px; padding: 0.45em 1.1em; font-size: 0.95rem; } .btn:active { transform: translateY(1px); } /* Header */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(247, 238, 223, 0.94); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; } .brand img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--terracotta); } .brand span { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; white-space: nowrap; } .brand:hover { color: var(--ink); } .nav { display: none; gap: 24px; } .nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.98rem; } .nav a:hover { color: var(--terracotta); } .header-actions { display: flex; align-items: center; gap: 10px; } .header-quote { display: none; } .lang-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0.35em 0.9em; border-radius: 999px; border: 1.5px solid var(--terracotta); background: transparent; color: var(--terracotta); font-family: var(--sans); font-weight: 700; font-size: 0.95rem; cursor: pointer; } .lang-toggle:hover { background: var(--terracotta); color: #fff8ec; } .lang-toggle svg { width: 18px; height: 18px; } @media (min-width: 900px) { .nav { display: flex; } .header-quote { display: inline-flex; } .header-inner { height: 72px; } .brand img { width: 44px; height: 44px; } } /* Hero */ .hero { background: radial-gradient(ellipse at 75% 40%, rgba(217, 164, 65, 0.18), transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%); padding: 24px 0 48px; } .hero-grid { display: grid; gap: 28px; align-items: center; } .hero-art { order: -1; display: flex; justify-content: center; } .medallion { width: min(56vw, 240px); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--terracotta), 0 18px 40px rgba(122, 58, 30, 0.22); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); margin-bottom: 14px; } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--mustard); } .hero h1 { font-size: clamp(2.3rem, 8vw, 3.9rem); margin-bottom: 0.3em; } .hero h1 .h1-sub { display: block; font-size: 0.55em; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; margin-top: 0.15em; } .taglines { display: flex; flex-direction: column; gap: 2px; margin: 0 0 18px; } .tagline { font-family: var(--serif); font-style: italic; font-weight: 600; margin: 0; color: var(--terracotta); font-size: clamp(1.35rem, 4.6vw, 1.9rem); line-height: 1.25; } html:not([lang="es"]) .tag-es, html[lang="es"] .tag-en { font-size: clamp(1.05rem, 3.4vw, 1.25rem); color: var(--muted); } html[lang="es"] .tag-es { order: -1; } .lede { font-size: 1.15rem; color: var(--muted); max-width: 36em; margin-bottom: 24px; } .hero-ctas { display: flex; flex-direction: column; gap: 12px; } .hero-note { margin: 16px 0 0; font-size: 0.95rem; color: var(--muted); } @media (min-width: 560px) { .hero-ctas { flex-direction: row; flex-wrap: wrap; } } @media (min-width: 900px) { .hero { padding: 72px 0 88px; } .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 48px; } .hero-art { order: 0; } .medallion { width: 100%; max-width: 400px; } } /* Meaning band */ .meaning { background: var(--terracotta); color: #fff8ec; padding: 56px 0; text-align: center; } .meaning-quote { font-family: var(--serif); font-weight: 600; font-style: italic; font-size: clamp(1.5rem, 4.5vw, 2.3rem); line-height: 1.3; margin: 0 auto 20px; max-width: 22em; } .meaning-body { max-width: 40em; margin: 0 auto; font-size: 1.1rem; color: #fbead2; } .meaning-word { font-style: normal; color: #ffd98a; } /* Sections */ .section { padding: 64px 0; } .section-alt { background: var(--bg-deep); } .section-head { max-width: 42em; margin-bottom: 32px; } .section-head p:not(.kicker) { color: var(--muted); font-size: 1.1rem; margin: 0; } .kicker { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; } @media (min-width: 900px) { .section { padding: 88px 0; } } /* Service cards */ .cards { display: grid; gap: 16px; } @media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .cards { grid-template-columns: repeat(4, 1fr); } } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); } .card h3 { margin-bottom: 0.35em; } .card p { margin: 0; color: var(--muted); } .icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: #f3e2c2; color: var(--terracotta); margin-bottom: 16px; } .icon svg { width: 26px; height: 26px; } .note { margin-top: 24px; padding: 18px 20px; border-radius: var(--radius); background: rgba(29, 106, 99, 0.08); border-left: 4px solid var(--teal); color: var(--ink); max-width: 52em; } .note p { margin: 0; } /* Chips */ .chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; } .chips li { padding: 10px 18px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 600; } .chips.events li { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; padding: 12px 20px; } /* Promise */ .promise-grid { display: grid; gap: 32px; align-items: start; } @media (min-width: 900px) { .promise-grid { grid-template-columns: 0.9fr 1.1fr; gap: 56px; } } .promise-line { font-family: var(--serif); font-weight: 700; font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.15; color: var(--terracotta); margin: 0; } .checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; } .checks li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; } .checks .tick { width: 32px; height: 32px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; margin-top: 2px; } .checks .tick svg { width: 18px; height: 18px; } .checks strong { display: block; font-size: 1.1rem; } .checks span.d { color: var(--muted); } /* Steps */ .steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: step; } @media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } } .steps li { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 24px 24px 84px; box-shadow: var(--shadow); } .steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 24px; top: 22px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--mustard); color: var(--ink); font-family: var(--serif); font-weight: 700; font-size: 1.3rem; } .steps h3 { margin-bottom: 0.3em; } .steps p { margin: 0; color: var(--muted); } /* Area */ .area-grid { display: grid; gap: 28px; } @media (min-width: 900px) { .area-grid { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } } .hours { display: flex; gap: 12px; align-items: center; margin-top: 20px; padding: 14px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); } .hours svg { width: 24px; height: 24px; color: var(--teal); flex: none; } .hours p { margin: 0; } /* Quote / contact */ .quote-grid { display: grid; gap: 28px; } @media (min-width: 960px) { .quote-grid { grid-template-columns: 1.4fr 0.8fr; gap: 40px; align-items: start; } } .form-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; box-shadow: var(--shadow); } @media (min-width: 640px) { .form-card { padding: 32px; } } .form-grid { display: grid; gap: 18px; } @media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .span-2 { grid-column: 1 / -1; } } .field label, .field legend { display: block; font-weight: 700; margin-bottom: 6px; font-size: 0.98rem; padding: 0; } .field .opt { font-weight: 400; color: var(--muted); font-size: 0.9rem; } .field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 1rem; color: var(--ink); background: #fffdf8; border: 1.5px solid rgba(59, 35, 23, 0.28); border-radius: 10px; -webkit-appearance: none; appearance: none; } .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233b2317' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } .field textarea { min-height: 110px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(29, 106, 99, 0.2); } fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; } .radios { display: flex; flex-wrap: wrap; gap: 10px; } .radios label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; min-height: 44px; padding: 8px 16px; border: 1.5px solid rgba(59, 35, 23, 0.28); border-radius: 999px; background: #fffdf8; cursor: pointer; margin: 0; } .radios input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--terracotta); -webkit-appearance: auto; appearance: auto; } .form-foot { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; } .form-foot .btn { width: 100%; } @media (min-width: 640px) { .form-foot .btn { width: auto; align-self: flex-start; } } .small { font-size: 0.92rem; color: var(--muted); margin: 0; } .hidden { position: absolute !important; left: -9999px !important; } .contact-card { background: var(--ink); color: #f7eedf; border-radius: 18px; padding: 28px; } .contact-card h3 { color: #fff8ec; } .contact-card p { color: #e8d6bd; } .contact-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; } .contact-list a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; border-radius: 12px; background: rgba(255, 248, 236, 0.08); border: 1px solid rgba(255, 248, 236, 0.16); color: #fff8ec; text-decoration: none; font-weight: 600; overflow-wrap: anywhere; } .contact-list a:hover { background: rgba(255, 248, 236, 0.16); color: #fff; } .contact-list svg { width: 22px; height: 22px; flex: none; color: var(--mustard); } .contact-list small { display: block; font-weight: 400; color: #d9c3a4; font-size: 0.88rem; } /* Footer */ .site-footer { background: #2c1a11; color: #e8d6bd; padding: 48px 0 32px; } .footer-grid { display: grid; gap: 24px; align-items: center; } @media (min-width: 800px) { .footer-grid { grid-template-columns: auto 1fr auto; } } .footer-brand { display: flex; align-items: center; gap: 14px; } .footer-brand img { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 2px var(--mustard); } .footer-brand strong { font-family: var(--serif); font-size: 1.25rem; color: #fff8ec; display: block; } .footer-brand em { font-family: var(--serif); color: #f1c98a; font-size: 0.98rem; display: block; } .footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; } .footer-links a { color: #f7eedf; text-decoration: none; font-weight: 600; } .footer-links a:hover { color: var(--mustard); } .copyright { margin: 28px 0 0; font-size: 0.9rem; color: #bda489; border-top: 1px solid rgba(232, 214, 189, 0.15); padding-top: 20px; } /* Mobile action bar */ .action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(247, 238, 223, 0.97); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(59, 35, 23, 0.08); } .action-bar .btn { min-height: 46px; padding: 0.5em 0.6em; font-size: 0.95rem; } .site-footer { padding-bottom: calc(32px + 76px + env(safe-area-inset-bottom)); } @media (min-width: 900px) { .action-bar { display: none; } .site-footer { padding-bottom: 32px; } } /* Simple pages (thanks / 404) */ .simple { min-height: 70vh; display: grid; place-items: center; padding: 48px 0; text-align: center; } .simple .medallion { width: 160px; margin: 0 auto 28px; } .simple h1 { font-size: clamp(2rem, 6vw, 2.8rem); } .simple .lang-block { max-width: 34em; margin: 0 auto 24px; } .simple .lang-block + .lang-block { padding-top: 24px; border-top: 1px solid var(--line); } .simple .btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }