/* Theme Name: RETURN Africa Child Theme URI: https://returnafrica.com/ Description: Child theme of "dad's boots 5", styled to RETURN Africa's brand (fonts, colours, forms, cards, buttons). Used for the staging Book Now / widget-testing domain (staging.returnafrica.com) and the reservations CRM platform (crm.returnafrica.com). Author: AO Design Author URI: https://aodesign.co.za/ Template: dadsboots-5 Version: 1.1.0 */ /* -------------------------------------------------------------------------- 0. Brand fonts Roboto Serif (Light Italic) for headings/display copy. Montserrat (Regular + Semibold) for body copy and UI. -------------------------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,wght@1,300&family=Montserrat:wght@400;600&display=swap"); /* -------------------------------------------------------------------------- 1. Brand palette architecture Pulled from the RETURN Africa site + approved widget mock-ups. Sub-brand tokens (--sub-*) let any page/section opt into a specific collection's accent by adding the matching body/section class: .theme-pafuri, .theme-welgelegen, .theme-africanstory The default (undeclared) tokens fall back to the Pafuri Collection, since that is RETURN Africa's flagship / most-tested product line. -------------------------------------------------------------------------- */ :root { /* General theme */ --ra-bg: #F5ECE2; /* Antique White */ --ra-card-bg: #FFFFFF; --ra-text-heavy: #302A25; /* Heavy Metal */ --ra-text-muted: #5C5650; --ra-border-pearl: #E8DED5; /* Pearl Blush */ --ra-rodeo-dust: #C7B3A3; /* Rodeo Dust */ /* Widget / form specific surfaces */ --ra-panel-bg: #EFEFEA; /* Soft sand tint used behind widget legs */ --ra-input-bg: #FFFFFF; /* Default sub-brand = Pafuri Collection (flagship) */ --ra-primary: #4D4C27; /* Woodland */ --ra-accent: #6E722E; /* Pesto */ --ra-deep: #6E380F; /* Copper Canyon */ --ra-font-serif: 'Roboto Serif', Georgia, serif; /* used italic + light (300) for headings */ --ra-font-sans: 'Montserrat', sans-serif; /* 400 regular body copy, 600 semibold for UI/emphasis */ --ra-radius: 5px; /* Brand's soft-corner rule, matches live widget screens */ } /* Sub-brand overrides: apply e.g. on Welgelegen House pages, on An African Story pages. Pafuri Collection pages can leave the default in place or apply .theme-pafuri explicitly. */ .theme-pafuri { --ra-primary: #4D4C27; /* Woodland */ --ra-accent: #6E722E; /* Pesto */ --ra-deep: #6E380F; /* Copper Canyon */ } .theme-welgelegen { --ra-primary: #53696B; /* Stormcloud */ --ra-accent: #748F92; /* Light Slate Gray */ --ra-deep: #DF9F3E; /* Tiger's Eye */ } .theme-africanstory { --ra-primary: #1A2629; /* Midnight */ --ra-accent: #304D4F; /* Dark Slate Gray */ --ra-deep: #AE6421; /* Mountain Sunset */ } /* -------------------------------------------------------------------------- 2. Base / typography -------------------------------------------------------------------------- */ body { background-color: var(--ra-bg); color: var(--ra-text-heavy); font-family: var(--ra-font-sans); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .entry-title, .site-title { font-family: var(--ra-font-serif); font-style: italic; font-weight: 300; color: var(--ra-text-heavy); } p, li, label, .text { color: var(--ra-text-muted); font-family: var(--ra-font-sans); font-weight: 400; } strong, b, .field-label, .btn, input[type="submit"], input[type="button"], .logon a, .button { font-weight: 600; /* Montserrat Semibold for UI emphasis */ } .content-box { background-color: var(--ra-card-bg); } /* -------------------------------------------------------------------------- 3. Navigation (overrides parent's bg-dark fixed-top navbar) -------------------------------------------------------------------------- */ .navbar.bg-dark { background-color: var(--ra-text-heavy) !important; border-bottom: 1px solid var(--ra-border-pearl); } .navbar .navbar-nav .nav-link { font-family: var(--ra-font-sans); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; color: #FFFFFF; } .navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link:focus, .navbar .navbar-nav .nav-link.active { color: var(--ra-rodeo-dust); } .navbar-brand img { filter: none; } /* -------------------------------------------------------------------------- 4. Buttons -------------------------------------------------------------------------- */ .btn, input[type="submit"], input[type="button"], .logon a, .button { background-color: var(--ra-deep); border: 1px solid var(--ra-deep); border-radius: var(--ra-radius); font-family: var(--ra-font-sans); font-size: 0.85rem; letter-spacing: 0.03em; text-transform: uppercase; } .btn:hover, .btn:focus, input[type="submit"]:hover, input[type="submit"]:focus, input[type="button"]:hover, input[type="button"]:focus, .logon a:hover, .logon a:focus, .button:hover, .button:focus { background-color: var(--ra-primary); border-color: var(--ra-primary); opacity: 1; } .btn-outline { background-color: transparent; color: var(--ra-deep); border: 1px solid var(--ra-deep); } .btn-outline:hover, .btn-outline:focus { background-color: var(--ra-deep); color: #fff; } /* -------------------------------------------------------------------------- 5. Cards (package / experience cards) -------------------------------------------------------------------------- */ .card { background: var(--ra-card-bg); border: 1px solid var(--ra-border-pearl); border-radius: var(--ra-radius); box-shadow: 0 8px 24px rgba(48, 42, 37, 0.06); } .card-body h2, .card-body h3 { font-family: var(--ra-font-serif); font-size: 1.35rem; } .card-body p { color: var(--ra-text-muted); } /* Grid layout for package / experience cards, matches approved mock-ups */ .package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; } .package-card { background: var(--ra-card-bg); border: 1px solid var(--ra-border-pearl); border-radius: var(--ra-radius); overflow: hidden; } /* -------------------------------------------------------------------------- 6. Forms / widget surfaces (booking widget, CRM screens) -------------------------------------------------------------------------- */ .widget-container, .booking-widget-wrapper { max-width: 1150px; margin: 0 auto; background: var(--ra-card-bg); border: 1px solid var(--ra-border-pearl); border-radius: var(--ra-radius); padding: 35px; box-shadow: 0 10px 30px rgba(48, 42, 37, 0.04); } .field-group { display: flex; flex-direction: column; margin-bottom: 1rem; } .field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--ra-text-heavy); margin-bottom: 6px; } .form-control, input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], select, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--ra-border-pearl); border-radius: var(--ra-radius); background: var(--ra-input-bg); font-family: var(--ra-font-sans); color: var(--ra-text-heavy); } .form-control:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ra-primary); box-shadow: 0 0 0 3px rgba(77, 76, 39, 0.1); } .panel, .leg-panel { background: var(--ra-panel-bg); border-radius: var(--ra-radius); padding: 20px; } /* -------------------------------------------------------------------------- 7. Footer -------------------------------------------------------------------------- */ .footer { background-color: var(--ra-text-heavy); } .footer p, .footer a { color: #FFFFFF; font-family: var(--ra-font-sans); } .footer a:hover, .footer a:focus { color: var(--ra-rodeo-dust); opacity: 1; } /* -------------------------------------------------------------------------- 8. Hide navigation + page titles These staging/CRM domains are for widget testing, not full site browsing, so the main nav bar, page titles, and breadcrumb trail are hidden by default across every template that inherits from the parent theme. -------------------------------------------------------------------------- */ .navbar, .breadcrumbs, .entry-title { display: none !important; } /* Parent's .content-box adds top padding to clear the fixed navbar; remove it now that the navbar is hidden. */ .content-box { padding-top: 40px; } /* -------------------------------------------------------------------------- 9. Widget-canvas template (see page-widget-canvas.php) -------------------------------------------------------------------------- */ .ra-canvas-header { padding: 24px 0; text-align: center; border-bottom: 1px solid var(--ra-border-pearl); background: var(--ra-card-bg); } .ra-canvas-header img { max-height: 48px; } .ra-canvas-body { padding: 60px 20px; } .ra-canvas-footer { padding: 20px; text-align: center; font-size: 0.75rem; color: var(--ra-text-muted); }