/**
* Theme Name: Sonaar Child
* Description: This is a child theme of Sonaar.
* Author: Sonaar Music
* Template: sonaar
* Version: 4.28.2
*/
/* ==========================================================================
Camerata Notturna — shared styles
Site-wide tokens and rules. Page-specific CSS lives with the code that
renders it (cn-core's assets/css/), but anything shared belongs here.
========================================================================== */
:root {
/*
* One measure for all running text. Sonaar's containers are full width,
* which at desktop sizes gives ~180 characters per line -- roughly triple
* a comfortable reading length. 41em lands near 75 characters and matches
* the concert programme and artist bios, so the site reads consistently.
*/
--cn-measure: 41em;
/*
* The concert column: the cards on /concerts/ and the concert page each one
* opens. Wider than the reading measure because both set a poster beside the
* text, and the two must agree or the page changes width on the way in.
*/
--cn-concert-measure: 900px;
/*
* The content column: the Elementor pages that are mostly body copy --
* About, Donate, Membership. The kit sets every boxed section to 1230px
* site-wide, which the homepage and the concert archive want and a page of
* running text does not. This is the ceiling for a page built out of
* sections; --cn-measure still governs a single uninterrupted run of prose.
*/
--cn-content-width: 960px;
/*
* cn-core's concert.css paints its button in --cn-accent. Point it at
* Sonaar's global colour so a palette change in theme options carries
* through; the fallback matches the present value.
*/
--cn-accent: var(--sr-global-color1, rgb(140, 121, 86));
}
/*
* The rule between sections on a concert page, painted in the same global
* colour as the Elementor divider widget on /concerts/ and the homepage --
* change it in Site Settings and all three follow.
*
* On body, not :root: Elementor puts its kit colours on `.elementor-kit-`,
* which is a body class. A `var()` at :root would find nothing in scope and
* take the fallback every time, quietly cutting the link to Site Settings.
*/
body {
--cn-divider-color: var(--e-global-color-secondary, #54595F);
/* Saved Color #2, the light grey the site wordmark wears. */
--cn-bio-name-color: var(--e-global-color-75b62b8d, #A6A6A7);
}
/* --------------------------------------------------------------------------
The space above a page, below 1159px
Sonaar opens a 70px gap on narrow screens and hangs it off two elements at
once (css/base/_style.scss, one @media block): `.boxed`, the parent's page
wrapper, and `span.heading-t`, an empty span it prints as the first child
of `.page-title`, above the . heading-t is nominally the top half of a
title divider but the base rule gives it `height: 0`, so it draws nothing
and the margin is its whole purpose.
Both are zeroed. The space below the header belongs to the header, which
is an Elementor template and can be adjusted there; a zero-height span
injected ahead of the title is not where that decision should live.
Zeroing one alone does nothing. Neither `.boxed` nor `.page-title` has a
top border or padding, so heading-t's margin collapses straight through
both and lands where `.boxed`'s did -- one 70px gap, never 140, and
removing either leaves the other holding it open.
The breakpoint is copied rather than dropped. Above 1159px the parent sets
no margin at all, so a rule outside the query would be inventing a value
for a width that never had one. Equal specificity settles on source order,
and this sheet declares iron-master as a dependency (functions.php), so it
lands after main.min.css.
Not the page title's own spacing: the divider under the is
`span.heading-b3`, whose margins come from Theme Options
(page_title_divider_margin_top / _bottom) and are set there, not here.
-------------------------------------------------------------------------- */
@media (max-width: 1159px) {
.boxed { margin-top: 0; }
span.heading-t { margin-top: 0; }
}
/* --------------------------------------------------------------------------
The site button
One plate for every call to action: gold, white label, inverting to a white
plate with a black label on hover and on keyboard focus. The design is
/contact/'s Send button (Elementor widget 21938d0 on page 29), which is
also the ticket host's primary button -- so the button a buyer clicks here
is the button waiting on the other side.
`.button` could not be the name. It is Sonaar's own: the parent styles
`a.button`, Theme Options repaints it per event list, and the audio player,
store lists and WooCommerce all wear it. `.cn-button` is additive instead --
put it on anything, including an Elementor button widget's CSS Classes
field, and it brings the whole plate with it.
Two of Send's properties are deliberately not copied. border-radius:100px
and width:27% are set on that one widget and nowhere in the theme, which
makes them a flourish local to the contact form rather than the shape of
the site's buttons; the 2px here is the ticket host's. Its 45px height is
kept, via padding and an explicit line-height -- the host's button is
taller only because it inherits a 34px body line-height, not by intent.
The second selector in each rule is for Sonaar's own buttons, which carry
`.button` too (items/event-sonaar.php, inc/EventRow/ConcertRow.php).
Theme Options loads after this stylesheet and writes
`.sr_it-event-buttons .button` at (0,2,0) and `a.button[href]:hover` at
(0,3,1), both of which beat a lone `.cn-button`. `a.button.cn-button`
scores (0,2,1) and its `[href]:hover` (0,4,1), clearing every one of them.
Margin is the one thing not set here. Sonaar spaces stacked event buttons
4px apart and cn-core's `.cn-event-header__tickets` sets the space above
Purchase Tickets, so whoever places a button still owns its surroundings.
-------------------------------------------------------------------------- */
.cn-button,
a.button.cn-button {
display: inline-block;
vertical-align: top;
padding: 12px 28px;
border: 1px solid var(--cn-accent, rgb(140, 121, 86));
border-radius: 2px;
background-color: var(--cn-accent, rgb(140, 121, 86));
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 20px;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
/* Keyboard focus gets the inversion too, plus the ring the ticket host draws
-- at outline-offset 2px it sits on the black page rather than on either
plate, so it survives the swap. */
.cn-button:hover,
.cn-button:focus-visible,
a.button.cn-button[href]:hover,
a.button.cn-button[href]:focus-visible {
background-color: #fff;
border-color: #fff;
color: #000;
text-decoration: none;
}
.cn-button:focus-visible,
a.button.cn-button[href]:focus-visible {
outline: 2px solid var(--cn-accent, rgb(140, 121, 86));
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
The content column
Put `cn-content-section` in an Elementor section's CSS Classes field and the
section stops at --cn-content-width instead of running out to the kit's
1230px.
On the section itself, not its inner .elementor-container: that narrows the
background along with the content, so a section carrying a background image
or a gradient overlay gets the same column as its text. Constrain the
container instead and the background still runs edge to edge.
One class is enough. Every width rule in Elementor and in the parent theme
targets `> .elementor-container` and never the section element, so there is
nothing here to outscore. Elementor's per-element CSS still wins, which is
what lets a single section be widened from the editor without touching this.
max-width, not width: below the ceiling the section stays fluid, so this
needs no breakpoint of its own.
-------------------------------------------------------------------------- */
.cn-content-section {
max-width: var(--cn-content-width);
margin-inline: auto;
}
/* --------------------------------------------------------------------------
Prose pages (About, Membership, Donate)
Scoped away from .elementor-page: Elementor layouts manage their own
widths and several are deliberately full-bleed.
-------------------------------------------------------------------------- */
body.page:not(.elementor-page) .sr_it-single-post .entry {
max-width: var(--cn-measure);
margin-inline: auto;
}
/* Legacy floated its page photos right at ~275px; same treatment here. */
.cn-page-photo {
float: right;
width: 275px;
max-width: 40%;
margin: 4px 0 20px 25px;
}
.cn-page-photo img {
width: 100%;
height: auto;
display: block;
}
body.page:not(.elementor-page) .entry h2 {
margin-top: 1.8em;
}
body.page:not(.elementor-page) .entry ul {
margin-bottom: 1.4em;
}
/* The PayPal donate button is a bare form; give it room to breathe. */
.cn-donate-button {
margin: 1.8em 0;
}
.cn-donate-button form {
margin: 0;
}
@media (max-width: 600px) {
.cn-page-photo {
float: none;
width: 100%;
max-width: 320px;
margin: 0 0 20px 0;
}
}
/* --------------------------------------------------------------------------
Concert detail page -- Sonaar's Back/share block
parts/share.php prints outside the article, so the block starts at the
container edge while the concert sits in --cn-concert-measure, leaving Back
stranded to the left of everything above it. Same column here. cn-core's
concert.css cannot fix this: .links-block is the parent theme's class.
-------------------------------------------------------------------------- */
body.single-event .links-block {
width: 90%;
max-width: var(--cn-concert-measure);
margin-inline: auto;
}
/* --------------------------------------------------------------------------
Sonaar event list -- date block
items/event.php collapses Sonaar's two-line date (a large "03" over a
small "Oct 2026") into "Oct 03" over "2026". Sonaar sizes .sr-it-date-day
for a two-digit number, so the box needs room for a month name and must
not wrap. Site-wide: the event widget can sit on any page.
-------------------------------------------------------------------------- */
.sr-it-event-date { width: auto; min-width: 0; }
.sr-it-date-day { font-size: 1.75rem; line-height: 1.2; white-space: nowrap; }
/* Uppercase months -- "OCT 03" -- if you want them:
.sr-it-date-day { text-transform: uppercase; } */
/* --------------------------------------------------------------------------
Past Seasons grid -- the gap before Essential Grid hides its own items
The grid is set to hide-markup-before-load, so PHP renders the container
with display:none. Essential Grid then removes that at the *start* of init
-- `_E[a].c.css("display","block")` -- and only hides the items later, in
prepareItemsInGrid, after a deferral (waitForViewport, an
IntersectionObserver). In between, the twelve server-rendered cells paint
raw: a 10px white double border round a transparent placeholder.
Batches that arrive by ajax never show this, because they are injected
into a grid that is already initialised and are hidden before they render.
This is the first page only.
No !important, deliberately. Essential Grid writes inline opacity on each
li -- 0 during prepare, 1 when that item's tween finishes -- and an inline
style outranks this rule, so the handoff happens on its own with nothing
to undo.
Scoped to grid 7 by id: the artist grids are a separate question.
If Essential Grid's JS never runs this leaves the grid hidden, which is
not a new failure mode -- the grid is absolutely positioned by that same
JS and does not render usefully without it.
-------------------------------------------------------------------------- */
#esg-grid-7-1 li { opacity: 0; }