/* Doddy — main (non-critical) stylesheet.
Loaded asynchronously after the critical CSS in .
Sections, components, prose, gallery, footer, utilities. */
/* ---------- Layout primitives ---------- */
.ddf-main { background: var(--ddf-cream); }
.ddf-container {
max-width: var(--ddf-container);
margin: 0 auto;
padding-inline: 24px;
}
@media (min-width: 768px) {
.ddf-container { padding-inline: 32px; }
}
.ddf-container--narrow { max-width: var(--ddf-container-narrow); }
.ddf-container--prose { max-width: 720px; }
/* Booking widget: use viewport width so Mon–Sun fit beside the sidebar on one row. */
.ddf-container--booking {
max-width: none;
width: 100%;
}
.ddf-section { padding: 48px 0; }
.ddf-section--prose { padding: 56px 0 72px; }
@media (min-width: 768px) {
.ddf-section { padding: 64px 0; }
}
/* ---------- Section heads ---------- */
.ddf-section-head {
text-align: center;
margin-bottom: 28px;
max-width: 640px;
margin-inline: auto;
}
.ddf-section-head .ddf-badge { margin-bottom: 12px; }
.ddf-section-head h1,
.ddf-section-head h2 {
font-size: clamp(1.375rem, 2.6vw, 1.75rem);
font-weight: 500;
margin: 0 0 6px;
letter-spacing: -0.3px;
color: var(--ddf-charcoal);
}
.ddf-section-head p {
color: var(--ddf-muted);
font-size: 14px;
margin: 0;
}
/* ---------- Cards ---------- */
.ddf-card {
background: #fff;
border: 1px solid var(--ddf-stone);
border-radius: var(--ddf-radius-card);
padding: 22px;
}
.ddf-cards {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
@media (min-width: 640px) {
.ddf-cards { grid-template-columns: repeat(3, 1fr); }
}
/* ---------- Prose (long-form pages) ---------- */
.ddf-prose {
font-size: 16px;
color: var(--ddf-body);
line-height: 1.8;
}
.ddf-prose h1 {
font-size: clamp(1.6rem, 3.2vw, 2.125rem);
color: var(--ddf-charcoal);
font-weight: 500;
letter-spacing: -0.4px;
margin: 0 0 16px;
}
.ddf-prose h2 {
font-size: 1.4rem;
color: var(--ddf-charcoal);
font-weight: 500;
letter-spacing: -0.3px;
margin: 36px 0 10px;
}
.ddf-prose h3 {
font-size: 1.1rem;
color: var(--ddf-charcoal);
font-weight: 500;
margin: 28px 0 8px;
}
.ddf-prose p, .ddf-prose ul, .ddf-prose ol { margin: 0 0 16px; }
.ddf-prose ul, .ddf-prose ol { padding-left: 1.25rem; }
.ddf-prose li { margin-bottom: 6px; }
.ddf-prose a {
color: var(--ddf-orange-dark);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
.ddf-prose a:hover { text-decoration-thickness: 2px; }
/* ---------- Gallery ---------- */
.ddf-gallery .wp-block-gallery,
.ddf-gallery .wp-block-image img {
border-radius: var(--ddf-radius-card);
}
/* Gallery template — full-bleed 3-column rows */
.ddf-section--gallery-full {
padding: 0;
width: 100%;
}
.ddf-gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
width: 100%;
background: var(--ddf-stone);
}
.ddf-gallery-grid__cell {
aspect-ratio: 4 / 3;
background: #fff;
min-height: 0;
}
/* ---------- Form (Formspree contact) ---------- */
.ddf-form { display: grid; gap: 14px; }
.ddf-form label { display: grid; gap: 4px; font-size: 13px; color: var(--ddf-muted); font-weight: 500; }
.ddf-form input,
.ddf-form textarea {
font: inherit;
color: var(--ddf-charcoal);
background: #fff;
border: 1px solid var(--ddf-stone);
border-radius: 10px;
padding: 10px 12px;
width: 100%;
}
.ddf-form input:focus,
.ddf-form textarea:focus {
outline: none;
border-color: var(--ddf-orange);
box-shadow: 0 0 0 3px rgba(244, 126, 0, 0.15);
}
.ddf-form button { justify-self: start; }
/* ---------- Footer ---------- */
.ddf-footer__logo-link { display: inline-block; }
.ddf-footer__logo {
max-height: 44px;
width: auto;
max-width: 180px;
filter: brightness(0) invert(1);
margin-bottom: 12px;
}
.ddf-footer {
background: var(--ddf-charcoal);
color: #fff;
padding: 0;
font-size: 13px;
margin-top: 0;
}
.ddf-footer__inner {
max-width: var(--ddf-container);
margin: 0 auto;
padding: 40px 24px 28px;
}
@media (min-width: 768px) {
.ddf-footer__inner { padding-inline: 32px; }
}
.ddf-footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
margin-bottom: 24px;
}
@media (min-width: 640px) {
.ddf-footer__grid {
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 36px;
}
}
.ddf-footer__grid strong,
.ddf-footer__title {
font-size: 14px;
font-weight: 500;
display: block;
margin-bottom: 10px;
color: #fff;
}
.ddf-footer__grid p,
.ddf-footer__links {
color: rgba(255, 255, 255, 0.65);
line-height: 1.8;
margin: 0;
}
.ddf-footer__links a { display: block; }
.ddf-footer__links a:hover { color: #fff; text-decoration: underline; }
.ddf-footer__copy {
border-top: 1px solid var(--ddf-charcoal-soft);
padding-top: 16px;
color: rgba(255, 255, 255, 0.5);
text-align: center;
font-size: 12px;
}
.ddf-footer__credit {
background: #000;
color: #fff;
text-align: center;
font-size: 12px;
padding: 12px 16px;
}
.ddf-footer__credit a {
color: #fff;
text-decoration: none;
}
.ddf-footer__credit a:hover {
text-decoration: underline;
}
/* ---------- Utility ---------- */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---------- Print ---------- */
@media print {
.ddf-topbar, .ddf-header, .ddf-footer, .ddf-ctas { display: none; }
body { background: #fff; color: #000; }
}
/* ========================================================
HOMEPAGE — Feature strip
======================================================== */
.ddf-features {
background: #fff;
padding: 32px 0;
border-top: 1px solid var(--ddf-stone);
border-bottom: 1px solid var(--ddf-stone);
}
.ddf-features__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px 16px;
text-align: center;
}
@media (min-width: 640px) {
.ddf-features__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.ddf-feature__icon {
width: 40px;
height: 40px;
margin: 0 auto 10px;
background: var(--ddf-orange-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--ddf-orange);
}
.ddf-feature__label {
font-size: 13px;
font-weight: 500;
color: var(--ddf-charcoal);
}
/* ========================================================
HOMEPAGE — Agility section
======================================================== */
.ddf-agility {
padding: 56px 0 48px;
}
.ddf-cards--3 {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
max-width: 800px;
margin: 0 auto;
}
@media (min-width: 600px) {
.ddf-cards--3 {
grid-template-columns: repeat(3, 1fr);
}
}
.ddf-card--centered {
text-align: center;
}
.ddf-card--centered svg {
display: block;
margin: 0 auto 10px;
}
.ddf-card h3 {
font-size: 14px;
font-weight: 500;
margin: 0 0 4px;
}
.ddf-card p {
font-size: 12px;
color: var(--ddf-muted);
line-height: 1.5;
margin: 0;
}
/* ========================================================
HOMEPAGE — Pricing
======================================================== */
.ddf-pricing {
padding: 8px 0 56px;
}
.ddf-pricing__grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
max-width: 640px;
margin: 0 auto;
}
@media (min-width: 520px) {
.ddf-pricing__grid {
grid-template-columns: 1fr 1fr;
}
}
.ddf-price-card {
background: #fff;
border: 1px solid var(--ddf-stone);
border-radius: var(--ddf-radius-card);
padding: 24px 22px 22px;
position: relative;
}
.ddf-price-card__label {
font-size: 11px;
color: var(--ddf-muted);
letter-spacing: 1.2px;
margin-bottom: 14px;
font-weight: 500;
text-transform: uppercase;
}
.ddf-price-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 9px 0;
border-bottom: 1px dashed var(--ddf-stone);
font-size: 14px;
}
.ddf-price-row:last-of-type {
border-bottom: none;
padding-bottom: 2px;
}
.ddf-price-row span:last-child {
font-size: 22px;
font-weight: 500;
letter-spacing: -0.5px;
}
.ddf-price-card__cta {
margin-top: 20px;
}
.ddf-price-card--dark {
background: var(--ddf-charcoal);
color: #fff;
border: none;
}
.ddf-price-card--dark .ddf-price-card__label {
color: var(--ddf-loyalty-gold);
}
.ddf-price-card--dark .ddf-price-row {
border-bottom-color: var(--ddf-charcoal-soft);
}
.ddf-price-card--dark .ddf-price-row span:last-child {
color: var(--ddf-loyalty-gold);
}
.ddf-residents-badge {
position: absolute;
top: -12px;
right: 18px;
background: var(--ddf-orange);
color: #fff;
font-size: 10px;
padding: 4px 12px;
border-radius: var(--ddf-radius-pill);
letter-spacing: 1.2px;
font-weight: 500;
text-transform: uppercase;
}
/* Ghost button on dark card */
.ddf-btn--ghost {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, 0.35);
}
.ddf-btn--ghost:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.6);
color: #fff;
}
/* ========================================================
HOMEPAGE — Live availability snippet
======================================================== */
.ddf-avail {
background: #fff;
padding: 40px 0 36px;
border-top: 1px solid var(--ddf-stone);
border-bottom: 1px solid var(--ddf-stone);
}
.ddf-avail__head {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 18px;
}
@media (min-width: 560px) {
.ddf-avail__head {
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
}
}
.ddf-avail__head h2 {
font-size: clamp(1.2rem, 2.4vw, 1.5rem);
font-weight: 500;
margin: 0 0 3px;
letter-spacing: -0.3px;
}
.ddf-avail__head p {
color: var(--ddf-muted);
font-size: 13px;
margin: 0;
}
.ddf-link {
font-size: 12px;
color: var(--ddf-orange);
font-weight: 500;
white-space: nowrap;
flex-shrink: 0;
}
.ddf-link:hover { text-decoration: underline; }
/* Slot grid */
.ddf-slots {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
@media (min-width: 460px) {
.ddf-slots { grid-template-columns: repeat(6, 1fr); }
}
.ddf-slot {
padding: 10px 4px;
text-align: center;
border-radius: 8px;
font-size: 12px;
font-weight: 500;
transition: opacity .15s;
}
.ddf-slot--free {
background: var(--ddf-orange-light);
border: 1px solid var(--ddf-orange);
color: var(--ddf-orange-dark);
}
.ddf-slot--free a {
display: block;
color: inherit;
}
.ddf-slot--free:hover { opacity: 0.85; }
.ddf-slot--booked {
background: var(--ddf-disabled);
color: #b4b2a9;
text-decoration: line-through;
}
.ddf-slot--loading {
background: var(--ddf-stone);
color: transparent;
animation: ddf-pulse 1.4s ease-in-out infinite;
}
@keyframes ddf-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* Legend */
.ddf-avail__legend {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 14px;
font-size: 11px;
color: var(--ddf-muted);
}
.ddf-avail__legend span {
display: flex;
align-items: center;
gap: 6px;
}
.ddf-swatch {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 3px;
flex-shrink: 0;
}
.ddf-swatch--free { background: var(--ddf-orange-light); border: 1px solid var(--ddf-orange); }
.ddf-swatch--booked { background: var(--ddf-disabled); }
/* ========================================================
HOMEPAGE — Sister-site CTA band
======================================================== */
.ddf-sister {
background: var(--ddf-orange);
color: #fff;
padding: 48px 24px;
}
.ddf-sister h2 {
font-size: clamp(1.3rem, 2.6vw, 1.75rem);
font-weight: 500;
margin: 0 0 8px;
letter-spacing: -0.3px;
}
.ddf-sister p {
font-size: 15px;
margin: 0 auto 22px;
opacity: 0.92;
max-width: 38rem;
line-height: 1.6;
}
/* Ghost-light: white bg + orange text for use on the orange band */
.ddf-btn--ghost-light {
background: #fff;
color: var(--ddf-orange-dark);
border-color: transparent;
}
.ddf-btn--ghost-light:hover {
background: var(--ddf-orange-light);
color: var(--ddf-orange-dark);
}
/* ========================================================
HOMEPAGE — Reduced-motion override
Spec §4 accessibility requirement.
======================================================== */
@media (prefers-reduced-motion: reduce) {
.ddf-slot--loading { animation: none; opacity: 0.6; }
}
/* ========================================================
SHARED — Page hero (top banner on inner pages)
======================================================== */
.ddf-page-hero {
background: #fff;
border-bottom: 1px solid var(--ddf-stone);
padding: 48px 24px 32px;
text-align: center;
}
@media (min-width: 768px) {
.ddf-page-hero { padding: 64px 32px 40px; }
}
.ddf-page-hero h1 {
font-size: clamp(1.6rem, 3.2vw, 2.125rem);
font-weight: 500;
letter-spacing: -0.5px;
line-height: 1.2;
margin: 14px auto 10px;
max-width: 36rem;
}
.ddf-page-hero p {
color: var(--ddf-body);
font-size: 15px;
line-height: 1.7;
max-width: 34rem;
margin: 0 auto;
}
/* Variant of existing .ddf-agility used inside The Field page (with rules).
Adds top/bottom borders to visually separate from neighbouring sections. */
.ddf-agility--bordered {
background: #fff;
border-top: 1px solid var(--ddf-stone);
border-bottom: 1px solid var(--ddf-stone);
padding: 48px 0;
}
/* Shared CTA band (orange) reused across inner pages. */
.ddf-cta-band {
background: var(--ddf-orange);
color: #fff;
padding: 40px 24px;
text-align: center;
}
.ddf-cta-band h2 {
font-size: clamp(1.25rem, 2.4vw, 1.5rem);
font-weight: 500;
margin: 0 0 6px;
color: #fff;
letter-spacing: -0.3px;
}
.ddf-cta-band p {
font-size: 14px;
margin: 0 auto 20px;
opacity: 0.92;
max-width: 28rem;
line-height: 1.6;
}
/* ========================================================
THE FIELD — Stats grid (size, fencing, surface, parking)
======================================================== */
.ddf-stats {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
@media (min-width: 600px) {
.ddf-stats {
grid-template-columns: 1fr 1fr;
gap: 18px;
}
}
.ddf-stat { padding: 24px; }
.ddf-stat__label {
font-size: 11px;
color: var(--ddf-muted);
letter-spacing: 1.5px;
margin-bottom: 8px;
font-weight: 500;
text-transform: uppercase;
}
.ddf-stat__value {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 500;
letter-spacing: -0.5px;
line-height: 1.1;
}
.ddf-stat__detail {
font-size: 13px;
color: var(--ddf-body);
margin: 6px 0 0;
line-height: 1.5;
}
/* ========================================================
THE FIELD — Rules grid
======================================================== */
.ddf-rules {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
max-width: 720px;
margin: 0 auto;
}
@media (min-width: 640px) {
.ddf-rules { grid-template-columns: 1fr 1fr; }
}
.ddf-rule {
background: #fff;
border: 1px solid var(--ddf-stone);
border-radius: 12px;
padding: 14px 16px;
display: flex;
gap: 12px;
align-items: flex-start;
}
.ddf-rule p {
font-size: 13px;
line-height: 1.5;
margin: 0;
color: var(--ddf-charcoal);
}
.ddf-rule strong { display: inline; margin-right: 4px; }
.ddf-rule__check {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--ddf-orange-light);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--ddf-orange);
}
/* ========================================================
CONTACT — Two-column body
======================================================== */
.ddf-contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
@media (min-width: 880px) {
.ddf-contact-grid {
grid-template-columns: 1.2fr 1fr;
gap: 24px;
}
}
.ddf-contact-form {
background: #fff;
border: 1px solid var(--ddf-stone);
border-radius: var(--ddf-radius-card);
padding: 24px;
}
@media (min-width: 600px) {
.ddf-contact-form { padding: 28px; }
}
.ddf-contact-form h2 {
font-size: 18px;
font-weight: 500;
margin: 0 0 18px;
letter-spacing: -0.2px;
}
.ddf-contact-form .ddf-form-row {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 480px) {
.ddf-contact-form .ddf-form-row { grid-template-columns: 1fr 1fr; }
}
/* The contact form is built on top of the existing .ddf-form layout but
with a slightly different field skin (cream fill instead of plain white)
to match the design mock. */
.ddf-contact-form .ddf-form { gap: 12px; }
.ddf-contact-form input,
.ddf-contact-form textarea,
.ddf-contact-form select {
background: var(--ddf-cream);
border: 1px solid var(--ddf-stone);
border-radius: 10px;
padding: 11px 14px;
font: inherit;
font-size: 14px;
width: 100%;
color: var(--ddf-charcoal);
}
.ddf-contact-form select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
.ddf-contact-form textarea { min-height: 100px; resize: vertical; }
.ddf-contact-form input:focus,
.ddf-contact-form textarea:focus,
.ddf-contact-form select:focus {
outline: none;
border-color: var(--ddf-orange);
box-shadow: 0 0 0 3px rgba(244, 126, 0, 0.15);
}
.ddf-contact-form .ddf-consent {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
color: var(--ddf-body);
line-height: 1.5;
font-weight: 400;
margin: 4px 0 8px;
}
.ddf-contact-form .ddf-consent input[type="checkbox"] {
width: 16px;
height: 16px;
margin-top: 2px;
flex-shrink: 0;
}
.ddf-contact-form .ddf-consent a {
color: var(--ddf-orange-dark);
text-decoration: underline;
}
/* ========================================================
CONTACT — Info cards (email / find us / opening hours)
======================================================== */
.ddf-info-card {
background: #fff;
border: 1px solid var(--ddf-stone);
border-radius: var(--ddf-radius-card);
padding: 22px;
margin-bottom: 14px;
}
.ddf-info-card:last-child { margin-bottom: 0; }
.ddf-info-card__label {
font-size: 11px;
color: var(--ddf-muted);
letter-spacing: 1.5px;
margin-bottom: 14px;
font-weight: 500;
text-transform: uppercase;
}
.ddf-info-card__address {
font-size: 13px;
line-height: 1.6;
color: var(--ddf-body);
font-style: normal;
margin: 0 0 12px;
}
.ddf-info-card__address strong { color: var(--ddf-charcoal); font-weight: 500; }
.ddf-info-row {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
}
.ddf-info-row:last-child { margin-bottom: 0; }
.ddf-info-row__icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--ddf-orange-light);
color: var(--ddf-orange);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ddf-info-row__title { font-size: 13px; font-weight: 500; }
.ddf-info-row__title a { color: inherit; }
.ddf-info-row__sub { font-size: 12px; color: var(--ddf-muted); line-height: 1.5; margin-top: 2px; }
/* Map placeholder block (illustrative, replaced by real embed in Step 9). */
.ddf-map {
background: linear-gradient(135deg, #c4d5a8 0%, #9bb87a 100%);
border-radius: 10px;
height: 140px;
overflow: hidden;
margin-bottom: 14px;
}
.ddf-map svg { display: block; width: 100%; height: 100%; }
/* Hours rows */
.ddf-hours { font-size: 13px; }
.ddf-hours-row {
display: flex;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px dashed var(--ddf-stone);
}
.ddf-hours-row:last-child { border-bottom: none; }
.ddf-hours-row span:last-child { font-weight: 500; }
/* Small button variant used for "Get directions" pill. */
.ddf-btn--small {
padding: 8px 14px;
font-size: 12px;
}
/* ========================================================
CONTACT — FAQ accordion (native )
======================================================== */
.ddf-section--faq { background: #fff; border-top: 1px solid var(--ddf-stone); }
.ddf-faq { max-width: 640px; margin: 0 auto; }
.ddf-faq__item {
border-bottom: 1px solid var(--ddf-stone);
}
.ddf-faq__item:last-child { border-bottom: none; }
.ddf-faq__item details { padding: 14px 0; }
.ddf-faq__item summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
cursor: pointer;
list-style: none;
font-size: 14px;
font-weight: 500;
color: var(--ddf-charcoal);
}
.ddf-faq__item summary::-webkit-details-marker { display: none; }
.ddf-faq__item summary::after {
content: "";
width: 16px;
height: 16px;
flex-shrink: 0;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
transition: transform 0.15s ease;
}
.ddf-faq__item details[open] summary::after {
background-image: url("data:image/svg+xml;utf8,");
}
.ddf-faq__answer {
font-size: 13px;
color: var(--ddf-body);
line-height: 1.6;
margin: 8px 0 0;
}
/* ========================================================
BOOK — Stepper
======================================================== */
.ddf-stepper {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px 14px;
list-style: none;
padding: 0;
margin: 0 auto 28px;
max-width: 760px;
}
.ddf-step {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 500;
}
.ddf-step__num {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--ddf-orange-light);
color: var(--ddf-orange-dark);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 500;
flex-shrink: 0;
}
.ddf-step--active .ddf-step__num,
.ddf-step--done .ddf-step__num {
background: var(--ddf-orange);
color: #fff;
}
.ddf-step--inactive { color: var(--ddf-muted); }
.ddf-stepper__sep {
width: 24px;
height: 1px;
background: var(--ddf-stone);
display: none;
flex-shrink: 0;
}
@media (min-width: 720px) {
.ddf-stepper__sep { display: block; }
}
/* ========================================================
BOOK — Two-column widget
======================================================== */
.ddf-booking-grid {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
@media (min-width: 880px) {
.ddf-booking-grid { grid-template-columns: 1.4fr 1fr; }
}
.ddf-booking-grid__main { display: grid; gap: 14px; }
/* ========================================================
BOOK — Calendar
======================================================== */
.ddf-calendar {
background: #fff;
border: 1px solid var(--ddf-stone);
border-radius: var(--ddf-radius-card);
padding: 22px;
}
.ddf-calendar__head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
gap: 10px;
}
.ddf-calendar__head h3 {
font-size: 16px;
font-weight: 500;
margin: 0;
}
.ddf-calendar__nav {
display: flex;
gap: 8px;
align-items: center;
}
.ddf-calendar__navbtn {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--ddf-stone);
background: #fff;
color: var(--ddf-charcoal);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font: inherit;
}
.ddf-calendar__navbtn[disabled] { opacity: 0.55; cursor: not-allowed; }
.ddf-calendar__month {
font-size: 13px;
font-weight: 500;
min-width: 100px;
text-align: center;
}
.ddf-calendar__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.ddf-calendar__dow {
text-align: center;
font-size: 10px;
color: var(--ddf-muted);
padding: 4px 0;
font-weight: 500;
}
.ddf-calendar__day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: var(--ddf-charcoal);
background: var(--ddf-cream);
border-radius: 8px;
position: relative;
}
.ddf-calendar__day--out {
background: transparent;
color: #c4c2bb;
}
.ddf-calendar__day--closed {
background: var(--ddf-disabled);
color: #b4b2a9;
}
.ddf-calendar__day--selected {
background: var(--ddf-orange-light);
color: var(--ddf-orange-dark);
border: 2px solid var(--ddf-orange);
font-weight: 600;
}
.ddf-calendar__dot {
position: absolute;
bottom: 3px;
width: 4px;
height: 4px;
border-radius: 50%;
display: inline-block;
}
.ddf-calendar__dot--free { background: var(--ddf-success); }
.ddf-calendar__dot--filling{ background: #f4a00c; }
.ddf-calendar__dot--closed { background: #c4c2bb; }
.ddf-calendar__dot--active { background: var(--ddf-orange); }
.ddf-calendar__legend {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 14px;
font-size: 10px;
color: var(--ddf-muted);
}
.ddf-calendar__legend span { display: flex; align-items: center; gap: 5px; }
/* Legend-only sizing: i tags inside .ddf-calendar__legend are 6x6 dots,
not absolutely-positioned like inside a day cell. */
.ddf-calendar__legend .ddf-calendar__dot {
position: static;
width: 6px;
height: 6px;
}
/* ========================================================
BOOK — Slot grid (full day)
======================================================== */
.ddf-slots-all {
background: #fff;
border: 1px solid var(--ddf-stone);
border-radius: var(--ddf-radius-card);
padding: 22px;
}
.ddf-slots-all__head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 14px;
gap: 10px;
}
.ddf-slots-all__head h3 { font-size: 16px; font-weight: 500; margin: 0; }
.ddf-slots-all__date { font-size: 13px; color: var(--ddf-muted); }
.ddf-slot-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
@media (min-width: 480px) {
.ddf-slot-grid { grid-template-columns: repeat(5, 1fr); }
}
.ddf-slot-cell {
background: var(--ddf-cream);
border: 1px solid var(--ddf-stone);
padding: 9px 4px;
text-align: center;
border-radius: 8px;
font-size: 11px;
color: var(--ddf-charcoal);
}
.ddf-slot-cell--booked {
background: var(--ddf-disabled);
color: #b4b2a9;
text-decoration: line-through;
border-color: transparent;
}
.ddf-slot-cell--selected {
background: var(--ddf-orange);
color: #fff;
font-weight: 600;
border-color: transparent;
box-shadow: 0 0 0 2px var(--ddf-loyalty-gold);
}
.ddf-slot-grid__legend {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 14px;
font-size: 10px;
color: var(--ddf-muted);
}
.ddf-slot-grid__legend span { display: flex; align-items: center; gap: 5px; }
.ddf-slot-grid__legend i {
width: 8px;
height: 8px;
border-radius: 3px;
display: inline-block;
}
/* ========================================================
BOOK — Summary sidebar
======================================================== */
.ddf-summary {
background: #fff;
border: 1px solid var(--ddf-stone);
border-radius: var(--ddf-radius-card);
padding: 22px;
}
@media (min-width: 880px) {
.ddf-summary { position: sticky; top: 16px; }
}
.ddf-summary h3 { font-size: 16px; font-weight: 500; margin: 0 0 6px; }
.ddf-summary__sub { color: var(--ddf-muted); font-size: 12px; margin: 0 0 16px; }
.ddf-summary__slot {
background: var(--ddf-cream);
border-radius: 10px;
padding: 14px;
margin-bottom: 14px;
}
.ddf-summary__slot-date { font-size: 12px; color: var(--ddf-muted); margin-bottom: 4px; }
.ddf-summary__slot-time {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
}
.ddf-summary__slot-meta { font-size: 12px; color: var(--ddf-body); margin-top: 4px; }
.ddf-summary__loyalty { margin-bottom: 14px; }
.ddf-summary__loyalty label {
display: block;
font-size: 12px;
color: var(--ddf-body);
margin-bottom: 6px;
font-weight: 500;
}
.ddf-summary__loyalty-input { display: flex; gap: 6px; }
.ddf-summary__loyalty-input input {
flex: 1;
background: var(--ddf-cream);
border: 1px solid var(--ddf-stone);
border-radius: 10px;
padding: 10px 12px;
font: inherit;
font-size: 13px;
color: var(--ddf-charcoal);
}
.ddf-summary__loyalty-input input::placeholder { color: #b4b2a9; }
.ddf-summary__loyalty-input input:disabled { opacity: 0.7; }
.ddf-summary__loyalty-input button {
background: var(--ddf-charcoal);
color: #fff;
padding: 10px 14px;
border-radius: 10px;
font: inherit;
font-size: 12px;
font-weight: 500;
border: none;
cursor: pointer;
}
.ddf-summary__loyalty-input button:disabled { opacity: 0.6; cursor: not-allowed; }
.ddf-summary__totals {
border-top: 1px dashed var(--ddf-stone);
padding-top: 14px;
}
.ddf-summary__row {
display: flex;
justify-content: space-between;
font-size: 13px;
padding: 4px 0;
color: var(--ddf-body);
}
.ddf-summary__row--discount span:last-child { color: var(--ddf-success); }
.ddf-summary__total {
border-top: 1px solid var(--ddf-stone);
margin-top: 8px;
padding-top: 10px;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.ddf-summary__total-label { font-size: 13px; font-weight: 500; color: var(--ddf-charcoal); }
.ddf-summary__total-amount { font-size: 22px; font-weight: 500; color: var(--ddf-charcoal); }
.ddf-summary__cta {
margin-top: 16px;
display: block;
width: 100%;
padding: 13px 22px;
}
.ddf-summary__cta[aria-disabled="true"] {
pointer-events: none;
opacity: 0.7;
}
.ddf-summary__secure {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 12px;
font-size: 11px;
color: var(--ddf-muted);
}
/* ========================================================
BOOK — Trust strip
======================================================== */
.ddf-trust {
background: #fff;
padding: 32px 0;
border-top: 1px solid var(--ddf-stone);
}
.ddf-trust__grid {
max-width: 720px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1fr;
gap: 22px;
text-align: center;
}
@media (min-width: 640px) {
.ddf-trust__grid {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
}
.ddf-trust__icon {
width: 36px;
height: 36px;
margin: 0 auto 10px;
background: var(--ddf-orange-light);
color: var(--ddf-orange);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.ddf-trust__title { font-size: 13px; font-weight: 500; margin-bottom: 3px; }
.ddf-trust__copy { font-size: 12px; color: var(--ddf-muted); line-height: 1.5; }
/* ========================================================
BOOK — Placeholder notice (shown until plugin is live)
======================================================== */
.ddf-book-notice {
margin: 22px auto 0;
max-width: 560px;
padding: 14px 18px;
border-radius: 12px;
background: var(--ddf-cream);
border: 1px solid var(--ddf-stone);
font-size: 13px;
color: var(--ddf-body);
line-height: 1.6;
text-align: center;
}
.ddf-book-notice a {
color: var(--ddf-orange-dark);
text-decoration: underline;
font-weight: 500;
}