/* ===========================================================================
BUY TICKETS — Stage 3 light-gold pilot
This page is the trial run for the 60-30-10 palette before it goes site-wide:
60% canvas #FAF6ED / #F5EFE0 warm white-gold ground
30% structure #9A7B38 / #5C461E borders, rules and type
10% accent #800020 the buy button and the price
ZERO BLACK. Nothing here is #000: shadows are warm-brown alpha, and the
deepest ink is #3A2A12. A pure black shadow on a cream ground reads as dirt.
THE DAY COLOUR IS SEPARATE FROM THE PALETTE, and deliberately so. --tok is set
inline per card and per heading from the festival day's own Navadurga colour,
so Sasthi is red, Saptami blue, Ashtami pink, Navami purple, Dashami maroon.
The palette is the room; the day colour is what distinguishes one section of
it from the next. The approved mockup shows only Sasthi, whose colour happens
to be the red it is drawn in.
Scoped to body.idc-tickets-light so the rest of the site is untouched until
the palette is signed off.
=========================================================================== */
body.idc-tickets-light {
--lg-canvas: #FAF6ED;
--lg-canvas-2: #F5EFE0;
--lg-raised: rgba(255, 253, 248, .86);
--lg-structure: #9A7B38;
--lg-hair: rgba(154, 123, 56, .26);
--lg-ink: #5C461E;
--lg-ink-strong: #3A2A12;
--lg-accent: #800020;
--lg-accent-deep: #6B001B;
--lg-shadow: rgba(74, 56, 20, .13);
--lg-shadow-lift: rgba(74, 56, 20, .2);
background: var(--lg-canvas) !important;
color: var(--lg-ink);
}
/* The page's own photographic ground carries a dark scrim from page-chrome;
on a cream page that scrim is what makes everything look muddy. */
body.idc-tickets-light .page-hero::before,
body.idc-tickets-light .page-hero::after {
background: linear-gradient(180deg, rgba(250, 246, 237, .88), rgba(245, 239, 224, .97)) !important;
}
body.idc-tickets-light .page-hero,
body.idc-tickets-light .section,
body.idc-tickets-light .ticket-event-strip {
background-color: transparent !important;
color: var(--lg-ink);
}
body.idc-tickets-light .page-hero-title,
body.idc-tickets-light .section-title,
body.idc-tickets-light h2,
body.idc-tickets-light h3,
body.idc-tickets-light h4 {
color: var(--lg-ink-strong);
}
body.idc-tickets-light .page-hero-title span,
body.idc-tickets-light .section-title span,
body.idc-tickets-light .gold {
color: var(--lg-accent);
}
body.idc-tickets-light .page-hero-subtitle,
body.idc-tickets-light .idc-seclede,
body.idc-tickets-light .section-label {
color: var(--lg-ink);
}
body.idc-tickets-light .section-label { color: var(--lg-structure); }
body.idc-tickets-light .ticket-event-strip {
background: var(--lg-canvas-2) !important;
border-block: 1px solid var(--lg-hair);
}
body.idc-tickets-light .tes-item { color: var(--lg-ink); }
body.idc-tickets-light .tes-divider { background: var(--lg-hair); }
/* ---------------------------------------------------------- day headings -- */
body.idc-tickets-light .idc-tday-head {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 14px;
margin: 34px 0 18px;
padding: 0 0 14px;
border: 0;
position: relative;
}
body.idc-tickets-light .idc-tday-head:first-child { margin-top: 6px; }
/* The gradient rule, as an ::after so it needs no markup of its own. */
body.idc-tickets-light .idc-tday-head::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--tok, var(--lg-accent)), rgba(154, 123, 56, .3) 45%, transparent);
}
body.idc-tickets-light .idc-tday-bar {
flex: 0 0 auto;
width: 6px;
align-self: stretch;
min-height: 44px;
border-radius: 99px;
background: var(--tok, var(--lg-accent));
box-shadow: 0 0 16px -2px var(--tok, var(--lg-accent));
}
body.idc-tickets-light .idc-tday-text {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
body.idc-tickets-light .idc-tday-eyebrow {
font-size: .6rem;
font-weight: 800;
letter-spacing: .16em;
line-height: 1.4;
color: var(--tok, var(--lg-structure));
text-wrap: balance;
}
body.idc-tickets-light .idc-tday-name {
margin: 0;
font-family: var(--font-heading, Georgia, serif);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: .012em;
color: var(--lg-ink-strong);
}
/* ---------------------------------------------------------------- cards --- */
body.idc-tickets-light .idc-tgrid {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
align-items: start;
}
body.idc-tickets-light .idc-tcard {
--tok: var(--lg-accent);
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 0;
min-height: 352px;
padding: 18px;
overflow: hidden;
isolation: isolate;
/* Glass, on a light ground: a raised cream pane rather than a dark one. */
background: var(--lg-raised);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
/* The 6px day-coloured edge is the card's whole identity. */
border: 6px solid var(--tok);
border-radius: 22px;
box-shadow: 0 10px 26px -12px var(--lg-shadow);
color: var(--lg-ink);
transition: transform .28s ease, box-shadow .28s ease;
}
body.idc-tickets-light .idc-tcard:hover,
body.idc-tickets-light .idc-tcard:focus-within {
transform: translateY(-6px);
box-shadow: 0 22px 40px -16px color-mix(in srgb, var(--tok) 52%, transparent);
}
/* The card no longer shows a photograph; the day colour is the identity now. */
body.idc-tickets-light .idc-tcard::before,
body.idc-tickets-light .idc-tcard::after { display: none !important; }
body.idc-tickets-light .idc-tcard.is-out { opacity: .62; }
/* -- the floating silhouette ------------------------------------------------ */
body.idc-tickets-light .idc-tcard-mark {
position: absolute;
right: -26px;
bottom: -26px;
z-index: 0;
color: var(--tok);
opacity: .1;
pointer-events: none;
line-height: 0;
animation: idcFloatMark 7s ease-in-out infinite;
transition: transform .5s ease;
}
body.idc-tickets-light .idc-tcard.is-kids .idc-tcard-mark { animation-duration: 6s; right: -20px; bottom: -20px; }
body.idc-tickets-light .idc-tcard:hover .idc-tcard-mark { transform: scale(1.08); }
@keyframes idcFloatMark {
0%, 100% { transform: translateY(0) rotate(0deg); opacity: .09; }
50% { transform: translateY(-10px) rotate(2deg); opacity: .16; }
}
@media (prefers-reduced-motion: reduce) {
body.idc-tickets-light .idc-tcard-mark { animation: none; }
body.idc-tickets-light .idc-tcard { transition: none; }
body.idc-tickets-light .idc-tcard:hover { transform: none; }
}
/* -- top: sitting and audience --------------------------------------------- */
body.idc-tickets-light .idc-tcard-top { position: relative; z-index: 1; }
body.idc-tickets-light .idc-tcard-heads {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 13px;
}
body.idc-tickets-light .idc-tcard-token {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 6px 12px;
border-radius: 99px;
background: var(--tok);
color: #FFFCF6;
font-size: .63rem;
font-weight: 800;
letter-spacing: .13em;
line-height: 1.2;
text-transform: uppercase;
white-space: nowrap;
}
/* Morning lifts the day's colour, evening deepens it — the sitting is told by
the same hue rather than by a second, competing one. */
body.idc-tickets-light .idc-tcard-token.is-morning {
background: color-mix(in srgb, var(--tok) 74%, #FFFFFF);
color: #33240C;
}
body.idc-tickets-light .idc-tcard-token.is-evening {
background: color-mix(in srgb, var(--tok) 76%, #2E2008);
}
body.idc-tickets-light .idc-tcard-token svg { display: block; }
body.idc-tickets-light .idc-tcard-who {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border: 1px solid var(--lg-hair);
border-radius: 8px;
background: rgba(154, 123, 56, .09);
color: var(--lg-structure);
font-size: .6rem;
font-weight: 800;
letter-spacing: .1em;
line-height: 1.2;
text-transform: uppercase;
white-space: nowrap;
}
body.idc-tickets-light .idc-tcard-who svg { display: block; }
body.idc-tickets-light .idc-tcard-name {
margin: 0 0 4px;
font-family: var(--font-heading, Georgia, serif);
font-size: 1.02rem;
font-weight: 700;
line-height: 1.25;
color: var(--lg-ink-strong);
text-wrap: balance;
}
body.idc-tickets-light .idc-tcard-desc {
margin: 0 0 8px;
color: var(--lg-ink);
opacity: .82;
font-size: .78rem;
line-height: 1.5;
}
body.idc-tickets-light .idc-tcard-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 0;
}
body.idc-tickets-light .idc-tag {
padding: 3px 8px;
border-radius: 6px;
background: rgba(154, 123, 56, .12);
border: 1px solid var(--lg-hair);
color: var(--lg-structure);
font-size: .6rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
body.idc-tickets-light .idc-tag.is-crimson {
background: rgba(128, 0, 32, .1);
border-color: rgba(128, 0, 32, .35);
color: var(--lg-accent);
}
/* -- the price band --------------------------------------------------------- */
body.idc-tickets-light .idc-tcard-pricing {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 14px 0;
padding: 13px 0;
border-block: 1px solid var(--lg-hair);
}
body.idc-tickets-light .idc-tcard-priceblock { min-width: 0; }
body.idc-tickets-light .idc-tcard-price,
body.idc-tickets-light .idc-tcard-price .amount,
body.idc-tickets-light .idc-tcard-price bdi {
color: var(--lg-accent);
font-size: 1.85rem;
font-weight: 800;
line-height: 1.05;
letter-spacing: -.015em;
font-variant-numeric: tabular-nums;
}
body.idc-tickets-light .idc-tcard-price del { display: none; }
body.idc-tickets-light .idc-tcard-unit {
display: block;
margin-top: 2px;
color: var(--lg-ink);
opacity: .7;
font-size: .66rem;
font-weight: 700;
letter-spacing: .04em;
}
body.idc-tickets-light .idc-tcard-figure {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 46px;
height: 46px;
border: 1px solid var(--lg-hair);
border-radius: 14px;
background: var(--lg-canvas-2);
color: var(--tok);
box-shadow: inset 0 1px 3px rgba(74, 56, 20, .09);
}
/* -- the action row --------------------------------------------------------- */
body.idc-tickets-light .idc-tcard-foot { position: relative; z-index: 1; }
body.idc-tickets-light .idc-tcard-actions {
display: flex;
align-items: center;
gap: 9px;
}
body.idc-tickets-light .idc-tcard-add {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 12px 16px;
border: 0;
border-radius: 12px;
background: var(--lg-accent);
color: #FFF7E9;
font-size: .74rem;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 6px 14px -6px rgba(128, 0, 32, .6);
transition: background .2s ease, transform .12s ease;
}
body.idc-tickets-light .idc-tcard-add:hover { background: var(--lg-accent-deep); }
body.idc-tickets-light .idc-tcard-add:active { transform: scale(.97); }
body.idc-tickets-light .idc-stepper {
display: flex;
align-items: center;
padding: 3px;
border: 1px solid var(--lg-hair);
border-radius: 12px;
background: var(--lg-canvas-2);
}
body.idc-tickets-light .idc-stepper button {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 0;
border-radius: 9px;
background: transparent;
color: var(--lg-accent);
font-size: 1rem;
font-weight: 800;
cursor: pointer;
}
body.idc-tickets-light .idc-stepper button:hover { background: rgba(128, 0, 32, .1); }
body.idc-tickets-light .idc-stepper input {
width: 34px;
padding: 0;
border: 0;
background: transparent;
color: var(--lg-ink-strong);
font-size: .86rem;
font-weight: 800;
text-align: center;
font-variant-numeric: tabular-nums;
-moz-appearance: textfield;
}
body.idc-tickets-light .idc-stepper input::-webkit-outer-spin-button,
body.idc-tickets-light .idc-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.idc-tickets-light .idc-tcard-stock.is-out {
margin: 0;
padding: 12px;
border-radius: 12px;
background: rgba(154, 123, 56, .1);
color: var(--lg-structure);
font-size: .74rem;
font-weight: 800;
letter-spacing: .1em;
text-align: center;
text-transform: uppercase;
}
/* --------------------------------------------------------- filter tabs ---- */
body.idc-tickets-light .idc-cattabs,
body.idc-tickets-light .idc-filter-bar {
padding: 10px;
border: 1px solid var(--lg-hair);
border-radius: 18px;
background: var(--lg-raised);
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
box-shadow: 0 8px 22px -14px var(--lg-shadow);
}
/*
* THE WRAPPER IS NOT THE SCROLLER.
*
* tickets-filter.css already solves this properly: .idc-cattabs-scroll is the
* flex row, and it uses `justify-content: safe center` — centred on a wide
* screen, but falling back to flex-start the moment the row overflows, so the
* first pill stays reachable on a phone instead of being cut off to the left
* where nothing can scroll to it. Round one made the WRAPPER a second flex
* scroller, which fought all of that. The wrapper is only the panel now.
*/
body.idc-tickets-light .idc-cattabs-scroll {
justify-content: center;
justify-content: safe center;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
body.idc-tickets-light .idc-cattabs-scroll::-webkit-scrollbar { display: none; }
body.idc-tickets-light .idc-cattab {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 15px;
border: 1px solid var(--lg-hair);
border-radius: 99px;
background: var(--lg-canvas-2);
color: var(--lg-ink);
font-size: .7rem;
font-weight: 800;
letter-spacing: .04em;
white-space: nowrap;
cursor: pointer;
transition: background .18s ease, color .18s ease, border-color .18s ease;
}
body.idc-tickets-light .idc-cattab:hover {
background: rgba(128, 0, 32, .07);
border-color: rgba(128, 0, 32, .3);
}
body.idc-tickets-light .idc-cattab.is-active {
background: var(--lg-accent);
border-color: var(--lg-accent);
color: #FFF7E9;
box-shadow: 0 5px 13px -5px rgba(128, 0, 32, .55);
}
body.idc-tickets-light .idc-cattab-count {
padding: 2px 7px;
border-radius: 99px;
background: rgba(154, 123, 56, .16);
color: var(--lg-structure);
font-size: .6rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
body.idc-tickets-light .idc-cattab.is-active .idc-cattab-count {
background: rgba(48, 0, 12, .3);
color: #FFF0D8;
}
body.idc-tickets-light .idc-cattab:active { transform: scale(.96); }
/* the checkbox facet panel, if the committee opens it */
body.idc-tickets-light .idc-fopt-label { color: var(--lg-ink); }
body.idc-tickets-light .idc-fopt-sub { color: var(--lg-structure); }
body.idc-tickets-light .idc-fopt-count { color: var(--lg-structure); }
body.idc-tickets-light .idc-panel {
background: var(--lg-raised);
border: 1px solid var(--lg-hair);
color: var(--lg-ink);
}
/* ---------------------------------------------------------------- other --- */
body.idc-tickets-light .btn-burgundy,
body.idc-tickets-light .btn-primary {
background: var(--lg-accent);
color: #FFF7E9;
border-color: var(--lg-accent);
}
body.idc-tickets-light .idc-bignum { color: var(--lg-accent); }
body.idc-tickets-light .combo-card-icon { color: var(--lg-accent); }
body.idc-tickets-light .idc-section-empty { display: none; }
body.idc-tickets-light .idc-tday-head.is-filtered-out { display: none; }
/* ===========================================================================
TABLET, then DESKTOP. The card is designed at one column and widens; nothing
below re-orders it.
=========================================================================== */
@media (min-width: 640px) {
body.idc-tickets-light .idc-tgrid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
body.idc-tickets-light .idc-tday-name { font-size: 1.75rem; }
body.idc-tickets-light .idc-tcard { padding: 20px; }
body.idc-tickets-light .idc-tcard-price,
body.idc-tickets-light .idc-tcard-price .amount,
body.idc-tickets-light .idc-tcard-price bdi { font-size: 2.05rem; }
}
@media (min-width: 1024px) {
body.idc-tickets-light .idc-tgrid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
body.idc-tickets-light .idc-tday-name { font-size: 2rem; }
body.idc-tickets-light .idc-tday-head { margin: 44px 0 22px; }
}
/* ===========================================================================
STAGE 3 PILOT — round two
Four things this fixes, all of them found in the live page rather than
guessed at:
1. THE HERO WAS UNREADABLE. page-chrome.css paints the hero with a dark
scrim — rgba(8,9,13,.60) to rgba(12,14,20,.95) — inside a background-IMAGE
shorthand. Round one overrode background-COLOR, which does not touch a
gradient, so the scrim survived and the newly-darkened heading sat on it.
Dark ink on a dark scrim. The scrim is now light, and the hero is taller
so the bridge photograph is actually seen.
2. THE TICKET IMAGE CAME BACK, under a wash of the day's own colour: a light
wash for a morning sitting, a deep one for an evening sitting. The photo
sits beneath both, which is what keeps text legible over an arbitrary
image.
3. THE OTHER CARD TYPES WERE STILL DARK. Combo, Kojagari, Special and
Parking use their own classes and round one never reached them, so they
stayed near-black on a cream page — and their titles were dark gold on
near-black, barely readable even on their own terms.
4. THREE DIFFERENT BUTTON COLOURS. Saffron on the parking pass, gold on
Kojagari, maroon on the combos. One accent now.
=========================================================================== */
/* ------------------------------------------------------------------ 1. HERO */
body.idc-tickets-light .page-hero {
/* Taller, because the photograph is portrait: a shallow band of a portrait
image is sky and nothing else. */
min-height: 78vh;
padding: 165px 24px 80px;
/* The whole stack is replaced. Keeping any of the original would keep the
dark scrim that made the heading unreadable. */
background-image:
linear-gradient(180deg,
rgba(250, 246, 237, .18) 0%,
rgba(250, 246, 237, .55) 46%,
rgba(250, 246, 237, .92) 82%,
var(--lg-canvas) 100%),
var(--hero-image, none) !important;
background-size: cover !important;
/* 58% down: the span and its reflection, not the empty sky above it. */
background-position: center 58% !important;
background-repeat: no-repeat !important;
background-color: var(--lg-canvas) !important;
}
body.idc-tickets-light .page-hero::before,
body.idc-tickets-light .page-hero::after {
background: none !important;
}
/*
* The portrait frame below 768px.
*
* Only the image layer changes - the scrim gradient above it is repeated
* verbatim because background-image is one shorthand list, and naming just the
* photograph would drop the wash that keeps the heading readable.
*
* The fallback chain ends at --hero-image, so if the mobile property is ever
* missing the landscape photo still shows rather than nothing at all. The
* position moves to centre: a portrait frame needs no downward bias to find
* its subject.
*/
@media (max-width: 767px) {
body.idc-tickets-light .page-hero {
min-height: 62vh;
padding: 140px 20px 60px;
background-image:
linear-gradient(180deg,
rgba(250, 246, 237, .18) 0%,
rgba(250, 246, 237, .55) 46%,
rgba(250, 246, 237, .92) 82%,
var(--lg-canvas) 100%),
var(--hero-image-mobile, var(--hero-image, none)) !important;
background-position: center center !important;
}
}
/* The heading sits on the pale lower half, so it takes the deepest ink and a
whisper of cream behind it rather than a text-shadow, which on a light ground
reads as a smudge. */
body.idc-tickets-light .page-hero-title {
color: var(--lg-ink-strong);
text-shadow: 0 1px 0 rgba(255, 253, 248, .65);
}
body.idc-tickets-light .page-hero-subtitle {
color: var(--lg-ink);
opacity: .92;
}
body.idc-tickets-light .page-hero .section-label {
color: var(--lg-accent);
}
@media (max-width: 640px) {
body.idc-tickets-light .page-hero {
min-height: 62vh;
padding: 130px 20px 56px;
}
}
/* ------------------------------- 2. DAY CARDS: image under a day-colour wash */
body.idc-tickets-light .idc-tcard {
background-color: var(--lg-raised);
background-image:
linear-gradient(0deg, rgba(255, 253, 248, .80), rgba(255, 253, 248, .80)),
var(--card-bg, none);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/*
* MORNING — the day's colour lifted toward light. The cream veil stays high so
* the card remains part of the light page and the ink on it stays dark.
*/
body.idc-tickets-light .idc-tcard[data-session="morning"] {
background-image:
linear-gradient(168deg,
color-mix(in srgb, var(--tok) 14%, transparent) 0%,
color-mix(in srgb, var(--tok) 30%, transparent) 100%),
linear-gradient(0deg, rgba(255, 252, 244, .74), rgba(255, 252, 244, .74)),
var(--card-bg, none);
}
/*
* EVENING — the same colour taken deep. This card genuinely inverts: a dusk
* ticket should read as dusk. So its own text inverts with it rather than
* staying dark on a dark ground, which is the exact fault being fixed above.
*/
body.idc-tickets-light .idc-tcard[data-session="evening"] {
background-image:
linear-gradient(168deg,
color-mix(in srgb, var(--tok) 62%, transparent) 0%,
color-mix(in srgb, var(--tok) 82%, transparent) 100%),
linear-gradient(0deg, rgba(38, 24, 10, .58), rgba(38, 24, 10, .58)),
var(--card-bg, none);
}
body.idc-tickets-light .idc-tcard[data-session="evening"] .idc-tcard-name { color: #FFF8EC; }
body.idc-tickets-light .idc-tcard[data-session="evening"] .idc-tcard-desc { color: rgba(255, 246, 232, .84); opacity: 1; }
body.idc-tickets-light .idc-tcard[data-session="evening"] .idc-tcard-unit { color: rgba(255, 246, 232, .8); opacity: 1; }
body.idc-tickets-light .idc-tcard[data-session="evening"] .idc-tcard-price,
body.idc-tickets-light .idc-tcard[data-session="evening"] .idc-tcard-price .amount,
body.idc-tickets-light .idc-tcard[data-session="evening"] .idc-tcard-price bdi { color: #F6D68B; }
body.idc-tickets-light .idc-tcard[data-session="evening"] .idc-tcard-pricing { border-block-color: rgba(255, 246, 232, .22); }
body.idc-tickets-light .idc-tcard[data-session="evening"] .idc-tcard-who {
border-color: rgba(255, 246, 232, .34);
background: rgba(255, 246, 232, .1);
color: #FFF1DA;
}
body.idc-tickets-light .idc-tcard[data-session="evening"] .idc-tcard-figure {
border-color: rgba(255, 246, 232, .26);
background: rgba(20, 12, 4, .34);
color: #F6D68B;
}
body.idc-tickets-light .idc-tcard[data-session="evening"] .idc-tcard-mark { color: #FFE9C2; opacity: .12; }
body.idc-tickets-light .idc-tcard[data-session="evening"] .idc-tag {
background: rgba(255, 246, 232, .12);
border-color: rgba(255, 246, 232, .26);
color: #FFF1DA;
}
body.idc-tickets-light .idc-tcard[data-session="evening"] .idc-stepper {
background: rgba(20, 12, 4, .4);
border-color: rgba(255, 246, 232, .26);
}
body.idc-tickets-light .idc-tcard[data-session="evening"] .idc-stepper input { color: #FFF8EC; }
body.idc-tickets-light .idc-tcard[data-session="evening"] .idc-stepper button { color: #F6D68B; }
body.idc-tickets-light .idc-tcard[data-session="evening"] .idc-stepper button:hover { background: rgba(255, 246, 232, .14); }
/* ---------------------------- 3. THE OTHER CARD TYPES, BROUGHT INTO THE LIGHT */
body.idc-tickets-light .combo-card,
body.idc-tickets-light .special-card,
body.idc-tickets-light .idc-park-day,
body.idc-tickets-light .idc-park-all {
background: var(--lg-raised) !important;
border: 1px solid var(--lg-hair) !important;
border-radius: 18px;
color: var(--lg-ink) !important;
box-shadow: 0 10px 26px -14px var(--lg-shadow) !important;
}
body.idc-tickets-light .combo-card::before,
body.idc-tickets-light .combo-card::after,
body.idc-tickets-light .special-card::before,
body.idc-tickets-light .special-card::after { display: none !important; }
/* Their headings were dark gold on near-black. On cream they take the same ink
as every other heading on the page. */
body.idc-tickets-light .combo-card-name,
body.idc-tickets-light .special-card-name,
body.idc-tickets-light .idc-park-label,
body.idc-tickets-light .idc-park-all-name {
color: var(--lg-ink-strong) !important;
opacity: 1 !important;
}
body.idc-tickets-light .combo-card-desc,
body.idc-tickets-light .special-card-includes,
body.idc-tickets-light .idc-park-date,
body.idc-tickets-light .idc-park-all-note,
body.idc-tickets-light .idc-park-lead {
color: var(--lg-ink) !important;
opacity: .85;
}
body.idc-tickets-light .combo-card-price,
body.idc-tickets-light .special-card-price,
body.idc-tickets-light .idc-park-price,
body.idc-tickets-light .idc-park-all-price {
color: var(--lg-accent) !important;
font-variant-numeric: tabular-nums;
}
body.idc-tickets-light .combo-card-family,
body.idc-tickets-light .combo-card-admits {
color: var(--lg-structure) !important;
border-color: var(--lg-hair) !important;
background: rgba(154, 123, 56, .1) !important;
}
body.idc-tickets-light .combo-card-icon,
body.idc-tickets-light .special-card-icon { color: var(--lg-accent) !important; }
/* The day dot on a parking row keeps its festival colour — it is the only thing
telling the five rows apart. */
body.idc-tickets-light .idc-park-dot { box-shadow: 0 0 0 3px rgba(154, 123, 56, .12); }
body.idc-tickets-light .idc-park-out {
color: var(--lg-structure) !important;
background: rgba(154, 123, 56, .1);
}
/* ------------------------------------------------- 4. ONE BUTTON COLOUR ONLY */
body.idc-tickets-light .btn-saffron,
body.idc-tickets-light .btn-burgundy,
body.idc-tickets-light .btn-primary,
body.idc-tickets-light .combo-card-btn,
body.idc-tickets-light .special-card-btn,
body.idc-tickets-light .idc-park-add,
body.idc-tickets-light .idc-park-all-buy .btn,
body.idc-tickets-light .idc-donate-form button[type="submit"] {
background: var(--lg-accent) !important;
background-image: none !important;
border: 1px solid var(--lg-accent) !important;
color: #FFF7E9 !important;
box-shadow: 0 6px 14px -7px rgba(128, 0, 32, .55) !important;
}
body.idc-tickets-light .btn-saffron:hover,
body.idc-tickets-light .btn-burgundy:hover,
body.idc-tickets-light .combo-card-btn:hover,
body.idc-tickets-light .special-card-btn:hover,
body.idc-tickets-light .idc-park-add:hover,
body.idc-tickets-light .idc-donate-form button[type="submit"]:hover {
background: var(--lg-accent-deep) !important;
border-color: var(--lg-accent-deep) !important;
color: #FFF7E9 !important;
}
/* A disabled control must not look like the live one beside it. */
body.idc-tickets-light .ptc-btn--disabled,
body.idc-tickets-light .btn[disabled] {
background: rgba(154, 123, 56, .16) !important;
border-color: var(--lg-hair) !important;
color: var(--lg-structure) !important;
box-shadow: none !important;
}
/* ------------------------------------------------ 5. SUPPORT: CENTRED DONATE */
body.idc-tickets-light .idc-donate-option {
text-align: center;
border-top-color: var(--lg-hair) !important;
}
body.idc-tickets-light .idc-donate-option h3 { color: var(--lg-ink-strong); }
/* The amount row was left-aligned by an inline flex style; centring it puts the
euro sign, the field and the button on one axis under the heading. */
body.idc-tickets-light .idc-donate-form {
justify-content: center !important;
align-items: center !important;
}
body.idc-tickets-light .idc-donate-form label { color: var(--lg-accent) !important; }
body.idc-tickets-light .idc-donate-form input[type="number"] {
background: var(--lg-canvas-2);
border: 1px solid var(--lg-hair);
border-radius: 10px;
color: var(--lg-ink-strong);
text-align: center;
font-weight: 700;
}
body.idc-tickets-light .idc-panel { text-align: center; }
body.idc-tickets-light .idc-panel .idc-seclede { margin-inline: auto; }
/* --------------------------------------------------------------- 6. TIDY-UP */
body.idc-tickets-light .divider,
body.idc-tickets-light .idc-park-row + .idc-park-row { border-color: var(--lg-hair); }
body.idc-tickets-light .idc-park-all {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
}
@media (min-width: 900px) {
body.idc-tickets-light .idc-park-all { flex-wrap: nowrap; }
}
/* The row is a layout container, not a card: no surface of its own. */
body.idc-tickets-light .idc-park-row {
background: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
/*
* Each parking day keeps its festival colour as a left edge. --chip-accent is
* already printed on these cards by the template, so the five rows stay
* distinguishable at a glance the way the day sections above them are.
*/
body.idc-tickets-light .idc-park-day {
border-left: 4px solid var(--chip-accent, var(--lg-accent)) !important;
}
body.idc-tickets-light .idc-park-day .idc-park-dot {
background: var(--chip-accent, var(--lg-accent)) !important;
}
body.idc-tickets-light .idc-park-day .idc-park-price,
body.idc-tickets-light .idc-park-day .idc-park-price .amount,
body.idc-tickets-light .idc-park-day .idc-park-price bdi { color: var(--lg-accent) !important; }
/* ===========================================================================
ROUND THREE — matching the reference card structure
The previous wash was a single flat colour at high opacity, which turned each
card into a solid slab and buried the photograph under it. The reference card
is not one fill: it is a stack — a sheen along the top edge, a vignette
pulling the corners down, a directional tint across the diagonal, and only
then the image. Depth comes from the stack, not from more opacity, which is
what lets the photograph stay visible while the text stays readable.
=========================================================================== */
/* ------------------------------------------------------- the layered wash -- */
body.idc-tickets-light .idc-tcard[data-session="morning"] {
background-image:
/* sheen along the top edge */
linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, transparent 44%),
/* vignette, so the corners settle */
radial-gradient(132% 118% at 50% 0%, transparent 40%, rgba(90, 66, 22, .17) 100%),
/* the day's colour, lifted, across the diagonal */
linear-gradient(145deg,
color-mix(in srgb, var(--tok) 12%, transparent) 0%,
color-mix(in srgb, var(--tok) 30%, transparent) 100%),
/* the cream ground that keeps this card part of a light page */
linear-gradient(0deg, rgba(255, 252, 244, .66), rgba(255, 252, 244, .66)),
var(--card-bg, none);
}
body.idc-tickets-light .idc-tcard[data-session="evening"] {
background-image:
linear-gradient(180deg, color-mix(in srgb, var(--tok) 26%, transparent) 0%, transparent 42%),
radial-gradient(132% 118% at 50% 0%, transparent 34%, rgba(24, 12, 4, .46) 100%),
linear-gradient(145deg,
color-mix(in srgb, var(--tok) 42%, transparent) 0%,
color-mix(in srgb, var(--tok) 78%, transparent) 100%),
linear-gradient(0deg, rgba(30, 18, 8, .30), rgba(30, 18, 8, .30)),
var(--card-bg, none);
}
/* A glow in the far corner, the way the reference card carries one. */
body.idc-tickets-light .idc-tcard::after {
content: "";
position: absolute;
right: -96px;
bottom: -104px;
width: 240px;
height: 240px;
border-radius: 999px;
background: radial-gradient(circle, color-mix(in srgb, var(--tok) 22%, transparent), transparent 68%);
pointer-events: none;
z-index: 0;
display: block !important;
}
/* ------------------------------------------------------ the in-card eyebrow */
body.idc-tickets-light .idc-tcard-eyebrow {
display: block;
margin-bottom: 3px;
font-size: .6rem;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
color: color-mix(in srgb, var(--tok) 74%, #5C461E);
}
body.idc-tickets-light .idc-tcard[data-session="evening"] .idc-tcard-eyebrow {
color: color-mix(in srgb, var(--tok) 30%, #FFE2BC);
}
body.idc-tickets-light .idc-tcard-name { font-size: 1.12rem; margin-bottom: 3px; }
body.idc-tickets-light .idc-tcard-desc { font-size: .82rem; margin-bottom: 0; }
/* --------------------------------------- quantity: label + full-width control */
body.idc-tickets-light .idc-tcard-qty {
display: flex;
align-items: center;
gap: 7px;
margin: 0 0 8px;
font-size: .6rem;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--lg-structure);
}
body.idc-tickets-light .idc-tcard[data-session="evening"] .idc-tcard-qty { color: rgba(255, 240, 218, .72); }
body.idc-tickets-light .idc-tcard-qty-dot {
width: 5px;
height: 5px;
border-radius: 999px;
background: currentColor;
opacity: .5;
}
/*
* With JavaScript on, the stepper IS the control — so the Add link, which
* exists for a no-JS visitor, steps aside rather than sitting beside it
* offering a second way to do the same thing.
*/
body.idc-tickets-light.idc-js .idc-tcard-add { display: none; }
body.idc-tickets-light .idc-tcard-actions { gap: 10px; }
body.idc-tickets-light .idc-stepper {
flex: 1;
justify-content: space-between;
width: 100%;
padding: 5px;
border-radius: 15px;
}
body.idc-tickets-light .idc-stepper button {
width: 52px;
height: 42px;
border-radius: 11px;
font-size: 1.15rem;
background: rgba(128, 0, 32, .07);
}
body.idc-tickets-light .idc-stepper button:last-child {
background: var(--lg-accent);
color: #FFF7E9;
}
body.idc-tickets-light .idc-stepper button:last-child:hover { background: var(--lg-accent-deep); }
body.idc-tickets-light .idc-stepper input { flex: 1; width: auto; font-size: 1.05rem; }
body.idc-tickets-light .idc-tcard[data-session="evening"] .idc-stepper button { background: rgba(255, 246, 232, .1); }
body.idc-tickets-light .idc-tcard[data-session="evening"] .idc-stepper button:last-child { background: #F6D68B; color: #2A1608; }
/* ---------------------------------------------- kid = a quiet second accent */
body.idc-tickets-light .idc-tcard.is-kids .idc-tcard-who {
border-color: rgba(96, 168, 150, .5);
background: rgba(142, 207, 192, .16);
color: #2F6F60;
}
body.idc-tickets-light .idc-tcard.is-kids .idc-tcard-figure { color: #2F6F60; border-color: rgba(96, 168, 150, .45); }
body.idc-tickets-light .idc-tcard[data-session="evening"].is-kids .idc-tcard-who,
body.idc-tickets-light .idc-tcard[data-session="evening"].is-kids .idc-tcard-figure {
color: #9AD8C9;
border-color: rgba(154, 216, 201, .45);
background: rgba(154, 216, 201, .12);
}
/* ------------------------------------------------------------ the day seal */
body.idc-tickets-light .idc-tday-seal {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--tok) 42%, transparent);
background:
radial-gradient(circle, color-mix(in srgb, var(--tok) 12%, transparent) 0 24%, transparent 25%),
repeating-conic-gradient(from 0deg,
color-mix(in srgb, var(--tok) 34%, transparent) 0 7deg,
transparent 7deg 40deg),
var(--lg-canvas);
}
body.idc-tickets-light .idc-tday-seal > span {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--tok) 40%, transparent);
background: var(--lg-canvas);
font-family: var(--font-heading, Georgia, serif);
font-size: .72rem;
font-weight: 700;
color: var(--tok);
}
/* ---------------------------------------------------- the ornament divider */
body.idc-tickets-light .idc-tday-ornament {
display: flex;
align-items: center;
gap: 9px;
margin-top: 9px;
}
body.idc-tickets-light .idc-tday-ornament .d {
width: 6px;
height: 6px;
transform: rotate(45deg);
border: 1px solid color-mix(in srgb, var(--tok) 55%, transparent);
}
body.idc-tickets-light .idc-tday-ornament .d.big {
width: 9px;
height: 9px;
border-color: var(--tok);
}
body.idc-tickets-light .idc-tday-ornament .r {
width: 34px;
height: 1px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tok) 45%, transparent), transparent);
}
/* The heading is a column now: seal on the left, text beside it. */
body.idc-tickets-light .idc-tday-head { align-items: flex-start; gap: 15px; }
body.idc-tickets-light .idc-tday-text { padding-top: 1px; }
body.idc-tickets-light .idc-tday-name { font-size: 1.72rem; letter-spacing: .015em; }
@media (min-width: 1024px) {
body.idc-tickets-light .idc-tday-name { font-size: 2.15rem; }
}
/* ===========================================================================
MOBILE FIRST
HONEST NOTE ON SCOPE. The theme's own sheets are desktop-first —
tickets-cards.css has 6 max-width queries to 3 min-width, tickets-filter.css
2 to 0, pages.css 12 to 1. Rewriting those three would touch every page on
the site, so what follows makes the RENDERED result on this page mobile-first
instead: the base below is the phone, and each min-width layer adds to it.
Because this sheet loads last, it is the one that decides. Converting the
base sheets is a separate job and is not pretended to be done here.
The order is phone, then tablet at 640, then desktop at 1024.
=========================================================================== */
/* ---- PHONE: one column, edge to edge, thumb-sized controls --------------- */
body.idc-tickets-light .idc-tgrid { grid-template-columns: 1fr; gap: 14px; }
body.idc-tickets-light .idc-tcard {
min-height: 0; /* let content set the height on a small screen */
padding: 16px;
border-width: 5px;
border-radius: 18px;
}
body.idc-tickets-light .idc-tcard-heads { gap: 6px; }
body.idc-tickets-light .idc-tcard-name { font-size: 1.05rem; }
body.idc-tickets-light .idc-tcard-desc { font-size: .8rem; }
body.idc-tickets-light .idc-tcard-price,
body.idc-tickets-light .idc-tcard-price .amount,
body.idc-tickets-light .idc-tcard-price bdi { font-size: 1.7rem; }
/* 44px minimum on anything a thumb has to hit. */
body.idc-tickets-light .idc-stepper button { width: 48px; height: 44px; }
body.idc-tickets-light .idc-tcard-add { min-height: 46px; }
/* The watermark is decoration; on a narrow card it only crowds the text. */
body.idc-tickets-light .idc-tcard-mark { opacity: .06; }
body.idc-tickets-light .idc-tday-head { gap: 11px; margin: 26px 0 14px; }
body.idc-tickets-light .idc-tday-seal { width: 44px; height: 44px; }
body.idc-tickets-light .idc-tday-seal > span { width: 24px; height: 24px; font-size: .64rem; }
body.idc-tickets-light .idc-tday-name { font-size: 1.32rem; }
body.idc-tickets-light .idc-tday-eyebrow { font-size: .55rem; letter-spacing: .12em; }
body.idc-tickets-light .idc-tday-ornament .r { width: 22px; }
/* Let the pill row run to the screen edges, so a cut-off pill says "scroll me". */
body.idc-tickets-light .idc-cattabs {
margin-inline: -4px;
padding: 8px 6px;
border-radius: 14px;
}
body.idc-tickets-light .idc-cattab { padding: 9px 14px; font-size: .68rem; }
/* Parking rows stack rather than squeeze. */
body.idc-tickets-light .idc-park-day {
flex-wrap: wrap;
gap: 8px;
padding: 14px;
}
body.idc-tickets-light .idc-park-all { padding: 16px; }
/* ---- TABLET ------------------------------------------------------------- */
@media (min-width: 640px) {
body.idc-tickets-light .idc-tgrid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
body.idc-tickets-light .idc-tcard { min-height: 340px; padding: 20px; border-width: 6px; border-radius: 22px; }
body.idc-tickets-light .idc-tcard-name { font-size: 1.12rem; }
body.idc-tickets-light .idc-tcard-price,
body.idc-tickets-light .idc-tcard-price .amount,
body.idc-tickets-light .idc-tcard-price bdi { font-size: 1.95rem; }
body.idc-tickets-light .idc-tcard-mark { opacity: .1; }
body.idc-tickets-light .idc-tday-head { gap: 14px; margin: 34px 0 18px; }
body.idc-tickets-light .idc-tday-seal { width: 50px; height: 50px; }
body.idc-tickets-light .idc-tday-name { font-size: 1.7rem; }
body.idc-tickets-light .idc-tday-eyebrow { font-size: .6rem; letter-spacing: .16em; }
body.idc-tickets-light .idc-cattabs { margin-inline: 0; padding: 10px; border-radius: 18px; }
body.idc-tickets-light .idc-cattab { padding: 9px 15px; font-size: .7rem; }
body.idc-tickets-light .idc-park-day { flex-wrap: nowrap; }
}
/* ---- DESKTOP ------------------------------------------------------------ */
@media (min-width: 1024px) {
body.idc-tickets-light .idc-tgrid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
body.idc-tickets-light .idc-tcard { min-height: 352px; }
body.idc-tickets-light .idc-tcard-price,
body.idc-tickets-light .idc-tcard-price .amount,
body.idc-tickets-light .idc-tcard-price bdi { font-size: 2.05rem; }
body.idc-tickets-light .idc-tday-head { margin: 44px 0 22px; }
body.idc-tickets-light .idc-tday-seal { width: 52px; height: 52px; }
body.idc-tickets-light .idc-tday-name { font-size: 2.15rem; }
}
/* ===========================================================================
ONE CARD LANGUAGE FOR EVERY SECTION
Combo, Kojagari, Special, Parking and Donate each arrived with their own
bespoke markup and their own look, so the page read as five designs stacked
on one another. Their MARKUP is left alone — it is a 2,800-line template and
rewriting five sections of it to share one component is a refactor, not a
restyle — but every one of them is given the same surface, the same type
scale, the same ruled price band and the same controls here.
--fam is the family accent: gold for a combo, amber for Kojagari, rose for a
special, maroon for a donation, and for parking the day's own colour, which
the template already prints as --chip-accent.
MOBILE FIRST. Everything down to the first @media is the phone.
=========================================================================== */
/* ---- the shared surface ------------------------------------------------- */
body.idc-tickets-light .combo-card,
body.idc-tickets-light .special-card,
body.idc-tickets-light .idc-park-day,
body.idc-tickets-light .idc-park-all,
body.idc-tickets-light .idc-donate-option {
--fam: var(--lg-accent);
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px;
background: var(--lg-raised) !important;
border: 1px solid var(--lg-hair) !important;
border-left: 4px solid var(--fam) !important;
border-radius: 16px !important;
box-shadow: 0 8px 22px -14px var(--lg-shadow) !important;
color: var(--lg-ink) !important;
text-align: left;
transition: transform .22s ease, box-shadow .22s ease;
}
body.idc-tickets-light .combo-card:hover,
body.idc-tickets-light .special-card:hover,
body.idc-tickets-light .idc-park-day:hover,
body.idc-tickets-light .idc-donate-option:hover {
transform: translateY(-3px);
box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--fam) 60%, transparent) !important;
}
/* family accents */
body.idc-tickets-light .combo-card { --fam: #B8860B; }
body.idc-tickets-light .combo-card--kojagari { --fam: #C77800; }
body.idc-tickets-light .special-card { --fam: #AD1457; }
body.idc-tickets-light .idc-donate-option { --fam: var(--lg-accent); }
body.idc-tickets-light .idc-park-day { --fam: var(--chip-accent, var(--lg-accent)); }
body.idc-tickets-light .idc-park-all { --fam: #B8860B; }
/* ---- the chip row ------------------------------------------------------- */
body.idc-tickets-light .combo-card-family,
body.idc-tickets-light .idc-party-badge,
body.idc-tickets-light .combo-card-admits,
body.idc-tickets-light .special-card-includes > li:first-child {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 5px;
margin: 0 !important;
padding: 5px 11px !important;
border: 1px solid color-mix(in srgb, var(--fam) 40%, transparent) !important;
border-radius: 999px !important;
background: color-mix(in srgb, var(--fam) 10%, transparent) !important;
color: color-mix(in srgb, var(--fam) 72%, #3A2A12) !important;
font-size: .6rem !important;
font-weight: 800 !important;
letter-spacing: .13em !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
white-space: nowrap;
width: auto !important;
}
/* ---- the icon tile ------------------------------------------------------ */
body.idc-tickets-light .combo-card-icon,
body.idc-tickets-light .special-card-icon {
align-self: flex-start;
display: grid !important;
place-items: center;
width: 46px;
height: 46px;
margin: 0 !important;
padding: 0 !important;
border: 1px solid color-mix(in srgb, var(--fam) 34%, transparent);
border-radius: 14px;
background: color-mix(in srgb, var(--fam) 8%, transparent);
color: var(--fam) !important;
font-size: 1.35rem;
line-height: 1;
}
body.idc-tickets-light .combo-card-icon svg,
body.idc-tickets-light .special-card-icon svg { display: block; }
/* ---- title and one-line micro ------------------------------------------ */
body.idc-tickets-light .combo-card-name,
body.idc-tickets-light .special-card-name,
body.idc-tickets-light .idc-park-label,
body.idc-tickets-light .idc-park-all-name,
body.idc-tickets-light .idc-donate-option h3 {
margin: 0 !important;
font-family: var(--font-heading, Georgia, serif);
font-size: 1.02rem !important;
font-weight: 700 !important;
line-height: 1.25 !important;
color: var(--lg-ink-strong) !important;
text-align: left !important;
text-wrap: balance;
}
body.idc-tickets-light .combo-card-desc,
body.idc-tickets-light .idc-park-date,
body.idc-tickets-light .idc-park-all-note {
margin: 0 !important;
font-size: .8rem !important;
line-height: 1.5 !important;
color: var(--lg-ink) !important;
opacity: .82;
text-align: left !important;
}
body.idc-tickets-light .special-card-includes {
margin: 0 !important;
padding-left: 17px !important;
font-size: .8rem;
color: var(--lg-ink);
opacity: .85;
}
/* ---- the ruled price band ---------------------------------------------- */
body.idc-tickets-light .combo-card-price,
body.idc-tickets-light .special-card-price,
body.idc-tickets-light .idc-park-price,
body.idc-tickets-light .idc-park-all-price {
margin: 4px 0 0 !important;
padding-top: 11px !important;
border-top: 1px solid var(--lg-hair);
color: var(--lg-accent) !important;
font-size: 1.7rem !important;
font-weight: 800 !important;
line-height: 1.05 !important;
letter-spacing: -.015em;
font-variant-numeric: tabular-nums;
text-align: left !important;
}
body.idc-tickets-light .combo-card-price .amount,
body.idc-tickets-light .special-card-price .amount,
body.idc-tickets-light .idc-park-price .amount,
body.idc-tickets-light .idc-park-all-price .amount { color: var(--lg-accent) !important; font-size: inherit !important; }
body.idc-tickets-light .combo-card-price del,
body.idc-tickets-light .special-card-price del { display: none; }
/* ---- controls ----------------------------------------------------------- */
body.idc-tickets-light .combo-card-btn,
body.idc-tickets-light .special-card-btn,
body.idc-tickets-light .idc-park-add,
body.idc-tickets-light .idc-donate-option .btn {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
min-height: 46px;
margin: 0 !important;
border-radius: 12px !important;
font-size: .74rem !important;
font-weight: 800 !important;
letter-spacing: .11em !important;
text-transform: uppercase;
}
body.idc-tickets-light .combo-card .idc-stepper,
body.idc-tickets-light .special-card .idc-stepper,
body.idc-tickets-light .idc-park-day .idc-stepper,
body.idc-tickets-light .idc-park-all .idc-stepper {
width: 100%;
justify-content: space-between;
}
/* The parking row is a compact card, not a full one. */
body.idc-tickets-light .idc-park-day { gap: 7px; padding: 14px; }
body.idc-tickets-light .idc-park-day .idc-park-dot {
position: absolute;
top: 15px;
right: 14px;
width: 9px;
height: 9px;
border-radius: 999px;
background: var(--fam) !important;
}
body.idc-tickets-light .idc-park-day .idc-park-price { font-size: 1.35rem !important; }
/* Donation: the amount field and its button read as one control. */
body.idc-tickets-light .idc-donate-option {
margin-top: 14px !important;
padding-top: 16px !important;
border-top: 1px solid var(--lg-hair) !important;
}
body.idc-tickets-light .idc-donate-form {
display: flex !important;
flex-wrap: wrap;
align-items: center;
justify-content: center !important;
gap: 9px !important;
width: 100%;
}
body.idc-tickets-light .idc-donate-form input[type="number"] {
flex: 1 1 120px;
min-height: 46px;
max-width: none !important;
border-radius: 12px;
}
body.idc-tickets-light .idc-donate-form button { flex: 0 0 auto; width: auto !important; padding-inline: 22px; }
/* ===========================================================================
TABLET
=========================================================================== */
@media (min-width: 640px) {
body.idc-tickets-light .combo-card,
body.idc-tickets-light .special-card,
body.idc-tickets-light .idc-park-all,
body.idc-tickets-light .idc-donate-option { padding: 22px; border-radius: 18px; gap: 12px; }
body.idc-tickets-light .combo-card-name,
body.idc-tickets-light .special-card-name,
body.idc-tickets-light .idc-park-all-name,
body.idc-tickets-light .idc-donate-option h3 { font-size: 1.12rem !important; }
body.idc-tickets-light .combo-card-price,
body.idc-tickets-light .special-card-price,
body.idc-tickets-light .idc-park-all-price { font-size: 1.95rem !important; }
/* The wide parking pass lays out across the card once there is room. */
body.idc-tickets-light .idc-park-all {
flex-direction: row;
align-items: center;
gap: 18px;
}
body.idc-tickets-light .idc-park-all .idc-park-all-price { border-top: 0; padding-top: 0 !important; margin-left: auto !important; }
body.idc-tickets-light .idc-park-all .idc-park-all-buy { display: flex; align-items: center; gap: 10px; }
body.idc-tickets-light .idc-park-all .btn { width: auto; padding-inline: 26px; }
body.idc-tickets-light .idc-park-all .idc-stepper { width: auto; }
}
/* ===========================================================================
DESKTOP
=========================================================================== */
@media (min-width: 1024px) {
body.idc-tickets-light .combo-card,
body.idc-tickets-light .special-card { padding: 26px; }
body.idc-tickets-light .combo-card-price,
body.idc-tickets-light .special-card-price { font-size: 2.05rem !important; }
}
/* ===========================================================================
ADULT AND KID — ONE HUE, TWO SHADES
The two combo cards were identical: same gold edge, same chip, same surface,
with nothing but the price and the words to tell an adult pass from a child's.
The rule, as asked for: the hue never changes — a Sasthi card is red whoever
it admits — and the SHADE carries the audience. Adult is the deeper shade,
kid the lighter one. That way the day still reads first, at a glance, and the
audience reads second, which is the order somebody actually scans in.
No markup was needed. Every card already carries data-who, printed by
idc_ticket_facet_attrs() — 18 adult and 10 kids on this page — so the whole
system is attribute selectors over the wash that is already there.
=========================================================================== */
/* ---- day tickets: deepen or lift the existing session wash --------------- */
body.idc-tickets-light .idc-tcard[data-session="morning"][data-who="adult"] {
background-image:
linear-gradient(180deg, rgba(255, 255, 255, .45) 0%, transparent 44%),
radial-gradient(132% 118% at 50% 0%, transparent 40%, rgba(90, 66, 22, .2) 100%),
linear-gradient(145deg,
color-mix(in srgb, var(--tok) 22%, transparent) 0%,
color-mix(in srgb, var(--tok) 44%, transparent) 100%),
linear-gradient(0deg, rgba(255, 251, 242, .6), rgba(255, 251, 242, .6)),
var(--card-bg, none);
}
body.idc-tickets-light .idc-tcard[data-session="morning"][data-who="kids"] {
background-image:
linear-gradient(180deg, rgba(255, 255, 255, .66) 0%, transparent 46%),
radial-gradient(132% 118% at 50% 0%, transparent 44%, rgba(90, 66, 22, .12) 100%),
linear-gradient(145deg,
color-mix(in srgb, var(--tok) 7%, transparent) 0%,
color-mix(in srgb, var(--tok) 18%, transparent) 100%),
linear-gradient(0deg, rgba(255, 253, 248, .8), rgba(255, 253, 248, .8)),
var(--card-bg, none);
}
body.idc-tickets-light .idc-tcard[data-session="evening"][data-who="adult"] {
background-image:
linear-gradient(180deg, color-mix(in srgb, var(--tok) 26%, transparent) 0%, transparent 42%),
radial-gradient(132% 118% at 50% 0%, transparent 32%, rgba(20, 10, 3, .54) 100%),
linear-gradient(145deg,
color-mix(in srgb, var(--tok) 54%, transparent) 0%,
color-mix(in srgb, var(--tok) 90%, transparent) 100%),
linear-gradient(0deg, rgba(26, 15, 6, .4), rgba(26, 15, 6, .4)),
var(--card-bg, none);
}
body.idc-tickets-light .idc-tcard[data-session="evening"][data-who="kids"] {
background-image:
linear-gradient(180deg, color-mix(in srgb, var(--tok) 22%, transparent) 0%, transparent 44%),
radial-gradient(132% 118% at 50% 0%, transparent 38%, rgba(30, 16, 5, .32) 100%),
linear-gradient(145deg,
color-mix(in srgb, var(--tok) 30%, transparent) 0%,
color-mix(in srgb, var(--tok) 62%, transparent) 100%),
linear-gradient(0deg, rgba(46, 28, 12, .2), rgba(46, 28, 12, .2)),
var(--card-bg, none);
}
/* A lighter evening card needs its type darkened back, or the contrast it just
gained on the ground is lost again on the words. */
body.idc-tickets-light .idc-tcard[data-session="evening"][data-who="kids"] .idc-tcard-name { color: #FFFDF6; }
body.idc-tickets-light .idc-tcard[data-session="evening"][data-who="kids"] .idc-tcard-desc { color: rgba(255, 250, 240, .9); }
/* ---- combo, Kojagari and the rest: shade the surface and the edge -------- */
body.idc-tickets-light .combo-card[data-who="adult"],
body.idc-tickets-light .special-card[data-who="adult"] {
border-left-color: color-mix(in srgb, var(--fam) 88%, #2E2008) !important;
background:
linear-gradient(160deg,
color-mix(in srgb, var(--fam) 16%, transparent) 0%,
color-mix(in srgb, var(--fam) 5%, transparent) 100%),
var(--lg-raised) !important;
}
body.idc-tickets-light .combo-card[data-who="kids"],
body.idc-tickets-light .special-card[data-who="kids"] {
border-left-color: color-mix(in srgb, var(--fam) 52%, #FFFFFF) !important;
background:
linear-gradient(160deg,
color-mix(in srgb, var(--fam) 6%, transparent) 0%,
color-mix(in srgb, var(--fam) 2%, transparent) 100%),
var(--lg-raised) !important;
}
/* The chip carries the same split, so the two agree rather than compete. */
body.idc-tickets-light [data-who="adult"] .combo-card-family,
body.idc-tickets-light [data-who="adult"] .idc-party-badge {
background: color-mix(in srgb, var(--fam) 18%, transparent) !important;
border-color: color-mix(in srgb, var(--fam) 58%, transparent) !important;
color: color-mix(in srgb, var(--fam) 82%, #2E2008) !important;
}
body.idc-tickets-light [data-who="kids"] .combo-card-family,
body.idc-tickets-light [data-who="kids"] .idc-party-badge {
background: color-mix(in srgb, var(--fam) 7%, transparent) !important;
border-color: color-mix(in srgb, var(--fam) 32%, transparent) !important;
color: color-mix(in srgb, var(--fam) 62%, #5C461E) !important;
}
/* ===========================================================================
THE ICONS THE GUIDE ASKED FOR — car, and the combo star.
Drawn with mask-image rather than an ![]()
or an inline