diff --git a/app/public/styles/app.css b/app/public/styles/app.css index c2c4f18..d44bbf8 100644 --- a/app/public/styles/app.css +++ b/app/public/styles/app.css @@ -1,11 +1,13 @@ :root { - --cbc-navy: #0b2f55; - --cbc-deep-blue: #0f5f97; - --cbc-bright-blue: #1c9dd9; - --cbc-ice: #dff3fb; - --cbc-white: #f5fbff; - --cbc-coffee: #6a3f24; - --cbc-gold: #f2bf44; + --bh-deep-water: #1a3c4a; + --bh-lake: #2c7a8c; + --bh-teal: #4a9dab; + --bh-sand: #e8d5b7; + --bh-cream: #fdf6ed; + --bh-wood: #7a4d2e; + --bh-warm-white: #fffbf5; + --bh-gold: #f2bf44; + --bh-pine: #3a5a40; } * { @@ -15,12 +17,12 @@ body { margin: 0; font-family: 'Nunito', sans-serif; - color: var(--cbc-white); + color: var(--bh-warm-white); min-height: 100vh; background: - radial-gradient(circle at 8% 10%, #ffffff2e 0 90px, transparent 91px), - radial-gradient(circle at 88% 15%, #6ecdf533 0 140px, transparent 141px), - linear-gradient(145deg, var(--cbc-navy), var(--cbc-deep-blue) 45%, #0b426f); + radial-gradient(circle at 8% 10%, #fdf6ed2e 0 90px, transparent 91px), + radial-gradient(circle at 88% 15%, #4a9dab33 0 140px, transparent 141px), + linear-gradient(145deg, var(--bh-deep-water), #1e4f5e 45%, #1a3c4a); } .site-header { @@ -32,8 +34,8 @@ body { justify-content: space-between; gap: 1rem; padding: 0.7rem 1rem; - border-bottom: 1px solid #d6f4ff40; - background: linear-gradient(180deg, #082540f0, #0b3255db); + border-bottom: 1px solid #e8d5b740; + background: linear-gradient(180deg, #152f3cf0, #1a3c4adb); backdrop-filter: blur(10px); } @@ -41,7 +43,7 @@ body { display: inline-flex; align-items: center; gap: 0.55rem; - color: var(--cbc-ice); + color: var(--bh-sand); text-decoration: none; font-weight: 800; letter-spacing: 0.03em; @@ -51,7 +53,7 @@ body { width: 2rem; height: 2rem; border-radius: 999px; - border: 1px solid #d8f2ff85; + border: 1px solid #e8d5b785; } .top-nav { @@ -61,17 +63,17 @@ body { } .top-nav a { - color: var(--cbc-white); + color: var(--bh-warm-white); text-decoration: none; font-weight: 700; - border: 1px solid #dbf4ff44; + border: 1px solid #e8d5b744; border-radius: 999px; padding: 0.28rem 0.72rem; background: #ffffff12; } .top-nav a:hover { - background: #9adcf83d; + background: #4a9dab3d; } .page-shell { @@ -83,9 +85,9 @@ body { .hero-card { padding: 2rem; - border: 2px solid #c4ebff5c; + border: 2px solid #e8d5b75c; border-radius: 24px; - background: linear-gradient(170deg, #0a2c4dca, #0e4f80ca 65%, #1b90c2bf); + background: linear-gradient(170deg, #1a3c4aca, #1e4f5eca 65%, #2c7a8cbf); backdrop-filter: blur(8px); box-shadow: 0 14px 44px #03102066; text-align: center; @@ -97,7 +99,7 @@ body { margin: 0 auto 1rem; padding: 0.55rem; border-radius: 20px; - background: linear-gradient(135deg, #ffffff26, #70cef747); + background: linear-gradient(135deg, #fdf6ed26, #4a9dab47); } .logo-image { @@ -108,7 +110,7 @@ body { .tag { margin: 0; - color: var(--cbc-gold); + color: var(--bh-gold); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; @@ -120,7 +122,7 @@ h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.4rem, 8vw, 4rem); letter-spacing: 0.05em; - color: var(--cbc-ice); + color: var(--bh-sand); } .lead { @@ -137,7 +139,7 @@ h1 { } .pill { - border: 1px solid #d6f4ff7d; + border: 1px solid #e8d5b77d; border-radius: 999px; padding: 0.35rem 0.9rem; background: #ffffff14; @@ -152,15 +154,15 @@ h1 { .info-grid article { border-radius: 16px; - background: linear-gradient(165deg, #ffffff17, #7bc6ed26); - border: 1px solid #d8eeff47; + background: linear-gradient(165deg, #fdf6ed17, #4a9dab26); + border: 1px solid #e8d5b747; padding: 1rem 1.1rem; animation: reveal 900ms ease-out both; } .info-grid h2 { margin-top: 0; - color: var(--cbc-gold); + color: var(--bh-gold); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; @@ -168,7 +170,7 @@ h1 { .info-grid p { margin: 0.45rem 0; - color: var(--cbc-white); + color: var(--bh-warm-white); } .menu-board, @@ -178,8 +180,8 @@ h1 { .admin-card, .section-card { border-radius: 16px; - background: linear-gradient(160deg, #f8fdff1a, #88d4f92b); - border: 1px solid #d8eeff47; + background: linear-gradient(160deg, #fdf6ed1a, #4a9dab2b); + border: 1px solid #e8d5b747; padding: 1rem 1.1rem; animation: reveal 1000ms ease-out both; } @@ -191,7 +193,7 @@ h1 { .admin-card h2, .section-card h2 { margin-top: 0; - color: var(--cbc-gold); + color: var(--bh-gold); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; @@ -204,8 +206,8 @@ h1 { } .menu-grid article { - background: #0828428a; - border: 1px solid #cbeeff45; + background: #1a3c4a8a; + border: 1px solid #e8d5b745; border-radius: 12px; padding: 0.75rem; } @@ -220,7 +222,7 @@ h1 { } .menu-grid strong { - color: var(--cbc-gold); + color: var(--bh-gold); } .reservation-form { @@ -233,15 +235,15 @@ h1 { grid-column: span 2; margin-top: 0.2rem; font-weight: 700; - color: #dff3fb; + color: var(--bh-sand); } .reservation-form input { grid-column: span 2; - border: 1px solid #bfe9ff61; + border: 1px solid #e8d5b761; border-radius: 10px; - background: #072741c7; - color: var(--cbc-white); + background: #152f3cc7; + color: var(--bh-warm-white); padding: 0.6rem 0.72rem; } @@ -288,20 +290,20 @@ h1 { width: 100%; border-collapse: collapse; min-width: 680px; - background: #072b4580; - border: 1px solid #bde7ff3d; + background: #1a3c4a80; + border: 1px solid #e8d5b73d; } .reservation-table th, .reservation-table td { - border-bottom: 1px solid #bde7ff33; + border-bottom: 1px solid #e8d5b733; padding: 0.6rem 0.55rem; text-align: left; font-size: 0.94rem; } .reservation-table thead th { - color: var(--cbc-gold); + color: var(--bh-gold); letter-spacing: 0.03em; font-size: 0.86rem; text-transform: uppercase; @@ -311,7 +313,7 @@ h1 { width: min(980px, 92vw); margin: 0 auto 1.2rem; text-align: center; - color: #d2edff; + color: var(--bh-sand); font-size: 0.9rem; } @@ -368,12 +370,10 @@ h1 { } } -/* ── Hero CTAs ──────────────────────────────────────── */ - .hero-sub { font-size: 1.25rem; font-weight: 700; - color: var(--cbc-ice); + color: var(--bh-sand); margin: 0.3rem 0 0.5rem; } @@ -405,26 +405,24 @@ h1 { display: inline-block; padding: 0.6rem 1.4rem; background: transparent; - color: var(--cbc-ice); + color: var(--bh-sand); font-weight: 700; border-radius: 999px; text-decoration: none; - border: 1.5px solid #c4ebff7d; + border: 1.5px solid #e8d5b77d; font-size: 0.95rem; transition: background 0.15s; } .btn-secondary:hover { - background: #9adcf83d; + background: #4a9dab3d; } -/* ── Section card sub-headings ──────────────────────── */ - .section-card h3, .about-card h3, .contact-card h3, .menu-board h3.section-sub { - color: var(--cbc-ice); + color: var(--bh-sand); font-size: 1rem; font-weight: 800; margin: 1.1rem 0 0.4rem; @@ -436,17 +434,15 @@ h1 { } .contact-card a { - color: var(--cbc-bright-blue); + color: var(--bh-teal); text-decoration: none; } .contact-card a:hover { - color: var(--cbc-ice); + color: var(--bh-sand); text-decoration: underline; } -/* ── Hours & Location ───────────────────────────────── */ - .hours-location-grid { display: grid; grid-template-columns: 1fr 1fr; @@ -462,13 +458,13 @@ h1 { .hours-table td { padding: 0.35rem 0; - color: var(--cbc-white); + color: var(--bh-warm-white); font-size: 0.95rem; } .hours-table td:first-child { font-weight: 700; - color: var(--cbc-ice); + color: var(--bh-sand); width: 58%; } @@ -478,8 +474,6 @@ h1 { color: #90d0f5; } -/* ── Offerings list ─────────────────────────────────── */ - .offerings-list { list-style: none; padding: 0; @@ -490,31 +484,29 @@ h1 { } .offerings-list li { - background: #0828428a; - border: 1px solid #cbeeff45; + background: #1a3c4a8a; + border: 1px solid #e8d5b745; border-radius: 12px; padding: 0.85rem 1rem; } .offerings-list li strong { display: block; - color: var(--cbc-gold); + color: var(--bh-gold); margin-bottom: 0.35rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; } -/* ── Menu note ──────────────────────────────────────── */ - .menu-note { margin-top: 1rem; padding: 0.7rem 1rem; - background: #0828428a; - border: 1px solid #cbeeff45; + background: #1a3c4a8a; + border: 1px solid #e8d5b745; border-radius: 10px; font-size: 0.9rem; - color: #b8e4f9; + color: var(--bh-sand); display: flex; align-items: center; justify-content: space-between; @@ -522,8 +514,6 @@ h1 { gap: 0.5rem; } -/* ── Workspace amenities ────────────────────────────── */ - .amenities-list { list-style: none; padding: 0; @@ -534,15 +524,15 @@ h1 { } .amenities-list li { - background: #0828428a; - border: 1px solid #cbeeff45; + background: #1a3c4a8a; + border: 1px solid #e8d5b745; border-radius: 10px; padding: 0.75rem 0.9rem; } .amenities-list li strong { display: block; - color: var(--cbc-gold); + color: var(--bh-gold); margin-bottom: 0.2rem; font-size: 0.85rem; text-transform: uppercase; @@ -558,7 +548,7 @@ h1 { .why-list li { padding: 0.35rem 0 0.35rem 1.4rem; position: relative; - color: var(--cbc-white); + color: var(--bh-warm-white); line-height: 1.55; } @@ -566,15 +556,13 @@ h1 { content: "→"; position: absolute; left: 0; - color: var(--cbc-gold); + color: var(--bh-gold); font-weight: 700; } -/* ── Events ─────────────────────────────────────────── */ - .event-item { - background: #0828428a; - border: 1px solid #cbeeff45; + background: #1a3c4a8a; + border: 1px solid #e8d5b745; border-radius: 12px; padding: 1rem 1.1rem; margin-top: 0.85rem; @@ -582,20 +570,18 @@ h1 { .event-item h3 { margin: 0.3rem 0 0.4rem; - color: var(--cbc-ice); + color: var(--bh-sand); font-size: 1rem; } .event-meta { font-size: 0.8rem; - color: var(--cbc-gold); + color: var(--bh-gold); font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; } -/* ── Contact grid ───────────────────────────────────── */ - .contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; @@ -611,8 +597,8 @@ h1 { .form-fields-preview li { padding: 0.4rem 0.6rem; - border-bottom: 1px solid #cbeeff25; - color: #b8e4f9; + border-bottom: 1px solid #e8d5b725; + color: var(--bh-sand); font-size: 0.9rem; } @@ -626,15 +612,15 @@ h1 { .social-link { display: inline-block; padding: 0.3rem 0.85rem; - border: 1px solid #d6f4ff7d; + border: 1px solid #e8d5b77d; border-radius: 999px; background: #ffffff12; - color: var(--cbc-ice); + color: var(--bh-sand); text-decoration: none; font-size: 0.85rem; font-weight: 700; } .social-link:hover { - background: #9adcf83d; + background: #4a9dab3d; } diff --git a/app/templates/base.html.twig b/app/templates/base.html.twig index feaa387..f50a601 100644 --- a/app/templates/base.html.twig +++ b/app/templates/base.html.twig @@ -30,7 +30,7 @@