/* =========================================================================== California Spa - text sizes and colours Ported from californiamass.in to the spalab WordPress theme. Loaded by californiaspa-extras.php. The theme is NOT edited, so removing this file (or deactivating the plugin) restores the old look exactly. Selectors below are keyed to spalab's real markup (#header, #main-menu, .dt-menu-toggle, .dt-sc-button). The VALUES are identical to the live .NET site; only the selectors are rewritten. =========================================================================== */ :root { /* ---- palette (exact values from the live site) ---- */ --spa-bg: #E0D5C1; /* page background, warm cream */ --spa-maroon: #840000; /* headings, borders, links */ --spa-green: #228B22; /* body copy */ --spa-purple: #b30af3; /* menu links, tagline, accents */ --spa-green-lit: #54FF36; /* bright green - CTA only */ --spa-gold: #a28321; /* replaces the old #f8d66a */ --spa-card: #F5F0E8; /* panels, dialogs, form cards */ --spa-olive: #34483A; /* Facebook button */ --spa-clay: #B86F52; /* Google+ button */ /* The copyright strip: purple bar, green text - matching the .NET footer exactly, which uses #228B22 there. >>> ONE MEASUREMENT, FLAGGED NOT FIXED <<< #228B22 on #72448D measures 1.63:1. AA wants 4.5:1, or 3:1 for large/bold text, so this pairing is below the bar. It is kept because it is what the reference does and what was asked for. If it reads badly on a phone, switch --spa-footer-text to var(--spa-green-lit) (#54FF36) - still green, still the site palette, and 5.37:1 on the same purple. One line. */ --spa-footer: #72448D; --spa-footer-text: var(--spa-green); /* ---- type scale ---- */ --spa-font-body: "Roboto", Arial, sans-serif; --spa-font-display: "Playfair Display", Georgia, serif; --spa-size-body: 16px; --spa-size-small: 14px; --spa-size-menu: 20px; } /* ---- 1. page ---------------------------------------------------------- */ body { background-color: var(--spa-bg); color: var(--spa-green); font-family: var(--spa-font-body); font-size: var(--spa-size-body); } /* ---- 1b. the content well --------------------------------------------- >>> SPECIFICITY NOTE, PLEASE DO NOT "SIMPLIFY" THIS <<< The theme options hold a block of custom CSS that WordPress prints INLINE in the head, after every enqueued stylesheet. It contains: #main { background: none repeat scroll 0 0 #6e0202; } #footer { background: #6e0202; } #main is (1,0,0). A plain `#main {...}` here would also be (1,0,0), and the inline block comes later in the document, so it would win. Prefixing with `body ` makes it (1,0,1) and takes it cleanly. Without this the page keeps its dark red well and the cream background set above is never visible - only the margins around the content. */ body #main { background: var(--spa-bg); } /* ---- 2. body copy ----------------------------------------------------- Green AND bold at 16px. That pairing is deliberate - it was matched to the opening paragraph on the live site. */ body, p, li, .entry-content p, .entry-content li, .dt-sc-ico-content p { font-family: var(--spa-font-body); font-size: var(--spa-size-body); font-weight: 700; color: var(--spa-green); line-height: 26px; } small, .entry-meta, .entry-meta a, figcaption { font-size: var(--spa-size-small); } /* ---- 3. headings ------------------------------------------------------ spalab paints every heading #181818 at line 45 of style.css, including heading links - both are overridden here. */ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .entry-title, .entry-title a { font-family: var(--spa-font-display); font-weight: 700; color: var(--spa-maroon); } /* Page-title headings are pinned to the old bright green by the per-page custom CSS, which WordPress prints inline AFTER this stylesheet: .pgtitle h2 { color: #81d742; } That is (0,1,1) and beats the bare `h2` rule above at (0,0,1), so those titles kept the old green while the H1 and H3 beside them went maroon - which reads as a bug rather than a choice. `body ` takes it to (0,1,2). #81d742 is the same green the .NET site replaced, so this is the same substitution, applied to a heading. */ body .pgtitle h1, body .pgtitle h2, body .pgtitle h3, body .pgtitle h4 { color: var(--spa-maroon); } /* Taglines are maroon like every other heading. The ONE exception is the front page, where the "Exhilirating Massage for Body Mind And Soul" tagline is purple - that was asked for specifically, and it matches the .NET landing page. Everywhere else (Testimonials, etc.) the .NET site renders this subtitle maroon, so that is the default here. WordPress puts `home` on for the front page only. */ /* `body ` prefix again - the theme options custom CSS prints inline after this file and contains `.border-title .tag-line { color: rgb(179,10,251) }` at (0,2,0), the same as a bare rule here would be. (0,2,1) takes it. */ body .border-title .tag-line, body .floral-head, body .bbar-text, body .spa-tagline { color: var(--spa-maroon); } body.home .border-title .tag-line, body.home .floral-head, body.home .spa-tagline { color: var(--spa-purple); } /* ---- 4. header + navigation ------------------------------------------- >>> ONE RISKY LINE, PLEASE READ <<< The live .NET header is cream with purple menu text. spalab's header is #292929 dark, and purple on that dark grey measures only 2.95:1 - below the 3.0 minimum even for large bold text. So the header is lightened to match the live site. If the uploaded logo (calogo_small.png) is white artwork, it will disappear against the cream. Check the header after activating. If it does vanish, either upload a dark version of the logo, or comment out the #header rule below - but then the menu needs a colour that reads on dark, and purple is not it. */ #header, #header.header1, #header.header2, #header.header3, #header.header5 { background-color: var(--spa-bg); } /* Menu links: purple, bold, 20px, sentence case. spalab ships these at 14px uppercase #fff. */ #main-menu > ul.menu > li > a, #main-menu > ul.menu.rounded > li > a, #main-menu > ul.menu.type2 > li > a { color: var(--spa-purple); font-family: var(--spa-font-body); font-size: var(--spa-size-menu); font-weight: 700; text-transform: none; } /* ---- 4b. one row, right-aligned beside the logo ------------------------ >>> THE ARITHMETIC, BECAUSE IT IS NOT OBVIOUS <<< An earlier version of this sized the menu against the VIEWPORT, which was wrong. The theme caps `.container` at 1170px no matter how wide the screen is, and #logo floats left taking 234px of it. So the menu column is ~936px at EVERY desktop width - a 2560px monitor gets exactly the same 936px as a 1200px laptop. Measured: the 8 items need 1166px at 20px. That never fits 936px, which is why the menu still wrapped to two rows on a 1792px screen. Solving it: text is ~910px of that 1166 (the rest is padding, 8 items x 2 sides). At font F with 10px side padding: 910 x (F/20) + 160 <= 920 -> F <= 16.7 Hence 16px. That is smaller than --spa-size-menu (20px), and it has to be: 20px physically cannot fit on one line in a 936px column. The .NET site gets away with 20px because its header is full-width, not capped at 1170px. Right-aligned and floated so the row sits against the right edge with the logo at the left, which is the reference layout. */ @media (min-width: 768px) { #main-menu > ul.menu, #main-menu > ul.menu.rounded { float: right; text-align: right; } #main-menu > ul.menu > li > a, #main-menu > ul.menu.rounded > li > a, #main-menu > ul.menu.type2 > li > a { font-size: 16px; padding-left: 10px; padding-right: 10px; } } /* Narrower containers: the column shrinks with the viewport once the theme drops below its 1170px container, so step down again to keep one row. */ @media (max-width: 1199px) { #main-menu > ul.menu > li > a, #main-menu > ul.menu.rounded > li > a { font-size: 14px; padding-left: 8px; padding-right: 8px; } } @media (max-width: 991px) { #main-menu > ul.menu > li > a, #main-menu > ul.menu.rounded > li > a { font-size: 13px; padding-left: 6px; padding-right: 6px; } } /* Below 767px the hamburger takes over and the items stack full width, so the size can go back up to normal body copy. */ @media (max-width: 767px) { #main-menu > ul.menu > li > a, #main-menu > ul.menu.rounded > li > a { font-size: var(--spa-size-body); padding-left: 15px; padding-right: 15px; } } /* Hover and current-page. spalab uses a long selector list for these and sets colour #fff / border-color #fff - both are replaced. */ #main-menu > ul.menu > li > a:hover, #main-menu > ul.menu > li:hover > a, #main-menu > ul.menu > li.current-menu-item > a, #main-menu > ul.menu > li.current-menu-ancestor > a, #main-menu > ul.menu > li.current_page_item > a, #main-menu > ul.menu > li.current_page_ancestor > a, #main-menu > ul.menu.rounded > li > a:hover, #main-menu > ul.menu.rounded > li:hover > a, #main-menu > ul.menu.rounded > li.current-menu-item > a, #main-menu > ul.menu.rounded > li.current_page_item > a { color: var(--spa-maroon); border-color: var(--spa-maroon); } /* Dropdowns sit on their own panel, so they get the card background. */ #main-menu ul.menu ul.sub-menu, #main-menu ul.menu .megamenu-child-container { background-color: var(--spa-card); } #main-menu ul.menu ul.sub-menu li a, #main-menu ul.menu .megamenu-child-container li a { color: var(--spa-maroon); font-family: var(--spa-font-body); font-size: var(--spa-size-body); font-weight: 700; text-transform: none; } #main-menu ul.menu ul.sub-menu li a:hover, #main-menu ul.menu .megamenu-child-container li a:hover { color: var(--spa-purple); } /* ---- 5. mobile menu --------------------------------------------------- The toggle and its three bars are #fff on a dark strip; the open panel is rgba(0,0,0,.15). All three go light so the menu is readable, which is the same fix that was made on the live site. background-COLOR, never the `background` shorthand: the shorthand wipes background-image and blanks out any sprite. That bug has already cost this project a round. */ .dt-menu-toggle { background-color: rgba(132, 0, 0, 0.10); color: var(--spa-purple); font-family: var(--spa-font-body); font-size: var(--spa-size-body); font-weight: 700; } .dt-menu-toggle-icon, .dt-menu-toggle-icon:before, .dt-menu-toggle-icon:after { background-color: var(--spa-purple); } /* >>> THIS MUST STAY INSIDE THE MEDIA QUERY <<< The theme only gives ul.menu a background below 767px, where it is the open dropdown panel. Unscoped, this painted a large cream slab behind the whole desktop menu bar - a light box sitting next to the logo instead of a transparent menu. The toggle above is already display:none on desktop, so only this rule needed the guard. */ @media (max-width: 767px) { #main-menu > ul.menu, #main-menu > ul.menu.rounded { background-color: var(--spa-card); } } /* The open panel links, stacked full-width on mobile. */ #main-menu ul.menu > li > a, #main-menu ul.menu.rounded > li > a { color: var(--spa-purple); } .dt-menu-expand { color: var(--spa-maroon); } /* ---- 6. links in content ---------------------------------------------- */ .entry-content a, .post-content a, .entry-details a { color: var(--spa-maroon); text-decoration: underline; } .entry-content a:hover, .post-content a:hover, .entry-details a:hover { color: var(--spa-purple); } /* ---- 7. cards, panels, forms ------------------------------------------ Anything dark-on-dark becomes unreadable against the cream page, which is what this avoids. */ /* >>> .widget IS DELIBERATELY NOT IN THIS LIST <<< It matched every sidebar and footer widget, including the two social share widgets, and drew each as a bordered cream card. In the footer that produced empty light boxes around the share links - the widget text is cream too, so it vanished against its own new background. Cards are for form panels, which is what the list below is now. */ .dt-sc-box, form.wpcf7-form, .wpforms-container, .dt-sc-testimonial-wrapper { background-color: var(--spa-card); border: 2px solid var(--spa-maroon); border-radius: 10px; } label, .wpcf7-form label, .wpforms-field-label { color: var(--spa-maroon); font-family: var(--spa-font-body); font-weight: 700; } input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="number"], input[type="date"], select, textarea, input.text { background-color: #fff; border: 1px solid rgba(132, 0, 0, 0.35); border-radius: 6px; padding: 8px 10px; color: var(--spa-maroon); font-family: var(--spa-font-body); font-size: var(--spa-size-body); } ::placeholder { color: rgba(132, 0, 0, 0.55); } /* ---- 8. buttons ------------------------------------------------------- The live site keeps its orange action button, which is legible as-is. */ .dt-sc-button, input[type="submit"], button, .wpcf7-submit { background-color: #FF9B22; color: #006400; font-family: var(--spa-font-body); font-weight: 700; border: 0; border-radius: 8px; } /* CTA links use the bright green. Add class="spa-cta" where wanted. */ .spa-cta, .menu-item.spa-cta > a { color: var(--spa-green-lit); font-weight: 700; } /* ---- 9. share buttons ------------------------------------------------- background-COLOR again - these draw their glyph from a sprite. */ .spa-share-facebook, .wp_social_sharing .facebook { background-color: var(--spa-olive); } .spa-share-google, .wp_social_sharing .google { background-color: var(--spa-clay); } /* On narrow screens the share row stays horizontal rather than stacking. */ @media (max-width: 767px) { .wp_social_sharing, .spa-share { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; } } /* ---- 10. tables ------------------------------------------------------- See the contrast note at the bottom before keeping --spa-gold here. */ table th, table td { color: var(--spa-gold); font-family: var(--spa-font-body); font-size: var(--spa-size-body); } /* ---- 11. footer ------------------------------------------------------- Footer background is --spa-footer (#72448D), the theme's own purple - the same one the copyright strip already used. >>> ONE MEASUREMENT WORTH KNOWING <<< The body green --spa-green (#228B22) on this purple measures 1.63:1. AA wants 4.5:1, or 3:1 for large/bold text, so that pairing is not readable - it is dark-on-dark. The green used here is --spa-green-lit (#54FF36), the site's own bright green, which measures 5.37:1 on the same purple and passes AA. It is still the site palette and still reads as green text. To force the darker #228B22 anyway, change --spa-footer-text below to var(--spa-green). One line - but please look at it on a phone first. `body ` prefix again: the theme options custom CSS prints inline after this file and contains `#footer { background: #6e0202; }` at (1,0,0). */ /* The purple belongs to the COPYRIGHT STRIP ONLY, not the whole footer. The .NET reference keeps the widget area (divider, share buttons) on the cream page colour and turns purple only at the menu strip at the very bottom. */ body #footer { background: var(--spa-bg); } body #footer .copyright { background: var(--spa-footer); } /* The cream part of the footer follows the page: green copy, maroon headings, purple links. */ body #footer, body #footer p, body #footer li, body #footer .widget { color: var(--spa-green); font-family: var(--spa-font-body); font-size: var(--spa-size-body); font-weight: 700; } body #footer a, body #footer .widget a { color: var(--spa-purple); } body #footer a:hover { color: var(--spa-maroon); text-decoration: underline; } /* Share buttons are SOLID tiles with green text, as on the .NET site - not outlined pills. The plugin ships them as `border: 1px solid currentColor` with no fill; these give them the fill and drop the outline. background-COLOR, never the shorthand: on the .NET site these draw their glyph from a sprite and the shorthand wiped it, leaving blank coloured squares. Same discipline here. */ body #footer .caspa-share, body #footer .caspa-share:link, body #footer .caspa-share:visited { display: inline-block; min-width: 128px; padding: 12px 18px; margin: 0 6px 8px; text-align: center; border: 0; border-radius: 2px; color: var(--spa-green-lit); font-family: var(--spa-font-body); font-size: var(--spa-size-body); font-weight: 700; background-color: #34483A; /* fallback: the .NET Facebook colour */ } /* Per-network fills. Facebook and Google+ take the two values the .NET site sets explicitly; Twitter and LinkedIn keep their brand blues. */ body #footer .caspa-share[href*="facebook"] { background-color: #34483A; } body #footer .caspa-share[href*="google"] { background-color: #B86F52; } body #footer .caspa-share[href*="twitter"], body #footer .caspa-share[href*="x.com"] { background-color: #29A9E0; } body #footer .caspa-share[href*="linkedin"] { background-color: #0E76A8; } body #footer .caspa-share:hover { color: var(--spa-card); text-decoration: none; } /* The share row is centred, as in the reference. */ body #footer .caspa-share-wrap { display: block; text-align: center; } /* The divider flower is a light PNG sprite meant for a dark footer. The widget area is cream, so it needs darkening - brightness(0) blacks out every non-transparent pixel while leaving the alpha alone. */ body #footer .ico-border .ico-bg, body #footer .ico-bg.flower { filter: brightness(0); opacity: 0.7; } /* The copyright strip stacks its two halves (the notice, and the footer menu floated right) once the container is narrow, which left both hard against the left edge with "Testimonials" hanging alone on a third line. Centring both reads as deliberate at every width, and the menu is allowed to wrap as a centred group rather than a ragged float. */ body #footer .copyright .container { text-align: center; } body #footer .copyright .footer-menu { float: none; display: inline-block; width: auto; max-width: 100%; } body #footer .copyright .footer-menu li { float: none; display: inline-block; } /* The theme sets these at `#footer .copyright a` - (1,1,1), so a `body .copyright a` at (0,1,2) loses. Adding #footer makes it (1,1,2). The theme's value is rgba(255,255,255,0.32): white at a third opacity, which was faint on the old purple strip and invisible on cream. */ body #footer .copyright a, body #footer .copyright li a, body #footer .copyright p, body #footer .copyright div { color: var(--spa-footer-text); } body #footer .copyright a:hover { color: var(--spa-card); } /* Footer headings take the cream (6.33:1 on the purple). Maroon was for the brief cream-footer version and is unreadable on this purple. */ body #footer h1, body #footer h2, body #footer h3, body #footer h4, body #footer h5, body #footer h6 { color: var(--spa-card); } /* =========================================================================== CONTRAST - please read before shipping Measured on the real backgrounds. WCAG AA wants 4.5:1 for normal text and 3.0:1 for large or bold text: page cream light card white spalab dark header --spa-maroon 7.30 9.34 10.60 - --spa-green 4.91 6.29 7.14 - --spa-purple 3.32 4.35 4.94 2.95 (fails) --spa-gold 2.49 3.19 3.62 - #f8d66a (old) 1.02 1.25 1.42 - Two things worth knowing: 1. Purple only clears the bar on a LIGHT background, which is why section 4 lightens the header. On spalab's original #292929 it measures 2.95:1 and fails even the relaxed large-text bar. 2. --spa-gold (#a28321) is the agreed replacement for #f8d66a, which was effectively invisible on cream (1.02:1). It is a large improvement but still under 4.5:1 for normal text. If the table text in section 10 reads faint, switch that rule to var(--spa-maroon) - 9.34 on a light card. =========================================================================== */