tag on.
Also corrects padding/radius/gap/label-size, which the plugin's defaults
(16px/8px/12px/16px) don't match Figma's (24px/12px/24px/18px). */
.form-card-wrapper [data-fp-key="attendance"] .fp-radio-cards {
gap: 24px;
}
.form-card-wrapper [data-fp-key="attendance"] .fp-radio-card {
padding: 24px;
border-radius: 12px;
}
.form-card-wrapper [data-fp-key="attendance"] .fp-radio-card-label {
font-size: 18px;
}
.form-card-wrapper [data-fp-key="attendance"] .fp-radio-card::before {
content: "\F4E1"; /* bi-person */
font-family: "bootstrap-icons";
font-weight: 400;
font-style: normal;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 20px;
background: var(--landing-cream);
color: var(--landing-text-muted-dark);
}
.form-card-wrapper [data-fp-key="attendance"] .fp-radio-card:nth-of-type(2)::before {
content: "\f4d0"; /* bi-people */
}
.form-card-wrapper [data-fp-key="attendance"] .fp-radio-card:has(.fp-radio-card-input:checked)::before {
background: var(--landing-gold);
color: #fff;
}
/* Native radio dot accent color (peterite's inline dot, attendance's
corner dot, the WhatsApp modal's confirm checkbox) - otherwise renders
in the browser's default accent color instead of the landing gold. */
.form-card-wrapper input[type="radio"],
.form-card-wrapper input[type="checkbox"] {
accent-color: var(--landing-gold);
}
/* ---------- Verification modals ----------
The plugin's 3 verification modals (email/mobile OTP, WhatsApp) are
page-level singletons FP_Shortcode appends to the same returned HTML as
the form itself - since form-card.php echoes do_shortcode() inside
.form-card-wrapper, the modals end up nested inside it too, so they can
be themed entirely from here without touching the plugin. Their primary
"Verify"/"Continue" buttons already inherit the .fp-btn-verify reskin
above. The plugin's own .fp-modal (fp-public.css) already provides real
chrome (radius/padding/shadow, via --bs-modal-* variables) sitewide - this
only needs to recolor the border gold for the landing brand, again via
the same --bs-modal-border-color/-width variables rather than a raw
border property. */
.form-card-wrapper .modal-content {
--bs-modal-border-width: 1px;
--bs-modal-border-color: var(--landing-gold);
}
.form-card-wrapper .modal-title {
font-family: var(--landing-font-heading);
font-weight: 700;
color: var(--landing-navy);
}
.form-card-wrapper .modal-body p {
font-family: var(--landing-font-body);
color: var(--landing-text-muted-dark);
}
/* Pin exact size/radius/border rather than relying on cascade order against
the plugin's own .fp-otp-boxes .fp-otp-box rule (same specificity - which
one wins depends on stylesheet enqueue order, too fragile to leave
implicit). */
.form-card-wrapper .fp-otp-box {
border-radius: 8px;
border-color: var(--landing-border-light);
}
.form-card-wrapper .fp-otp-box:focus {
border-color: var(--landing-gold);
box-shadow: 0 0 0 0.2rem var(--landing-gold-tint);
}
/* Recolor via Bootstrap's own --bs-btn-* custom properties (no !important
needed - these aren't utility classes) rather than fighting specificity
with raw property overrides. */
.form-card-wrapper .btn-outline-secondary {
--bs-btn-color: var(--landing-navy);
--bs-btn-border-color: var(--landing-border-light);
--bs-btn-hover-bg: var(--landing-navy);
--bs-btn-hover-border-color: var(--landing-navy);
}
.form-card-wrapper .btn-link {
--bs-btn-color: var(--landing-navy);
--bs-btn-hover-color: var(--landing-navy-card);
}
/* Bootstrap's .bg-light utility carries !important by design (verified
against bootstrap.min.css), so overriding it requires !important too -
the one deliberate exception in this file. */
.form-card-wrapper .fp-whatsapp-code-box.bg-light {
background: var(--landing-gold-tint) !important;
border: 1px dashed var(--landing-gold);
}
.form-card-wrapper .fp-whatsapp-code {
color: var(--landing-navy);
}
/* Defends against a real overflow case: the plugin's 6 OTP boxes at their
default 44px width + gap-2 (8px) need 304px, which exceeds a ~272px
modal content area on a 320px-wide phone (375px+ viewports clear it with
room to spare). */
@media (max-width: 400px) {
.form-card-wrapper .fp-otp-boxes {
gap: 0.375rem;
}
.form-card-wrapper .fp-otp-box {
width: 38px;
}
}
/* ---------- Footer ---------- */
.elegant-footer {
background: var(--landing-navy);
border-top: 1px solid var(--landing-gold-border);
padding: 32px 24px;
gap: 12px;
}
.elegant-footer-copyright,
.elegant-footer-links a {
color: var(--landing-text-muted-light) !important;
font-size: 14px;
}
.elegant-footer-copyright {
margin: 0;
}
.elegant-footer-links a {
text-decoration: none;
}
.elegant-footer-links a:hover {
text-decoration: underline;
}
/* 3-tier section padding (24px base / 48px tablet / 120px desktop) - no
Bootstrap utility reaches 120px (max spacer is p-5=48px), so this stays
custom, but the breakpoint values reuse Bootstrap's own md/xl thresholds
rather than one-off numbers. .landing-hero itself is deliberately excluded
(see its own rule above) - only .landing-hero-content, which already has
its own max-width + centering, needs just enough padding to keep text off
the viewport edge on mobile, so it doesn't need this same 3-tier escalation. */
@media (min-width: 768px) {
.landing-section,
.landing-form-section,
.quick-details-bar,
.landing-programme,
.elegant-footer {
padding-left: 48px;
padding-right: 48px;
}
.landing-hero-crest,
.fp-privacy-logo img {
width: 125px;
}
.landing-hero-buttons .btn {
min-width: 35%;
}
}
@media (min-width: 1200px) {
.landing-section,
.landing-form-section,
.quick-details-bar,
.landing-programme,
.elegant-footer {
padding-left: 120px;
padding-right: 120px;
}
.landing-programme,
.landing-form-section {
padding-top: 80px !important;
padding-bottom: 80px !important;
}
}
/* ==========================================================================
RSVP (Centenary Year Celebration) page redesign - scoped overrides only.
Everything below targets body[data-landing-form="centenary-year-celebration"]
(set by page-event-landing.php from the page's own _fp_landing_form_id
meta - the same value already used by the [data-form-slug="..."] rules
above) so the Coffee Table Book Cover page, which embeds a different
form, is provably unaffected. Wrapper-level form-card rules use
:has([data-form-slug="..."]) instead, since data-form-slug lives on a
descendant (.fp-form) of .form-card-wrapper, not the wrapper itself -
same technique already used by .fp-radio-card:has(...) above.
========================================================================== */
/* ---------- Hero: photo background, no navy banner strip ---------- */
body[data-landing-form="centenary-year-celebration"] .landing-hero-banner {
background: transparent;
padding-bottom: 0;
}
body[data-landing-form="centenary-year-celebration"] .landing-hero {
background: linear-gradient(rgba(255, 253, 248, .72), rgba(255, 253, 248, .72)),
url('../images/rsvp-hero-bg.jpg') center / cover no-repeat;
gap: 40px;
}
body[data-landing-form="centenary-year-celebration"] .landing-hero-title-line {
color: #7a5c00;
}
/* Content mapping is unchanged (hero_quote still holds "Honouring the
Past...", hero_subtitle still holds "Opening Ceremony & Holy Mass") -
only which element looks like the bigger statement vs. the smaller plain
line swaps, per the updated Figma design. */
body[data-landing-form="centenary-year-celebration"] .landing-hero-quote {
font-family: var(--landing-font-body);
font-style: normal;
font-size: 21px;
color: #1a1a1a;
}
body[data-landing-form="centenary-year-celebration"] .landing-hero-subtitle {
font-weight: 400;
font-size: 21px;
color: #1a1a1a;
}
body[data-landing-form="centenary-year-celebration"] .btn-landing-primary {
--bs-btn-color: #fff;
--bs-btn-bg: #c9960c;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #b8890b;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #b8890b;
border: none;
box-shadow: none;
}
/* ---------- Quick-details bar: real Figma layout is a 2-column x 2-row
grid (Date+Time / Venue+Dress Code), one vertical divider per row -
distinctly different from the shared component's default single loosely-
wrapping row with a divider before every item. .quick-details-item is a
and .quick-details-divider is a - different tag types, so
:nth-of-type below counts only item positions (1st/2nd/3rd/4th...),
letting CSS alone pick "the 2nd item of each row" without touching the
shared quick-details-bar.php loop. ---------- */
/* CSS Grid rather than flex-wrap: a flex item sized via flex-basis:50%
plus its own padding can push the pair fractionally past 100% of the
row, and flex-wrap reflows to a new line the instant a row doesn't fit -
collapsing to one item per row instead of two. A defined
grid-template-columns track structure has no such content-driven
reflow: it always places exactly 2 items per row at this breakpoint,
full stop. No !important needed anywhere below - quick-details-bar.php
carries no Bootstrap utility classes (see its own comment), so this
selector's plain higher specificity is enough to win outright. */
body[data-landing-form="centenary-year-celebration"] .quick-details-bar {
background: #fdf3d8;
background-image: none;
border-top-color: #c5962c;
border-bottom-color: #c5962c;
display: grid;
grid-template-columns: 1fr;
row-gap: 32px;
column-gap: 0;
}
body[data-landing-form="centenary-year-celebration"] .quick-details-bar .landing-eyebrow {
color: #8b6914;
}
body[data-landing-form="centenary-year-celebration"] .quick-details-value {
color: #2d1f00;
font-size: 24px;
}
/* Replaced by the border-based divider below, which can land between
exactly the 2 items of each row - a divider before every item (the
shared component's default) would put 3 dividers among 4 items instead
of 1 per row. */
body[data-landing-form="centenary-year-celebration"] .quick-details-divider {
display: none;
}
@media (min-width: 768px) {
body[data-landing-form="centenary-year-celebration"] .quick-details-bar {
grid-template-columns: 1fr 1fr;
}
body[data-landing-form="centenary-year-celebration"] .quick-details-item:nth-of-type(odd) {
padding-right: 32px;
}
body[data-landing-form="centenary-year-celebration"] .quick-details-item:nth-of-type(even) {
border-left: 1px solid #c5962c;
padding-left: 32px;
}
}
/* ---------- Form card: gold/cream field styling ---------- */
.form-card-wrapper:has([data-form-slug="centenary-year-celebration"]) {
border-color: #c9960c;
}
.form-card-wrapper:has([data-form-slug="centenary-year-celebration"]) .form-control,
.form-card-wrapper:has([data-form-slug="centenary-year-celebration"]) .form-select {
border-color: #d4af37;
}
/* Bootstrap's own .form-control:focus/.form-select:focus are hardcoded to
its default blue, not driven by --bs-* custom properties like its
buttons/modals are (verified against the vendored bootstrap.min.css) -
a plain override is enough since Bootstrap's own rule carries no
!important. Same gold already used for this page's primary button/
attendance-selected state; ring proportions mirror Bootstrap's own
default (0.25rem / 25% alpha), just recolored. */
.form-card-wrapper:has([data-form-slug="centenary-year-celebration"]) .form-control:focus,
.form-card-wrapper:has([data-form-slug="centenary-year-celebration"]) .form-select:focus {
border-color: #c9960c;
box-shadow: 0 0 0 0.25rem rgba(201, 150, 12, 0.25);
}
.form-card-wrapper:has([data-form-slug="centenary-year-celebration"]) .fp-required {
color: #c0392b;
}
.form-card-wrapper:has([data-form-slug="centenary-year-celebration"]) .fp-btn-submit {
--bs-btn-color: #fff;
--bs-btn-bg: #c9960c;
--bs-btn-border-color: #c9960c;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #b8890b;
--bs-btn-hover-border-color: #b8890b;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #b8890b;
--bs-btn-active-border-color: #b8890b;
}
.form-card-wrapper:has([data-form-slug="centenary-year-celebration"]) .fp-btn-verify {
--bs-btn-color: #fff;
--bs-btn-bg: #1a1a1a;
--bs-btn-border-color: #1a1a1a;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #333;
--bs-btn-hover-border-color: #333;
}
/* Attendance card colors - [data-fp-key="attendance"] only ever exists on
this form's schema, so these are inherently safe without :has() scoping
(same reasoning already used by the "peterite" field's own override
above). Selected-state background/border/icon colors only - the shared
.fp-radio-card:has(...) default above is left untouched since it's also
used by the "peterite" field on the Coffee Table page. */
.form-card-wrapper [data-fp-key="attendance"] .fp-radio-card {
border-color: #d4af37;
}
.form-card-wrapper [data-fp-key="attendance"] .fp-radio-card:has(.fp-radio-card-input:checked) {
background: #fdf6e3;
border-color: #c9960c;
}
.form-card-wrapper [data-fp-key="attendance"] .fp-radio-card::before {
background: #fdf6e3;
}
.form-card-wrapper [data-fp-key="attendance"] .fp-radio-card:has(.fp-radio-card-input:checked)::before {
background: #c9960c;
}
/* ---------- Event Programme (new section, no existing page uses it yet -
literal Figma colors, no scoping needed) ---------- */
.landing-programme {
background: #fdf6e3;
padding: 48px 24px;
}
.landing-programme-inner {
width: 100%;
max-width: 860px;
}
.landing-programme-list {
display: flex;
flex-direction: column;
}
.landing-programme-row {
gap: 24px;
padding: 24px 0;
border-bottom: 1px solid #e8d5a0;
}
.landing-programme-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.landing-programme-time {
flex: 0 0 200px;
font-family: var(--landing-font-body);
font-weight: 700;
color: #b8860b;
font-size: 15px;
}
.landing-programme-desc {
flex: 1 1 auto;
font-family: var(--landing-font-body);
color: #2d2d2d;
font-size: 16px;
line-height: 1.6;
}
@media (max-width: 575.98px) {
.landing-programme-row {
flex-direction: column;
gap: 4px;
}
.landing-programme-time {
flex: 0 0 auto;
}
}
/* ---------- Footer: cream/gold instead of navy ---------- */
body[data-landing-form="centenary-year-celebration"] .elegant-footer {
background: #fdf6e3;
border-top-color: #c9960c;
}
body[data-landing-form="centenary-year-celebration"] .elegant-footer-copyright,
body[data-landing-form="centenary-year-celebration"] .elegant-footer-links a {
color: #7a6030 !important;
}