/* Casa Mia – Brand overrides on the Foores template All rules here sit on top of vendors.min.css + style.css ---------------------------------------------------------------- */ /* ── Google Fonts additions (Fraunces loaded in each page ) ─ */ /* ── Text logo ─────────────────────────────────────────────────── */ #logo a { text-decoration: none; } .cm-logo { font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 1.85rem; font-weight: 400; letter-spacing: 0.5px; display: inline-block; line-height: 1; text-decoration: none; } .cm-logo em { font-style: normal; font-weight: 700; } /* On transparent / dark header – white logo */ span.logo_normal { color: #fff; } /* On sticky white header – dark logo */ span.logo_sticky { color: #222; } /* In mobile nav panel */ #header_menu .cm-logo { color: #222; font-size: 1.6rem; } /* ── Headings – bring in Fraunces for key display text ─────────── */ .slide-text h2, .main_title h2, .box_1 h2, .hero_single h1, .main_title_2 h2, h2.section-title { font-family: 'Fraunces', 'Lora', Georgia, serif; } /* ── Accent colour tweak – keep template red but slightly warmer ─ */ /* The template's --color-1 / $color-1 is #c0392b. Casa Mia's identity uses the same crimson family so we keep it. Add a brown accent for secondary elements. */ :root { --cm-brown: #716636; --cm-cream: #fdf6ec; --cm-dark: #1a1209; } /* ── Hero banner grid tweaks ────────────────────────────────────── */ #banners_grid li .short_info h3 { font-family: 'Fraunces', 'Lora', Georgia, serif; font-style: italic; } /* ── Menu item (used on homepage + menu page) ──────────────────── */ .menu_title h3 { font-family: 'Fraunces', 'Lora', Georgia, serif; } /* ── Menu page tabs ─────────────────────────────────────────────── */ .tabs_menu .nav-tabs .nav-link { font-weight: 600; letter-spacing: 0.2px; } /* Text-only menu items on menu.html – clean two-col list */ .cm-menu-item { padding: 14px 0; border-bottom: 1px solid #eee; display: flex; align-items: baseline; gap: 10px; } .cm-menu-item:last-child { border-bottom: none; } .cm-menu-item-info { flex: 1; min-width: 0; } .cm-menu-item-name { font-family: 'Fraunces', 'Lora', Georgia, serif; font-size: 1rem; font-weight: 600; color: #222; margin-bottom: 3px; } .cm-menu-item-desc { font-size: 0.82rem; color: #666; line-height: 1.4; } .cm-menu-item-price { font-weight: 700; color: #c0392b; white-space: nowrap; font-size: 0.95rem; flex-shrink: 0; } /* ── Contact page info boxes ────────────────────────────────────── */ .box_contacts { text-align: center; } /* ── Footer – social icons inline ──────────────────────────────── */ .footer_wp .follow_us { text-align: left; } .footer_wp .follow_us ul { margin-top: 8px; } /* ── Map iframe ─────────────────────────────────────────────────── */ .map_contact { width: 100%; height: 350px; border: 0; border-radius: 8px; display: block; } /* ── Order page – keep its own dark theme, add a back link ──────── */ .cm-order-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: #726634; text-decoration: none; padding: 6px 0; opacity: 0.9; } .cm-order-back:hover { opacity: 1; text-decoration: none; } /* ── Opening hours table on contact page ────────────────────────── */ .cm-hours-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top:30px} .cm-hours-table td { padding: 8px 0; text-align:left } .cm-hours-table td:first-child { font-weight: 600; padding-right: 18px; } .cm-hours-table tr:not(:last-child) td { border-bottom: 1px solid rgba(0,0,0,0.06); } /* ── Utility ─────────────────────────────────────────────────────── */ .text-brown { color: var(--cm-brown); } /* ═══════════════════════════════════════════════════════════════════ Integrated Order / Booking form (order.asp) ───────────────────────────────────────────────────────────────── Lives inside the normal site template (white bg, full nav/footer). Uses cm-* prefixes to avoid Bootstrap class collisions. ═══════════════════════════════════════════════════════════════════ */ /* Outer wrapper centres the form and provides bottom padding for the floating cart bar */ .cm-booking-wrap { max-width: 700px; margin: 0 auto; padding: 30px 0 100px; } /* Step card – cream background so it pops off the white page */ .cm-booking-step { background: var(--cm-cream); border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.07); padding: 26px 22px; margin-bottom: 22px; } /* Step heading */ .cm-booking-title { font-family: 'Fraunces', 'Lora', Georgia, serif; font-size: 1.35rem; font-weight: 700; color: var(--cm-brown); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } /* Numbered step badge */ .cm-step-badge { background: var(--cm-brown); color: #fff; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; flex-shrink: 0; } /* Form fields inside booking steps */ .cm-booking-step label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: #444; } .cm-booking-step input[type=text], .cm-booking-step input[type=tel], .cm-booking-step input[type=date], .cm-booking-step textarea { width: 100%; padding: 11px 14px; border: 2px solid #e0d8c8; border-radius: 8px; font-size: 0.95rem; font-family: inherit; background: #fff; transition: border-color 0.2s; } .cm-booking-step input:focus, .cm-booking-step textarea:focus { outline: none; border-color: var(--cm-brown); } .cm-booking-step textarea { resize: none; height: 70px; } .cm-field { margin-bottom: 16px; } .cm-field:last-child { margin-bottom: 0; } /* Menu category tabs */ .cm-cat-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .cm-cat-tab { padding: 6px 18px; border-radius: 20px; border: 2px solid var(--cm-brown); background: #fff; color: var(--cm-brown); font-weight: 700; font-size: 0.83rem; cursor: pointer; transition: all 0.15s; } .cm-cat-tab.active { background: var(--cm-brown); color: #fff; } /* Menu items inside step card */ .cm-mi { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e0d8c8; } .cm-mi:last-child { border-bottom: none; } .cm-mi-info { flex: 1; min-width: 0; } .cm-mi-name { font-family: 'Fraunces', 'Lora', serif; font-weight: 700; font-size: 1.05rem; color: #1a1209; } .cm-mi-desc { font-size: 0.78rem; color: #5a4f28; margin-top: 2px; } .cm-mi-price { font-size: 0.85rem; color: var(--cm-brown); font-weight: 700; margin-top: 3px; } /* Quantity controls */ .cm-qty { display: flex; align-items: center; gap: 7px; flex-shrink: 0; } .cm-qty-btn { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--cm-brown); background: #fff; color: var(--cm-brown); font-size: 1.2rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: all 0.12s; user-select: none; } .cm-qty-btn:hover { background: var(--cm-brown); color: #fff; } .cm-qty-val { width: 26px; text-align: center; font-weight: 700; font-size: 0.95rem; color: var(--cm-brown); } /* Time-slot grid */ .cm-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; margin-top: 6px; } .cm-slot-btn { padding: 10px 4px; border: 2px solid #d0c8b4; border-radius: 8px; background: #fff; font-size: 0.88rem; font-weight: 600; cursor: pointer; text-align: center; transition: all 0.15s; color: #222; } .cm-slot-btn:hover:not(.full):not(.blocked) { border-color: var(--cm-brown); background: #fdf0e0; } .cm-slot-btn.selected { background: var(--cm-brown); border-color: var(--cm-brown); color: #fff; } .cm-slot-btn.full, .cm-slot-btn.blocked { background: #ece8e0; color: #bbb; border-color: #d8d0c0; cursor: not-allowed; text-decoration: line-through; } .cm-slot-msg { font-size: 0.84rem; color: #888; margin-top: 10px; min-height: 18px; } .cm-slot-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.76rem; color: #888; margin-top: 12px; } .cm-slot-legend span { display: flex; align-items: center; gap: 5px; } .cm-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; } .cm-dot-avail { background: #fff; border: 2px solid #d0c8b4; } .cm-dot-full { background: #ece8e0; border: 2px solid #d8d0c0; } .cm-dot-sel { background: var(--cm-brown); } /* Error message */ .cm-error-msg { color: #c0392b; font-size: 0.85rem; margin-top: 10px; display: none; } .cm-error-msg.show { display: block; } /* Floating cart bar */ #cm-cart-bar { display: none; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 40px); max-width: 640px; background: var(--cm-brown); color: #fff; border-radius: 14px; padding: 14px 18px; box-shadow: 0 8px 32px rgba(114,102,52,0.45); z-index: 998; align-items: center; justify-content: space-between; gap: 12px; } #cm-cart-bar.visible { display: flex; } .cm-cart-info .cm-cart-count { font-size: 1rem; font-weight: 800; } .cm-cart-info .cm-cart-subtotal { font-size: 0.84rem; opacity: 0.9; margin-top: 1px; } .cm-cart-continue-btn { white-space: nowrap; padding: 10px 20px; background: #fff; color: var(--cm-brown); border: none; border-radius: 10px; font-size: 0.9rem; font-weight: 800; cursor: pointer; flex-shrink: 0; transition: background 0.15s; } .cm-cart-continue-btn:hover { background: #fdf6ec; } /* Spinner used on submit */ .cm-spinner { display: inline-block; width: 17px; height: 17px; border: 3px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: cm-spin 0.7s linear infinite; vertical-align: middle; margin-right: 7px; } @keyframes cm-spin { to { transform: rotate(360deg); } } /* Confirmation screen */ .cm-confirm-screen { display: none; text-align: center; padding: 40px 20px 60px; } .cm-confirm-screen .cm-tick { font-size: 3.5rem; margin-bottom: 18px; } .cm-confirm-screen h2 { font-family: 'Fraunces', 'Lora', serif; font-size: 1.7rem; color: var(--cm-brown); margin-bottom: 10px; } .cm-confirm-screen p { color: #555; line-height: 1.7; } .cm-confirm-summary { background: #fff; border-radius: 12px; padding: 22px; margin: 22px 0; text-align: left; box-shadow: 0 4px 20px rgba(0,0,0,0.07); } .cm-confirm-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; } .cm-confirm-summary dt { font-weight: 700; font-size: 0.8rem; color: #888; text-transform: uppercase; letter-spacing: 0.5px; } .cm-confirm-summary dd { font-size: 0.93rem; } .cm-confirm-items { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee; } .cm-confirm-item { display: flex; justify-content: space-between; font-size: 0.88rem; padding: 4px 0; } .cm-confirm-total { display: flex; justify-content: space-between; font-weight: 800; font-size: 0.95rem; margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee; color: var(--cm-brown); } .cm-btn-new-booking { margin-top: 8px; background: none; border: 2px solid var(--cm-brown); color: var(--cm-brown); border-radius: 8px; padding: 12px 28px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.15s; } .cm-btn-new-booking:hover { background: var(--cm-brown); color: #fff; } /* ═══════════════════════════════════════════════════════════════════ Reservation page (reserve.asp) ───────────────────────────────────────────────────────────────── Reuses all cm-booking-step, cm-slot-*, cm-field, cm-qty etc. Only additions are the capacity label inside slot buttons and the guest-stepper label. ═══════════════════════════════════════════════════════════════════ */ /* Slot button – small capacity note inside */ .cm-slot-btn small { display: block; line-height: 1.2; } /* Guest stepper label sits inline with qty controls */ #guests-label { line-height: 32px; }