/* Theme Name: SSS Modern Theme URI: https://studentsuccessskills.com/ Description: A lightweight GeneratePress child theme for Student Success Skills. Soft-depth "fluent" design keyed to the SSS triangle: Confidence, Effort, Skills. Author: Paul's Perfect PC Template: generatepress Version: 2.1.0 Text Domain: sss-modern */ /* --------------------------------------------------------------------------- 1. Display face (self-hosted, single variable file, latin subset) --------------------------------------------------------------------------- */ @font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-stretch: 100%; font-display: swap; src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --------------------------------------------------------------------------- 2. Tokens --------------------------------------------------------------------------- */ :root { color-scheme: light; --sss-ink: #1c3641; --sss-ink-soft: #2f4a56; --sss-muted: #5d707a; --sss-text: #263b46; --sss-line: rgba(28, 54, 65, 0.1); --sss-line-soft: rgba(28, 54, 65, 0.07); --sss-evergreen: #2e8c68; --sss-evergreen-dark: #1f6b4e; --sss-lake: #22729b; --sss-lake-dark: #185876; --sss-marigold: #e7a63c; --sss-marigold-dark: #8a5f1a; --sss-link: #1f6e96; --sss-green-text: #1f6b4e; --sss-blue-text: #185876; --sss-gold-text: #8a5f1a; --sss-deep: #0f2833; --sss-mist: #f4f8f6; --sss-paper: #ffffff; --sss-tint: #eef5f1; --sss-page-bg: linear-gradient(180deg, #ecf5f0 0, #f6faf8 520px); --sss-glass: rgba(255, 255, 255, 0.82); --sss-glass-strong: rgba(255, 255, 255, 0.9); --sss-input-bg: #ffffff; --sss-input-border: #c6d5d0; --sss-lake-tint: rgba(34, 114, 155, 0.1); --sss-green-tint: rgba(46, 140, 104, 0.1); --sss-gold-tint: rgba(231, 166, 60, 0.13); --sss-radius: 16px; --sss-radius-lg: 22px; --sss-shadow-soft: 0 2px 6px rgba(20, 45, 58, 0.05), 0 16px 40px rgba(20, 45, 58, 0.08); --sss-shadow-lift: 0 4px 10px rgba(20, 45, 58, 0.06), 0 26px 54px rgba(20, 45, 58, 0.14); --sss-display: "Bricolage Grotesque", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; --sss-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --sss-ease-out: cubic-bezier(0.16, 0.84, 0.44, 1); --sss-ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.15); } /* Dark theme. A pre-paint script resolves the choice (saved preference, else the browser's prefers-color-scheme) into data-theme="dark" on . */ :root[data-theme="dark"] { color-scheme: dark; --sss-ink: #e9f1f4; --sss-ink-soft: #c8d6dd; --sss-muted: #92a8b3; --sss-text: #c9d8df; --sss-line: rgba(255, 255, 255, 0.12); --sss-line-soft: rgba(255, 255, 255, 0.07); --sss-evergreen: #2f9770; --sss-evergreen-dark: #257a58; --sss-lake: #2679a6; --sss-lake-dark: #1b5b7e; --sss-marigold: #d99a33; --sss-marigold-dark: #b57f28; --sss-link: #6fbde4; --sss-green-text: #6ecfa8; --sss-blue-text: #7cc3e8; --sss-gold-text: #e9b96b; --sss-deep: #0a171e; --sss-mist: #101f27; --sss-paper: #14262f; --sss-tint: #1a2f39; --sss-page-bg: linear-gradient(180deg, #0b1a22 0, #0e2029 520px); --sss-glass: rgba(14, 30, 39, 0.78); --sss-glass-strong: rgba(14, 30, 39, 0.9); --sss-input-bg: #0f2028; --sss-input-border: #2c4653; --sss-lake-tint: rgba(111, 189, 228, 0.13); --sss-green-tint: rgba(110, 207, 168, 0.12); --sss-gold-tint: rgba(233, 185, 107, 0.14); --sss-shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.28), 0 16px 40px rgba(0, 0, 0, 0.34); --sss-shadow-lift: 0 4px 10px rgba(0, 0, 0, 0.3), 0 26px 54px rgba(0, 0, 0, 0.44); /* Remap GeneratePress's own palette so its inline rules (.separate-containers .inside-article etc.) go dark too. */ --base: #223a46; --base-2: #101f27; --base-3: #14262f; --contrast: #e9f1f4; --contrast-2: #c0d0d8; --contrast-3: #8fa5b0; } /* --------------------------------------------------------------------------- 3. Base --------------------------------------------------------------------------- */ html { scroll-behavior: smooth; } body { background: var(--sss-page-bg); color: var(--sss-ink); font-family: var(--sss-body); font-size: 16px; line-height: 1.65; } body .site { background: transparent; } /* Ambient aurora — two slow drifting light pools in the brand colors. Gradient-only (no filter) so they cost almost nothing to composite. */ body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; } body::before { top: -22vh; left: -14vw; width: 72vw; height: 74vh; background: radial-gradient(closest-side, rgba(46, 140, 104, 0.13), transparent 72%); animation: sss-drift-a 44s ease-in-out infinite alternate; } body::after { top: 8vh; right: -18vw; width: 66vw; height: 80vh; background: radial-gradient(closest-side at 65% 30%, rgba(34, 114, 155, 0.11), transparent 70%), radial-gradient(closest-side at 30% 75%, rgba(231, 166, 60, 0.09), transparent 68%); animation: sss-drift-b 56s ease-in-out infinite alternate; } @keyframes sss-drift-a { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 5%, 0) scale(1.12); } } @keyframes sss-drift-b { from { transform: translate3d(3%, 4%, 0) scale(1.08); } to { transform: translate3d(-4%, -3%, 0) scale(1); } } a { color: var(--sss-link); text-decoration-color: color-mix(in srgb, var(--sss-link) 40%, transparent); text-underline-offset: 0.18em; transition: color 0.18s ease, text-decoration-color 0.18s ease; } a:hover, a:focus { color: var(--sss-green-text); } ::selection { background: rgba(46, 140, 104, 0.24); } :focus-visible { outline: 3px solid rgba(34, 114, 155, 0.5); outline-offset: 2px; border-radius: 4px; } /* --------------------------------------------------------------------------- 4. Top utility bar --------------------------------------------------------------------------- */ .sss-top-bar { background: var(--sss-deep); color: #ffffff; font-size: 13.5px; } .sss-top-inner { align-items: center; display: flex; gap: 18px; justify-content: space-between; margin: 0 auto; max-width: 1220px; padding: 8px 24px; } .sss-top-contact, .sss-top-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 16px; } .sss-top-bar a { color: rgba(255, 255, 255, 0.92); text-decoration: none; } .sss-top-bar a:hover, .sss-top-bar a:focus { color: #ffffff; text-decoration: underline; text-decoration-color: var(--sss-marigold); text-underline-offset: 0.3em; } /* --------------------------------------------------------------------------- 5. Header --------------------------------------------------------------------------- */ .site-header { background: var(--sss-glass-strong); border-bottom: 1px solid var(--sss-line-soft); } .inside-header { align-items: center; display: flex; gap: 20px; justify-content: space-between; margin: 0 auto; max-width: 1220px; padding: 16px 24px; } .site-logo img, .header-image { border-radius: 18px; box-shadow: 0 8px 22px rgba(20, 45, 58, 0.14); height: auto; max-width: 72px; transition: transform 0.35s var(--sss-ease-spring); } .site-logo a:hover img { transform: rotate(-4deg) scale(1.06); } .site-branding { min-width: 0; } .main-title { font-family: var(--sss-display); font-size: 30px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.1; margin: 0; } .main-title a, .main-title a:hover { color: var(--sss-ink); text-decoration: none; } .site-description { color: var(--sss-muted); font-size: 14.5px; margin-top: 4px; } /* --------------------------------------------------------------------------- 6. Navigation — glass bar, pill links --------------------------------------------------------------------------- */ .main-navigation { background: var(--sss-glass); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--sss-line-soft); position: sticky; top: 0; transition: box-shadow 0.25s ease; z-index: 99; } .main-navigation.is-stuck { box-shadow: 0 12px 32px rgba(20, 45, 58, 0.1); } .admin-bar .main-navigation { top: 32px; } .main-navigation .inside-navigation { justify-content: center; margin: 0 auto; max-width: 1220px; padding: 4px 16px; } @media (min-width: 769px) { .main-navigation .main-nav ul { align-items: center; display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; } } .main-navigation .main-nav ul li a { border-radius: 999px; color: var(--sss-ink-soft); font-size: 13.5px; font-weight: 700; line-height: 1.2; padding: 11px 12px; text-decoration: none; transition: background 0.18s ease, color 0.18s ease; } .main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li:focus-within > a { background: var(--sss-green-tint); color: var(--sss-green-text); } .main-navigation .main-nav ul li.current-menu-item > a, .main-navigation .main-nav ul li.current-menu-ancestor > a { background: linear-gradient(120deg, var(--sss-green-tint), var(--sss-lake-tint)); color: var(--sss-green-text); } .main-navigation .menu-toggle { background: transparent; border: 1px solid var(--sss-line); border-radius: 12px; box-shadow: none; color: var(--sss-ink); font-weight: 700; margin: 8px 16px; padding: 10px 14px; } .main-navigation .menu-toggle:hover, .main-navigation .menu-toggle:focus { background: var(--sss-tint); color: var(--sss-ink); } @media (max-width: 768px) { .main-navigation .main-nav ul li a { border-radius: 10px; display: block; font-size: 15px; padding: 13px 18px; } .main-navigation .main-nav ul li { border-top: 1px solid var(--sss-line-soft); } } /* --------------------------------------------------------------------------- 7. Content sheet --------------------------------------------------------------------------- */ .site-content { margin: 0 auto; max-width: 1180px; padding: 34px 24px 64px; } .inside-article, .comments-area, .paging-navigation { background: var(--sss-paper); border: 1px solid var(--sss-line-soft); border-radius: var(--sss-radius-lg); box-shadow: var(--sss-shadow-soft); padding: 42px 48px; } .site-main > article { margin-bottom: 26px; } body.home .inside-article { padding: 48px 54px; } .entry-header { margin-bottom: 26px; } .entry-title { color: var(--sss-ink); font-family: var(--sss-display); font-size: clamp(30px, 4.2vw, 38px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 12px; } .entry-header::after { background: linear-gradient(90deg, var(--sss-evergreen), var(--sss-lake) 55%, var(--sss-marigold)); border-radius: 999px; content: ""; display: block; height: 4px; width: 64px; } body.home .entry-title { text-align: center; } body.home .entry-header::after { margin: 0 auto; } .entry-meta { color: var(--sss-muted); font-size: 13.5px; } /* --------------------------------------------------------------------------- 8. Content typography --------------------------------------------------------------------------- */ .entry-content { color: var(--sss-text); font-size: 17px; line-height: 1.72; } .entry-content h1, .entry-content h2, .entry-content h3 { color: var(--sss-ink); font-family: var(--sss-display); font-weight: 800; letter-spacing: -0.015em; line-height: 1.18; margin: 1.5em 0 0.55em; } .entry-content h2 { font-size: clamp(24px, 3vw, 29px); } .entry-content h2:empty { display: none; } /* Signature: the SSS triangle marks every section heading */ .entry-content h2.woocommerce-loop-product__title::before { content: none; } .entry-content h2::before { background: linear-gradient(135deg, var(--sss-evergreen), var(--sss-lake)); clip-path: polygon(50% 0, 100% 100%, 0 100%); content: ""; display: inline-block; height: 13px; margin-right: 12px; width: 15px; } .entry-content h3 { font-size: 22px; } .entry-content h4 { color: var(--sss-ink-soft); font-size: 18px; font-weight: 600; line-height: 1.55; margin: 1.2em 0 0.65em; } .entry-content p { margin-bottom: 1.05em; } .entry-content ul:not([class]) li::marker, .entry-content ol:not([class]) li::marker { color: var(--sss-evergreen); } .entry-content ul:not([class]) li, .entry-content ol:not([class]) li { margin-bottom: 0.35em; } .entry-content img { border-radius: 14px; height: auto; max-width: 100%; } /* Homepage hero: floating logo card above the intro */ body.home .entry-content > p:first-child { margin: 4px 0 20px; text-align: center; } body.home .entry-content > p:first-child img { animation: sss-float 7s ease-in-out infinite; background: var(--sss-paper); border: 1px solid var(--sss-line-soft); border-radius: 26px; box-shadow: 0 18px 44px rgba(20, 45, 58, 0.16); padding: 14px; } @keyframes sss-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .entry-content blockquote { background: linear-gradient(100deg, rgba(46, 140, 104, 0.1), rgba(34, 114, 155, 0.07)); border-left: 4px solid var(--sss-evergreen); border-radius: 12px; color: var(--sss-ink-soft); margin: 26px 0; padding: 20px 24px; } /* Study annotations (inline-styled spans in the research citations) */ .entry-content span[style*="border-left"] { background: rgba(231, 166, 60, 0.09); border-color: var(--sss-marigold) !important; border-radius: 0 10px 10px 0; color: var(--sss-ink-soft) !important; margin-top: 0.6em !important; padding: 0.6em 1em 0.6em 1em !important; } /* --------------------------------------------------------------------------- 9. Content tables — the three-pillar treatment Continuous accent-topped columns instead of floating bubbles. Column accents cycle: lake / evergreen / marigold. --------------------------------------------------------------------------- */ .sss-scroll { margin: 28px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .sss-scroll > table { min-width: 540px; } .entry-content table:not(.shop_table):not(.variations):not(.sss-team) { border-collapse: separate; border-spacing: 18px 0; margin: 28px 0; table-layout: fixed; width: 100%; } /* WP's .aligncenter forces display:block, which stops the table stretching */ .entry-content table.aligncenter { display: table; } .sss-scroll > table:not(.shop_table):not(.variations) { margin: 0; } .entry-content table:not(.shop_table):not(.variations):not(.sss-team) td, .entry-content table:not(.shop_table):not(.variations):not(.sss-team) th { background: var(--sss-paper); border-left: 1px solid var(--sss-line-soft); border-right: 1px solid var(--sss-line-soft); font-size: 15.5px; padding: 13px 18px; vertical-align: top; } .entry-content table:not(.shop_table):not(.variations):not(.sss-team) td h4, .entry-content table:not(.shop_table):not(.variations):not(.sss-team) th h4 { font-size: inherit; margin: 0; } /* Body-row separators (from the third row down) */ .entry-content table:not(.shop_table):not(.variations):not(.sss-team) tr:not(:first-child):not(:nth-child(2)) td { border-top: 1px solid var(--sss-line-soft); } /* Column headers */ .entry-content table:not(.shop_table):not(.variations):not(.sss-team) tr:first-child td { border-radius: 14px 14px 0 0; border-top-style: solid; border-top-width: 3px; font-family: var(--sss-display); font-size: 16px; font-weight: 700; padding: 14px 18px; } .entry-content table:not(.shop_table):not(.variations):not(.sss-team) tr:first-child td em, .entry-content table:not(.shop_table):not(.variations):not(.sss-team) tr:first-child td i { font-style: normal; } .entry-content table:not(.shop_table):not(.variations):not(.sss-team) tr:first-child td:nth-child(3n + 1) { background: var(--sss-lake-tint); border-top-color: var(--sss-lake); color: var(--sss-blue-text); } .entry-content table:not(.shop_table):not(.variations):not(.sss-team) tr:first-child td:nth-child(3n + 2) { background: var(--sss-green-tint); border-top-color: var(--sss-evergreen); color: var(--sss-green-text); } .entry-content table:not(.shop_table):not(.variations):not(.sss-team) tr:first-child td:nth-child(3n + 3) { background: var(--sss-gold-tint); border-top-color: var(--sss-marigold); color: var(--sss-gold-text); } /* Column feet */ .entry-content table:not(.shop_table):not(.variations):not(.sss-team) tr:last-child td { border-bottom: 1px solid var(--sss-line-soft); border-radius: 0 0 14px 14px; } /* --------------------------------------------------------------------------- 10. Buttons & forms --------------------------------------------------------------------------- */ button, input[type="button"], input[type="reset"], input[type="submit"], .button, .wp-block-button__link, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .um a.um-button, .um input[type="submit"].um-button { background: linear-gradient(135deg, var(--sss-lake), var(--sss-lake-dark)); border: 0; border-radius: 12px; box-shadow: 0 8px 20px rgba(34, 114, 155, 0.26); color: #ffffff; font-weight: 700; line-height: 1.25; padding: 12px 20px; text-decoration: none; transition: transform 0.22s var(--sss-ease-spring), box-shadow 0.22s ease, background 0.22s ease, color 0.18s ease; } button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:hover, input[type="submit"]:focus, .button:hover, .button:focus, .wp-block-button__link:hover, .wp-block-button__link:focus, .woocommerce a.button:hover, .woocommerce a.button:focus, .woocommerce button.button:hover, .woocommerce button.button:focus, .woocommerce input.button:hover, .woocommerce input.button:focus, .woocommerce #respond input#submit:hover, .woocommerce #respond input#submit:focus, .um a.um-button:hover, .um input[type="submit"].um-button:hover { background: linear-gradient(135deg, var(--sss-evergreen), var(--sss-evergreen-dark)); box-shadow: 0 12px 26px rgba(46, 140, 104, 0.32); color: #ffffff; transform: translateY(-2px); } button:active, .button:active, .woocommerce a.button:active { transform: translateY(0); } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select { background: var(--sss-input-bg); border: 1px solid var(--sss-input-border); border-radius: 10px; color: var(--sss-ink); padding: 11px 13px; transition: border-color 0.18s ease, box-shadow 0.18s ease; } input:focus, textarea:focus, select:focus { border-color: var(--sss-lake); box-shadow: 0 0 0 3px rgba(34, 114, 155, 0.16); outline: 0; } /* --------------------------------------------------------------------------- 11. WooCommerce — shop grid High-specificity overrides so Woo's column floats can never shrink cards. --------------------------------------------------------------------------- */ .woocommerce ul.products, .woocommerce-page ul.products, .woocommerce ul.products[class*="columns-"], .woocommerce-page ul.products[class*="columns-"] { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); list-style: none; margin: 12px 0 0; padding: 0; } .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after { display: none; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce ul.products[class*="columns-"] li.product, .woocommerce-page ul.products[class*="columns-"] li.product, .woocommerce[class*="columns-"] ul.products li.product, .woocommerce-page[class*="columns-"] ul.products li.product { clear: none !important; float: none !important; margin: 0 !important; width: 100% !important; } .woocommerce ul.products li.product { background: var(--sss-paper); border: 1px solid var(--sss-line-soft); border-radius: var(--sss-radius); box-shadow: var(--sss-shadow-soft); display: flex; flex-direction: column; padding: 14px 14px 16px; position: relative; transition: transform 0.28s var(--sss-ease-spring), box-shadow 0.28s ease; } .woocommerce ul.products li.product:hover { box-shadow: var(--sss-shadow-lift); transform: translateY(-5px); } .woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: flex; flex: 1 1 auto; flex-direction: column; text-decoration: none; } .woocommerce ul.products li.product a img { aspect-ratio: 3 / 4; background: var(--sss-tint); border-radius: 12px; margin: 0; object-fit: contain; padding: 12px; transition: transform 0.3s var(--sss-ease-out); width: 100%; } .woocommerce ul.products li.product:hover a img { transform: scale(1.03); } .woocommerce ul.products li.product .woocommerce-loop-product__title { color: var(--sss-ink); font-family: var(--sss-display); font-size: 16.5px; font-weight: 700; line-height: 1.3; padding: 10px 2px 4px; } .woocommerce ul.products li.product .price { color: var(--sss-green-text); font-size: 17px; font-weight: 800; margin: 2px 2px 0; margin-top: auto; } .woocommerce ul.products li.product .button { margin: 12px 0 0; text-align: center; width: 100%; } .woocommerce span.onsale { background: var(--sss-marigold); border-radius: 999px; color: #23303a; font-weight: 800; line-height: 1; min-height: 0; min-width: 0; padding: 8px 12px; } .woocommerce ul.products li.product span.onsale { left: auto; margin: 0; right: 20px; top: 20px; z-index: 2; } .woocommerce .woocommerce-result-count { color: var(--sss-muted); } .woocommerce-breadcrumb { color: var(--sss-muted) !important; font-size: 13.5px; margin-bottom: 14px !important; } /* --------------------------------------------------------------------------- 12. WooCommerce — single product --------------------------------------------------------------------------- */ .woocommerce div.product div.images { background: var(--sss-paper); border: 1px solid var(--sss-line-soft); border-radius: var(--sss-radius-lg); box-shadow: var(--sss-shadow-soft); padding: 14px; } .woocommerce div.product div.images img { border-radius: 14px; } .woocommerce div.product .product_title { color: var(--sss-ink); font-family: var(--sss-display); font-size: clamp(28px, 3.6vw, 34px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.14; } .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--sss-green-text); font-size: 24px; font-weight: 800; } .woocommerce div.product form.cart table.variations, .woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th { background: transparent; border: 0; } .woocommerce div.product form.cart .variations td.label { font-weight: 700; padding-right: 12px; } .woocommerce div.product form.cart .variations select { margin-bottom: 8px; max-width: 100%; } .woocommerce .quantity .qty { border-radius: 10px; padding: 10px 8px; width: 74px; } .woocommerce div.product form.cart .button { padding: 13px 26px; } /* Tabs: quiet segmented control instead of Woo's beveled folders */ .woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--sss-line); display: flex; gap: 4px; margin: 0 0 22px; overflow-x: auto; padding: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent; border: 0; border-radius: 10px 10px 0 0; margin: 0; padding: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--sss-muted); font-weight: 700; padding: 11px 16px; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { box-shadow: inset 0 -3px 0 var(--sss-evergreen); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--sss-ink); } .woocommerce div.product .woocommerce-tabs .panel h2 { font-family: var(--sss-display); font-size: 24px; } .related.products { clear: both; } .related.products > h2, .up-sells > h2, .cross-sells > h2 { color: var(--sss-ink); font-family: var(--sss-display); font-size: 26px; font-weight: 800; letter-spacing: -0.015em; margin: 34px 0 6px; } /* --------------------------------------------------------------------------- 13. WooCommerce — cart, checkout, account, notices --------------------------------------------------------------------------- */ .woocommerce table.shop_table { background: var(--sss-paper); border: 1px solid var(--sss-line-soft); border-collapse: separate; border-radius: var(--sss-radius); overflow: hidden; } .woocommerce table.shop_table th { background: var(--sss-mist); color: var(--sss-ink); } .woocommerce table.shop_table td, .woocommerce table.shop_table th { border-color: var(--sss-line-soft); padding: 12px 14px; } .woocommerce-cart table.cart img { border-radius: 10px; width: 56px; } .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2, .woocommerce-checkout #order_review, .woocommerce .cart_totals { background: var(--sss-paper); border: 1px solid var(--sss-line-soft); border-radius: var(--sss-radius); box-shadow: var(--sss-shadow-soft); padding: 22px; } .woocommerce-checkout #order_review_heading, .woocommerce-checkout h3 { font-family: var(--sss-display); font-weight: 800; } .woocommerce-message, .woocommerce-info, .woocommerce-error { background: var(--sss-paper); border-radius: 12px; border-top-width: 3px; box-shadow: var(--sss-shadow-soft); } .woocommerce-message { border-top-color: var(--sss-evergreen); } .woocommerce-message::before { color: var(--sss-evergreen); } .woocommerce-info { border-top-color: var(--sss-lake); } .woocommerce-info::before { color: var(--sss-lake); } /* --------------------------------------------------------------------------- 14. Ultimate Member, WPForms, library actions --------------------------------------------------------------------------- */ .site-main .um, .um-page-account .um, .site-main .wpforms-container { background: var(--sss-paper); border: 1px solid var(--sss-line-soft); border-radius: var(--sss-radius); box-shadow: var(--sss-shadow-soft); padding: 24px; } .sss-lib-actions { display: flex; flex-wrap: wrap; gap: 10px; } .sss-lib-actions .button-secondary { background: var(--sss-tint); border: 1px solid rgba(46, 140, 104, 0.25); box-shadow: none; color: var(--sss-green-text); } .sss-lib-actions .button-secondary:hover, .sss-lib-actions .button-secondary:focus { background: var(--sss-green-tint); color: var(--sss-green-text); transform: none; } /* --------------------------------------------------------------------------- 15. Pagination, comments shell --------------------------------------------------------------------------- */ .paging-navigation { padding: 16px 22px; } .paging-navigation .page-numbers { border-radius: 999px; display: inline-block; font-weight: 700; padding: 6px 13px; text-decoration: none; } .paging-navigation .page-numbers.current { background: var(--sss-green-tint); color: var(--sss-green-text); } /* --------------------------------------------------------------------------- 16. Footer — deep teal, brand stripe, triangle watermark --------------------------------------------------------------------------- */ .site-footer { background: linear-gradient(90deg, var(--sss-evergreen), var(--sss-lake) 52%, var(--sss-marigold)) top left / 100% 3px no-repeat, var(--sss-deep); color: rgba(255, 255, 255, 0.82); overflow: hidden; position: relative; } .site-footer::after { background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.008)); bottom: -70px; clip-path: polygon(50% 0, 100% 100%, 0 100%); content: ""; height: 320px; pointer-events: none; position: absolute; right: -70px; transform: rotate(14deg); width: 360px; } .footer-widgets { background: transparent; color: rgba(255, 255, 255, 0.82); padding: 44px 24px 24px; } /* Collapse footer columns that hold no widgets so content flows naturally */ .footer-widgets .inside-footer-widgets { display: flex; flex-wrap: wrap; gap: 24px; } .footer-widgets .inside-footer-widgets > div { flex: 1 1 280px; width: auto; } .footer-widgets .inside-footer-widgets > div:not(:has(.widget)) { display: none; } .footer-widgets .widget_recent_entries ul { display: grid; gap: 12px 32px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); list-style: none; margin: 0; padding: 0; } .footer-widgets .widget_recent_entries ul li { border-left: 3px solid rgba(231, 166, 60, 0.55); margin: 0; padding-left: 14px; } .footer-widgets .widget-title, .footer-widgets .widget .widgettitle { color: #ffffff; font-family: var(--sss-display); font-size: 18px; font-weight: 700; margin-bottom: 14px; } .footer-widgets a { color: #cfe3da; text-decoration: none; } .footer-widgets a:hover, .footer-widgets a:focus { color: #ffffff; text-decoration: underline; text-decoration-color: var(--sss-marigold); } .footer-widgets .post-date { color: rgba(255, 255, 255, 0.5); font-size: 13px; } .site-info { background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.09); color: rgba(255, 255, 255, 0.7); font-size: 13.5px; padding: 20px 24px; position: relative; text-align: center; } .site-info a { color: #ffffff; } /* --------------------------------------------------------------------------- 16b. Theme toggle (lives in the top utility bar) --------------------------------------------------------------------------- */ .sss-theme-toggle { align-items: center; background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; box-shadow: none; color: #ffffff; cursor: pointer; display: inline-flex; height: 28px; justify-content: center; line-height: 1; padding: 0; width: 28px; } .sss-theme-toggle:hover, .sss-theme-toggle:focus { background: rgba(255, 255, 255, 0.16); box-shadow: none; color: #ffffff; transform: none; } .sss-theme-toggle svg { height: 15px; width: 15px; } :root[data-theme="dark"] .sss-theme-toggle .sss-icon-moon, :root:not([data-theme="dark"]) .sss-theme-toggle .sss-icon-sun { display: none; } /* --------------------------------------------------------------------------- 16c. Dark-mode specifics — calmer aurora, readable plugin text --------------------------------------------------------------------------- */ :root[data-theme="dark"] body::before { background: radial-gradient(closest-side, rgba(63, 178, 130, 0.1), transparent 72%); } :root[data-theme="dark"] body::after { background: radial-gradient(closest-side at 65% 30%, rgba(88, 168, 210, 0.09), transparent 70%), radial-gradient(closest-side at 30% 75%, rgba(233, 185, 107, 0.05), transparent 68%); } :root[data-theme="dark"] ::selection { background: rgba(110, 207, 168, 0.32); } :root[data-theme="dark"] .um, :root[data-theme="dark"] .um .um-field-label label, :root[data-theme="dark"] .um .um-field-label, :root[data-theme="dark"] .um .um-field-checkbox-option, :root[data-theme="dark"] .um .um-field-radio-option, :root[data-theme="dark"] .um .um-name a, :root[data-theme="dark"] .um .um-account-name a, :root[data-theme="dark"] .um .um-account-nav a, :root[data-theme="dark"] .um .um-misc-ul li a, :root[data-theme="dark"] .wpforms-container .wpforms-field-label, :root[data-theme="dark"] .wpforms-container .wpforms-field-sublabel, :root[data-theme="dark"] .wpforms-container .wpforms-field-description { color: var(--sss-ink-soft) !important; } /* --------------------------------------------------------------------------- 16d. Content components (Wellness page and reusable) --------------------------------------------------------------------------- */ .entry-content ol.sss-list-alpha { list-style: lower-alpha; padding-left: 1.5em; } .entry-content ol.sss-list-alpha li { margin-bottom: 0.55em; padding-left: 0.3em; } .sss-people { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); margin: 20px 0 10px; } .sss-people figure { background: var(--sss-paper); border: 1px solid var(--sss-line-soft); border-radius: var(--sss-radius); box-shadow: var(--sss-shadow-soft); margin: 0; padding: 14px 14px 12px; text-align: center; transition: transform 0.28s var(--sss-ease-spring), box-shadow 0.28s ease; } .sss-people figure:hover { box-shadow: var(--sss-shadow-lift); transform: translateY(-4px); } .sss-people img { aspect-ratio: 1 / 1; border-radius: 12px; object-fit: cover; width: 100%; } .sss-people figcaption { color: var(--sss-ink); font-family: var(--sss-display); font-size: 16px; font-weight: 700; padding-top: 10px; } .sss-book { align-items: flex-start; background: var(--sss-tint); border: 1px solid var(--sss-line-soft); border-radius: var(--sss-radius-lg); display: flex; flex-wrap: wrap; gap: 26px; margin: 20px 0; padding: 24px; } .sss-book > img { border-radius: 10px; box-shadow: var(--sss-shadow-soft); flex: none; width: 170px; } .sss-book > div { flex: 1 1 300px; } .sss-book .button { display: inline-block; } @media (max-width: 520px) { .sss-book { justify-content: center; } .sss-people { grid-template-columns: 1fr 1fr; } } /* --------------------------------------------------------------------------- 17. Motion — scroll reveals (classes are added by JS, so no-JS stays visible) --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .sss-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.6s var(--sss-ease-out); will-change: opacity, transform; } .sss-reveal.is-in { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body::before, body::after, body.home .entry-content > p:first-child img { animation: none; } *, *::before, *::after { transition-duration: 0.01ms !important; } } /* --------------------------------------------------------------------------- 18. Responsive --------------------------------------------------------------------------- */ @media (max-width: 900px) { .inside-header { gap: 14px; } .main-title { font-size: 25px; } .site-description { font-size: 13.5px; } } @media (max-width: 768px) { .admin-bar .main-navigation { top: 46px; } .sss-top-inner { justify-content: center; } .sss-top-contact, .sss-top-actions { justify-content: center; } .site-content { padding: 22px 14px 44px; } .inside-article, body.home .inside-article, .comments-area, .paging-navigation { border-radius: 18px; padding: 26px 20px; } .entry-content { font-size: 16px; } .woocommerce ul.products, .woocommerce-page ul.products, .woocommerce ul.products[class*="columns-"], .woocommerce-page ul.products[class*="columns-"] { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 15px; } } @media (max-width: 520px) { .inside-header { padding: 14px 16px; } .site-logo img, .header-image { max-width: 56px; } .main-title { font-size: 21px; } .woocommerce ul.products, .woocommerce-page ul.products, .woocommerce ul.products[class*="columns-"], .woocommerce-page ul.products[class*="columns-"] { grid-template-columns: repeat(2, 1fr); } } /* --------------------------------------------------------------------------- Country / State pickers (select2) on cart, checkout and account. Ultimate Member supplies select2's stylesheet, and its default 28px box does not match this theme's inputs. Re-skin it with the same tokens the inputs use so it matches -- and follows dark mode automatically. --------------------------------------------------------------------------- */ .select2-container--default .select2-selection--single { background: var(--sss-input-bg); border: 1px solid var(--sss-input-border); border-radius: 10px; height: auto; min-height: 43px; display: flex; align-items: center; padding: 0 13px; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--sss-ink); line-height: 1.4; padding: 0; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 8px; } .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--sss-lake); box-shadow: 0 0 0 3px var(--sss-lake-tint); } .select2-container--default .select2-dropdown { background: var(--sss-input-bg); border: 1px solid var(--sss-input-border); border-radius: 10px; color: var(--sss-ink); overflow: hidden; } .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--sss-input-bg); border: 1px solid var(--sss-input-border); border-radius: 8px; color: var(--sss-ink); padding: 8px 10px; } .select2-container--default .select2-results__option { color: var(--sss-ink); } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--sss-lake); color: #fff; } .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--sss-lake-tint); color: var(--sss-ink); } /* --------------------------------------------------------------------------- Roster table (Our Team). This is a people list, not a data table: it has no header row, so the generic content-table rules above must not treat row 1 as one -- that is what was tinting Greg's row green. Each row is one person; highlight whichever person the cursor is over instead. --------------------------------------------------------------------------- */ .entry-content table.sss-team { border-collapse: separate; border-spacing: 0 14px; margin: 28px 0; width: 100%; } .entry-content table.sss-team td { background: var(--sss-paper); border-top: 1px solid var(--sss-line-soft); border-bottom: 1px solid var(--sss-line-soft); font-size: 15.5px; padding: 16px 18px; vertical-align: top; transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .entry-content table.sss-team td:first-child { border-left: 3px solid transparent; border-radius: 14px 0 0 14px; width: 240px; } .entry-content table.sss-team td:last-child { border-radius: 0 14px 14px 0; border-right: 1px solid var(--sss-line-soft); } .entry-content table.sss-team img { height: auto; max-width: 100%; } /* Highlight the person under the cursor. Accent cycles through the brand trio. */ .entry-content table.sss-team tr:hover td { background: var(--sss-green-tint); box-shadow: 0 10px 26px rgba(28, 54, 65, 0.1); } .entry-content table.sss-team tr:hover td:first-child { border-left-color: var(--sss-evergreen); } .entry-content table.sss-team tr:nth-child(3n + 2):hover td { background: var(--sss-lake-tint); } .entry-content table.sss-team tr:nth-child(3n + 2):hover td:first-child { border-left-color: var(--sss-lake); } .entry-content table.sss-team tr:nth-child(3n + 3):hover td { background: var(--sss-gold-tint); } .entry-content table.sss-team tr:nth-child(3n + 3):hover td:first-child { border-left-color: var(--sss-marigold); } /* Stack each person on small screens */ @media (max-width: 768px) { .entry-content table.sss-team, .entry-content table.sss-team tbody, .entry-content table.sss-team tr, .entry-content table.sss-team td { display: block; width: 100%; } .entry-content table.sss-team tr { margin-bottom: 18px; } .entry-content table.sss-team td:first-child { border-bottom: 0; border-radius: 14px 14px 0 0; text-align: center; width: 100%; } .entry-content table.sss-team td:last-child { border-radius: 0 0 14px 14px; border-top: 0; } } /* --------------------------------------------------------------------------- 16. Mobile layout The header chrome was laid out as flex ROWS all the way down to 375px, which squeezed the utility links into a 93px column (181px tall top bar) and left the hamburger stranded in a 98px sticky block inside a 219px header. Rebuild both as compact, centred stacks. --------------------------------------------------------------------------- */ @media (max-width: 768px) { /* --- Utility bar: two centred rows, not two squeezed columns --- */ .sss-top-bar { font-size: 12.5px; } .sss-top-inner { align-items: center; flex-direction: column; gap: 6px; padding: 8px 14px; } .sss-top-contact, .sss-top-actions { flex-wrap: wrap; gap: 6px 14px; justify-content: center; width: 100%; } .sss-top-contact a, .sss-top-actions a { white-space: nowrap; } /* --- Header: logo + title left, hamburger right, one compact row --- */ .inside-header { align-items: center; flex-wrap: nowrap; gap: 12px; justify-content: space-between; padding: 10px 14px; } .site-branding-container { align-items: center; display: flex; flex: 1 1 auto; gap: 10px; min-width: 0; } .main-title { font-size: 18px; line-height: 1.2; } .site-description { display: none; } /* The toggle lives in its own