/* ===========================================================================
Cinnamon Catering — content pages.
Home, About, FAQ, Contact and the catering enquiry. Every measurement is
from the 1440px reference width and the comment says what it lands on.
======================================================================== */
/* ---------------------------------------------------------------------------
Home — hero
A 1360 x 750 box, square corners, no shadow, object-fit: contain — so the
slide is letterboxed inside the box rather than cropped, which is what puts
its left edge at x=157 on a 1440px viewport. Previous / Next are real
controls; the design ships them invisible at the box edges.
------------------------------------------------------------------------ */
.cc-hero-wrap { padding-top: 1px; }
.cc-hero {
position: relative;
height: 750px;
width: 100%;
overflow: hidden;
background: #fff;
}
.cc-hero__slide {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
object-fit: contain;
opacity: 0;
/* The live slider's fade: done in about 0.6s. */
transition: opacity 600ms ease;
}
.cc-hero__slide.is-current { opacity: 1; }
/*
* FlexSlider's arrows, as the live slider draws them: a 30px box parked
* 50px outside each edge at opacity 0, sliding 10px inside at 0.7 while the
* pointer is over the slider. The chevron is 80% white with a 1px dark
* shadow - over the white margins of the photos, the shadow is what shows.
*/
.cc-hero__nav {
position: absolute;
top: calc(50% - 23px);
width: 30px;
height: 30px;
padding: 0;
color: rgba(255, 255, 255, 0.8);
filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.3));
opacity: 0;
transition: all 0.3s ease;
}
.cc-hero__nav svg { display: block; width: 30px; height: 30px; }
.cc-hero__nav--prev { left: -50px; }
.cc-hero__nav--next { right: -50px; }
.cc-hero:hover .cc-hero__nav,
.cc-hero__nav:focus-visible { opacity: 0.7; }
.cc-hero:hover .cc-hero__nav--prev,
.cc-hero__nav--prev:focus-visible { left: 10px; }
.cc-hero:hover .cc-hero__nav--next,
.cc-hero__nav--next:focus-visible { right: 10px; }
/* The live slider spans the page less 40px each side (1345 at 1425), not
the 1360 container; the arrows sit 10px inside THAT box. */
@media (min-width: 1024px) {
.cc-hero-wrap.cc-container-wide { max-width: none; padding-inline: 40px; }
}
@media (max-width: 900px) {
.cc-hero { height: 46vw; min-height: 220px; }
}
/* ---------------------------------------------------------------------------
Our Philosophy — the three-column composition.
Measured at 1440px on the HOME page:
left copy right-aligned, ends at x=413
centre coffee bag 170x252 (x=478), beans 144x156 (x=433),
baking 293x348 (x=707)
right copy left-aligned from x=1040
The About page uses the same composition with its own wording and a
different collage arrangement — see .cc-philosophy--about below.
------------------------------------------------------------------------ */
.cc-philosophy {
padding-top: 32px;
padding-bottom: 20px;
}
.cc-philosophy__title {
text-align: center;
font-family: var(--cc-font-display);
font-size: 50px;
font-weight: 400;
line-height: normal;
color: #000;
}
.cc-philosophy__grid {
margin-top: 56px;
display: grid;
align-items: start;
row-gap: 56px;
}
.cc-philosophy__value + .cc-philosophy__value { margin-top: 55px; }
.cc-philosophy__value h3 {
font-family: var(--cc-font-display);
font-size: 30px;
font-weight: 400;
line-height: normal;
color: #000;
}
.cc-philosophy__value p {
margin-top: 15px;
font-size: 19px;
font-weight: 300;
line-height: 28.5px;
color: #000;
}
.cc-philosophy__col { text-align: center; }
/* The collage is absolutely positioned at the reference width and simply
stacked below it — the positions only mean anything at 1440. */
.cc-collage { display: none; }
.cc-collage-stack {
display: flex;
justify-content: center;
gap: 16px;
max-width: 100%;
}
/*
* ⚠ THESE TWO WERE THE HORIZONTAL SCROLL ON MOBILE.
*
* 170px + 212px + a 16px gap is 398px, and a phone is 375px. Fixed widths in
* a flex row do not shrink on their own - and a flex item will not go below
* its content width at all without min-width: 0 - so the pair pushed 23px
* past the viewport and every page on the site scrolled sideways, because the
* document is as wide as its widest element.
*
* They keep their proportions: flex-basis holds the measured ratio, cover
* crops rather than distorts, and above 1024px this whole block is display:
* none anyway, so the desktop collage is untouched.
*/
.cc-collage-stack img {
object-fit: cover;
height: 252px;
min-width: 0;
}
.cc-collage-stack .cc-collage-stack__bag { flex: 0 1 170px; width: 170px; }
.cc-collage-stack .cc-collage-stack__bake { flex: 0 1 212px; width: 212px; }
@media (min-width: 1024px) {
.cc-philosophy__grid {
margin-top: 0;
grid-template-columns: 373px 627px 360px;
row-gap: 0;
}
.cc-philosophy__col--left {
margin-top: 169px;
text-align: right;
}
.cc-philosophy__col--right {
margin-top: 169px;
text-align: left;
}
.cc-philosophy__col--left p { margin-left: auto; max-width: 260px; }
.cc-philosophy__col--right p { max-width: 260px; }
/*
* Home only: each live paragraph has its own box (27 Sep 2026) - 267, 281,
* 207 and 255px - which is why "at the crack / at dawn" and "impact on
* the / world" break where they do there. 2-3px higher than 15px put them.
*/
.cc-philosophy:not(.cc-philosophy--about) .cc-philosophy__value p { margin-top: 12.5px; }
/* ...and the second row's heading kept where it was: 2.5px more above it
for the 2.5px taken out of the first paragraph's margin. */
.cc-philosophy:not(.cc-philosophy--about) .cc-philosophy__value + .cc-philosophy__value { margin-top: 57.5px; }
.cc-philosophy:not(.cc-philosophy--about) .cc-philosophy__value:nth-child(2) p { margin-top: 12px; }
.cc-philosophy:not(.cc-philosophy--about) .cc-philosophy__col--left .cc-philosophy__value:nth-child(1) p { max-width: 267px; }
.cc-philosophy:not(.cc-philosophy--about) .cc-philosophy__col--left .cc-philosophy__value:nth-child(2) p { max-width: 281px; }
.cc-philosophy:not(.cc-philosophy--about) .cc-philosophy__col--right .cc-philosophy__value:nth-child(1) p { max-width: 207px; }
.cc-philosophy:not(.cc-philosophy--about) .cc-philosophy__col--right .cc-philosophy__value:nth-child(2) p { max-width: 255px; }
.cc-collage {
display: block;
position: relative;
margin-left: 20px;
margin-top: 51px;
height: 408px;
width: 567px;
}
.cc-collage img { position: absolute; object-fit: cover; }
.cc-collage__bag { left: 45px; top: 0; height: 252px; width: 170px; }
.cc-collage__beans { left: 0; top: 252px; height: 156px; width: 144px; }
/* The live photo is a `cover` background anchored top-left (0% 0%), so
it shows the top of the picture, not the middle. */
.cc-collage__bake { left: 274px; top: 60px; height: 348px; width: 293px; object-position: 0 0; }
.cc-collage-stack { display: none; }
}
/* ---------------------------------------------------------------------------
About — Our Story
Full-bleed #A15C4B band; owners photo 600x653 at x=90,y=121; "Our Story"
Cormorant 100px white; body Work Sans 18px/300 white from x=744.
------------------------------------------------------------------------ */
.cc-story { background: var(--cc-cinnamon-600); }
.cc-story__inner {
position: relative;
padding-block: 48px;
}
.cc-story__photo {
margin-inline: auto;
height: auto;
width: 100%;
max-width: 600px;
object-fit: contain;
}
.cc-story__body { margin-top: 40px; }
.cc-story__title {
text-align: center;
font-family: var(--cc-font-display);
font-size: 64px;
font-weight: 400;
line-height: normal;
color: #fff;
}
.cc-story__text {
margin-top: 32px;
display: flex;
flex-direction: column;
}
.cc-story__text p {
font-size: 19px;
font-weight: 300;
line-height: 38px;
color: #fff;
}
/* Every line is bulleted: the marker hangs 16px left of the text and wrapped
lines stay flush with the text, matching live's 770/786 bullet/text
columns. */
.cc-story__line {
position: relative;
display: block;
}
.cc-story__line::before {
content: "\2022";
position: absolute;
left: -16px;
top: 0;
}
@media (min-width: 1024px) {
.cc-story__inner { height: 895px; padding-block: 0; }
.cc-story__photo {
position: absolute;
left: 90px;
top: 121px;
margin-inline: 0;
height: 653px;
width: 600px;
}
.cc-story__body {
position: absolute;
left: 744px;
top: 220px;
margin-top: 0;
width: 560px;
}
/* The heading is centred over a NARROWER box than the body text: 396px
starting at x=771, i.e. 13px left of this 560px column, so its centre
lands at 969 rather than 1064. nowrap is load-bearing — our Cormorant
sets "Our Story" a few px wider than the reference's, so a bare 396px box
breaks it onto two lines. Centring is what matters, not the box. */
.cc-story__title {
margin-left: -13px;
width: 396px;
white-space: nowrap;
font-size: 100px;
}
/* The live bullets are 546px wide (27 Sep 2026) - measured then with the
real fonts; 523 broke "passion for perfection and" and "hospitals in
Melbourne." a word early - and start 7px higher. */
.cc-story__text { width: 546px; margin-top: 25px; }
}
/* About's philosophy band differs from home's: more headroom, a wider gap
between the two values, and its own collage arrangement (the beans sit at
x=597 rather than x=433). */
.cc-philosophy--about { padding-top: 128px; padding-bottom: 0; }
@media (min-width: 1024px) {
.cc-philosophy--about .cc-philosophy__col--left,
.cc-philosophy--about .cc-philosophy__col--right { margin-top: 188px; }
/* Measured with the real fonts (27 Sep 2026): the second row's
headings 161px below the first, not 189; the text 51px under its
heading, not 54; and the first paragraph narrow enough to break
"All our ingredients come / from local suppliers." as the live one. */
.cc-philosophy--about .cc-philosophy__value + .cc-philosophy__value { margin-top: 58px; }
.cc-philosophy--about .cc-philosophy__value p { margin-top: 12px; }
.cc-philosophy--about .cc-philosophy__col--left p,
.cc-philosophy--about .cc-philosophy__col--right p { max-width: 262px; }
.cc-philosophy--about .cc-philosophy__col--left .cc-philosophy__value:nth-child(1) p { max-width: 222px; }
.cc-philosophy--about .cc-collage {
margin-left: 65px;
margin-top: 70px;
height: 451px;
width: 522px;
}
.cc-philosophy--about .cc-collage__bag { left: 0; top: 0; height: 251px; width: 170px; }
.cc-philosophy--about .cc-collage__bake { left: 229px; top: 60px; height: 341px; width: 293px; }
.cc-philosophy--about .cc-collage__beans { left: 119px; top: 295px; height: 156px; width: 144px; }
}
/* ---------------------------------------------------------------------------
About — What we offer (the full 66-item menu)
pb is 65px, measured: the reference leaves 81px between the last menu line
and the footer, and the last item's own 15px padding plus its rule account
for the rest. 122px left the page 57px long.
------------------------------------------------------------------------ */
.cc-offer {
/* +0.5 and -1 below: the live rows sit half a pixel from ours either
side of each section heading, and alternate rows rounded apart. */
padding-top: 95.5px;
padding-bottom: 64.5px;
}
.cc-offer__title {
text-align: center;
font-family: var(--cc-font-display);
font-size: 50px;
font-weight: 400;
line-height: normal;
color: #000;
}
.cc-offer__sections {
margin-top: 60px;
display: flex;
flex-direction: column;
gap: 70px;
}
/* Cormorant 30px/700 ITALIC over a 1.6px dotted rule the full 1200px of the
block, then 36px to the items below (not 25 — that was measured wrong once
and cost a section-by-section drift). */
.cc-offer__heading {
border-bottom: 1.6px dotted var(--cc-cinnamon-600);
font-family: var(--cc-font-display);
font-size: 30px;
font-weight: 700;
font-style: italic;
line-height: normal;
color: var(--cc-cinnamon-600);
}
/* Column-major flow. Two 585px columns on a 615px pitch (col 1 at x=120,
col 2 at x=735) filling the 1200px block. Each item carries a 0.8px rule the
full 585px, but its text wraps at 462px — hence the inner width.
The split is STATED, not derived. A CSS `columns-2` balances the columns by
height, which put 3 items in column one of Doctor Lunch Packs where the
reference puts 4 — one difference that cost 284px of page height. The
reference splits every section at ceil(n/2) regardless of the resulting
heights; verified on all 11 sections. Below 1024 the columns stack, which
preserves the original order because the split is column-major. */
.cc-offer__cols {
margin-top: 35px;
display: flex;
flex-direction: column;
}
.cc-offer__item {
border-bottom: 0.8px solid rgba(102, 102, 102, 0.3);
padding-block: 15px;
}
/* The sans family is required, not redundant: the base layer puts the display
face on every h1–h4, so omitting a family here silently yields Cormorant.
Target is Work Sans 18px/700. */
.cc-offer__item h4 {
font-family: var(--cc-font-sans);
font-size: 19px;
font-weight: 700;
line-height: 38px;
color: var(--cc-cinnamon-600);
}
.cc-offer__item p {
font-size: 19px;
font-weight: 400;
line-height: 38px;
color: var(--cc-cinnamon-600);
}
@media (min-width: 1024px) {
.cc-offer__sections { padding-inline: 80px; }
.cc-offer__cols {
width: 1200px;
flex-direction: row;
align-items: flex-start;
column-gap: 30px;
}
.cc-offer__col { width: 585px; }
.cc-offer__item > * { max-width: 462px; }
}
/* ---------------------------------------------------------------------------
FAQ
Measured at 1440px: heading Work Sans 700/40px black at x=120,y=228; rows
x=120 w=1200 h=62 on a 93px pitch; question Cormorant 30px #A15C4B at x=136.
Rows are collapsed by default, as designed.
------------------------------------------------------------------------ */
.cc-faq {
padding-top: 127px;
padding-bottom: 99px;
}
/* Work Sans, not the Cormorant the base layer gives an h1 by default. */
.cc-faq__title {
font-family: var(--cc-font-sans);
font-size: 40px;
font-weight: 700;
/* The live heading's line is 47px, not 80: its letters sit 17px higher. */
line-height: 47px;
color: #000;
}
/* Measured off the live FAQ (27 Sep 2026): rows 69px tall on a 92.8px
pitch from y=352, #F2F2F2; the button a 32px #875B5A disc 16px in from
the right and 18px down, holding a 24px chevron. */
.cc-faq__list {
margin-top: 77px;
display: flex;
flex-direction: column;
gap: 23.8px;
}
.cc-faq__item { background: transparent; }
/* Only the question bar is grey on the live page; an opened answer sits on
the white below it. */
.cc-faq__q { background: #F2F2F2; }
.cc-faq__q {
display: flex;
min-height: 69px;
cursor: pointer;
list-style: none;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-inline: 16px;
font-family: var(--cc-font-display);
font-size: 30px;
font-weight: 400;
line-height: normal;
color: var(--cc-cinnamon-600);
}
.cc-faq__q::-webkit-details-marker { display: none; }
.cc-faq__chevron {
display: grid;
height: 32px;
width: 32px;
flex-shrink: 0;
place-items: center;
border-radius: 999px;
background: #875B5A;
position: relative;
top: -1px;
color: #fff;
transition: transform 0.2s;
}
.cc-faq__item[open] .cc-faq__chevron { transform: rotate(180deg); }
.cc-faq__a {
display: flex;
flex-direction: column;
/* Live: 16px in, the lines on a 36px pitch with nothing between them,
and 17px more under the last. */
gap: 0;
padding: 16px 16px 33px;
}
.cc-faq__text { display: flex; flex-direction: column; }
/* The delivery-zones answer, as the live page lays it out: the map first,
200 x 221 at 16px in, the words 24px to its right, and one empty 36px
line between its two sentences. */
.cc-faq__a--map { flex-direction: row; align-items: flex-start; gap: 24px; padding-bottom: 16px; }
.cc-faq__a--map .cc-faq__map { order: -1; margin-top: 0; flex: none; }
.cc-faq__a--map .cc-faq__text p + p { margin-top: 36px; }
/* The live page keeps this answer's own spacing - the leading space and the
double space in "Dandenong to" - and the approved copy has both. */
.cc-faq__a--map .cc-faq__text p { white-space: pre-wrap; }
.cc-faq__a p {
font-size: 19px;
font-weight: 300;
line-height: 38px;
color: var(--cc-cinnamon-600);
}
.cc-faq__map {
margin-top: 8px;
height: 221px;
width: 200px;
object-fit: contain;
}
@media (min-width: 1024px) {
.cc-faq__title,
.cc-faq__list { padding-inline: 80px; }
}
/* ---------------------------------------------------------------------------
Contact
"Come on over" Cormorant Garamond 140px #A15C4B centred at y=222; photo
313 x 227 centred at y=437; hours Work Sans 18px/300 #A15C4B centred.
There is no contact form and no address block — only these three.
------------------------------------------------------------------------ */
.cc-contact {
padding-top: 121px;
padding-bottom: 162px;
}
.cc-contact__title {
text-align: center;
font-family: var(--cc-font-display);
font-size: 64px;
font-weight: 400;
line-height: normal;
color: var(--cc-cinnamon-600);
}
.cc-contact__photo {
margin-inline: auto;
margin-top: 45px;
height: 227px;
width: 313px;
object-fit: cover;
}
.cc-contact__hours {
margin-top: 61px;
font-size: 19px;
font-weight: 300;
line-height: 38px;
color: var(--cc-cinnamon-600);
}
.cc-contact__hours > * + * { margin-top: 10px; }
/* The phone numbers and the email, under the hours, in the same type. */
.cc-contact__reach {
margin-top: 24px;
font-size: 19px;
font-weight: 300;
line-height: 38px;
text-align: center;
color: var(--cc-cinnamon-600);
}
.cc-contact__reach a { color: inherit; }
.cc-contact__reach a:hover { text-decoration: underline; }
.cc-contact__line { margin: 0; }
.cc-contact__hours-row {
display: flex;
align-items: baseline;
justify-content: center;
gap: 3.2px;
}
/* As the live page sets them (27 Sep 2026): two CENTRED columns, 126.1px
and 186px, 3.2px apart - as the footer's, at this page's own widths. */
.cc-contact__hours-row dt { width: 126.1px; text-align: center; margin: 0; }
.cc-contact__hours-row dd { width: 186px; text-align: center; margin: 0; }
.cc-contact__hours-line { text-align: center; }
@media (min-width: 640px) { .cc-contact__title { font-size: 96px; } }
@media (min-width: 1024px) { .cc-contact__title { font-size: 140px; } }
/* ---------------------------------------------------------------------------
Catering enquiry
------------------------------------------------------------------------ */
.cc-enquiry {
padding-top: 72px;
padding-bottom: 110px;
max-width: 760px;
margin-inline: auto;
}
.cc-enquiry__intro {
margin-top: 18px;
text-align: center;
font-size: 17.5px;
font-weight: 300;
line-height: 1.7;
color: var(--cc-muted);
}
.cc-enquiry__form { margin-top: 44px; }
.cc-enquiry__actions {
margin-top: 32px;
display: flex;
justify-content: flex-end;
}
/* The honeypot. Never `display: none` — some bots skip hidden inputs, and a
real user must never see or tab into it either. */
.cc-honeypot {
position: absolute;
left: -9999px;
top: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* ---------------------------------------------------------------------------
Announcements — the site-wide banner and the /shop disclaimer popup.
The popup is styled as live's flat terracotta panel with NO dimmed backdrop,
500px wide, and is scoped to /shop only (verified against the live DOM:
/, /about, /faq and /contact do not carry it).
------------------------------------------------------------------------ */
.cc-banner {
background: var(--cc-cinnamon-600);
color: #fff;
text-align: center;
padding: 10px 20px;
font-size: 15.5px;
font-weight: 300;
}
.cc-banner a { text-decoration: underline; }
/*
* ⚠ ANCHORED TO THE BOTTOM, NOT 90px FROM THE TOP.
*
* The notice itself is sound — site.js remembers the dismissal per version
* in localStorage and degrades safely where storage is blocked, so a
* visitor sees it once. The problem was purely where it sat: fixed near the
* top of the viewport, it covered the first row of the menu, and being
* fixed it kept covering whatever scrolled under it until clicked. On
* /shop/ that is three category tiles hidden behind a sentence telling the
* customer the photographs are illustrative.
*
* A disclaimer is worth reading and worth nobody's first click. At the
* bottom it is still unmissable and no longer stands in front of the thing
* the visitor came for.
*/
/*
* ⚠ SUPERSEDED 27 Sep 2026 - the business wants the site 1:1 with the live
* one, so the note above is history: the panel is back where the live page
* puts it, centred in the window, measured there. 500 x 329 at (460, 285.5)
* in a 1440 x 900 window; "Hey There!" in 50px bold Cormorant (synthesised
* bold, as there - neither site has a bold cut), the sentence 18px on 36px
* lines centred in 416.6px; a 27px translucent disc with a black cross 12px
* in from the corner; and the whole window tinted rgba(241, 11, 11, 0.024)
* behind it, which is the faint pink band the live /shop shows. Clicking
* outside closes it, as the live mask does.
*/
.cc-popup {
position: fixed;
left: 50%;
top: 50%;
transform: translate(calc(-50% - 2.5px), -50%);
z-index: 70;
width: min(500px, calc(100vw - 32px));
background: var(--cc-cinnamon-600);
color: #fff;
padding: 20px 10px;
text-align: center;
box-shadow: 0 0 0 100vmax rgba(241, 11, 11, 0.024);
}
.cc-popup[hidden] { display: none; }
.cc-popup h2 {
margin-top: 52px;
font-family: var(--cc-font-display);
font-size: 50px;
font-weight: 700;
line-height: 64.8px;
color: #fff;
}
.cc-popup p {
max-width: 416.6px;
margin: 9.6px auto 54.7px;
font-size: 19px;
font-weight: 300;
line-height: 38px;
}
.cc-popup__close {
position: absolute;
top: 12px;
right: 12px;
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
color: #000;
}
.cc-popup__close svg { display: block; width: 15px; height: 15px; }
/* ===========================================================================
Tables inside page content
⚠ THERE WAS NO STYLING FOR THESE AT ALL, so a table typed into a page fell
back to browser defaults: centred bold headings over left-aligned cells, no
rules, no width. The delivery-zone table on /terms/ is the one the site has
today, and it looked nothing like the cart, the account screens, the order
details or the invoice — every other table on the site shares one idiom and
this one sat outside it.
The heading alignment is the part that reads as a fault rather than a
difference: a browser centres | and left-aligns | , so every column
heading sat off-centre from its own column. Setting both to left is the fix;
it is also what the account tables do.
⚠ SCOPED TO .cc-container-page ON PURPOSE. page.php gives content pages
`cc-container-page` and store pages `cc-container-shop`, and pages.css is
enqueued AFTER store.css — so a bare `.cc-page-body th` here would tie on
specificity with `.woocommerce-MyAccount-content th` and win on order,
quietly undoing the orders table. The container keeps this to prose pages;
:not(.shop_table) is the second belt.
======================================================================== */
.cc-container-page .cc-page-body table:not(.shop_table) {
width: 100%;
border-collapse: collapse;
margin: 22px 0 28px;
font-size: 16.5px;
}
.cc-container-page .cc-page-body table:not(.shop_table) th {
text-align: left;
font-family: var(--cc-font-accent);
font-size: 14px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cc-muted);
font-weight: 500;
padding: 0 16px 10px 0;
border-bottom: 1px solid var(--cc-line);
}
.cc-container-page .cc-page-body table:not(.shop_table) td {
padding: 13px 16px 13px 0;
border-bottom: 1px solid var(--cc-line);
vertical-align: top;
}
/* The last column ends on the text block's edge, not 16px short of it. */
.cc-container-page .cc-page-body table:not(.shop_table) th:last-child,
.cc-container-page .cc-page-body table:not(.shop_table) td:last-child {
padding-right: 0;
}
/* ---------------------------------------------------- Shop closed notice
*
* Rendered site-wide by cinnamon_closed_notice() while the business has
* turned orders off. Set on the same full-width strip as .cc-banner, which
* sits directly below it, but in the error red the storefront already uses
* for a refusal rather than the brand terracotta an announcement gets — this
* is not news, it is a door that is shut.
*/
.cc-notice--closed {
background: #FBEAEA;
border-bottom: 1px solid #9B2C2C;
color: #1F1A17;
text-align: center;
padding: 12px 20px;
font-size: 15.5px;
font-weight: 400;
}
|