:root {
--navy: #1c2b3a;
--dark-blue: #2c3e50;
--orange: #ff6b35;
--orange-dark: #e55a28;
--beige: #e3d9c1;
--cyan: #00afe1;
--paper: #f7f9fb;
--white: #fff;
--line: #d8e0e8;
--text: #333;
--muted: #666;
--font: 'Outfit', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--maxw: 1120px;
--shadow: 0 2px 10px rgba(0, 0, 0, .1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font);
color: var(--white);
background: #153a54 url('/images/logos/SeasonedCyborgsBlueprintBG.webp') repeat top left;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
main { min-height: 60vh; }
h1, h2, h3 { color: var(--white); line-height: 1.1; letter-spacing: -.01em; }
/* buttons */
.btn {
display: inline-flex; align-items: center; gap: .5rem;
font: 700 .95rem var(--font); padding: .7rem 1.3rem;
border: 2px solid transparent; border-radius: 8px; cursor: pointer;
transition: transform .15s, background .2s, border-color .2s, color .2s;
}
.btn-primary { background: var(--orange); color: var(--white); border-color: var(--orange); }
.btn-primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--white); border-color: var(--white); }
.btn-ghost:hover { background: var(--white); color: var(--navy); }
/* card */
.card { color: var(--text); background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 24px; box-shadow: var(--shadow); }
/* header */
body { padding-top: 170px; }
.site-header { background: #23282d; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, .1); height: 170px; }
.site-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 5px; background: var(--cyan); }
.site-header .wrap { max-width: 1200px; }
.header-grid { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 75px 75px; height: 160px; padding: 5px 20px; }
.logo-column { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; padding: 5px 20px 5px 0; width: 170px; }
.logo-icon { height: 150px; width: 150px; object-fit: contain; }
.content-column { display: grid; grid-template-rows: 75px 75px; }
.nav-row { display: flex; align-items: center; padding-left: 20px; height: 75px; }
.main-navigation { flex: 1; }
.nav-menu { display: flex; justify-content: center; list-style: none; gap: 25px; }
.nav-menu a { color: var(--orange); font-weight: 500; font-size: .95rem; transition: color .3s; }
.nav-menu a:hover, .nav-menu a.active { color: var(--orange-dark); }
.company-row { display: flex; align-items: center; padding-left: 20px; height: 75px; }
.company-logo-image { height: 70px; width: auto; max-width: 100%; object-fit: contain; }
.site-header .header-cta-button {
background: transparent; color: var(--cyan); border: 2px solid var(--cyan); padding: 8px 20px;
border-radius: 5px; font-weight: 600; font-size: 1rem; margin-left: 30px; white-space: nowrap; transform: none;
}
.site-header .header-cta-button:hover { background: var(--cyan); color: var(--white); border-color: var(--cyan); }
.header-mobile { display: none; }
@media (max-width: 768px) {
body { padding-top: 70px; }
.site-header { height: auto; }
.header-desktop { display: none; }
.header-mobile { display: block; }
.mobile-header-flex { display: flex; justify-content: space-between; align-items: center; height: 70px; list-style: none; cursor: pointer; }
.mobile-header-flex::-webkit-details-marker { display: none; }
.mobile-header-flex img { height: 50px; width: auto; }
.hamburger-icon, .hamburger-icon::before, .hamburger-icon::after { content: ''; display: block; background: var(--orange); height: 3px; width: 25px; border-radius: 2px; }
.hamburger-icon { position: relative; margin-right: 10px; }
.hamburger-icon::before { position: absolute; top: -8px; }
.hamburger-icon::after { position: absolute; top: 8px; }
.mobile-navigation { background: #23282d; padding: 20px 0; }
.mobile-navigation .nav-menu { flex-direction: column; justify-content: flex-start; gap: 15px; padding-left: 20px; }
.mobile-navigation .nav-menu a { font-size: 1.2rem; padding: 10px; }
.site-header .header-cta-button.mobile-cta { display: block; text-align: center; margin: 30px 20px 10px; padding: 15px 20px; font-size: 1.2rem; background: var(--cyan); color: var(--white); }
}
/* home page */
.home-panel { max-width: 1400px; margin: 40px 20px 0; background: rgba(227, 217, 193, .85); padding: 15px 0 40px; border-radius: 5px; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); overflow: hidden; }
@media (min-width: 1440px) { .home-panel { margin-left: auto; margin-right: auto; } }
@media (max-width: 768px) { .home-panel { margin: 20px 10px 0; } }
.home-panel .section { max-width: 1320px; margin: 40px auto 0; padding: 0 20px; }
.hero {
position: relative; text-align: center; padding: 80px 24px 76px; min-height: 350px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
background: #2e3c50 url('/images/pages/home-hero.webp') center / cover no-repeat;
border-top: 5px solid var(--orange);
}
.hero::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.hero > * { position: relative; }
.hero h1 { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 700; margin-bottom: 20px; text-shadow: 1px 1px 5px rgba(0, 0, 0, .4); }
.hero .lead { margin: 0 0 28px; font-size: 1rem; font-weight: 600; }
.intro-quote {
position: relative; color: var(--text); background: var(--white); border-radius: 12px;
box-shadow: var(--shadow); padding: 50px 120px; text-align: center; font-size: 1.25rem;
}
.intro-quote p { max-width: 820px; margin: 0 auto; }
.intro-quote::before, .intro-quote::after {
position: absolute; top: 50%; transform: translateY(-50%); font: 700 5rem/1 Georgia, serif; color: var(--orange);
}
.intro-quote::before { content: '\201C'; left: 40px; }
.intro-quote::after { content: '\201D'; right: 40px; }
.intro-callout {
background: #202528; border-top: 3px solid var(--orange); border-radius: 12px;
max-width: 1000px; margin: 40px auto 0; padding: 50px 60px; text-align: center; box-shadow: var(--shadow);
font-size: 1.5rem; font-weight: 600;
}
.intro-callout strong { display: block; color: var(--orange); }
.section-title { text-align: center; color: var(--navy); font-size: 2.5rem; font-weight: 700; }
.section-title::after { content: ''; display: block; width: 60px; height: 3px; background: var(--orange); margin: 16px auto 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1160px; margin: 40px auto 0; }
.feature-card { color: var(--text); background: var(--white); border-top: 3px solid var(--orange); border-radius: 12px; box-shadow: var(--shadow); padding: 35px; text-align: center; font-size: 1rem; }
.feature-card .icon { display: block; font-size: 3.5rem; line-height: 1.3; margin-bottom: 12px; }
.feature-card h3 { color: var(--navy); font-size: 1.3rem; margin-bottom: 12px; }
.engage { background: #1f2933; border-radius: 12px; padding: 50px 40px; text-align: center; box-shadow: var(--shadow); }
.engage .section-title { color: var(--white); }
.engage > p { max-width: 720px; margin: 24px auto 0; font-size: 1.15rem; }
.engage .btn { margin-top: 40px; }
.founder { display: flex; gap: 40px; align-items: center; max-width: 1200px; margin: 0 auto; color: var(--text); background: var(--white); border-radius: 12px; box-shadow: var(--shadow); padding: 40px; }
.founder img { width: 387px; height: 387px; flex: none; object-fit: cover; border-radius: 4px; }
.founder h2 { color: var(--navy); font-size: 2.5rem; margin-bottom: 16px; }
.founder p { font-size: 1.05rem; margin-bottom: 16px; }
.founder blockquote { background: #fff3ee; border-left: 4px solid var(--orange); padding: 14px 20px; margin: 20px 0; font-size: 1.05rem; }
.founder blockquote cite { display: block; font-style: normal; font-size: .85rem; color: var(--muted); margin-top: 6px; }
.founder .btn-ghost { color: var(--navy); border-color: var(--navy); }
.founder .btn-ghost:hover { background: var(--navy); color: var(--white); }
.closing { background: #2c3e50; margin-top: 40px; padding: 64px 24px; text-align: center; }
.closing h2 { font-size: 2.5rem; font-weight: 700; }
.closing p { max-width: 720px; margin: 20px auto 32px; font-size: 1.15rem; }
.closing .btn + .btn { margin-left: 12px; }
@media (max-width: 1000px) {
.grid-3 { grid-template-columns: 1fr; max-width: 450px; }
.founder { flex-direction: column; }
.founder img { width: 100%; height: auto; max-width: 387px; }
.intro-quote { padding: 32px 48px; font-size: 1.05rem; }
.intro-quote::before, .intro-quote::after { font-size: 3rem; }
.intro-quote::before { left: 10px; }
.intro-quote::after { right: 10px; }
.intro-callout { padding: 32px 24px; font-size: 1.2rem; }
.section-title, .founder h2, .closing h2 { font-size: 1.9rem; }
.engage { padding: 36px 20px; }
.founder { padding: 24px; }
}
@media (max-width: 760px) {
.closing .btn { margin: 8px 0 0 !important; }
}
/* footer (copied from live theme) */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.site-footer {
background: #23282d;
color: #e8e3d9;
padding: 60px 0 30px;
}
.footer-content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.footer-section {
flex: 1;
margin-right: 40px;
margin-bottom: 30px;
}
.footer-section h3 {
margin-bottom: 20px;
color: #FF6B35;
}
.footer-section p, .footer-section a {
color: #ccc;
text-decoration: none;
line-height: 1.8;
}
.footer-section a:hover { color: #FF6B35; }
.footer-logo {
width: 220px;
height: auto;
margin-bottom: 20px;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.footer-logo:hover { opacity: 1; }
.footer-bottom {
border-top: 1px solid #444;
padding-top: 20px;
text-align: center;
color: #999;
}
.social-icons {
display: flex;
gap: 15px;
margin-top: 20px;
align-items: center;
}
.social-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(0, 175, 225, 0.1); /* Cyan with transparency */
color: #00BCD4; /* Cyan accent color */
transition: all 0.3s ease;
text-decoration: none;
}
.social-icons a:hover {
background-color: #00BCD4; /* Solid cyan background on hover */
color: #ffffff; /* White icon on hover */
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 188, 212, 0.4); /* Cyan glow */
}
.social-icons svg {
width: 20px;
height: 20px;
}
/* Responsive adjustments for mobile */
@media (max-width: 768px) {
.social-icons {
justify-content: center;
margin-top: 25px;
}
.social-icons a {
width: 45px;
height: 45px;
}
.social-icons svg {
width: 22px;
height: 22px;
}
}
/* ===================================================================
LIVE THEME (ported from the WordPress master stylesheet; loads after
the shell rules above, matching the old separate theme.css order)
=================================================================== */
/*
Theme Name: Seasoned Cyborgs - Master Stylesheet
Description: Unified and refactored CSS for the Seasoned Cyborgs brand across WordPress and GHL.
Author: LYNX Technology Development (Refactored by Manus)
Version: 3.0
*/
/* ===================================================================
1. FONT IMPORTS & CSS VARIABLES (:root)
- All brand colors and fonts are defined here. Single source of truth.
=================================================================== */
:root {
--primary-orange: #ff6b35;
--dark-blue: #2c3e50;
--beige: #e3d9c1;
--accent-cyan: #00AFE1;
--accent-red: #d94f4f;
--text-dark: #333;
--text-light: #666;
--light-gray: #f8f9fa;
--white: #ffffff;
--warning-bg: #fff3cd;
--success-bg: #d4edda;
--box-shadow: 0 2px 10px rgba(0,0,0,0.1);
--box-shadow-hover: 0 6px 20px rgba(255, 107, 53, 0.4);
}
/* ===================================================================
2. BASE & RESET STYLES
- Global styles for body, typography, and basic layout.
=================================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body:where(.theme){
font-family: 'Outfit', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.7;
color: var(--text-dark);
padding-top: 138px; /* Default for desktop header */
/* UNIFIED BLUEPRINT BACKGROUND */
/*background-image: url('https://seasonedcyborgs.com/wp-content/uploads/2025/11/blueprint_background.png' );*/
background-image: url('/images/logos/SeasonedCyborgsBlueprintBG.webp');
background-repeat: repeat;
background-attachment: fixed;
background-size: auto;
background-color: #e9ecef; /* Fallback color */
}
:where(.theme) .container{
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
:where(.theme) h1, :where(.theme) h2, :where(.theme) h3, :where(.theme) h4, :where(.theme) h5, :where(.theme) h6{
margin-bottom: 1rem;
font-weight: 700;
line-height: 1.3;
color: var(--dark-blue);
}
:where(.theme) h1{ font-size: 2.8rem; }
:where(.theme) h2{ font-size: 2.2rem; }
:where(.theme) h3{ font-size: 1.5rem; }
:where(.theme) h4{ font-size: 1.25rem; }
:where(.theme) p{
margin-bottom: 1rem;
font-size: 1.1rem;
}
:where(.theme) a{
color: var(--primary-orange);
text-decoration: none;
transition: color 0.3s ease;
}
:where(.theme) a:hover{
color: #E55A2B;
text-decoration: none;
}
:where(.theme) .row{
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
:where(.theme) .justify-content-center{
justify-content: center;
}
:where(.theme) .col{ padding: 0 15px; }
:where(.theme) .col-12{ flex: 0 0 100%; }
:where(.theme) .col-8{ flex: 0 0 66.666%; }
:where(.theme) .col-6{ flex: 0 0 50%; }
:where(.theme) .col-4{ flex: 0 0 33.333%; }
:where(.theme) .col-3{ flex: 0 0 25%; }
:where(.theme) .text-center{ text-align: center; }
/* --- Center the Main Desktop Navigation Menu --- */
:where(.theme) .main-navigation .nav-menu{
justify-content: center;
}
/* =================================================================
3. THE "PAGE CANVAS" SYSTEM
================================================================= */
/* The main beige container that holds all content */
:where(.theme) .page-canvas{
/* Beige color with 85% opacity */
background-color: rgba(227, 217, 193, 0.85); /* #e3d9c1 */
max-width: 1400px; /* Adjust the width of the canvas */
margin: 40px auto; /* Spacing from top/bottom and centers it */
padding-bottom: 0px;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
border-radius: 5px; /* Optional: slightly rounded corners */
}
/* The header area at the top of the canvas */
:where(.theme) .canvas-header{
padding: 40px 20px;
border-bottom: 3px solid #FF6B35; /* The orange bar */
text-align: center;
}
:where(.theme) .canvas-header .canvas-title{
font-size: 2.8rem;
color: #2c3e50;
margin-bottom: 1rem;
}
:where(.theme) .canvas-header .canvas-subtitle{
font-size: 1.3rem;
color: #444;
max-width: 800px;
margin: 0 auto;
}
/* =================================================================
CORRECTED HERO IMAGE CONTAINER
================================================================= */
/* This is the main container for the hero image and its content */
:where(.theme) .canvas-hero-image{
display: flex;
align-items: center;
justify-content: center;
position: relative; /* Crucial for positioning the img and overlay */
overflow: hidden; /* Hides any part of the image that's too tall */
min-height: 300px; /* Sets the height of the hero area */
background-color: #2e3c50; /* Fallback color if no image */
margin-top: 15px; /* Creates the space below the orange bar */
border-top: 5px solid #ff6b35; /* The orange bar */
}
/* This styles the actual ![]()
tag you added in the PHP */
:where(.theme) .hero-image-tag{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* This is the magic property */
object-position: center center; /* Prioritizes the center of the image */
z-index: 0; /* Places the image at the very back */
}
/* This ensures the overlay and content sit on top of the image */
:where(.theme) .canvas-hero-image .hero-overlay{
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 1;
}
:where(.theme) .canvas-hero-image .hero-content{
position: relative; /* Use relative so it respects the flexbox centering */
z-index: 2;
}
/* The container for all content cards below the hero */
:where(.theme) .canvas-content{
padding: 20px 40px;
}
/* Individual white cards for content sections */
:where(.theme) .content-card{
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
padding: 50px;
margin-top: 40px;
}
/* Ensure other sections adopt the card style if needed */
:where(.theme) .process-steps-section{
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
padding: 50px !important; /* Override old padding */
margin-top: 40px;
}
/* =================================================================
HOMEPAGE "MANIFESTO BLOCK" STYLING (CORRECTED)
================================================================= */
/* This is the main container for the manifesto text */
:where(.theme) .manifesto-block{
background-color: transparent;
box-shadow: none;
padding: 20px 20px;
margin-bottom: 0px;
position: relative; /* This is correct and necessary */
border-left: none;
}
/* Style the paragraph text itself (no changes here) */
:where(.theme) .manifesto-block .hero-paragraph{
font-size: 1.5rem;
line-height: 1.7;
font-weight: 500;
color: #2c3e50;
max-width: 800px;
margin: 0 auto;
position: relative; /* Add this to ensure text is above quotes */
z-index: 2; /* Add this to ensure text is above quotes */
}
/* Add and style the stylized quotation marks (UPDATED) */
:where(.theme) .manifesto-block::before,
:where(.theme) .manifesto-block::after{
content: "“";
font-family: Georgia, serif;
font-size: 8rem; /* Increased size for more impact */
color: #ff6b35;
opacity: 0.6; /* Slightly more visible */
position: absolute;
z-index: 1; /* Set z-index to 1 to be above the canvas (0) but below the text (2) */
}
/* Position the opening quote */
:where(.theme) .manifesto-block::before{
content: "“";
top: -20px; /* Adjust vertical position */
left: 0;
}
/* Position the closing quote */
:where(.theme) .manifesto-block::after{
content: "”";
bottom: -40px; /* Adjust vertical position */
right: 0;
}
/* =================================================================
4. RESPONSIVE ADJUSTMENTS
================================================================= */
@media (max-width: 1400px) {
:where(.theme) .page-canvas{
margin-left: 20px;
margin-right: 20px;
}
}
@media (max-width: 768px) {
body:where(.theme){ padding-top: 70px; } /* Adjust for mobile header */
:where(.theme) .page-canvas{
margin: 20px 10px;
}
:where(.theme) .canvas-header{
padding: 30px 15px;
}
:where(.theme) .canvas-header .canvas-title{
font-size: 2rem;
}
:where(.theme) .canvas-header .canvas-subtitle{
font-size: 1.1rem;
}
:where(.theme) .canvas-content{
padding: 10px 15px;
}
:where(.theme) .content-card,
:where(.theme) .process-steps-section{
padding: 30px !important;
margin-top: 30px;
}
}
/* =================================================================
HEADER
================================================================= */
:where(.theme) .site-header{
background: #23282d;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
height: 170px;
}
:where(.theme) .site-header::after{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 5px;
background: #00AFE1;
}
:where(.theme) .header-grid{
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 75px 75px;
height: 160px;
padding: 5px 0;
}
:where(.theme) .logo-column{
grid-row: 1 / 3;
display: flex;
align-items: center;
justify-content: center;
padding: 5px 20px 5px 0;
width: 170px;
}
:where(.theme) .logo-icon{
height: 150px;
width: 150px;
object-fit: contain;
transition: all 0.3s ease;
}
:where(.theme) .logo-icon:hover{ transform: scale(1.05); }
:where(.theme) .content-column{
display: grid;
grid-template-rows: 75px 75px;
}
:where(.theme) .nav-row{
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 0 0 20px;
height: 75px;
}
:where(.theme) .main-navigation{ flex: 1; }
:where(.theme) .nav-menu{
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 25px;
}
:where(.theme) .nav-menu li{ margin: 0; }
:where(.theme) .nav-menu a{
color: #FF6B35;
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
transition: color 0.3s ease;
}
:where(.theme) .nav-menu a:hover{ color: #E55A2B; }
:where(.theme) .company-row{
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 0 0 20px;
height: 75px;
}
:where(.theme) .company-logo-image{
height: 70px;
width: auto;
max-width: 100%;
object-fit: contain;
}
/* =================================================================
NAVIGATION DROPDOWN STYLES
================================================================= */
:where(.theme) .main-navigation .nav-menu li{
position: relative;
}
:where(.theme) .main-navigation .sub-menu{
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #23282d;
list-style: none;
padding: 10px 0;
margin: 0;
min-width: 220px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
z-index: 1001;
}
:where(.theme) .main-navigation .sub-menu li{
width: 100%;
}
:where(.theme) .main-navigation .sub-menu a{
padding: 10px 20px;
display: block;
width: 100%;
color: #FF6B35;
font-size: 0.9rem;
white-space: nowrap;
}
:where(.theme) .main-navigation .sub-menu a:hover{
background-color: #333;
color: #E55A2B;
}
:where(.theme) .main-navigation li:hover > .sub-menu{
display: block;
}
/* =================================================================
DUAL HEADER RESPONSIVE STYLES
================================================================= */
:where(.theme) .header-desktop{ display: block; }
:where(.theme) .header-mobile{ display: none; }
:where(.theme) .mobile-nav-container{ display: none; }
@media (max-width: 768px) {
:where(.theme) .header-desktop{ display: none; }
:where(.theme) .header-mobile{ display: block; }
body:where(.theme){
padding-top: 40px !important;
}
:where(.theme) .hero-only-image,
:where(.theme) .hero-section-sub{
padding-top: 0 !important;
margin-top: 0 !important;
}
:where(.theme) .site-header{
height: auto;
}
:where(.theme) .home .hero-only-image{
height: 250px;
min-height: auto;
}
:where(.theme) .mobile-header-flex{
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
}
:where(.theme) .mobile-logo img{
height: 50px;
width: auto;
}
:where(.theme) .mobile-menu-toggle button{
background: none;
border: none;
padding: 10px;
cursor: pointer;
}
:where(.theme) .hamburger-icon,
:where(.theme) .hamburger-icon::before,
:where(.theme) .hamburger-icon::after{
content: '';
display: block;
background-color: #FF6B35;
height: 3px;
width: 25px;
border-radius: 3px;
transition: all 0.3s ease-in-out;
}
:where(.theme) .hamburger-icon::before{
transform: translateY(-8px);
}
:where(.theme) .hamburger-icon::after{
transform: translateY(8px);
}
:where(.theme) .mobile-menu-toggle button.is-active .hamburger-icon{
background-color: transparent;
}
:where(.theme) .mobile-menu-toggle button.is-active .hamburger-icon::before{
transform: rotate(45deg);
}
:where(.theme) .mobile-menu-toggle button.is-active .hamburger-icon::after{
transform: rotate(-45deg);
transform-origin: center;
position: relative;
top: -11px;
}
:where(.theme) .mobile-nav-container{
background-color: #23282d;
padding: 20px 0;
z-index: 999;
}
:where(.theme) .mobile-nav-container.is-active{
display: block;
}
:where(.theme) .mobile-navigation .nav-menu{
flex-direction: column;
align-items: flex-start;
gap: 15px;
width: 100%;
padding-left: 20px;
}
:where(.theme) .mobile-navigation .nav-menu a{
font-size: 1.2rem;
padding: 10px;
}
:where(.theme) .mobile-navigation .sub-menu li{
padding-top: 10px;
}
:where(.theme) .mobile-navigation .sub-menu a{
font-size: 1rem;
padding: 5px 10px;
}
}
/* =================================================================
GENERAL CONTENT & TYPOGRAPHY
================================================================= */
:where(.theme) .main-content{
margin-top: 0;
padding-top: 0;
}
:where(.theme) h1, :where(.theme) h2, :where(.theme) h3, :where(.theme) h4, :where(.theme) h5, :where(.theme) h6{
font-weight: 700;
line-height: 1.3;
}
:where(.theme) .section-title{
text-align: center;
font-size: 2.5rem;
margin-bottom: 60px;
color: #23282d;
}
:where(.theme) .section-title-small{
text-align: center;
margin-bottom: 60px;
color: #23282d;
}
:where(.theme) p{
color: #333;
line-height: 1.8;
}
:where(.theme) a{
color: #FF6B35;
text-decoration: none;
transition: color 0.3s ease;
}
:where(.theme) a:hover{ color: #E55A2B; }
/* =================================================================
BUTTONS
================================================================= */
:where(.theme) .cta-button{
display: inline-block;
padding: 15px 30px;
text-decoration: none;
border-radius: 5px;
font-weight: 600;
transition: all 0.3s ease;
border: 2px solid transparent;
cursor: pointer;
}
:where(.theme) .cta-button:hover{
transform: translateY(-2px);
text-decoration: none;
}
:where(.theme) .cta-orange, :where(.theme) .cta-button-solid{
background-color: #FF6B35;
color: #ffffff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
:where(.theme) .cta-orange:hover, :where(.theme) .cta-button-solid:hover{
background-color: #E55A2B;
color: #ffffff;
}
/* =================================================================
FOOTER
================================================================= */
:where(.theme) .site-footer{
background: #23282d;
color: #e8e3d9;
padding: 60px 0 30px;
}
:where(.theme) .footer-content{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
:where(.theme) .footer-section{
flex: 1;
margin-right: 40px;
margin-bottom: 30px;
}
:where(.theme) .footer-section h3{
margin-bottom: 20px;
color: #FF6B35;
}
:where(.theme) .footer-section p, :where(.theme) .footer-section a{
color: #ccc;
text-decoration: none;
line-height: 1.8;
}
:where(.theme) .footer-section a:hover{ color: #FF6B35; }
:where(.theme) .footer-logo{
width: 220px;
height: auto;
margin-bottom: 20px;
opacity: 0.8;
transition: opacity 0.3s ease;
}
:where(.theme) .footer-logo:hover{ opacity: 1; }
:where(.theme) .footer-bottom{
border-top: 1px solid #444;
padding-top: 20px;
text-align: center;
color: #999;
}
/* =================================================================
SOCIAL MEDIA ICONS - Add this to your style.css file
Add after the existing footer styles (around line 651)
================================================================= */
:where(.theme) .social-icons{
display: flex;
gap: 15px;
margin-top: 20px;
align-items: center;
}
:where(.theme) .social-icons a{
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(0, 175, 225, 0.1); /* Cyan with transparency */
color: #00BCD4; /* Cyan accent color */
transition: all 0.3s ease;
text-decoration: none;
}
:where(.theme) .social-icons a:hover{
background-color: #00BCD4; /* Solid cyan background on hover */
color: #ffffff; /* White icon on hover */
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 188, 212, 0.4); /* Cyan glow */
}
:where(.theme) .social-icons svg{
width: 20px;
height: 20px;
}
/* Responsive adjustments for mobile */
@media (max-width: 768px) {
:where(.theme) .social-icons{
justify-content: center;
margin-top: 25px;
}
:where(.theme) .social-icons a{
width: 45px;
height: 45px;
}
:where(.theme) .social-icons svg{
width: 22px;
height: 22px;
}
}
/* =================================================================
HERO SECTIONS (REVISED FOR UNIFIED BACKGROUND)
================================================================= */
:where(.theme) .hero-section{
position: relative;
background-image: none !important; /* Remove specific hero background */
background-color: transparent; /* Make it see-through */
color: #23282d; /* Change text to a dark color */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 350px; /* Keep spacing */
}
:where(.theme) .hero-section .hero-overlay{
display: none; /* Hide the dark overlay */
}
:where(.theme) .hero-section .hero-content{
position: relative;
z-index: 2;
padding: 60px 0;
}
:where(.theme) .hero-process-page{
min-height: 350px;
}
:where(.theme) .hero-section .hero-title{
font-size: 3rem;
font-weight: 700;
line-height: 1.2;
color: #23282d;
text-shadow: none; /* Remove shadow */
}
:where(.theme) .hero-section .hero-subtitle{
font-size: 1.5rem;
max-width: 800px;
margin: 20px auto 0;
color: #333;
opacity: 0.95;
text-shadow: none; /* Remove shadow */
}
:where(.theme) .hero-only-image, :where(.theme) .hero-content-below{
display: none;
}
/* =================================================================
DEFINITIVE HERO STYLE - RELIABLE & READABLE
================================================================= */
/* 1. Set up the container for layering */
:where(.theme) .hero-tech-garage{
position: relative;
display: grid;
place-items: center;
}
/* 2. Stack all children in the same grid cell */
:where(.theme) .hero-tech-garage > *{
grid-column: 1 / -1;
grid-row: 1 / -1;
}
/* 3. Style the image tag */
:where(.theme) .hero-tech-garage .hero-image-tag{
width: 100%;
height: 100%;
object-fit: cover;
/* NO MORE MIX-BLEND-MODE! */
}
/* In .hero-tech-garage .hero-overlay */
:where(.theme) .hero-tech-garage .hero-overlay{
width: 100%;
height: 100%;
/* THE GOOD GRADIENT */
background: linear-gradient(90deg, rgba(0, 200, 255, 0.7) 0%, rgba(28, 43, 58, 0.85) 30%, rgba(255, 107, 53, 0.65) 100%);
/* THE GOOD BLEND MODE */
mix-blend-mode: color;
}
/* =================================================================
FINAL POLISH for the CORRECTED IMAGE
================================================================= */
:where(.theme) .hero-tech-garage .hero-content h1,
:where(.theme) .hero-tech-garage .hero-content .hero-title{
color: #FFF; /* Bright white text */
/*
The crisp 1px black outline. Now it will look like a clean
design choice, not a desperate fix.
*/
text-shadow:
-1px -1px 0 rgba(0,0,0,0.7),
1px -1px 0 rgba(0,0,0,0.7),
-1px 1px 0 rgba(0,0,0,0.7),
1px 1px 0 rgba(0,0,0,0.7);
}
/* A slightly softer version for the smaller text */
:where(.theme) .hero-tech-garage .hero-content p,
:where(.theme) .hero-tech-garage .hero-content .hero-subtitle{
color: #FFF;
font-weight: 500;
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
@media (max-width: 768px) {
:where(.theme) .hero-process-page{
min-height: 300px;
}
:where(.theme) .hero-section .hero-title{
font-size: 2.2rem;
}
:where(.theme) .hero-section .hero-subtitle{
font-size: 1.2rem;
}
}
/* =================================================================
INTERIOR PAGE HERO REFINEMENTS (SOLUTIONS, ETC.)
================================================================= */
/* Target hero sections on all pages EXCEPT the homepage */
body:where(.theme):not(.home) .canvas-hero-image{
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
/* 1. Make the hero image taller */
min-height: 300px;
}
/* 2. Adjust the overlay to be lighter */
body:where(.theme):not(.home) .hero-overlay{
background-color: rgba(0, 0, 0, 0.2); /* Reduced from 0.6 to 0.4 for less darkness */
}
/* 3. Center the content and make the text white */
body:where(.theme):not(.home) .hero-content{
position: relative;
z-index: 2;
padding: 20px;
}
body:where(.theme):not(.home) .hero-content .hero-title,
body:where(.theme):not(.home) .hero-content .hero-subtitle{
color: #ffffff; /* White text */
text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4); /* Add shadow for readability */
}
/* =================================================================
THE "ETHOS BLOCK" for the Tech Garage
A special inverted callout for the mission statement.
================================================================= */
:where(.theme) .ethos-block{
/* The dark, branded background */
background-color: #1C2B3A;
/* Spacing */
padding: 3rem 2rem;
margin: 2.5rem auto 2.5rem auto; /* Top, H/V, Bottom */
max-width: 1100px; /* Or whatever your standard content width is */
/* The signature orange accent borders */
border-top: 4px solid #FF6B35;
border-bottom: 4px solid #FF6B35;
/* A subtle lift off the page */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
border-radius: 8px; /* Slightly rounded corners */
text-align: center;
}
/* Style the text inside the block for readability */
:where(.theme) .ethos-block h2{
color: #FFFFFF;
font-size: 1.8rem;
margin-top: 0;
margin-bottom: 1rem;
}
:where(.theme) .ethos-block p{
color: #E8E3D9; /* The slightly off-white for the main text */
font-size: 1.1rem;
line-height: 1.7;
max-width: 800px; /* Keep the paragraph from getting too wide */
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
}
/* =================================================================
THE "Dark Cards"
================================================================= */
:where(.theme) .dark-card{
background-color: #1C2B3A;
color: #E8E3D9;
padding: 1.5rem .5rem;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
:where(.theme) .dark-card h2, :where(.theme) .dark-card h3{
color: #FFFFFF;
}
/* =================================================================
STANDALONE SPOTLIGHT CARD COMPONENT
================================================================= */
/* The Grid Container */
:where(.theme) .spotlight-grid{
display: grid;
/* Create 4 columns on desktop, 2 on tablet, 1 on mobile */
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem; /* The space between cards */
margin-top: 2rem; /* Space below the "Who This Is For" title */
}
/* The Card Itself */
:where(.theme) .spotlight-card{
background-color: #ffffff;
border-radius: 12px;
padding: 2rem 1.5rem;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
border: 1px solid #EAEAEA;
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
:where(.theme) .spotlight-card:hover{
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(40, 50, 60, 0.08);
}
/* The Emoji */
:where(.theme) .spotlight-card__emoji{
font-size: 2.5rem; /* Slightly smaller emoji */
line-height: 1;
background-color: #f7f7f7;
width: 70px;
height: 70px;
border-radius: 50%;
display: grid;
place-items: center;
margin: 0 auto 1.5rem auto; /* Centered with bottom margin */
}
/* The Text Elements */
:where(.theme) .spotlight-card h3{
font-size: 1.1rem;
margin-bottom: 0.75rem;
color: #1C2B3A;
}
:where(.theme) .spotlight-card p{
font-size: 0.9rem;
line-height: 1.5;
color: #555;
}
/* --- RESPONSIVE STYLES --- */
/* For tablets */
@media (max-width: 992px) {
:where(.theme) .spotlight-grid{
grid-template-columns: repeat(2, 1fr); /* 2 columns */
}
}
/* For mobile phones */
@media (max-width: 576px) {
:where(.theme) .spotlight-grid{
grid-template-columns: 1fr; /* 1 column */
}
}
/* =================================================================
Light grey call-outs
================================================================= */
:where(.theme) .callout-box{
background-color: #f7f9fc; /* A very light, clean blue/gray */
border-left: 5px solid #FF6B35; /* Signature orange accent */
padding: 1.5rem 2rem;
border-radius: 0 8px 8px 0; /* Rounded corners on the right side */
margin: 2rem 0;
}
:where(.theme) .callout-box p{
margin: 0;
font-size: 1.1rem;
line-height: 1.7;
}
:where(.theme) .callout-box a{
font-weight: bold;
}
/* =================================================================
HIGHLIGHT BOX - GREEN
A prominent callout box with a light green background and orange border.
================================================================= */
:where(.theme) .highlight-box-green{
background-color: #e8f5e9; /* A pleasant, light green */
border: 2px solid #FF6B35; /* A strong orange border */
border-radius: 16px;
padding: 2.5rem;
margin: 2rem auto; /* Vertical spacing and centering */
max-width: 1000px; /* Control the width */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
/* Style the headline inside the box */
:where(.theme) .highlight-box-green h3{
text-align: center;
font-size: 1.5rem;
margin-top: 0;
margin-bottom: 2rem;
color: #1B5E20; /* A dark, readable green for the text */
}
/* Style the list inside the box */
:where(.theme) .highlight-box-green ul{
list-style-type: none;
padding-left: 0;
margin-bottom: 0;
}
:where(.theme) .highlight-box-green li{
display: flex;
align-items: flex-start;
margin-bottom: 1.25rem;
font-size: 1.05rem;
color: #333;
}
:where(.theme) .highlight-box-green li:last-child{
margin-bottom: 0;
}
/* The custom checkmark icon */
:where(.theme) .highlight-box-green li::before{
content: '✓';
color: #FF6B35; /* Signature Orange */
font-weight: bold;
font-size: 1.3rem;
margin-right: 1rem;
margin-top: -3px;
}
/* =================================================================
FEATURED HEADLINE CARD (FOR INTERIOR PAGES)
================================================================= */
/* Target the first content card on interior pages */
body:where(.theme):not(.home) .canvas-content:first-of-type .content-card{
/* 1. Add the orange accent bar to the top */
border-top: 5px solid #ff6b35;
/* 2. Ensure content is centered */
text-align: center;
}
/* =================================================================
UTILITY CLASS: Accent Top Border
Adds the signature orange top border to any element.
================================================================= */
:where(.theme) .has-accent-border-top{
border-top: 3px solid #FF6B35; /* The orange top border */
}
/* 3. Add a small divider line below the main title */
body:where(.theme):not(.home) .canvas-content:first-of-type .content-card .section-title::after,
body:where(.theme):not(.home) .canvas-content:first-of-type .content-card .section-title-small::after{
content: '';
display: block;
width: 80px; /* Width of the line */
height: 3px; /* Thickness of the line */
background-color: #ff6b35; /* Orange color */
margin: 25px auto 30px auto; /* Centering and spacing */
}
/* 4. Ensure the CTA button has proper spacing */
body:where(.theme):not(.home) .canvas-content:first-of-type .content-card .cta-button{
margin-top: 30px;
}
/* =================================================================
WIDTH MODIFIER UTILITY
Use this to make specific components wider.
================================================================= */
:where(.theme) .is-wider{
max-width: 1200px !important; /* Increase the max-width */
}
/* =================================================================
UTILITY: Row with Gap
A modern row class that uses flexbox gap for spacing.
================================================================= */
:where(.theme) .row-with-gap{
display: flex;
flex-wrap: wrap;
gap: 30px; /* You can adjust this value as needed */
}
/*
This is the magic. We adjust the width of the columns inside this
specific row to make room for the gap.
*/
:where(.theme) .row-with-gap > .col-4{
/*
Start with 1/3 of the width, then subtract 2/3 of the gap value.
(30px gap * 2/3 = 20px)
*/
flex-basis: calc(33.333% - 20px);
padding: 0; /* We don't need the old padding system */
}
/* Add this for responsive behavior */
@media (max-width: 992px) {
:where(.theme) .row-with-gap > .col-4{
flex-basis: calc(50% - 15px); /* Two columns on tablets */
}
}
@media (max-width: 768px) {
:where(.theme) .row-with-gap > .col-4{
flex-basis: 100%; /* One column on mobile */
}
}
/* =================================================================
CONTENT CARD STYLING
================================================================= */
:where(.theme) .process-steps-section,
:where(.theme) .about-hero-section,
:where(.theme) .about-founder-section,
:where(.theme) .section-bg-gray,
:where(.theme) .philosophy-section,
:where(.theme) .bio-section,
:where(.theme) .solutions-grid,
:where(.theme) .solutions-intro,
:where(.theme) .pain-section,
:where(.theme) .about-expertise-section,
:where(.theme) .faq-section,
:where(.theme) .investment-section,
:where(.theme) .timing-section,
:where(.theme) .team-addons-section,
:where(.theme) .exclusions-section{
background-color: #ffffff;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin-top: 40px;
margin-bottom: 40px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding: 60px 40px;
}
/* Remove default padding from sections that are now cards */
:where(.theme) .section-bg-gray,
:where(.theme) .pain-section,
:where(.theme) .philosophy-section,
:where(.theme) .bio-section,
:where(.theme) .solutions-grid,
:where(.theme) .solutions-intro,
:where(.theme) .process-steps-section,
:where(.theme) .investment-section,
:where(.theme) .timing-section,
:where(.theme) .team-addons-section,
:where(.theme) .exclusions-section{
padding: 60px 40px !important; /* Override existing padding */
}
@media (max-width: 768px) {
:where(.theme) .process-steps-section,
:where(.theme) .about-hero-section,
:where(.theme) .about-founder-section,
:where(.theme) .section-bg-gray,
:where(.theme) .philosophy-section,
:where(.theme) .bio-section,
:where(.theme) .solutions-grid,
:where(.theme) .solutions-intro,
:where(.theme) .pain-section,
:where(.theme) .about-expertise-section,
:where(.theme) .faq-section,
:where(.theme) .investment-section,
:where(.theme) .timing-section,
:where(.theme) .team-addons-section,
:where(.theme) .exclusions-section{
padding: 40px 20px !important;
margin-left: 10px;
margin-right: 10px;
}
}
/* =================================================================
SCROLL ANIMATION STYLES
================================================================= */
:where(.theme) .animate-on-scroll{
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
:where(.theme) .animate-on-scroll.is-visible{
opacity: 1;
transform: translateY(0);
}
/* =================================================================
SPECIFIC SECTION STYLES (PAIN, PHILOSOPHY, BIO, ETC.)
================================================================= */
/* Targets the container for the icon */
:where(.theme) .approach-icon{
font-size: 3.5rem; /* You can adjust this value (e.g., 4rem, 5rem) as needed */
text-align: center;
display: block;
margin-bottom: 25px;
}
:where(.theme) .pain-checklist{
max-width: 700px;
margin: 0 auto;
text-align: left;
}
:where(.theme) .pain-checklist ul{
list-style: none;
padding: 0;
font-size: 1.1rem;
line-height: 1.8;
}
:where(.theme) .pain-checklist li{
position: relative;
padding-left: 35px;
margin-bottom: 20px;
}
:where(.theme) .pain-checklist li::before{
content: '✔';
position: absolute;
left: 0;
color: #d94f4f;
font-size: 1.5rem;
font-weight: 700;
}
:where(.theme) .pain-conclusion{
font-size: 1.2rem;
font-weight: 600;
max-width: 600px;
margin: 40px auto 30px;
color: #23282d;
}
:where(.theme) .philosophy-card{
background: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
height: 100%;
}
:where(.theme) .philosophy-card h3{
color: #2c3e50;
margin-bottom: 15px;
font-size: 1.3rem;
}
:where(.theme) .philosophy-card p{
font-size: 0.95rem;
}
:where(.theme) .bio-section .row{
align-items: center;
}
:where(.theme) .bio-section h2{
color: #23282d;
font-size: 2.5rem;
margin-bottom: 20px;
}
:where(.theme) .bio-section p{
margin-bottom: 20px;
max-width: 90%;
}
:where(.theme) .bio-logo{
max-width: 100%;
height: auto;
padding-right: 30px;
}
:where(.theme) .cta-primary-block{
background-color: #2c3e50;
color: #e8e3d9;
padding: 60px 40px;
text-align: center;
margin-top: 40px;
/* Make the bottom corners match the canvas's rounded corners */
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
/* Ensure the top corners are square, creating a seamless join */
border-top-left-radius: 0;
border-top-right-radius: 0;
}
:where(.theme) .cta-primary-block h2{
font-size: 2.5rem;
margin-top: 0;
margin-bottom: 20px;
color: #ffffff;
}
:where(.theme) .cta-primary-block p{
font-size: 1.2rem;
margin-bottom: 30px;
color: rgba(232, 227, 217, 0.9);
line-height: 1.6;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
:where(.theme) .cta-primary-block .button-group{
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
/* =================================================================
NEWSLETTER FORM (FULLY RESPONSIVE)
================================================================= */
/* --- 1. Base styles for the entire box (no changes here) --- */
:where(.theme) .newsletter-signup-box{
background-color: #d94f4f;
color: #ffffff;
padding: 20px 30px;
border-radius: 15px;
margin-bottom: 40px;
text-align: center;
}
:where(.theme) .newsletter-signup-box h3{
color: #ffffff;
margin-bottom: 15px;
font-size: 1.8rem;
}
:where(.theme) .newsletter-signup-box p{
color: rgba(255, 255, 255, 0.9);
margin-bottom: 30px;
font-size: 1.1rem;
}
:where(.theme) .newsletter-signup-box .privacy-text{
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
margin-top: 15px;
}
/* --- 2. Form styles for MOBILE (default) --- */
/* This is what mobile devices will see first */
:where(.theme) .newsletter-signup-box form{
display: flex;
flex-direction: column; /* Stack the items vertically */
gap: 15px;
max-width: 500px; /* A reasonable width for mobile */
margin: 0 auto;
}
:where(.theme) .newsletter-signup-box input[type="email"],
:where(.theme) .newsletter-signup-box input[type="text"],
:where(.theme) .newsletter-signup-box button[type="submit"]{
width: 100%; /* Make each element take up the full width */
}
/* --- 3. Form styles for DESKTOP (using a media query) --- */
/* This will override the mobile styles on screens larger than 768px */
@media (min-width: 768px) {
:where(.theme) .newsletter-signup-box form{
flex-direction: row; /* Go back to a horizontal layout */
align-items: center; /* Vertically align items */
max-width: 900px;
}
:where(.theme) .newsletter-signup-box input[type="email"],
:where(.theme) .newsletter-signup-box input[type="text"]{
flex: 1 1 40%; /* Allow inputs to grow */
width: auto; /* Reset the width from mobile */
}
:where(.theme) .newsletter-signup-box button[type="submit"]{
flex: 0 0 auto; /* Button takes only the space it needs */
width: auto; /* Reset the width from mobile */
}
}
/* --- 4. Input and Button styling (no changes here) --- */
:where(.theme) .newsletter-signup-box input::placeholder{
color: rgba(255, 255, 255, 0.7);
}
:where(.theme) .newsletter-signup-box input[type="email"],
:where(.theme) .newsletter-signup-box input[type="text"]{
padding: 15px;
border: 2px solid #ffffff;
border-radius: 5px;
font-size: 1rem;
background-color: rgba(0, 0, 0, 0.2);
color: #ffffff;
}
:where(.theme) .newsletter-signup-box button[type="submit"]{
padding: 15px 30px;
border: none;
border-radius: 5px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
background-color: #ffffff;
color: #d94f4f;
}
:where(.theme) .newsletter-signup-box button[type="submit"]:hover{
background-color: #e8e3d9;
color: #d94f4f;
}
/* =================================================================
RESPONSIVE STYLES
================================================================= */
@media (max-width: 992px) {
:where(.theme) .col-lg-3{ flex: 0 0 50%; margin-bottom: 30px; }
:where(.theme) .bio-section .row{ flex-direction: column; text-align: center; }
:where(.theme) .bio-logo{ padding-right: 0; margin-bottom: 30px; max-width: 250px; }
:where(.theme) .bio-section p{ max-width: 100%; }
}
@media (max-width: 768px) {
body:where(.theme){ padding-top: 100px; } /* Adjust for smaller header */
:where(.theme) .site-header, :where(.theme) .header-grid{ height: auto; }
:where(.theme) .header-grid{ grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
:where(.theme) .logo-column{ width: 100%; padding: 10px 0; grid-row: 1; }
:where(.theme) .logo-icon{ height: 80px; }
:where(.theme) .company-row{ grid-row: 2; justify-content: center; }
:where(.theme) .nav-row{ grid-row: 3; justify-content: center; }
:where(.theme) .col-12, :where(.theme) .col-8, :where(.theme) .col-6, :where(.theme) .col-4, :where(.theme) .col-3{
flex: 0 0 100%;
margin-bottom: 30px;
}
:where(.theme) .philosophy-card{ margin-bottom: 30px; }
:where(.theme) .hero-content .hero-title{ font-size: 2.2rem; }
:where(.theme) .hero-content .hero-subtitle{ font-size: 1.2rem; }
:where(.theme) .section-title{ font-size: 2rem; }
}
/* =================================================================
SOLUTIONS PAGE STYLES
================================================================= */
:where(.theme) .solution-card{
background: #ffffff;
border: 1px solid #e9ecef;
border-radius: 10px;
padding: 30px;
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
/* Spacing fix */
margin-bottom: 30px;
/* Style enhancements */
position: relative;
overflow: hidden;
}
:where(.theme) .solution-card:hover{
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* Create the colored top border */
:where(.theme) .solution-card::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background-color: #2c3e50; /* Default color */
}
/* Give each card in a row a unique color */
:where(.theme) .row .col-4:nth-child(3n+1) .solution-card::before{
background-color: #FF6B35; /* Accent Orange */
}
:where(.theme) .row .col-4:nth-child(3n+2) .solution-card::before{
background-color: #00BCD4; /* Accent Cyan */
}
:where(.theme) .row .col-4:nth-child(3n+3) .solution-card::before{
background-color: #d94f4f; /* Accent Red */
}
/* Make the price stand out more */
:where(.theme) .solution-price{
font-size: 2.8rem;
font-weight: 700;
color: #23282d;
margin-bottom: 10px;
}
:where(.theme) .solution-price .price-term{
font-size: 1rem;
font-weight: 500;
color: #666;
}
/* Other existing styles for the solutions page */
:where(.theme) .solutions-intro{
padding: 80px 0;
background: #ffffff;
}
:where(.theme) .solutions-grid{
padding: 80px 0;
background: #f8f9fa;
}
:where(.theme) .solutions-grid .col-4{
margin-bottom: 30px;
}
:where(.theme) .solution-card h3{
font-size: 1.5rem;
color: #23282d;
margin-bottom: 15px;
}
:where(.theme) .solution-card p{
font-size: 1rem;
color: #555;
flex-grow: 1;
margin-bottom: 30px;
}
:where(.theme) .solution-icon{
font-size: 2.5rem; /* Size of the icon */
margin-bottom: 20px;
color: #2c3e50; /* Brand Blue */
}
/* Enhanced Digital Keychain Page Styles */
:where(.theme) .bg-white{background: var(--white) !important;}
:where(.theme) p{
margin-bottom: 1rem;
font-size: 1.1rem;
line-height: 1.7;
}
/* Section Spacing */
:where(.theme) section{
/* padding: 60px 0; */
}
:where(.theme) .section-title{
text-align: center;
margin-bottom: 3rem;
color: var(--dark-blue);
position: relative;
}
:where(.theme) .section-title::after, :where(.theme) .secondary-text::after{
content: '';
display: block;
width: 60px;
height: 4px;
background: var(--primary-orange);
margin: 20px auto 0;
border-radius: 2px;
}
/* Hero Section */
:where(.theme) .hero-section-sub{
background: linear-gradient(135deg, var(--dark-blue), #34495e);
color: var(--white);
text-align: center;
padding: 80px 0;
background-position: center bottom;
background-size: cover;
min-height: 40vh; /* Adjust height as needed */
}
:where(.theme) .hero-title{
font-size: 3rem;
margin-bottom: 2rem;
font-weight: 800;
}
:where(.theme) .hero-subheadline{
font-size: 1.3rem;
max-width: 800px;
margin: 0 auto;
}
:where(.theme) .highlight-text{
color: var(--primary-orange);
font-weight: bold;
font-size: 1.2em;
z-index: 2;
}
:where(.theme) .secondary-text{
opacity: 0.9;
font-weight: 400;
z-index: 2;
}
/* Problem Section */
:where(.theme) .problem-section{
background-color: var(--light-gray);
}
:where(.theme) .intro-text{
font-size: 1.2rem;
font-weight: 500;
color: var(--dark-blue);
margin-bottom: 2rem;
}
:where(.theme) .problem-highlight{
background-color: var(--warning-bg);
border-left: 5px solid var(--primary-orange);
padding: 25px;
margin: 30px 0;
border-radius: 8px;
font-size: 1.2rem;
box-shadow: var(--box-shadow);
}
:where(.theme) .problem-hightlight-top-level{
background-color: var(--warning-bg);
padding: 40px;
border-radius: 8px;
/* --- The Fix --- */
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.1);
}
:where(.theme) .stat-callout{
background: linear-gradient(135deg, var(--primary-orange), #ff8c42);
color: var(--white);
padding: 40px;
border-radius: 15px;
text-align: center;
margin: 40px 0;
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
transform: translateY(0);
transition: transform 0.3s ease;
}
:where(.theme) .stat-callout:hover{
transform: translateY(-5px);
}
:where(.theme) .stat-number{
font-size: 4rem;
font-weight: 900;
line-height: 1;
margin-bottom: 10px;
}
:where(.theme) .stat-text{
font-size: 1.2rem;
font-weight: 500;
opacity: 0.95;
}
/* Solution Section */
:where(.theme) .solution-section{
background-color: var(--white);
}
:where(.theme) .solution-highlight{
background: linear-gradient(135deg, var(--success-bg), #c3e6cb);
border: 2px solid var(--primary-orange);
padding: 30px;
border-radius: 12px;
text-align: center;
margin: 30px 0;
box-shadow: var(--box-shadow);
}
:where(.theme) .solution-highlight h3{
color: var(--dark-blue);
font-size: 1.4rem;
margin-bottom: 0;
}
/* Benefits Section */
:where(.theme) .benefits-section{
background-color: var(--light-gray);
}
:where(.theme) .benefits-grid{
display: flex;
flex-wrap: wrap;
gap: 30px;
margin: 40px 0;
justify-content: center;
}
:where(.theme) .benefit-card{
background: var(--white);
padding: 35px;
border-radius: 12px;
box-shadow: var(--box-shadow);
text-align: center;
transition: all 0.3s ease;
border-top: 4px solid var(--primary-orange);
flex: 0 1 350px;
max-width: 450px;
}
:where(.theme) .benefit-card:hover{
transform: translateY(-8px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
:where(.theme) .benefit-icon{
font-size: 3.5rem;
margin-bottom: 20px;
display: block;
}
:where(.theme) .benefit-card h4{
color: var(--dark-blue);
font-size: 1.3rem;
margin-bottom: 15px;
}
:where(.theme) .benefit-card p{
font-size: 1rem;
line-height: 1.6;
color: var(--text-light);
}
/* --- Featured Benefit Card Styling --- */
:where(.theme) .benefit-card.is-featured{
position: relative;
border-color: var(--primary-orange); /* Orange border to draw the eye */
transform: scale(1.02); /* Slightly larger to stand out */
box-shadow: 0 10px 40px rgba(255, 107, 53, 0.2);
}
:where(.theme) .featured-badge{
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background-color: var(--primary-orange);
color: #ffffff;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* Personas Section */
:where(.theme) .personas-section{
background-color: var(--white);
padding-bottom: 20px;
}
:where(.theme) .personas-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin: 40px 0;
}
:where(.theme) .persona-card{
background: var(--light-gray);
padding: 30px;
border-radius: 10px;
text-align: center;
transition: all 0.3s ease;
border: 2px solid transparent;
}
:where(.theme) .persona-card:hover{
border-color: var(--primary-orange);
transform: translateY(-3px);
}
:where(.theme) .persona-emoji{
font-size: 3rem;
margin-bottom: 20px;
display: block;
}
:where(.theme) .persona-card h4{
color: var(--dark-blue);
margin-bottom: 15px;
}
:where(.theme) .persona-card p{
font-size: 0.95rem;
color: var(--text-light);
}
/* Timing Section */
:where(.theme) .timing-section{
background-color: var(--light-gray);
}
:where(.theme) .timing-content{
max-width: 800px;
margin: 0 auto;
text-align: center;
}
:where(.theme) .timing-text p{
font-size: 1.1rem;
margin-bottom: 1.5rem;
}
/* Investment Section */
:where(.theme) .investment-section{
background-color: var(--white);
padding: 60px 0;
}
:where(.theme) .investment-highlight{
/* background: linear-gradient(135deg, var(--dark-blue), #34495e); */
color: var(--white);
/* padding: 50px; */
border-radius: 20px;
text-align: center;
margin: 40px 0;
box-shadow: 0 8px 30px rgba(44, 62, 80, 0.3);
}
:where(.theme) .price-container{
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
:where(.theme) .currency-keychain{
font-size: 2.5rem;
font-weight: 600;
vertical-align: top;
opacity: 0.8;
}
:where(.theme) .price-keychain{
font-size: 5rem;
font-weight: 900;
line-height: 1;
color: var(--primary-orange);
}
:where(.theme) .price-details-keychain{
display: flex;
flex-direction: column;
font-size: 1.2rem;
opacity: 0.9;
text-align: left;
}
:where(.theme) .duration-keychain, :where(.theme) .time-keychain{
font-weight: 500;
}
/* CTA Sections */
:where(.theme) .cta-section, :where(.theme) .final-cta-section{
background-color: var(--light-gray);
text-align: center;
}
:where(.theme) .cta-description{
font-size: 1.2rem;
margin-bottom: 2rem;
color: var(--text-light);
}
:where(.theme) .cta-container{
margin: 30px 0;
}
:where(.theme) .cta-primary{
background: linear-gradient(135deg, var(--primary-orange), #e55a2b);
color: var(--white);
padding: 20px 40px;
border-radius: 10px;
text-decoration: none;
font-weight: bold;
font-size: 1.3rem;
display: inline-flex;
align-items: center;
gap: 20px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
border: none;
cursor: pointer;
}
:where(.theme) .cta-primary:hover{
background: linear-gradient(135deg, #e55a2b, #d14d20);
transform: translateY(-3px);
box-shadow: var(--box-shadow-hover);
text-decoration: none;
color: var(--white);
}
:where(.theme) .cta-secondary{
background: var(--dark-blue);
color: var(--white);
padding: 18px 35px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
display: inline-block;
transition: all 0.3s ease;
border: 2px solid var(--dark-blue);
}
:where(.theme) .cta-secondary:hover{
background: transparent;
color: var(--dark-blue);
transform: translateY(-2px);
text-decoration: none;
}
:where(.theme) .cta-text{
font-size: 1.1rem;
}
:where(.theme) .cta-price{
background: rgba(255, 255, 255, 0.2);
padding: 5px 12px;
border-radius: 20px;
font-size: 1rem;
font-weight: 700;
}
/* FAQ Section */
:where(.theme) .faq-section{
background-color: var(--white);
}
:where(.theme) .faq-grid{
display: flex;
flex-wrap: wrap;
gap: 30px;
margin: 40px 0;
justify-content: center;
}
:where(.theme) .faq-item{
flex: 0 1 300px;
max-width: 400px;
background: var(--light-gray);
padding: 25px;
border-radius: 10px;
border-left: 4px solid var(--primary-orange);
}
:where(.theme) .faq-question{
color: var(--dark-blue);
margin-bottom: 10px;
font-size: 1.1rem;
}
:where(.theme) .faq-answer{
color: var(--text-light);
margin-bottom: 0;
font-size: 1rem;
}
/* .benefits-grid,
.faq-grid {
justify-items: center;
} */
/* Responsive Design */
@media (max-width: 768px) {
:where(.theme) .hero-title{
font-size: 2rem;
}
:where(.theme) .hero-subheadline{
font-size: 1.1rem;
}
:where(.theme) .stat-number{
font-size: 3rem;
}
:where(.theme) .price{
font-size: 3.5rem;
}
:where(.theme) .price-container{
flex-direction: column;
gap: 10px;
}
:where(.theme) .benefits-grid{
grid-template-columns: 1fr;
gap: 20px;
}
:where(.theme) .personas-grid{
grid-template-columns: 1fr;
gap: 20px;
}
:where(.theme) .faq-grid{
grid-template-columns: 1fr;
gap: 20px;
}
:where(.theme) section{
padding: 40px 0;
}
:where(.theme) .container{
padding: 0 15px;
}
}
@media (max-width: 480px) {
:where(.theme) .hero-title{
font-size: 1.8rem;
}
:where(.theme) .cta-primary{
flex-direction: column;
gap: 10px;
padding: 18px 30px;
}
:where(.theme) .benefit-card, :where(.theme) .persona-card{
padding: 25px;
}
:where(.theme) .investment-highlight{
padding: 30px 20px;
}
}
/* Animation Classes */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
:where(.theme) .fade-in-up{
animation: fadeInUp 0.6s ease-out;
}
/* Utility Classes */
:where(.theme) .text-center{
text-align: center;
}
:where(.theme) .mb-0{
margin-bottom: 0;
}
:where(.theme) .mt-2{
margin-top: 2rem;
}
:where(.theme) .mb-2{
margin-bottom: 2rem;
}
:where(.theme) .pricing-structure{
margin: 40px 0;
}
:where(.theme) .pricing-cards-grid{
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
margin-bottom: 50px;
}
:where(.theme) .pricing-card{
background: var(--white);
border-radius: 15px;
padding: 40px;
box-shadow: 0 8px 30px rgba(0,0,0,0.1);
text-align: center;
flex: 1;
min-width: 300px;
max-width: 400px;
transition: transform 0.3s ease;
}
:where(.theme) .pricing-card:hover{
transform: translateY(-5px);
}
:where(.theme) .base-package{
border-top: 5px solid var(--primary-orange);
}
:where(.theme) .team-addons{
border-top: 5px solid var(--dark-blue);
}
:where(.theme) .pricing-header h3{
color: var(--dark-blue);
font-size: 1.5rem;
margin-bottom: 20px;
}
:where(.theme) .pricing-amount{
display: flex;
align-items: center;
justify-content: center;
margin: 20px 0;
}
:where(.theme) .currency{
font-size: 2rem;
font-weight: 600;
color: var(--text-light);
vertical-align: top;
}
:where(.theme) .price{
font-size: 4rem;
font-weight: 900;
color: var(--primary-orange);
line-height: 1;
}
:where(.theme) .pricing-details{
color: var(--text-light);
font-size: 1.1rem;
}
:where(.theme) .pricing-details p{
margin-bottom: 10px;
}
/* Team Add-Ons Specific Styles */
:where(.theme) .addon-options{
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
}
:where(.theme) .addon-option{
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: var(--light-gray);
border-radius: 10px;
width: 100%;
}
:where(.theme) .addon-price{
font-size: 1.8rem;
font-weight: bold;
color: var(--primary-orange);
min-width: 80px;
}
:where(.theme) .addon-details{
text-align: left;
font-size: 0.95rem;
line-height: 1.4;
}
:where(.theme) .addon-details strong{
color: var(--dark-blue);
}
:where(.theme) .addon-details em{
color: var(--text-light);
font-size: 0.9rem;
}
:where(.theme) .addon-divider{
font-weight: bold;
color: var(--text-light);
font-size: 1.1rem;
padding: 10px 0;
}
/* Example Pricing Styles */
:where(.theme) .example-pricing{
background: var(--warning-bg);
padding: 40px;
border-radius: 15px;
margin-top: 40px;
}
:where(.theme) .example-pricing h3{
text-align: center;
color: var(--dark-blue);
margin-bottom: 30px;
font-size: 1.5rem;
}
:where(.theme) .pricing-examples-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
:where(.theme) .example-item{
background: var(--white);
padding: 25px;
border-radius: 10px;
text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
:where(.theme) .example-scenario{
font-weight: 600;
color: var(--dark-blue);
margin-bottom: 10px;
font-size: 1.1rem;
}
:where(.theme) .example-price{
font-size: 1.3rem;
font-weight: bold;
color: var(--primary-orange);
}
:where(.theme) .example-note{
font-size: 0.9rem;
color: var(--text-light);
font-weight: normal;
}
/* What's Not Included Section Styles */
:where(.theme) .exclusions-section{
background-color: var(--light-gray);
padding: 60px 0;
}
:where(.theme) .exclusions-intro{
text-align: center;
margin-bottom: 40px;
}
:where(.theme) .exclusions-intro p{
font-size: 1.2rem;
color: var(--text-dark);
}
:where(.theme) .exclusions-grid{
display: flex;
flex-wrap: wrap;
gap: 25px;
justify-content: center;
margin: 40px 0;
}
:where(.theme) .exclusion-item{
background: var(--white);
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
display: flex;
align-items: flex-start;
gap: 20px;
flex: 0 1 350px;
max-width: 400px;
transition: transform 0.3s ease;
}
:where(.theme) .exclusion-item:hover{
transform: translateY(-3px);
}
:where(.theme) .exclusion-icon{
font-size: 2.5rem;
flex-shrink: 0;
margin-top: 5px;
}
:where(.theme) .exclusion-content h4{
color: var(--dark-blue);
font-size: 1.2rem;
margin-bottom: 8px;
}
:where(.theme) .exclusion-content p{
color: var(--text-light);
font-size: 1rem;
line-height: 1.5;
margin-bottom: 0;
}
:where(.theme) .exclusions-footer{
text-align: center;
margin-top: 40px;
padding: 30px;
/* background: rgba(255, 107, 53, 0.1); */
background: rgba(255, 107, 53, 0.35);
border-radius: 10px;
border-left: 4px solid var(--primary-orange);
}
:where(.theme) .exclusions-footer p{
font-size: 1.1rem;
color: var(--text-dark);
font-style: italic;
margin-bottom: 0;
}
/* Responsive Design */
@media (max-width: 768px) {
:where(.theme) .pricing-cards-grid{
flex-direction: column;
align-items: center;
}
:where(.theme) .pricing-card{
min-width: 280px;
max-width: 100%;
}
:where(.theme) .addon-option{
flex-direction: column;
text-align: center;
gap: 10px;
}
:where(.theme) .addon-details{
text-align: center;
}
:where(.theme) .pricing-examples-grid{
grid-template-columns: 1fr;
gap: 15px;
}
:where(.theme) .exclusions-grid{
flex-direction: column;
align-items: center;
}
:where(.theme) .exclusion-item{
max-width: 100%;
flex: none;
}
:where(.theme) .price{
font-size: 3rem;
}
:where(.theme) .addon-price{
font-size: 1.5rem;
}
}
@media (max-width: 480px) {
:where(.theme) .pricing-card{
padding: 30px 20px;
}
:where(.theme) .example-pricing{
padding: 30px 20px;
}
:where(.theme) .exclusion-item{
padding: 25px 20px;
flex-direction: column;
text-align: center;
gap: 15px;
}
:where(.theme) .exclusion-icon{
margin-top: 0;
}
}
/* Enhanced Timing Section Styles */
:where(.theme) .timing-section{
background-color: var(--light-gray);
padding: 60px 0;
}
:where(.theme) .timing-content{
max-width: 900px;
margin: 0 auto;
text-align: center;
}
:where(.theme) .timing-intro{
margin-bottom: 40px;
}
:where(.theme) .timing-intro p{
font-size: 1.2rem;
line-height: 1.7;
color: var(--text-dark);
}
:where(.theme) .timing-list-container{
background: var(--white);
border-radius: 15px;
padding: 40px;
margin: 40px auto;
max-width: 75%; /* 3/4 of the container width */
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
border-left: 5px solid var(--primary-orange);
}
:where(.theme) .list-header{
color: var(--dark-blue);
font-size: 1.4rem;
margin-bottom: 25px;
text-align: center;
font-weight: 600;
}
:where(.theme) .timing-list{
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
:where(.theme) .timing-list li{
padding: 12px 0;
font-size: 1.1rem;
line-height: 1.6;
color: var(--text-dark);
position: relative;
padding-left: 30px;
}
:where(.theme) .timing-list li::before{
content: "✓";
position: absolute;
left: 0;
top: 12px;
color: var(--primary-orange);
font-weight: bold;
font-size: 1.2rem;
}
:where(.theme) .timing-conclusion{
margin-top: 40px;
}
:where(.theme) .timing-conclusion p{
font-size: 1.1rem;
line-height: 1.7;
color: var(--text-dark);
font-style: italic;
}
/* Responsive adjustments */
@media (max-width: 768px) {
:where(.theme) .timing-list-container{
max-width: 90%;
padding: 30px 25px;
}
:where(.theme) .timing-intro p,
:where(.theme) .timing-conclusion p{
font-size: 1.1rem;
}
:where(.theme) .list-header{
font-size: 1.2rem;
}
:where(.theme) .timing-list li{
font-size: 1rem;
padding-left: 25px;
}
}
@media (max-width: 480px) {
:where(.theme) .timing-list-container{
max-width: 95%;
padding: 25px 20px;
}
:where(.theme) .timing-list li{
padding: 10px 0 10px 25px;
}
}
/* Enhanced Team Add-On Section */
:where(.theme) .team-addons-section{
background-color: var(--white);
padding: 60px 0;
}
:where(.theme) .team-intro{
text-align: center;
margin-bottom: 40px;
}
:where(.theme) .team-intro p{
font-size: 1.2rem;
color: var(--text-dark);
max-width: 800px;
margin: 0 auto;
}
:where(.theme) .team-options-grid{
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
margin: 40px 0;
}
:where(.theme) .team-option-card{
background: var(--white);
padding: 35px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
text-align: center;
transition: all 0.3s ease;
border-top: 4px solid var(--primary-orange);
flex: 0 1 320px;
max-width: 380px;
}
:where(.theme) .team-option-card:hover{
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
:where(.theme) .team-option-icon{
font-size: 3rem;
margin-bottom: 20px;
display: block;
}
:where(.theme) .team-option-card h4{
color: var(--dark-blue);
font-size: 1.3rem;
margin-bottom: 15px;
}
:where(.theme) .team-option-card p{
font-size: 1rem;
line-height: 1.6;
color: var(--text-light);
margin-bottom: 20px;
}
:where(.theme) .price-highlight{
background: linear-gradient(135deg, var(--primary-orange), #ff8c42);
color: var(--white);
padding: 12px 20px;
border-radius: 25px;
font-weight: bold;
font-size: 1.1rem;
display: inline-block;
margin-top: 10px;
}
/* Enhanced Pricing Examples Card */
:where(.theme) .pricing-examples-card{
border-top-color: var(--dark-blue);
}
:where(.theme) .pricing-examples-container{
background: var(--light-gray);
border-radius: 10px;
padding: 25px;
margin-top: 20px;
border-left: 4px solid var(--dark-blue);
}
:where(.theme) .pricing-examples-list{
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
:where(.theme) .pricing-examples-list li{
padding: 10px 0;
border-bottom: 1px solid rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
gap: 5px;
}
:where(.theme) .pricing-examples-list li:last-child{
border-bottom: none;
}
:where(.theme) .scenario{
font-weight: 600;
color: var(--dark-blue);
font-size: 1rem;
}
:where(.theme) .price{
color: var(--primary-orange);
font-weight: bold;
font-size: 1.1rem;
}
:where(.theme) .note{
color: var(--text-light);
font-size: 0.9rem;
font-style: italic;
}
/* Responsive Design */
@media (max-width: 768px) {
:where(.theme) .team-options-grid{
flex-direction: column;
align-items: center;
}
:where(.theme) .team-option-card{
max-width: 100%;
flex: none;
}
:where(.theme) .pricing-examples-list li{
flex-direction: column;
gap: 3px;
}
:where(.theme) .pricing-examples-container{
padding: 20px;
}
}
@media (max-width: 480px) {
:where(.theme) .team-option-card{
padding: 25px 20px;
}
:where(.theme) .pricing-examples-container{
padding: 18px;
}
:where(.theme) .scenario,
:where(.theme) .price{
font-size: 0.95rem;
}
}
/* =================================================================
NEW OUR PROCESS PAGE STYLES
================================================================= */
/* --- Style for Split Intro Section --- */
:where(.theme) .process-intro-heading-split{
font-size: 2.5rem;
color: #2c3e50;
font-weight: 700;
line-height: 1.3;
margin-bottom: 15px;
}
:where(.theme) .process-intro-subheading-split{
font-size: 1.2rem;
color: #666;
}
:where(.theme) .process-intro-cta{
margin-top: 60px;
font-size: 1.8rem;
font-weight: 700;
color: #FF6B35; /* Accent Orange */
}
/* Responsive adjustment for the split layout */
@media (max-width: 768px) {
:where(.theme) .process-intro-heading-split{
text-align: center;
}
:where(.theme) .process-intro-subheading-split{
text-align: center;
margin-bottom: 30px;
}
}
:where(.theme) .process-steps-section{
padding: 80px 0;
}
:where(.theme) .process-step-card{
background-color: #ffffff;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.07);
margin-bottom: 60px;
overflow: hidden; /* Ensures child elements respect the border radius */
}
:where(.theme) .process-step-card .row{
align-items: center;
}
/* Reverse column order for even-numbered cards */
:where(.theme) .process-step-card:nth-child(even) .row{
flex-direction: row-reverse;
}
:where(.theme) .process-step-content{
padding: 50px;
}
:where(.theme) .process-step-number{
font-size: 1rem;
font-weight: 700;
color: #FF6B35;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px;
}
:where(.theme) .process-step-title{
font-size: 2.2rem;
color: #2c3e50;
margin-bottom: 20px;
}
:where(.theme) .process-step-content p{
font-size: 1.1rem;
color: #333;
line-height: 1.8;
margin-bottom: 25px;
}
:where(.theme) .process-step-deliverable{
background-color: #f8f9fa; /* Light gray background */
border-left: 4px solid #00AFE1; /* Using the header accent blue */
padding: 20px;
border-radius: 5px;
font-size: 1rem;
line-height: 1.6;
color: #333;
}
:where(.theme) .process-step-comic{
display: flex;
align-items: center;
justify-content: center;
background-color: #e9ecef; /* A slightly darker gray for contrast */
padding: 40px;
min-height: 400px;
}
:where(.theme) .process-step-comic img{
max-width: 100%;
height: auto;
max-height: 300px;
}
/* Responsive adjustments for the process page */
@media (max-width: 992px) {
:where(.theme) .process-step-content{
padding: 40px;
}
:where(.theme) .process-step-title{
font-size: 1.8rem;
}
}
@media (max-width: 768px) {
/* Stack columns on mobile */
:where(.theme) .process-step-card .row,
:where(.theme) .process-step-card:nth-child(even) .row{
flex-direction: column;
}
:where(.theme) .process-step-card .col-6{
flex: 0 0 100%;
max-width: 100%;
}
:where(.theme) .process-step-comic{
min-height: auto;
padding: 50px 30px;
}
}
/* =================================================================
NEW ABOUT US PAGE STYLES
================================================================= */
/* --- 1. Hero Bio Section --- */
:where(.theme) .about-main-headline{
font-size: 2.8rem;
font-weight: 700;
color: #2c3e50;
line-height: 1.3;
margin-bottom: 20px;
}
:where(.theme) .about-intro-text{
font-size: 1.1rem;
line-height: 1.8;
}
:where(.theme) .about-photo-placeholder{
position: relative;
}
:where(.theme) .photo-caption{
position: absolute;
bottom: 15px;
left: 15px;
background: rgba(44, 62, 80, 0.8); /* Dark Blue with transparency */
color: #ffffff;
padding: 8px 15px;
border-radius: 5px;
font-size: 0.9rem;
font-weight: 500;
}
/* --- 2. Philosophy Section --- */
:where(.theme) .about-quote-highlight{
max-width: 600px;
margin: 40px auto;
border-color: #FF6B35; /* Orange accent */
background-color: #ffffff;
box-shadow: 0 5px 20px rgba(0,0,0,0.07);
}
/* --- 3. Founder Section --- */
:where(.theme) .about-featured-quote{
margin-top: 60px;
padding: 40px;
background-color: #f8f9fa;
border-radius: 10px;
border-left: 5px solid #FF6B35;
}
:where(.theme) .about-featured-quote p{
font-size: 1.5rem;
font-weight: 600;
color: #2c3e50;
font-style: italic;
line-height: 1.5;
margin: 0;
}
/* --- 5. Final CTA Section --- */
:where(.theme) .about-final-snark{
font-family: monospace;
font-size: 1.1rem;
color: #FF6B35; /* Orange */
background-color: rgba(0,0,0,0.2);
padding: 10px 15px;
border-radius: 5px;
display: inline-block;
margin-top: 20px;
}
/* =================================================================
CORRECTED LAYOUT SPACING FOR ABOUT PAGE
================================================================= */
/* --- 1. Fix for Three-Column Card Layout --- */
:where(.theme) .about-expertise-section .row{
/* This creates space BETWEEN the columns */
justify-content: space-between;
}
:where(.theme) .about-expertise-section .col-4{
/* Adjust width to account for spacing.
33.33% is the base, and we subtract a small amount for the gap.
20px is 10px from each side of the middle card. */
flex-basis: calc(33.333% - 20px);
}
/* --- 2. Fix for Two-Column Image/Text Layouts --- */
:where(.theme) .about-hero-section .row,
:where(.theme) .about-founder-section .row{
/* This also creates space BETWEEN the columns */
justify-content: space-between;
align-items: center;
}
:where(.theme) .about-hero-section .col-6,
:where(.theme) .about-founder-section .col-6{
/* Adjust width to account for a 4% gap (approx 40-50px) */
flex-basis: 48%;
}
/* --- 3. Responsive Reset --- */
/* On mobile, everything should stack naturally */
@media (max-width: 768px) {
:where(.theme) .about-expertise-section .col-4,
:where(.theme) .about-hero-section .col-6,
:where(.theme) .about-founder-section .col-6{
/* Reset to full width when stacking */
flex-basis: 100%;
}
:where(.theme) .about-hero-section .row,
:where(.theme) .about-founder-section .row{
/* Revert to default stacking behavior */
justify-content: flex-start;
}
}
/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
:where(.theme) .about-hero-section .row,
:where(.theme) .about-founder-section .row{
flex-direction: column-reverse; /* Puts text above image on mobile */
}
:where(.theme) .about-hero-section .col-6,
:where(.theme) .about-founder-section .col-6{
text-align: center;
}
:where(.theme) .about-photo-placeholder,
:where(.theme) .about-grandson-photo{
margin-bottom: 40px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
:where(.theme) .about-main-headline{
font-size: 2.2rem;
}
:where(.theme) .about-featured-quote{
padding: 30px;
}
:where(.theme) .about-featured-quote p{
font-size: 1.2rem;
}
}
/* =================================================================
BLOG POST & CONTENT RESPONSIVENESS
================================================================= */
/* --- 1. Basic Content Area --- */
/* This ensures the main content area can shrink */
:where(.theme) .entry-content,
:where(.theme) .post-content,
:where(.theme) .content-area{
width: 100%;
max-width: 100%; /* Prevents overflow */
}
/* --- 2. Responsive Images --- */
/* This is the most important rule. It makes images scale down. */
:where(.theme) .entry-content img,
:where(.theme) .post-content img{
max-width: 100%;
height: auto; /* Maintains aspect ratio */
box-sizing: border-box;
}
/* --- 3. Responsive Videos & Iframes --- */
/* Ensures embedded videos (YouTube, etc.) scale correctly */
:where(.theme) .entry-content iframe,
:where(.theme) .post-content iframe{
max-width: 100%;
}
/* --- 4. Handling Pre-formatted Text & Code Blocks --- */
/* Prevents long lines of code from breaking the layout */
:where(.theme) .entry-content pre,
:where(.theme) .post-content pre{
white-space: pre-wrap; /* Allows wrapping */
word-wrap: break-word; /* Breaks long words/strings */
overflow-x: auto; /* Adds a scrollbar if it still overflows */
max-width: 100%;
}
@media (max-width: 768px) {
/*
Center-align all images within single blog posts on mobile devices
for a cleaner, more symmetrical look.
*/
:where(.theme) .alignleft,
:where(.theme) .alignright{
display: block; /* Treat the image as a block-level element */
float: none !important; /* Remove any float alignment */
margin-left: auto; /* Auto margin on the left */
margin-right: auto; /* Auto margin on the right */
max-width: 100%; /* Ensure image is never wider than the screen */
height: auto; /* Maintain aspect ratio */
}
}
/* --- 5. WordPress Image Alignments on Mobile --- */
/* On small screens, force aligned images to become full-width blocks */
@media (max-width: 600px) {
:where(.theme) .alignleft,
:where(.theme) .alignright{
float: none;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 100%;
}
}
/* =================================================================
FINAL, BULLETPROOF RESPONSIVE CODE WELL
================================================================= */
/*
This is the main container. We are making it a flexbox container
to give us absolute control over the child elements.
*/
:where(.theme) .wp-block-code.code-well{
display: flex; /* Use Flexbox for robust control */
max-width: 100%; /* Ensure the container itself is responsive */
box-sizing: border-box;
/* Your "Well" Styling */
background-color: #23282d;
color: #e8e3d9;
border-radius: 10px;
padding: 25px;
margin: 20px 0;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/*
This targets the tag directly inside our well.
This is the most critical part of the fix.
*/
:where(.theme) .wp-block-code.code-well pre{
flex: 1; /* Allow the tag to grow and shrink */
min-width: 0; /* CRITICAL: This allows the flex item to shrink below its content size */
margin: 0;
padding: 0;
/* The Responsive Magic */
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
}
/*
This targets the tag inside to ensure it has the
correct font and no conflicting styles.
*/
:where(.theme) .wp-block-code.code-well code{
font-family: monospace;
font-size: 14px; /* Set an explicit, pixel-based font size */
line-height: 1.5; /* Set an explicit line height */
color: inherit;
background: none;
padding: 0;
}
/* =================================================================
HOMEPAGE HERO TEXT & OVERLAY FIX
================================================================= */
/* 1. Prepare the main hero container for positioning */
:where(.theme) .home .canvas-hero-image{
position: relative; /* This is crucial for the overlay to work */
display: flex; /* Use flexbox for easy centering */
align-items: center;
justify-content: center;
text-align: center;
min-height: 350px; /* Ensures the hero has enough height */
}
/* 2. Add the dark overlay */
:where(.theme) .home .hero-overlay{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4); /* 60% black. Adjust opacity from 0.1 to 1.0 as needed. */
z-index: 1; /* Sits on top of the image */
}
/* 3. Style the content (text and button) */
:where(.theme) .home .hero-content{
position: relative; /* Ensures content sits on top of the overlay */
z-index: 2;
color: #ffffff; /* Sets default text color to white */
padding: 20px;
}
/* 4. Style the title and subtitle */
:where(.theme) .home .hero-content .hero-title,
:where(.theme) .home .hero-content .hero-subtitle{
color: #ffffff; /* Explicitly set text color to white */
text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4); /* Adds a subtle shadow for better readability */
}
/* 5. Center the CTA button */
:where(.theme) .home .hero-content .cta-button{
margin-top: 30px; /* Adds space above the button */
/* The button will be centered automatically because of the text-align: center on the parent */
}
/* =================================================================
HEADER CTA BUTTON ("BAT-PHONE") - v2
================================================================= */
/* --- 1. Desktop Styles --- */
:where(.theme) .nav-row{
position: relative;
display: flex;
align-items: center;
}
:where(.theme) .main-navigation{
flex-grow: 1; /* Allows the nav to take up space */
}
:where(.theme) .header-cta-button{
display: inline-block;
background-color: transparent;
color: #00AFE1; /* Cyan */
border: 2px solid #00AFE1; /* Cyan */
padding: 8px 20px;
border-radius: 5px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
margin-left: 30px; /* Space between menu and button */
white-space: nowrap; /* Prevents text from wrapping */
}
:where(.theme) .header-cta-button:hover{
background-color: #00AFE1; /* Cyan */
color: #ffffff;
transform: translateY(-2px);
}
/* --- 2. Mobile Styles --- */
:where(.theme) .header-cta-button.mobile-cta{
display: block;
text-align: center;
margin: 30px 20px 10px 20px; /* Top, sides, bottom */
padding: 15px 20px;
font-size: 1.2rem;
background-color: #00AFE1; /* Solid Cyan */
color: #ffffff;
border-color: #00AFE1; /* Cyan */
}
:where(.theme) .header-cta-button.mobile-cta:hover{
background-color: #008ba3; /* A slightly darker cyan for hover */
border-color: #008ba3;
}
/* Hide the original desktop button on mobile */
@media (max-width: 768px) {
:where(.theme) .header-desktop .header-cta-button{
display: none;
}
}
/* =================================================================
MOBILE MENU - v7 (The Simple Flexbox Fix)
================================================================= */
@media (max-width: 768px) {
/* 1. Turn the parent menu item's link into a flex container */
:where(.theme) .mobile-navigation .menu-item-has-children > a{
display: flex;
justify-content: space-between; /* This is the magic! */
align-items: center;
width: 100%;
}
/* 2. Style the toggle button (no more absolute positioning!) */
:where(.theme) .sub-menu-toggle{
background: transparent;
border: none;
color: #FF6B35;
cursor: pointer;
padding: 10px; /* Make it easy to tap */
/* The button will now live safely on the far right, pushed there by justify-content */
}
/* 3. Style the SVG icon inside the button */
:where(.theme) .sub-menu-toggle svg{
transition: transform 0.3s ease;
display: block; /* Prevents extra space below the icon */
}
:where(.theme) .sub-menu-toggle.is-active svg{
transform: rotate(180deg);
}
/* 4. Hide/Show the sub-menu (no changes here, but included for completeness) */
:where(.theme) .mobile-navigation .sub-menu{
display: none;
padding-left: 20px;
background-color: rgba(0,0,0,0.2);
border-left: 3px solid #FF6B35;
margin-top: 10px;
list-style: none;
}
:where(.theme) .mobile-navigation .sub-menu.is-open{
display: block;
}
}
:where(.theme)
.ltdc-prompt-box{
background-color: #f0f0f0; /* Light grey background */
border: 1px solid #ccc; /* Subtle border */
border-radius: 5px; /* Rounded corners */
padding: 20px; /* The padding you wanted! */
font-size: 0.9em; /* Optional: makes font slightly smaller */
white-space: pre-wrap; /* Allow the text inside to wrap */
word-wrap: break-word; /* Force long strings (like URLs) to break */
overflow-x: auto; /* Add a horizontal scrollbar as a fallback */
max-width: 100%; /* Ensure the block itself doesn't overflow its container */
}
/* ===================================================================
SHARED PAGE CLASSES (extracted from repeated inline styles)
=================================================================== */
.u-center { text-align: center; }
.u-left { text-align: left; }
.u-mt-0 { margin-top: 0; }
.u-mt-15 { margin-top: 15px; }
.u-mt-20 { margin-top: 20px; }
.u-mt-40 { margin-top: 40px; }
.u-mb-15 { margin-bottom: 15px; }
.u-mb-40 { margin-bottom: 40px; }
.u-pt-10 { padding-top: 10px; }
.u-pl-40 { padding-left: 40px; }
.u-white { color: #ffffff; }
.u-muted { color: #666; }
.u-orange { color: #ff6b35; }
.u-cyan { color: #00afe1; }
.u-red { color: #d94f4f; }
.u-sand, .dark-card .u-sand { color: #e8e3d9; }
.u-ink, .benefit-card .u-ink { color: #23282d; }
.u-bg-light { background-color: var(--light-gray); }
.u-justify-center { justify-content: center; }
.u-items-center { align-items: center; }
.u-items-start { align-items: flex-start; }
.u-gap-0 { gap: 0; }
.u-gap-30 { gap: 30px; }
.u-grow { flex-grow: 1; }
.u-list-reset { list-style: none; padding: 0; margin: 0; }
.u-narrow { max-width: 800px; margin-left: auto; margin-right: auto; }
.u-narrow-700 { max-width: 700px; margin: 0 auto 40px auto; }
.col-30, .col-31, .col-45 { flex: 1; min-width: 300px; }
.col-30 { max-width: 30%; }
.col-31 { max-width: 31%; }
.col-45 { max-width: 45%; }
.col-panel { display: flex; flex-direction: column; background-color: #f8f9fa; }
.tile { padding: 25px; background: #fff; border-radius: 10px; box-shadow: 0 3px 12px rgba(0,0,0,0.06); height: 100%; }
.tile-heading { color: #23282d; margin-bottom: 12px; }
.tile-text { color: #555; font-size: 1rem; margin-bottom: 0; }
.badge-img { max-width: 150px; margin-bottom: 20px; margin-left: auto; margin-right: auto; }
.check-item { padding: 8px 0 8px 30px; position: relative; color: #444; font-size: 1rem; }
.check-item-grey { border-bottom: 1px solid #e9ecef; }
.check-item-cyan { border-bottom: 1px solid #d0eef8; }
.check-item-red { border-bottom: 1px solid #f5d0d0; }
.bullet { position: absolute; left: 0; font-weight: bold; }
.icon-row { display: flex; gap: 20px; align-items: flex-start; }
.icon-row-icon { color: #ff6b35; font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.dark-text { color: #e8e3d9; font-size: 1.05rem; line-height: 1.7; margin: 0; }
.hero-sub, .ethos-block .hero-sub { font-size: 1.2rem; margin-top: 20px; color: #ccc; }
.heading-22 { font-size: 2.2rem; margin-bottom: 10px; }
.heading-24 { font-size: 2.4rem; color: #23282d; margin-bottom: 10px; }
.heading-25 { font-size: 2.5rem; margin-bottom: 15px; }
.list-heading { font-weight: 700; color: #23282d; margin-bottom: 15px; font-size: 1.05rem; }
.panel-heading { margin-top: 0; font-size: 1.8rem; color: #2c3e50; }
/* size modifiers last so they override the component sizes above */
.u-fs-095 { font-size: 0.95rem; }
.u-fs-11 { font-size: 1.1rem; }
/* shop notes (index, article, home strip) */
.notes-head { max-width: 1160px; margin: 0 auto; padding: 50px; background: var(--white); border-top: 5px solid var(--orange); border-radius: 10px; box-shadow: 0 5px 25px rgba(0, 0, 0, .08); text-align: center; }
.notes-head .section-title::after { width: 80px; margin: 25px auto 30px; }
.notes-head .notes-sub { margin-top: 0; }
.notes-sub { max-width: 720px; margin: 24px auto 0; color: var(--text); font-size: 1.15rem; text-align: center; }
.notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; max-width: 1160px; margin: 40px auto 0; }
.note-card { display: flex; flex-direction: column; color: var(--text); background: var(--white); border-top: 3px solid var(--orange); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; transition: transform .15s; }
.note-card:hover { transform: translateY(-3px); }
.note-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.note-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 24px; }
.note-card .meta, .note .meta { color: var(--muted); font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.note-card h3 { color: var(--navy); font-size: 1.3rem; }
.note-card .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.note-card .tag { background: var(--navy); color: var(--white); border-radius: 4px; padding: 2px 8px; font-size: .75rem; font-weight: 600; text-transform: uppercase; }
.note-card .more { margin-top: auto; color: var(--orange); font-weight: 700; }
.notes-all { margin-top: 30px; text-align: center; }
.notes-all .btn-ghost { color: var(--navy); border-color: var(--navy); }
.notes-all .btn-ghost:hover { background: var(--navy); color: var(--white); }
.note { max-width: 820px; margin: 25px auto 0; padding: 40px; color: var(--text); background: var(--white); border-radius: 12px; box-shadow: var(--shadow); }
.note .backlink { color: var(--orange); font-weight: 700; }
.note h1 { color: var(--navy); font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 16px 0 10px; }
.prose { margin-top: 28px; font-size: 1.1rem; line-height: 1.75; overflow-wrap: anywhere; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3 { color: var(--navy); margin-top: 1.6em; }
.prose a { color: var(--orange); text-decoration: underline; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose img { border-radius: 8px; }
/* image-only paragraphs float at 1/3 width, alternating right/left; text wraps around them */
.prose > p:has(> img:only-child) { float: right; width: 33%; margin: .3em 0 1em 1.5em; }
.prose > p:has(> img:only-child):nth-child(even of p:has(> img:only-child)) { float: left; margin: .3em 1.5em 1em 0; }
.prose blockquote { background: #fff3ee; border-left: 4px solid var(--orange); padding: 14px 20px; font-size: 1rem; overflow: hidden; }
.prose code { background: var(--paper); padding: 1px 5px; border-radius: 4px; }
.note-cta { clear: both; margin-top: 48px; padding: 32px; background: #2c3e50; border-radius: 12px; text-align: center; }
.note-cta p { margin: 12px auto 24px; max-width: 560px; color: var(--white); }
.tool-page .note-cta + p { margin-top: 24px; }
@media (max-width: 768px) { .note, .notes-head { padding: 24px 18px; } }
@media (max-width: 600px) { .prose > p:has(> img:only-child) { float: none !important; width: auto; margin: 1.1em 0 0 !important; } }
/* Tools (Gmail spam filter builder; next tool reuses .tool-page) */
.tool-page > h2 { display: inline-block; color: var(--navy); font-size: 1.3rem; margin: 34px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--orange); }
.tool-page > p, .tool-page :where(.card) :where(p, ol, ul) { margin: 0 0 14px; }
.tool-page ol, .tool-page ul { padding-left: 22px; }
.tool-page li { margin: 0 0 7px; }
.tool-page .card { margin: 0 0 22px; box-shadow: none; }
.tool-page label { display: block; font-weight: 600; font-size: .95rem; margin: 0 0 6px; color: var(--navy); }
.tool-page label.check { font-weight: 400; margin: 12px 0 0; }
.tool-page textarea, .tool-page input[type=email], .tool-page input[type=text] { width: 100%; font: inherit; font-size: .95rem; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--navy); resize: vertical; }
.tool-page textarea { min-height: 140px; }
.tool-page .hint { font-size: .85rem; color: var(--muted); margin: 6px 0 0; }
.tool-page pre + .hint, .tool-page .hint + ul { margin-top: 12px; }
.tool-page .hint.err { color: #c0392b; font-weight: 600; }
.tool-page .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.tool-page .row input { flex: 1; min-width: 180px; }
.tool-page .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.tool-page .rawbox { margin-top: 18px; }
.tool-page pre { background: var(--navy); color: #e6edf3; padding: 14px; border-radius: 8px; overflow: auto; font-size: .82rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.tool-page code, .tool-page pre, .tool-page kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tool-page code { background: var(--paper); padding: 1px 5px; border-radius: 4px; }
.tool-page .copybar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 6px; }
.tool-page .copybar small { color: var(--muted); font-weight: 600; }
.tool-page .copybtn { flex: none; background: none; border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; font: inherit; font-weight: 600; font-size: .78rem; cursor: pointer; color: var(--navy); }
.tool-page .gate { background: #fff3ed; border: 1px solid #ffd5c2; border-radius: 10px; padding: 16px; margin-top: 18px; }
.tool-page .gate-title { font-weight: 700; color: var(--navy); margin: 0; }
.tool-page .out { margin-top: 18px; }
.tool-page .okmsg { color: #1e8e5a; font-weight: 600; }
.tool-page .warn { border-left: 3px solid var(--orange); padding: 4px 0 4px 14px; background: rgba(255, 107, 53, .06); border-radius: 0 8px 8px 0; margin: 0 0 14px; }
.tool-page kbd { background: #eef2f6; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; font-size: .82rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media print { .tool-page .gate, .tool-page .out, .tool-page .copybtn, .tool-page .note-cta, .site-footer, .site-header { display: none !important; } }