/* ========================================================= Gylea Dance Academy Bootstrap v4.6 Overrides ========================================================= */ :root { --gda-logo: url("https://blob.poolq.net/gileadance/images/639224411428159590-gilea-logo.png"); --gda-ink: #171513; --gda-ink-soft: #2B2825; --gda-gold: #BF8D4D; --gda-gold-dark: #94652F; --gda-gold-light: #F2E5D5; --gda-ivory: #F8F2EE; --gda-blush: #EEE2DC; --gda-light: #FBF8F6; --gda-border: #DED1C9; --gda-text: #2B2826; --gda-muted: #756D68; --nav-margin: 8rem!important; } /* --------------------------------------------------------- Base --------------------------------------------------------- */ body { --gda-heading-color: var(--gda-ink); color: var(--gda-text); background-color: #ffffff; font-family: "Montserrat", Arial, sans-serif; font-weight: 400; line-height: 1.65; } a { color: var(--gda-gold-dark); } a:hover, a:focus { color: var(--gda-ink); } hr { border-top-color: var(--gda-border); } /* --------------------------------------------------------- Typography --------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--gda-heading-color); font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; line-height: 1.1; } h1, .h1 { letter-spacing: 0.035em; } h2, .h2 { letter-spacing: 0.025em; } h3, .h3, h4, .h4 { letter-spacing: 0.015em; } .display-1, .display-2, .display-3, .display-4 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; } .navbar-brand { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; } .btn { font-family: "Montserrat", Arial, sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.055em; } /* Optional editorial treatments for page blocks */ .gda-kicker { font-family: "Montserrat", Arial, sans-serif; font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; } .gda-script { font-family: "Allura", cursive; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 0.9; } /* Dark contextual sections */ .bg-dark, .bg-primary, .text-light, .text-white { --gda-heading-color: #ffffff; } /* Gold sections use dark text */ .bg-secondary { --gda-heading-color: var(--gda-ink); } /* Light components restore dark headings */ .card, .bg-light, .jumbotron, .alert-primary, .alert-info, .alert-secondary, .dropdown-menu, .modal-content { --gda-heading-color: var(--gda-ink); } /* Contextual cards */ .card.bg-dark, .card.bg-primary { --gda-heading-color: #ffffff; } .card.bg-secondary { --gda-heading-color: var(--gda-ink); } /* --------------------------------------------------------- Navbar --------------------------------------------------------- */ .navbar { background-color: var(--gda-ivory); border-bottom: 1px solid rgba(191, 141, 77, 0.28); padding-top: 0.9rem; padding-bottom: 0.9rem; } /* Keep the navbar visually light even if Pool Queue happens to render it with bg-primary. */ .navbar.bg-primary, .navbar-dark.bg-primary { --gda-heading-color: var(--gda-ink); background-color: var(--gda-ivory) !important; } /* Light navbar */ .navbar-light .navbar-brand { color: var(--gda-ink); } .navbar-light .navbar-nav .nav-link { color: var(--gda-ink); font-size: 0.78rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .active .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show .nav-link { color: var(--gda-gold-dark); } /* Dark navbar class fallback */ .navbar-dark .navbar-brand, .navbar-dark .navbar-nav .nav-link { color: var(--gda-ink); } .navbar-dark .navbar-nav .nav-link { font-size: 0.78rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .show .nav-link { color: var(--gda-gold-dark); text-decoration: none; } /* Active navigation */ .navbar-light .navbar-nav .active .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .active .nav-link, .navbar-dark .navbar-nav .nav-link.active { color: var(--gda-ink); box-shadow: inset 0 -2px 0 var(--gda-gold); } /* Toggler */ .navbar-light .navbar-toggler { color: var(--gda-ink); border-color: rgba(23, 21, 19, 0.25); } .navbar-dark .navbar-toggler { color: var(--gda-ink); border-color: rgba(23, 21, 19, 0.25); } .navbar-dark .navbar-toggler-icon { filter: invert(1); } /* --------------------------------------------------------- Dropdown Menus --------------------------------------------------------- */ .navbar .dropdown-menu, .dropdown-menu { background-color: #ffffff; border: 1px solid var(--gda-border); border-top: 2px solid var(--gda-gold); border-radius: 0; box-shadow: 0 10px 30px rgba(43, 40, 37, 0.10); padding: 0.5rem 0; } .navbar .dropdown-menu .dropdown-item, .dropdown-menu .dropdown-item, .navbar .dropdown-menu li a, .dropdown-menu li a { display: block; color: var(--gda-ink); background-color: #ffffff; font-family: "Montserrat", Arial, sans-serif; font-size: 0.85rem; font-weight: 400; text-decoration: none; } .navbar .dropdown-menu .dropdown-item:hover, .navbar .dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus, .navbar .dropdown-menu li a:hover, .navbar .dropdown-menu li a:focus, .dropdown-menu li a:hover, .dropdown-menu li a:focus { color: var(--gda-ink); background-color: var(--gda-ivory); text-decoration: none; } .navbar .dropdown-menu .dropdown-item.active, .navbar .dropdown-menu .dropdown-item:active, .dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active, .navbar .dropdown-menu .active a, .dropdown-menu .active a { color: #ffffff; background-color: var(--gda-ink); } .navbar .dropdown-menu .dropdown-item.disabled, .dropdown-menu .dropdown-item.disabled, .navbar .dropdown-menu li.disabled a, .dropdown-menu li.disabled a { color: var(--gda-muted); background-color: #ffffff; } .dropdown-divider { border-top-color: var(--gda-border); } /* --------------------------------------------------------- Buttons --------------------------------------------------------- */ .btn { border-radius: 0.1rem; padding: 0.7rem 1.25rem; } /* Primary = elegant black CTA */ .btn-primary { color: #ffffff; background-color: var(--gda-ink); border-color: var(--gda-ink); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active { color: #ffffff; background-color: #000000; border-color: #000000; } .btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 0.2rem rgba(23, 21, 19, 0.18); } /* Secondary = reference-image gold */ .btn-secondary { color: var(--gda-ink); background-color: var(--gda-gold); border-color: var(--gda-gold); } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:not(:disabled):not(.disabled):active { color: #ffffff; background-color: var(--gda-gold-dark); border-color: var(--gda-gold-dark); } .btn-secondary:focus, .btn-secondary.focus { box-shadow: 0 0 0 0.2rem rgba(191, 141, 77, 0.25); } /* Outline primary */ .btn-outline-primary { color: var(--gda-ink); background-color: transparent; border-color: var(--gda-ink); } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary:not(:disabled):not(.disabled):active { color: #ffffff; background-color: var(--gda-ink); border-color: var(--gda-ink); } /* Outline secondary */ .btn-outline-secondary { color: var(--gda-gold-dark); background-color: transparent; border-color: var(--gda-gold); } .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active, .btn-outline-secondary:not(:disabled):not(.disabled):active { color: var(--gda-ink); background-color: var(--gda-gold); border-color: var(--gda-gold); } /* Disabled outline buttons */ .btn-outline-primary.disabled, .btn-outline-primary:disabled, .btn-outline-primary.disabled:hover, .btn-outline-primary:disabled:hover, .btn-outline-primary.disabled:focus, .btn-outline-primary:disabled:focus, .btn-outline-secondary.disabled, .btn-outline-secondary:disabled, .btn-outline-secondary.disabled:hover, .btn-outline-secondary:disabled:hover, .btn-outline-secondary.disabled:focus, .btn-outline-secondary:disabled:focus { color: var(--gda-muted); background-color: #ffffff; border-color: var(--gda-border); opacity: 1; } /* Link buttons */ .btn-link { color: var(--gda-gold-dark); } .btn-link:hover, .btn-link:focus { color: var(--gda-ink); } /* Primary CTA on dark backgrounds becomes gold */ .bg-dark .btn-primary, .bg-primary .btn-primary { color: var(--gda-ink); background-color: var(--gda-gold); border-color: var(--gda-gold); } .bg-dark .btn-primary:hover, .bg-dark .btn-primary:focus, .bg-dark .btn-primary:active, .bg-primary .btn-primary:hover, .bg-primary .btn-primary:focus, .bg-primary .btn-primary:active { color: #ffffff; background-color: var(--gda-gold-dark); border-color: var(--gda-gold-dark); } /* --------------------------------------------------------- Cards and Content Blocks --------------------------------------------------------- */ .card { border-color: var(--gda-border); border-radius: 0; box-shadow: 0 4px 18px rgba(43, 40, 37, 0.055); } .card-header { color: var(--gda-heading-color); background-color: var(--gda-light); border-bottom-color: var(--gda-border); font-weight: 500; } .card-footer { background-color: var(--gda-light); border-top-color: var(--gda-border); } .card-title { color: var(--gda-heading-color); } /* Contextual card headers */ .card-header.bg-primary, .card-header.bg-dark { --gda-heading-color: #ffffff; color: #ffffff; } .card-header.bg-secondary { --gda-heading-color: var(--gda-ink); color: var(--gda-ink); } /* --------------------------------------------------------- List Groups --------------------------------------------------------- */ .list-group-item { border-color: var(--gda-border); } .list-group-item-action { color: var(--gda-text); } .list-group-item-action:hover, .list-group-item-action:focus { color: var(--gda-ink); background-color: var(--gda-ivory); } .list-group-item.active { color: #ffffff; background-color: var(--gda-ink); border-color: var(--gda-ink); } /* --------------------------------------------------------- Hero and Page Headers --------------------------------------------------------- */ .jumbotron { color: var(--gda-text); background-color: var(--gda-ivory); border-radius: 0; border-bottom: 1px solid var(--gda-border); } .jumbotron h1, .jumbotron .h1, .jumbotron h2, .jumbotron .h2 { color: var(--gda-ink); } .jumbotron p { color: var(--gda-text); } /* --------------------------------------------------------- Badges --------------------------------------------------------- */ .badge-primary { color: #ffffff; background-color: var(--gda-ink); } .badge-secondary { color: var(--gda-ink); background-color: var(--gda-gold); } .badge-info { color: var(--gda-ink); background-color: var(--gda-gold-light); } /* --------------------------------------------------------- Alerts --------------------------------------------------------- */ .alert-primary, .alert-info { color: var(--gda-ink); background-color: var(--gda-gold-light); border-color: #E3CFB5; } .alert-secondary { color: var(--gda-ink); background-color: var(--gda-ivory); border-color: var(--gda-border); } .alert-primary hr, .alert-info hr { border-top-color: #D5B991; } .alert-primary .alert-link, .alert-info .alert-link { color: var(--gda-ink); font-weight: 600; text-decoration: underline; } .alert-primary .alert-link:hover, .alert-primary .alert-link:focus, .alert-info .alert-link:hover, .alert-info .alert-link:focus { color: var(--gda-gold-dark); text-decoration: underline; } .alert-primary .text-muted, .alert-info .text-muted, .alert-secondary .text-muted { color: #655D57 !important; } /* --------------------------------------------------------- Forms --------------------------------------------------------- */ .form-control { color: var(--gda-text); background-color: #ffffff; border-color: #CEC3BC; border-radius: 0.1rem; } .form-control:focus { color: var(--gda-text); background-color: #ffffff; border-color: var(--gda-gold); box-shadow: 0 0 0 0.2rem rgba(191, 141, 77, 0.18); } .form-control::placeholder { color: var(--gda-muted); } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--gda-ink); border-color: var(--gda-ink); } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(191, 141, 77, 0.20); } .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { background-color: var(--gda-gold); border-color: var(--gda-gold); } /* --------------------------------------------------------- Tables --------------------------------------------------------- */ .table { color: var(--gda-text); } .table thead th { color: var(--gda-ink); border-bottom-color: var(--gda-border); font-family: "Montserrat", Arial, sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; } .table-bordered th, .table-bordered td { border-color: var(--gda-border); } .table-hover tbody tr:hover { color: var(--gda-text); background-color: var(--gda-ivory); } .table .thead-dark th { color: #ffffff; background-color: var(--gda-ink); border-color: var(--gda-ink-soft); } .table-primary, .table-primary td, .table-primary th { background-color: var(--gda-gold-light); } /* --------------------------------------------------------- Pagination --------------------------------------------------------- */ .page-link { color: var(--gda-ink); border-color: var(--gda-border); } .page-link:hover { color: var(--gda-ink); background-color: var(--gda-ivory); border-color: var(--gda-border); } .page-link:focus { box-shadow: 0 0 0 0.2rem rgba(191, 141, 77, 0.18); } .page-item.active .page-link { color: #ffffff; background-color: var(--gda-ink); border-color: var(--gda-ink); } .page-item.disabled .page-link { color: var(--gda-muted); background-color: #ffffff; border-color: var(--gda-border); } /* --------------------------------------------------------- Breadcrumbs --------------------------------------------------------- */ .breadcrumb { background-color: var(--gda-light); border-radius: 0; } .breadcrumb-item a { color: var(--gda-gold-dark); } .breadcrumb-item.active { color: var(--gda-muted); } /* --------------------------------------------------------- Modals --------------------------------------------------------- */ .modal-content { border-color: var(--gda-border); border-radius: 0; box-shadow: 0 12px 40px rgba(23, 21, 19, 0.16); } .modal-header { border-bottom-color: var(--gda-border); } .modal-footer { border-top-color: var(--gda-border); } /* --------------------------------------------------------- Nav Tabs --------------------------------------------------------- */ .nav-tabs { border-bottom-color: var(--gda-border); } .nav-tabs .nav-link { color: var(--gda-muted); border-radius: 0; } .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { color: var(--gda-ink); border-color: transparent; border-bottom-color: var(--gda-gold); } .nav-tabs .nav-link.active { color: var(--gda-ink); background-color: #ffffff; border-color: var(--gda-border); border-bottom-color: #ffffff; box-shadow: inset 0 2px 0 var(--gda-gold); } /* --------------------------------------------------------- Footer --------------------------------------------------------- */ /* Do not style the raw footer element. Bootstrap uses semantic footer elements elsewhere. */ .site-footer { --gda-heading-color: #ffffff; color: #ffffff; background-color: var(--gda-ink); } .site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6 { color: #ffffff; } .site-footer a { color: #ffffff; } .site-footer a:hover, .site-footer a:focus { color: var(--gda-gold); text-decoration: none; } .site-footer .text-muted, .site-footer .text-white-50 { color: #C6BDB7 !important; } /* --------------------------------------------------------- Bootstrap Utility Overrides --------------------------------------------------------- */ .text-primary { color: var(--gda-ink) !important; } .text-secondary { color: var(--gda-gold-dark) !important; } .text-dark { color: var(--gda-text) !important; } /* Primary contextual background = black */ .bg-primary { --gda-heading-color: #ffffff; color: #ffffff; background-color: var(--gda-ink) !important; } /* Secondary contextual background = antique gold */ .bg-secondary { --gda-heading-color: var(--gda-ink); color: var(--gda-ink); background-color: var(--gda-gold) !important; } /* Dark is deliberately slightly warmer than pure black */ .bg-dark { --gda-heading-color: #ffffff; color: #ffffff; background-color: var(--gda-ink) !important; } /* Warm ivory rather than Bootstrap grey */ .bg-light { --gda-heading-color: var(--gda-ink); background-color: var(--gda-ivory) !important; } .border-primary { border-color: var(--gda-ink) !important; } .border-secondary { border-color: var(--gda-gold) !important; } /* Navbar exception must remain visually light even though Pool Queue may apply bg-primary. */ .navbar.bg-primary, .navbar-dark.bg-primary { --gda-heading-color: var(--gda-ink); color: var(--gda-ink); background-color: var(--gda-ivory) !important; } /* --------------------------------------------------------- Mobile Refinements --------------------------------------------------------- */ @media (max-width: 767.98px) { .navbar { padding-top: 0.65rem; padding-bottom: 0.65rem; } .navbar-light .navbar-nav .nav-link, .navbar-dark .navbar-nav .nav-link { padding-top: 0.65rem; padding-bottom: 0.65rem; } .card { margin-bottom: 1rem; } .jumbotron { padding: 2.5rem 1.25rem; } h1, .h1 { font-size: 2.4rem; } h2, .h2 { font-size: 2rem; } .display-1, .display-2, .display-3, .display-4 { line-height: 1; } .btn { letter-spacing: 0.04em; } } /* --------------------------------------------------------- Navbar Brand Logo --------------------------------------------------------- */ .navbar-brand { display: block; width: 205px; height: 78px; padding: 0; margin-right: 2rem; background-image: var(--gda-logo); background-repeat: no-repeat; background-position: left center; background-size: contain; font-size: 0; line-height: 0; overflow: hidden; } .navbar { min-height: 102px; } /* --------------------------------------------------------- Mobile Navbar Logo --------------------------------------------------------- */ @media (max-width: 767.98px) { .navbar { min-height: 76px; } .navbar-brand { width: 155px; height: 58px; margin-right: 1rem; } } /* --------------------------------------------------------- Functional Card Typography --------------------------------------------------------- */ /* Gilea's serif typography works beautifully for editorial headings, but system cards need stronger UI typography. */ .card { font-family: "Montserrat", Arial, sans-serif; font-weight: 500; line-height: 1.5; } /* Card titles should read as UI labels, not editorial headings. */ .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header .h1, .card-header .h2, .card-header .h3, .card-header .h4, .card-header .h5, .card-header .h6 { font-family: "Montserrat", Arial, sans-serif; font-weight: 600; line-height: 1.35; letter-spacing: 0; } /* Stronger roster/program title */ .card-header a { color: var(--gda-gold-dark); font-weight: 600; } .card-header a:hover, .card-header a:focus { color: var(--gda-ink); } /* Main card content */ .card .list-group-item { color: var(--gda-ink-soft); font-weight: 500; } /* Links need more presence inside functional cards */ .card .list-group-item a, .card .card-footer a, .card .card-link { font-weight: 500; } /* Dates / labels in the footer need clear hierarchy */ .card-footer { color: var(--gda-ink-soft); font-weight: 500; } .card-footer dt { color: var(--gda-ink); font-weight: 600; } .card-footer dd { font-weight: 500; } /* --------------------------------------------------------- Navbar Typography Refinement --------------------------------------------------------- */ .navbar-light .navbar-nav .nav-link, .navbar-dark .navbar-nav .nav-link { font-size: 0.95rem; } /* --------------------------------------------------------- Navbar Item Spacing --------------------------------------------------------- */ .navbar-nav .nav-item { margin-right: 1.25rem; } .navbar-nav .nav-item:last-child { margin-right: 0; }