/* ========================================================================= SingChronous brand styles ------------------------------------------------------------------------- This is the ONE file to edit to change how the site looks: colors, fonts, buttons, nav, and small responsive fixes. It's loaded after everything else, so it always wins. Palette: paper (background) #FAF7F1 ink (text) #201C22 coral -- soprano #EE6C3E cornflower -- alto #3B82C4 teal -- tenor #1F9E82 indigo -- bass #5B45D6 Fonts (loaded via in each page's ): Headings / nav / buttons : "Bricolage Grotesque" Body text : "Karla" ========================================================================= */ :root { --sc-paper: #FAF7F1; --sc-paper-raised: #FFFFFF; --sc-ink: #201C22; --sc-muted: #6E675E; --sc-line: #E5DFD2; --sc-coral: #EE6C3E; --sc-cornflower: #3B82C4; --sc-teal: #1F9E82; --sc-indigo: #5B45D6; } /* ---- reset scattered per-block colors --------------------------------- Every section the old builder generated got its own random default background color (blues, yellows, reds...) baked into a .cid-XXXXXXX rule in mbr-additional.css. Rather than hunt down each one, this resets them all to the brand paper color in one place. The two photo hero sections (home + videos) still show their photo on top, since a background-image always paints over a background-color. */ section[class*="cid-"] { background-color: var(--sc-paper) !important; } /* ---- base ------------------------------------------------------------ */ body { background-color: var(--sc-paper); color: var(--sc-ink); font-family: "Karla", -apple-system, "Helvetica Neue", Arial, sans-serif; } p, li, .mbr-text, .mbr-fonts-style { font-family: "Karla", -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--sc-ink); } h1, h2, h3, h4, h5, h6, .mbr-section-title, .mbr-section-subtitle, .navbar-caption { font-family: "Bricolage Grotesque", -apple-system, "Helvetica Neue", Arial, sans-serif; font-weight: 700; color: var(--sc-ink); } a { color: var(--sc-coral); } a:hover { color: var(--sc-indigo); } /* Headings placed over a dark hero photo (header6/header13/header14 sections use this class) must stay white — our default heading color above would otherwise make them unreadable on the photo. */ .mbr-white, .mbr-white.mbr-section-title, .mbr-white.mbr-section-subtitle { color: #FAF7F1 !important; } .text-secondary, a.text-secondary { color: var(--sc-cornflower) !important; text-decoration: underline; text-underline-offset: 2px; } .text-secondary:hover { color: var(--sc-indigo) !important; } /* ---- nav --------------------------------------------------------------- */ .navbar { background-color: var(--sc-paper) !important; } .navbar-caption { color: var(--sc-ink) !important; font-size: 1.3rem; } .navbar .nav-link { font-family: "Karla", sans-serif; font-weight: 600; color: var(--sc-ink) !important; } .navbar .nav-link:hover, .navbar .nav-link.active { color: var(--sc-coral) !important; } .navbar .hamburger span { background-color: var(--sc-ink) !important; } /* ---- buttons ------------------------------------------------------------ */ .btn, .mbr-section-btn .btn { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; border-radius: 4px; } .btn-primary, .btn.btn-primary { background-color: var(--sc-coral) !important; border-color: var(--sc-coral) !important; color: var(--sc-ink) !important; } .btn-primary:hover { background-color: var(--sc-ink) !important; border-color: var(--sc-ink) !important; color: var(--sc-paper) !important; } .btn-outline-sc, a.btn-outline-sc { background-color: transparent !important; border: 2px solid var(--sc-ink) !important; color: var(--sc-ink) !important; } .btn-outline-sc:hover { background-color: var(--sc-ink) !important; color: var(--sc-paper) !important; } /* ---- sitewide heading scale -------------------------------------------- Mobirise's display-1/2/5 utility classes are inconsistent in size and weight from section to section. This gives every page a consistent, predictable scale instead: big page titles, smaller section titles. */ .mbr-section-title.display-1, .mbr-section-title.display-2 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; } .mbr-section-title.display-5 { font-size: 1.35rem; line-height: 1.3; } .mbr-text.display-7 { font-size: 1.03rem; line-height: 1.65; } /* ---- voice-part tags ---------------------------------------------------- Small colored labels used on the homepage hero. Each color stands for a voice part: Soprano / Alto / Tenor / Bass. */ .sc-tag-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.1rem; } .sc-tag { font-family: "Bricolage Grotesque", sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; padding: 0.28rem 0.65rem; border-radius: 999px; color: #FAF7F1; display: inline-block; } .sc-tag-s { background: var(--sc-coral); } .sc-tag-a { background: var(--sc-cornflower); } .sc-tag-t { background: var(--sc-teal); } .sc-tag-b { background: var(--sc-indigo); } /* ---- homepage hero -------------------------------------------------------- */ .sc-hero { background-image: url("../../images/hero-home.jpg"); background-size: cover; background-position: center; background-color: var(--sc-ink); /* aspect-ratio keeps this exactly the photo's own 3:1 shape (2000x666) at ANY width, so "cover" never needs to crop anyone out. No max-height this time -- a cap here was what caused cropping again on wide browser windows, since height stopped growing while width kept going. */ aspect-ratio: 2000 / 666; height: auto; position: relative; } .sc-hero .mbr-overlay { /* Dark only at the bottom, where the wordmark sits, fading to fully clear by mid-photo — most of the photo stays undarkened instead of the whole thing getting a flat tint. */ background-color: transparent !important; background-image: linear-gradient(to top, rgba(32,28,34,0.82) 0%, rgba(32,28,34,0.45) 35%, rgba(32,28,34,0) 75%) !important; opacity: 1 !important; } .sc-hero .container-fluid { /* Pins the text block to the bottom of the photo via absolute positioning instead of flex + align-items on the aspect-ratio element itself -- some browsers render aspect-ratio incorrectly when display:flex is set on that same element. */ position: absolute; left: 0; right: 0; bottom: 0; width: 100%; } .sc-hero .sc-hero-inner { position: relative; z-index: 1; text-align: left; padding: 1.6rem 0 2.2rem; } .sc-hero .sc-eyebrow { color: #FAF7F1; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.05; margin-bottom: 0.4rem; } .sc-hero .sc-tagline { display: block; font-family: "Bricolage Grotesque", sans-serif; font-style: italic; font-weight: 600; color: var(--sc-coral); font-size: clamp(1.3rem, 3vw, 1.9rem); } /* ---- photo banner (Videos page hero) ----------------------------------- Same photo/aspect ratio treatment as the homepage hero, minus the overlay text — currently just a clean banner photo since the page heading is commented out (no video content posted yet). */ .sc-hero-banner { background-image: url("../../images/hero-videos.jpg"); background-size: cover; background-position: center; background-color: var(--sc-ink); /* aspect-ratio keeps this exactly the photo's own 3:1 shape (1928x642) at ANY width -- same fix as .sc-hero above, no max-height cap. */ aspect-ratio: 1928 / 642; height: auto; } .sc-hero-banner .mbr-overlay { background-color: var(--sc-ink) !important; opacity: 0.15 !important; } /* ---- homepage intro (below the hero) --------------------------------- */ .sc-intro { padding: 3.5rem 0; } .sc-intro .sc-intro-lead { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: clamp(1.15rem, 2.4vw, 1.4rem); margin-bottom: 1.2rem; } .sc-intro p.mbr-text { font-size: 1.05rem; line-height: 1.65; max-width: 52rem; } .sc-intro .btn { margin-top: 0.6rem; } /* ---- contact page labels ------------------------------------------------ */ .sc-contact-block { margin-bottom: 1.6rem; } .sc-contact-label { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-coral); margin: 0 0 0.3rem; } /* ---- singer bio cards --------------------------------------------------- Each singer on the Our Singers page is its own Mobirise section. This turns each one into a card: square photo on one side, name (and, for the two directors, a role badge) directly above the bio on the other side — photo and name are flex siblings on the same row, top-aligned, so the photo lines up with the top of the name, not the whole text block. */ .image2 .container { max-width: 720px; background: var(--sc-paper-raised); border: 1px solid var(--sc-line); border-radius: 8px; padding: 1.5rem; margin-top: 0.8rem; margin-bottom: 0.8rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 18px -16px rgba(0,0,0,0.25); } .image2 .sc-singer-id { margin-bottom: 0.5rem; } .image2 .sc-singer-id h3.mbr-section-title { font-size: 1.25rem; line-height: 1.25; margin: 0; } .image2 .row { flex-wrap: nowrap !important; align-items: flex-start !important; gap: 1.5rem; } /* Utility for new singer sections that don't carry Mobirise's own per-block row-reverse rule — apply to match the photo-on-right pattern most of the existing cards already have. */ .image2 .row.sc-photo-right { flex-direction: row-reverse; } .image2 .row > div { flex: initial; width: auto; max-width: none; padding: 0; } /* left: photo */ .image2 .col-12.col-lg-4 { flex: 0 0 210px; } .image2 .image-wrapper img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; } /* right: bio */ .image2 .col-12.col-lg { flex: 1 1 auto; min-width: 0; } .image2 .mbr-text.display-7 { font-size: 0.92rem; line-height: 1.55; } .sc-role-badge { display: inline-block; font-family: "Bricolage Grotesque", sans-serif; font-size: 0.63rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc-paper); background: var(--sc-ink); border-radius: 999px; padding: 0.2rem 0.55rem; margin: 0 0 0.35rem; } .sc-role-badge.badge-indigo { background: var(--sc-indigo); } .sc-role-badge.badge-coral { background: var(--sc-coral); } @media (max-width: 560px) { .image2 .row { flex-direction: column !important; } .image2 .col-12.col-lg-4 { flex: 0 0 auto; width: 190px; } } /* ---- performance event cards ------------------------------------------ Each upcoming show gets a card: a date badge, the host group (also color-coded — same idea as the S/A/T/B tags on the homepage, but here each color stands for which group SingChronous is guesting with), venue, and two actions. There's no real "buy tickets" link since SingChronous is a guest artist at these shows, not the organizer — so "Event Info" points to the host group's own site instead. */ .sc-event-list { display: flex; flex-direction: column; gap: 1.25rem; max-width: 42rem; margin-top: 1rem; } .sc-event-card { display: flex; gap: 1.4rem; background: var(--sc-paper-raised); border: 1px solid var(--sc-line); border-left: 5px solid var(--sc-coral); border-radius: 8px; padding: 1.4rem 1.6rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 10px 24px -18px rgba(0,0,0,0.25); } .sc-event-card.host-redwood { border-left-color: var(--sc-teal); } .sc-event-card.host-occidental { border-left-color: var(--sc-indigo); } .sc-event-date { flex: 0 0 4.4rem; text-align: center; } .sc-event-date .month { display: block; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--sc-coral); } .host-redwood .sc-event-date .month { color: var(--sc-teal); } .host-occidental .sc-event-date .month { color: var(--sc-indigo); } .sc-event-date .day { display: block; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--sc-ink); } .sc-event-host { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--sc-coral); margin: 0 0 0.3rem; } .host-redwood .sc-event-host { color: var(--sc-teal); } .host-occidental .sc-event-host { color: var(--sc-indigo); } .sc-event-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.35rem; } .sc-event-venue { color: var(--sc-muted); font-size: 0.95rem; margin: 0 0 0.5rem; } .sc-event-price { font-size: 0.95rem; margin: 0 0 1.1rem; } .sc-event-price strong { font-family: "Bricolage Grotesque", sans-serif; } .sc-event-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; } .sc-event-actions .btn { font-size: 0.8rem; padding: 0.6rem 1rem; } /* "Add to Calendar" dropdown — lets the visitor pick Google Calendar (opens a pre-filled event, one click) or an .ics file (Apple Calendar, Outlook, and most other calendar apps open these directly). */ .sc-cal-dropdown { position: relative; display: inline-block; } .sc-cal-toggle { cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; } .sc-cal-toggle .caret { display: inline-block; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform 0.15s ease; } .sc-cal-dropdown.open .sc-cal-toggle .caret { transform: rotate(180deg); } .sc-cal-menu { display: none; position: absolute; top: calc(100% + 0.4rem); left: 0; z-index: 5; min-width: 12rem; background: var(--sc-paper-raised); border: 1px solid var(--sc-line); border-radius: 6px; box-shadow: 0 8px 24px -10px rgba(0,0,0,0.35); padding: 0.4rem; } .sc-cal-dropdown.open .sc-cal-menu { display: block; } .sc-cal-menu a { display: block; padding: 0.55rem 0.7rem; border-radius: 4px; font-family: "Karla", sans-serif; font-size: 0.9rem; font-weight: 600; color: var(--sc-ink); text-decoration: none; } .sc-cal-menu a:hover { background: var(--sc-paper); color: var(--sc-coral); } @media (max-width: 560px) { .sc-event-card { flex-direction: column; gap: 0.6rem; } .sc-event-date { text-align: left; display: flex; align-items: baseline; gap: 0.5rem; } } /* ---- mobile fixes --------------------------------------------------------- */ @media (max-width: 767px) { .navbar-brand img { height: 2.6rem !important; } /* header14 sections (Contact / Performances) put a large logo image next to the text on desktop; on phones that logo was pushing the real content down below the fold, so shrink it instead. */ .header14 .image-wrapper img { max-width: 120px; margin: 0 auto 1.5rem; display: block; } .header14 .text-wrapper { text-align: center; } }