/* =====================================================================
Yamas Greek Eatery — WINTER / HOLIDAY SEASONAL SKIN
Loaded AFTER css/site.css; overrides only. Delete the one and the
site is back to its year-round self — that reversibility is the point, so
nothing in here edits site.css and nothing in here changes layout or copy.
css/fall.css and js/fall-leaves.js are deliberately LEFT ON DISK. The
autumn skin took real work and will be wanted again next October; the
season is chosen by which the pages carry, not by which files exist.
THE IDEA, and why it is not a mall grotto. Winter here gets the same
half-Greek, half-New-Hampshire split that the autumn leaves used:
· BLUE and SILVER are the Greek half, and they are already the brand.
The wordmark's royal blue IS a winter blue, and the Aegean in January
is slate water and whitewashed stone. So the season arrives by making
the page COLD — the year-round off-white has a faint Aegean cast
already, and pushing it to frost and iced-silver shifts every page at
once, before a single ornament is noticed.
· GREEN and RED are the holiday half, and they are New England in
December: balsam and holly, which grow outside both restaurants.
That split is what lets all four of Jake's colours in without the site
turning into wrapping paper. Each has ONE job and keeps it:
blue — primary action. Unchanged. It is the mark, and the mark does
not change with the season (same rule as the autumn skin).
green — the accent role: kickers, rules, card top edges, tags.
red — emphasis only, and rare. Announcement badges, a liked comment,
the warm end of the one decorative gradient.
silver — surfaces and hairlines, which is most of the page's area and
none of its attention.
CONTRAST. Measured, not eyeballed (WCAG AA — 4.5:1 for text, 3:1 for
non-text), against the two new surfaces frost #F4F8FC and snow #E9F0F7:
evergreen #1F5A3D 7.60 on frost · 7.06 on snow · white on it 8.11
holly #A41F2C 7.00 on frost · 6.50 on snow · white on it 7.47
royal #27498F 8.08 on frost · 7.50 on snow · white on it 8.62
slate #1E2A3A 13.60 on frost · 12.62 on snow
ink-soft #5A6878 5.34 on frost · 4.96 on snow
midnight #112546 white on it 15.25
glacier #3E86BC 3.68 on frost · 3.42 on snow — NON-TEXT ONLY, which
is exactly what site.css uses --sky for (focus rings). It
clears the 3:1 bar for a ring and would fail as type.
Ice #7FB4D8 measures 2.09 and is DECORATIVE ONLY — gradients and snow,
never type and never a focus ring.
===================================================================== */
:root {
/* ---- the winter palette, named for what it is ---- */
--win-evergreen: #1F5A3D; /* balsam — accents, kickers, rules */
--win-pine: #16412C; /* the same tree in shadow — hover */
--win-holly: #A41F2C; /* holly berry — emphasis, rare */
--win-berry: #7E1620; /* the berry darker, for white type on red */
--win-midnight: #112546; /* a January night — the footer */
--win-frost: #F4F8FC; /* the page */
--win-snow: #E9F0F7; /* alternating sections */
--win-silver: #C9D6E2; /* hairline on snow, and the metal in gradients */
--win-silver-lo: #DFE7EF; /* hairline on white */
--win-glacier: #3E86BC; /* focus rings — non-text, 3:1 clear */
--win-ice: #7FB4D8; /* DECORATIVE ONLY, see above */
/* ---- mapped onto the year-round token names ----
The names still say "aegean" and "parchment". Left deliberately, for the
same reason the autumn skin left them: renaming them would mean editing
site.css, and then this file could no longer be deleted in one move. The
names describe the ROLE, and the role is unchanged. */
--aegean: var(--win-evergreen); /* kickers, rules, card top borders, tags */
--sky: var(--win-glacier); /* focus rings only — non-text */
/* --blue and --blue-deep are NOT repointed. The autumn skin had to move the
primary action off blue because terracotta was the season; winter's
season IS blue, so the buttons, links, prices and active nav stay exactly
the royal blue of the wordmark. One less thing changing is the point. */
--blue-deep: #16315C; /* a half-step deeper for the winter hover */
/* Surfaces. This is the change that does the most work: the year-round page
is already a cool off-white (#F5F8FB), so frost is a small nudge — but
--parchment, the alternating section, goes from WARM #F5F1ED to iced
silver, and that lands on every other band of every page at once. */
--page: var(--win-frost);
--parchment: var(--win-snow);
--paper: #FFFFFF; /* cards stay pure white — snow, and they lift off the frost */
--stone: var(--win-silver); /* hairline on snow */
--line: var(--win-silver-lo); /* hairline on white */
/* Type goes cold. The year-round browns are the warmest thing on the site
and the one most worth moving: a slate-navy heading over a frost page is
the whole season in one substitution. */
--brown: #1E2A3A; /* display headings */
--ink: #33404F; /* body copy */
--ink-soft: #5A6878; /* secondary text — holds 4.96:1 on snow */
/* The glass card loses its cream cast and becomes ice rather than paper. */
--glass-tint: rgb(250 253 255 / .60);
--glass-tint-strong: rgb(250 253 255 / .76);
--glass-border-lo: rgb(17 37 70 / .10);
--shadow: 0 10px 34px rgba(17, 37, 70, .13);
}
/* ---- the footer carries the season hardest, so it gets the deepest note ----
site.css builds it from --blue-deep, which here is a hover colour. Midnight,
with white type at 15.25:1. */
.site-footer { background: var(--win-midnight); position: relative; }
/* ---- snow piled on the footer's top edge ----
Drawn INSIDE the footer, not above it: the thing sitting above the footer is
a different colour on every page (a photo banner on the home page, iced
silver elsewhere), so a drift coloured to match the page would be wrong
somewhere. Snow is white whatever it lands on, so the drift is white and
lands on the midnight. 28px tall and it reads at a glance without eating
the footer's first line. */
.site-footer::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 30px;
z-index: 1; pointer-events: none;
/* 🔴 The first path's six curve segments summed to 1080 of the 1440-wide
viewBox, so the drift stopped a quarter of the way across and the rest of
the footer's top edge was a flat step. preserveAspectRatio='none' hides
the mistake in the markup and shows it on the page. Six segments of
exactly -240 now, which is the whole width. */
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v12c-80 10-160 2-240-3s-160-10-240-2-160 14-240 12-160-12-240-14-160 6-240 12-160 10-240 5V0z' fill='%23F7FBFF'/%3E%3C/svg%3E")
center top / 100% 30px no-repeat;
}
/* The footer's parallax drift is on .top; keep the content above the snow. */
.site-footer .top, .site-footer .legal { position: relative; z-index: 2; }
/* ---- the hero at night ----
The scrim cools from a near-neutral brown to a January blue. Small change,
large effect: every hero on the site is suddenly lit by winter.
NOT DONE, and the reason matters: the autumn skin put a warm grade on the
hero photographs themselves (saturate + a touch of sepia). The winter
equivalent would be a COOL grade, and cool is exactly what food photography
cannot take — warming a gyro makes it look better, cooling it makes it look
refrigerated. So the light in the room changes and the food does not. */
.hero .bg::after {
background: linear-gradient(180deg,
rgba(10, 22, 44, .46) 0%,
rgba(10, 22, 44, .30) 45%,
rgba(12, 26, 50, .62) 100%);
}
/* ---- the one seasonal flourish: the snowflake rule ----
The year-round rule under a section heading is a 54px bar in the accent
colour. Here it becomes a thin silver line that breaks around a single
six-armed flake, with the line itself running evergreen → silver → holly:
the season's four colours in one 150px element, repeated down every page.
One motif used everywhere beats ornaments scattered on every surface —
same discipline as the autumn skin's harvest gradient. */
.section-head .rule,
.menu-cat .rule {
width: 150px; height: 18px; border-radius: 0;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%231F5A3D' stroke-width='1.5' stroke-linecap='round' fill='none'%3E%3Cpath d='M12 2.6v18.8M3.86 7.3l16.28 9.4M3.86 16.7l16.28-9.4'/%3E%3Cpath d='M12 6.4l2.5-2.5M12 6.4L9.5 3.9M12 17.6l2.5 2.5M12 17.6l-2.5 2.5'/%3E%3Cpath d='M7.2 9.2 7 5.7M7.2 9.2 4.1 10.9M16.8 14.8l.2 3.5M16.8 14.8l3.1-1.7'/%3E%3Cpath d='M7.2 14.8 7 18.3M7.2 14.8 4.1 13.1M16.8 9.2 17 5.7M16.8 9.2l3.1 1.7'/%3E%3C/g%3E%3C/svg%3E")
center center / 18px 18px no-repeat,
linear-gradient(90deg,
rgba(31, 90, 61, 0) 0%, var(--win-evergreen) 16%, var(--win-silver) 38%,
rgba(201, 214, 226, 0) 41%, rgba(201, 214, 226, 0) 59%,
var(--win-silver) 62%, var(--win-holly) 84%, rgba(164, 31, 44, 0) 100%)
center center / 100% 2px no-repeat;
}
/* site.css spaces these as 2px bars (18px above / 30px below). The flake is
18px tall, so give back the 16px it added or the headings drift apart. */
.section-head .rule { margin: 10px auto 0; }
.menu-cat .rule { margin: 0 auto 22px; }
/* ---- a ribbon under the header ----
The header's year-round 1px hairline becomes a 3px holiday ribbon: balsam
and holly separated by silver. It is the only ornament on the site's own
chrome, it is 3px tall, and it runs under a bar that is otherwise untouched
— the wordmark is not decorated, for the same reason it is not recoloured. */
.site-header { border-bottom-color: var(--win-silver); }
.site-header::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
pointer-events: none;
/* the separator is a DEEPER silver than the hairline token: #C9D6E2 sits on
a near-white header and simply read as a gap, which turned the ribbon into
green and red dashes. Measured against the header, not guessed. */
background: repeating-linear-gradient(90deg,
var(--win-evergreen) 0 30px,
#A9BDD0 30px 42px,
var(--win-holly) 42px 72px,
#A9BDD0 72px 84px);
}
/* ---- badges pick up holly and balsam instead of the two blues ---- */
.badge.special { background: rgba(31, 90, 61, .13); color: var(--win-evergreen); }
.badge.announcement { background: rgba(164, 31, 44, .11); color: var(--win-holly); }
/* Menu price dots — iced silver rather than wheat. */
.mi .dots { border-bottom-color: #BFCEDC; }
/* The comment "liked" state was a warm red already; move it onto the holly so
the one red on the site is the seasonal one. */
.pc-like.on, .pc-like.on:hover { color: var(--win-holly); }
/* The specials band's "all locations" highlight is --blue, which is
still blue here; the band's heading and rule carry the season instead. */
/* ---- a fir sprig in the hero's two top corners ---------------------------
Jake: "EVEN more holiday cheer, not tacky - tasteful". A corner sprig is
the restrained version of a garland, and it is already this brand's own
move: the Nashua one-pager frames its header with olive branches. Winter
swaps the olive for balsam and hangs three holly berries on it.
Drawn, not hand-written. The needles are generated along three bezier
stems so they fan the way needles actually grow — toward the tip, never
straight out — because a hand-placed needle field is the same trap the
reindeer were, and it was rendered at 2.6x and looked at before it landed
here.
It carries a white rim for exactly the sleigh's reason: heroes on this site
run from a white-brick wall to a near-black bar, and a dark green sprig on
a dark photograph is a smudge. The rim is what makes one drawing work on
every hero.
It sits ABOVE the headline card (z-index 3), which is safe only because on
a wide screen the card starts well below these corners. The moment the card
climbs — under 900px — the sprigs go, rather than being half-covered and
looking like a mistake. */
.hero::before,
.hero::after {
content: ""; position: absolute; top: 0; z-index: 3;
width: 180px; height: 150px; pointer-events: none; opacity: .93;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 150' width='180' height='150'%3E%3Cg stroke='%2316412C' stroke-width='2.6' stroke-linecap='round' fill='none' opacity='.95'%3E%3Cpath d='M2.0 2.0 C46.0 16.0 86.0 40.0 126.0 86.0'/%3E%3Cpath d='M6.0 6.0 C30.0 40.0 44.0 76.0 52.0 124.0'/%3E%3Cpath d='M4.0 4.0 C54.0 8.0 104.0 14.0 150.0 22.0'/%3E%3C/g%3E%3Cg stroke='%231F5A3D' stroke-width='1.9' stroke-linecap='round' fill='none'%3E%3Cpath d='M15.1 6.5 l14.1 23.0 M15.1 6.5 l25.7 -8.1 M22.3 9.3 l12.5 21.7 M22.3 9.3 l24.1 -6.9 M29.5 12.4 l11.1 20.8 M29.5 12.4 l22.9 -5.8 M36.7 15.7 l9.9 20.0 M36.7 15.7 l21.8 -4.8 M43.8 19.2 l8.7 19.2 M43.8 19.2 l20.7 -3.8 M50.8 23.0 l7.7 18.4 M50.8 23.0 l19.7 -3.0 M57.8 27.1 l6.7 17.6 M57.8 27.1 l18.7 -2.2 M64.7 31.5 l5.7 16.8 M64.7 31.5 l17.6 -1.5 M71.6 36.2 l4.9 15.9 M71.6 36.2 l16.6 -0.9 M78.5 41.2 l4.1 15.1 M78.5 41.2 l15.6 -0.3 M85.3 46.5 l3.3 14.3 M85.3 46.5 l14.6 0.2 M92.2 52.1 l2.7 13.4 M92.2 52.1 l13.6 0.6 M99.0 58.2 l2.1 12.5 M99.0 58.2 l12.7 1.0 M105.7 64.5 l1.6 11.6 M105.7 64.5 l11.7 1.3 M112.5 71.3 l1.2 10.8 M112.5 71.3 l10.7 1.5 M119.2 78.4 l0.8 9.9 M119.2 78.4 l9.8 1.6 M126.0 86.0 l0.5 9.0 M126.0 86.0 l8.8 1.7 M12.9 16.3 l-2.2 22.9 M12.9 16.3 l21.7 7.7 M17.7 24.1 l-2.7 20.8 M17.7 24.1 l19.5 7.7 M22.2 32.0 l-3.2 19.1 M22.2 32.0 l17.8 7.8 M26.4 40.1 l-3.7 17.7 M26.4 40.1 l16.3 7.8 M30.3 48.4 l-4.0 16.3 M30.3 48.4 l14.8 7.8 M33.9 56.9 l-4.3 15.0 M33.9 56.9 l13.5 7.8 M37.2 65.6 l-4.5 13.7 M37.2 65.6 l12.2 7.6 M40.3 74.5 l-4.6 12.4 M40.3 74.5 l11.0 7.4 M43.1 83.8 l-4.6 11.3 M43.1 83.8 l9.8 7.1 M45.6 93.3 l-4.5 10.1 M45.6 93.3 l8.8 6.8 M48.0 103.2 l-4.3 9.1 M48.0 103.2 l7.7 6.4 M50.1 113.4 l-4.1 8.0 M50.1 113.4 l6.8 5.9 M52.0 124.0 l-3.8 7.0 M52.0 124.0 l5.9 5.4 M19.0 5.3 l14.6 13.6 M19.0 5.3 l16.8 -10.9 M31.2 6.4 l13.1 12.4 M31.2 6.4 l15.2 -9.7 M43.5 7.6 l12.0 11.5 M43.5 7.6 l14.1 -8.9 M55.7 8.9 l11.0 10.7 M55.7 8.9 l13.1 -8.1 M67.8 10.2 l10.1 10.0 M67.8 10.2 l12.1 -7.4 M79.8 11.7 l9.2 9.3 M79.8 11.7 l11.2 -6.7 M91.8 13.2 l8.4 8.5 M91.8 13.2 l10.3 -6.1 M103.7 14.8 l7.6 7.9 M103.7 14.8 l9.5 -5.5 M115.5 16.5 l6.8 7.2 M115.5 16.5 l8.6 -4.9 M127.1 18.2 l6.1 6.5 M127.1 18.2 l7.8 -4.3 M138.6 20.1 l5.4 5.8 M138.6 20.1 l7.0 -3.8 M150.0 22.0 l4.7 5.2 M150.0 22.0 l6.2 -3.3'/%3E%3C/g%3E%3Cpath d='M62 46 l-4 9' stroke='%2316412C' stroke-width='1.6' fill='none'/%3E%3Ccircle cx='58' cy='55' r='5.2' fill='%23A41F2C'/%3E%3Cpath d='M74 54 l6 8' stroke='%2316412C' stroke-width='1.6' fill='none'/%3E%3Ccircle cx='80' cy='62' r='5.2' fill='%23A41F2C'/%3E%3Cpath d='M34 62 l-7 7' stroke='%2316412C' stroke-width='1.6' fill='none'/%3E%3Ccircle cx='27' cy='69' r='5.2' fill='%23A41F2C'/%3E%3C/svg%3E") no-repeat center / contain;
filter: drop-shadow(0 0 3px rgba(255, 255, 255, .75))
drop-shadow(0 2px 5px rgba(10, 22, 44, .40));
}
.hero::before { left: 0; }
.hero::after { right: 0; transform: scaleX(-1); }
@media (max-width: 900px) { .hero::before, .hero::after { display: none; } }
/* ---- frost creeping into the cards ----
A cold bloom in the lower-right of every card. It is in the BOTTOM corner
on purpose: a card's top is a photograph on most pages, and a gradient
behind a photograph is a gradient nobody sees. Ice blue at .16 alpha is
under the threshold where it reads as a colour — it reads as cold. */
.card, .loc-card, .form-card, .menu-cat {
background-image:
radial-gradient(170px 120px at 100% 100%, rgba(126, 180, 216, .22), rgba(126, 180, 216, 0) 70%),
radial-gradient(120px 90px at 0% 100%, rgba(126, 180, 216, .09), rgba(126, 180, 216, 0) 72%);
}
/* ---- one big flake, ghosted, on the parchment bands ----
5.5% opacity. If you can tell what it is without looking for it, it is too
strong. No overflow:hidden on the section — clipping a whole band to place
an ornament is a bad trade — so it is positioned fully inside instead. */
.section.parchment { position: relative; }
.section.parchment::before {
content: ""; position: absolute; right: 26px; top: 26px;
width: 300px; height: 300px; max-width: 34vw; max-height: 34vw;
pointer-events: none; opacity: .055; z-index: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%233E86BC' stroke-width='1.1' stroke-linecap='round' fill='none'%3E%3Cpath d='M12 2.6v18.8M3.86 7.3l16.28 9.4M3.86 16.7l16.28-9.4'/%3E%3Cpath d='M12 6.4l2.5-2.5M12 6.4L9.5 3.9M12 17.6l2.5 2.5M12 17.6l-2.5 2.5'/%3E%3Cpath d='M7.2 9.2 7 5.7M7.2 9.2 4.1 10.9M16.8 14.8l.2 3.5M16.8 14.8l3.1-1.7'/%3E%3Cpath d='M7.2 14.8 7 18.3M7.2 14.8 4.1 13.1M16.8 9.2 17 5.7M16.8 9.2l3.1 1.7'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
.section.parchment > .wrap { position: relative; z-index: 1; }
/* ---- the holiday popup, dressed -----------------------------------------
Jake: "the popup should have some christmas flair!" It is the one surface
on the site that a visitor is made to look at, so it gets the season's
three motifs in one place — and nothing else, because a popup that is
decorated past its own message is an advert for decoration.
The drift is the footer's, flipped: there the snow sits ON the footer's top
edge, here it banks UP from the white body over the bottom of the photos.
Same trick, opposite gravity, and the segments sum to the full 1440 — that
was a real bug once (see .site-footer::before) and the sums were added up
again here rather than trusted. */
.amodal-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
z-index: 3; pointer-events: none;
background: repeating-linear-gradient(90deg,
var(--win-evergreen) 0 30px,
#A9BDD0 30px 42px,
var(--win-holly) 42px 72px,
#A9BDD0 72px 84px);
}
/* The sprig hangs in the top-left corner, over the photograph, clear of the
close button in the opposite corner. Smaller than the hero's — the card is
a sixth of the width, and an ornament that scales with nothing looks like
it was pasted on.
🔴 It needs a HEAVIER rim than the hero's. A hero photograph is a whole
wall of varied tone and the sprig finds some of it to sit against; the
modal's top-left is one fixed photo, and when that photo is a dark dining
room — which it is — a dark green sprig on it reads as a smudge with three
red dots. Two stacked white glows, not one, so the needles keep an edge of
their own whatever photograph goes here next. */
.amodal-card::after {
content: ""; position: absolute; top: 0; left: 0;
width: 124px; height: 104px; z-index: 3; pointer-events: none; opacity: .95;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 150' width='180' height='150'%3E%3Cg stroke='%2316412C' stroke-width='2.6' stroke-linecap='round' fill='none' opacity='.95'%3E%3Cpath d='M2.0 2.0 C46.0 16.0 86.0 40.0 126.0 86.0'/%3E%3Cpath d='M6.0 6.0 C30.0 40.0 44.0 76.0 52.0 124.0'/%3E%3Cpath d='M4.0 4.0 C54.0 8.0 104.0 14.0 150.0 22.0'/%3E%3C/g%3E%3Cg stroke='%231F5A3D' stroke-width='1.9' stroke-linecap='round' fill='none'%3E%3Cpath d='M15.1 6.5 l14.1 23.0 M15.1 6.5 l25.7 -8.1 M22.3 9.3 l12.5 21.7 M22.3 9.3 l24.1 -6.9 M29.5 12.4 l11.1 20.8 M29.5 12.4 l22.9 -5.8 M36.7 15.7 l9.9 20.0 M36.7 15.7 l21.8 -4.8 M43.8 19.2 l8.7 19.2 M43.8 19.2 l20.7 -3.8 M50.8 23.0 l7.7 18.4 M50.8 23.0 l19.7 -3.0 M57.8 27.1 l6.7 17.6 M57.8 27.1 l18.7 -2.2 M64.7 31.5 l5.7 16.8 M64.7 31.5 l17.6 -1.5 M71.6 36.2 l4.9 15.9 M71.6 36.2 l16.6 -0.9 M78.5 41.2 l4.1 15.1 M78.5 41.2 l15.6 -0.3 M85.3 46.5 l3.3 14.3 M85.3 46.5 l14.6 0.2 M92.2 52.1 l2.7 13.4 M92.2 52.1 l13.6 0.6 M99.0 58.2 l2.1 12.5 M99.0 58.2 l12.7 1.0 M105.7 64.5 l1.6 11.6 M105.7 64.5 l11.7 1.3 M112.5 71.3 l1.2 10.8 M112.5 71.3 l10.7 1.5 M119.2 78.4 l0.8 9.9 M119.2 78.4 l9.8 1.6 M126.0 86.0 l0.5 9.0 M126.0 86.0 l8.8 1.7 M12.9 16.3 l-2.2 22.9 M12.9 16.3 l21.7 7.7 M17.7 24.1 l-2.7 20.8 M17.7 24.1 l19.5 7.7 M22.2 32.0 l-3.2 19.1 M22.2 32.0 l17.8 7.8 M26.4 40.1 l-3.7 17.7 M26.4 40.1 l16.3 7.8 M30.3 48.4 l-4.0 16.3 M30.3 48.4 l14.8 7.8 M33.9 56.9 l-4.3 15.0 M33.9 56.9 l13.5 7.8 M37.2 65.6 l-4.5 13.7 M37.2 65.6 l12.2 7.6 M40.3 74.5 l-4.6 12.4 M40.3 74.5 l11.0 7.4 M43.1 83.8 l-4.6 11.3 M43.1 83.8 l9.8 7.1 M45.6 93.3 l-4.5 10.1 M45.6 93.3 l8.8 6.8 M48.0 103.2 l-4.3 9.1 M48.0 103.2 l7.7 6.4 M50.1 113.4 l-4.1 8.0 M50.1 113.4 l6.8 5.9 M52.0 124.0 l-3.8 7.0 M52.0 124.0 l5.9 5.4 M19.0 5.3 l14.6 13.6 M19.0 5.3 l16.8 -10.9 M31.2 6.4 l13.1 12.4 M31.2 6.4 l15.2 -9.7 M43.5 7.6 l12.0 11.5 M43.5 7.6 l14.1 -8.9 M55.7 8.9 l11.0 10.7 M55.7 8.9 l13.1 -8.1 M67.8 10.2 l10.1 10.0 M67.8 10.2 l12.1 -7.4 M79.8 11.7 l9.2 9.3 M79.8 11.7 l11.2 -6.7 M91.8 13.2 l8.4 8.5 M91.8 13.2 l10.3 -6.1 M103.7 14.8 l7.6 7.9 M103.7 14.8 l9.5 -5.5 M115.5 16.5 l6.8 7.2 M115.5 16.5 l8.6 -4.9 M127.1 18.2 l6.1 6.5 M127.1 18.2 l7.8 -4.3 M138.6 20.1 l5.4 5.8 M138.6 20.1 l7.0 -3.8 M150.0 22.0 l4.7 5.2 M150.0 22.0 l6.2 -3.3'/%3E%3C/g%3E%3Cpath d='M62 46 l-4 9' stroke='%2316412C' stroke-width='1.6' fill='none'/%3E%3Ccircle cx='58' cy='55' r='5.2' fill='%23A41F2C'/%3E%3Cpath d='M74 54 l6 8' stroke='%2316412C' stroke-width='1.6' fill='none'/%3E%3Ccircle cx='80' cy='62' r='5.2' fill='%23A41F2C'/%3E%3Cpath d='M34 62 l-7 7' stroke='%2316412C' stroke-width='1.6' fill='none'/%3E%3Ccircle cx='27' cy='69' r='5.2' fill='%23A41F2C'/%3E%3C/svg%3E") no-repeat center / contain;
filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .95))
drop-shadow(0 0 5px rgba(255, 255, 255, .85))
drop-shadow(0 2px 5px rgba(10, 22, 44, .45));
}
.amodal-photos { position: relative; }
.amodal-photos::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px;
pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30h1440V18c-80-10-160-2-240 3s-160 10-240 2-160-14-240-12-160 12-240 14-160-6-240-12-160-10-240-5V30z' fill='%23FFFFFF'/%3E%3C/svg%3E") center bottom / 100% 26px no-repeat;
}
/* The kicker goes to holly. It is two words above a heading that is already
about December, and it is the only red in the card besides the berries. */
.amodal-body .kicker { color: var(--win-holly); }
/* ---- accessibility -------------------------------------------------------
Nothing in this file depends on motion or transparency — the two decoration
scripts own all of that, and each handles prefers-reduced-motion itself.
One exception: the snow drift and the ribbon are background-images, which a
browser in forced-colors mode throws away. They are ornament, so losing
them costs nothing, and the midnight footer and silver hairline underneath
both survive. */
@media (forced-colors: active) {
.site-footer::before, .site-header::after { display: none; }
.hero::before, .hero::after, .section.parchment::before { display: none; }
.amodal-card::before, .amodal-card::after, .amodal-photos::after { display: none; }
#snowfall-near { display: none; }
}
/* Print: the ornaments are ink nobody asked to spend, and the cold surfaces
are grey nobody asked to spend either. */
@media print {
.site-footer::before, .site-header::after { display: none; }
.hero::before, .hero::after, .section.parchment::before { display: none; }
#snowfall, #snowfall-near { display: none; }
.section-head .rule, .menu-cat .rule {
width: 54px; height: 2px; background: var(--win-evergreen);
margin: 18px auto 0;
}
}