/* Theme Name: GrowWithSDJ Theme URI: https://growwithsdj.com Author: WPDesignspro.com Author URI: https://wpdesignspro.com Description: Custom theme for GrowWithSDJ — personal transformation and coaching brand. Built from the site's original static page designs with a unified header, footer, and navigation. Version: 1.3.0 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: growwithsdj */ :root{ --white:#FFFFFF;--off:#FAF8F5;--warm:#F2EEEA;--border:#E4DDD6; --ink:#0F0F0B;--ink-m:#3D3A35;--ink-s:#6B6760; --r-bright:#FF2D2D;--r-pri:#EA2224;--r-dark:#910303;--r-burg:#601216; --mont:'Montserrat',sans-serif;--lora:'Lora',serif; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;} body{font-family:var(--mont);background:var(--white);color:var(--ink);overflow-x:hidden;} img{max-width:100%;display:block;} a{text-decoration:none;color:inherit;} /* ── NAV ── */ .nav{ position:fixed;top:0;left:0;right:0;z-index:100; background:var(--white);border-bottom:1px solid var(--border); height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 5%; } .nav-logo{font-family:var(--mont);font-weight:800;font-size:15px;letter-spacing:.05em;color:var(--r-dark);text-transform:uppercase;} .nav-logo span{color:var(--ink);} .custom-logo-link{display:flex;align-items:center;flex-shrink:0;} .custom-logo-link img.custom-logo{max-height:40px;width:auto;display:block;} .nav-links{display:flex;gap:28px;align-items:center;} .nav-links a{font-family:var(--mont);font-size:13px;font-weight:600;color:var(--ink-m);letter-spacing:.04em;transition:color .2s;} .nav-links a:hover,.nav-links a.active,.nav-links .current-menu-item>a,.nav-links .current_page_item>a{color:var(--r-bright);} .nav-cta{background:var(--r-bright);color:var(--white);padding:10px 22px;border-radius:4px;font-family:var(--mont);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;transition:background .2s;} .nav-cta:hover{background:var(--r-pri);color:var(--white);} .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;width:22px;height:22px;flex-shrink:0;} .nav-burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s ease,opacity .2s ease;} .nav-burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-burger.active span:nth-child(2){opacity:0;} .nav-burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .nav-back{display:inline-flex;align-items:center;gap:6px;font-family:var(--mont);font-size:13px;font-weight:600;color:var(--ink-m);transition:color .2s;} .nav-back:hover{color:var(--r-bright);} @media(max-width:900px){ .nav-links{display:none;} .nav-burger{display:flex;} } /* ── WP ADMIN BAR OFFSET ── The admin toolbar is fixed at the very top of the viewport when logged in, on top of our own fixed nav. Shift our fixed elements down by its height so nothing sits underneath it. (WordPress core already pushes the page's normal document flow down to match, via margin-top on , so page content lines up correctly without any other change.) */ body.admin-bar .nav, body.admin-bar .nav-mobile, body.admin-bar .nav-overlay{top:0px; bottom:32px;} @media screen and (max-width:782px){ body.admin-bar .nav, body.admin-bar .nav-mobile, body.admin-bar .nav-overlay{top:0px; bottom: 30px;} } /* ── DROPDOWN / SUB-MENUS (desktop) ── */ .nav-links li{position:relative;} .nav-links ul.sub-menu{ list-style:none;display:none;position:absolute;top:100%;left:0; background:var(--white);border:1px solid var(--border);border-radius:8px;border-top:2px solid var(--r-bright); box-shadow:0 14px 36px rgba(15,15,11,.14);min-width:230px;padding:8px 0;z-index:150; } .nav-links li.menu-item-has-children > a{display:inline-flex;align-items:center;gap:6px;} .nav-links li.menu-item-has-children > a::after{ content:'';width:6px;height:6px;flex-shrink:0; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(45deg);margin-top:-3px;opacity:.6; } .nav-links li:hover > ul.sub-menu, .nav-links li.gws-sub-open > ul.sub-menu, .nav-links li:focus-within > ul.sub-menu{display:block;} .nav-links ul.sub-menu li{position:relative;} .nav-links ul.sub-menu a{display:block;padding:10px 18px;font-size:13px;font-weight:600;color:var(--ink-m);letter-spacing:0;text-transform:none;white-space:nowrap;transition:background .15s,color .15s;} .nav-links ul.sub-menu a:hover{background:var(--off);color:var(--r-bright);} .nav-links ul.sub-menu ul.sub-menu{top:-10px;left:100%;margin-left:2px;border-top:1px solid var(--border);} .nav-links ul.sub-menu li.menu-item-has-children > a::after{transform:rotate(-45deg);margin-top:0;margin-left:auto;} /* ── OFF-CANVAS MOBILE MENU ── */ body.gws-menu-open{overflow:hidden;} .nav-overlay{ position:fixed;inset:0;background:rgba(15,15,11,.55); opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:190; } .nav-overlay.open{opacity:1;pointer-events:auto;} .nav-mobile{ display:flex;flex-direction:column; position:fixed;top:0;right:0;bottom:0;width:min(86vw,380px); background:var(--white);z-index:200; transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1); box-shadow:-10px 0 40px rgba(15,15,11,.2); } .nav-mobile.open{transform:translateX(0);} .nav-mobile-head{ display:flex;align-items:center;justify-content:space-between; padding:0 20px;height:64px;border-bottom:1px solid var(--border);flex-shrink:0; } .nav-mobile-close{ background:var(--warm);border:none;width:36px;height:36px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:var(--ink-m);cursor:pointer;transition:background .2s,color .2s;flex-shrink:0; } .nav-mobile-close:hover{background:var(--r-bright);color:var(--white);} .nav-mobile-body{flex:1;overflow-y:auto;padding:10px 10px 28px;} .nav-mobile-list{list-style:none;} .nav-mobile-list > li{border-bottom:1px solid var(--warm);} .nav-mobile-list > li:last-child{border-bottom:none;} .nav-mobile-list li{display:flex;flex-wrap:wrap;align-items:center;} .nav-mobile-list a{ display:block;flex:1;padding:15px 12px; font-family:var(--mont);font-size:14.5px;font-weight:600;color:var(--ink-m); letter-spacing:.01em;border-radius:8px;transition:background .15s,color .15s; } .nav-mobile-list > li > a:hover{background:var(--off);color:var(--r-bright);} .nav-mobile-list .nav-cta{ flex:1 1 100%;background:var(--r-bright);color:var(--white);text-align:center; margin:14px 2px 4px;border-radius:6px;font-weight:700;letter-spacing:.05em; text-transform:uppercase;padding:15px; } .nav-mobile-list .nav-cta:hover{background:var(--r-pri);color:var(--white);} .nav-mobile-toggle{ background:none;border:none;width:44px;height:44px;flex-shrink:0; display:flex;align-items:center;justify-content:center; color:var(--ink-s);cursor:pointer;transition:transform .25s ease,color .2s ease; } .nav-mobile-list li.gws-sub-open > .nav-mobile-toggle{transform:rotate(180deg);color:var(--r-bright);} .nav-mobile-list ul.sub-menu{ list-style:none;flex-basis:100%;max-height:0;overflow:hidden; transition:max-height .35s ease;padding-left:14px; } .nav-mobile-list li.gws-sub-open > ul.sub-menu{max-height:800px;} .nav-mobile-list ul.sub-menu a{font-size:13.5px;font-weight:600;color:var(--ink-s);padding:12px;} .nav-mobile-list ul.sub-menu a:hover{color:var(--r-bright);} /* ── FOOTER ── */ .footer{background:var(--r-burg);padding:48px 7% 32px;} .footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px;} .footer-brand{display:inline-block;font-family:var(--mont);font-weight:800;font-size:16px;color:var(--r-bright);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;transition:opacity .2s;} .footer-brand:hover{opacity:.8;} .footer-logo-wrap{margin-bottom:12px;} .footer-logo-wrap .custom-logo-link{display:inline-flex;} .footer-logo-wrap img.custom-logo{max-height:36px;width:auto;} .footer-tagline{font-family:var(--lora);font-size:14px;color:#C8A8A8;line-height:1.7;font-style:italic;} .footer-col-title{font-family:var(--mont);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#E8C4C4;margin-bottom:16px;} .footer-links{list-style:none;} .footer-links li{margin-bottom:10px;} .footer-links a{font-family:var(--lora);font-size:14px;color:#C8A8A8;transition:color .2s;} .footer-links a:hover{color:var(--white);} .footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;} .footer-copy{font-family:var(--mont);font-size:12px;color:#9A7070;letter-spacing:.04em;} .footer-tag{font-family:var(--lora);font-size:13px;color:#9A7070;font-style:italic;} @media(max-width:1100px){ .footer-top{grid-template-columns:1fr 1fr;} } @media(max-width:600px){ .footer-top{grid-template-columns:1fr;} .footer-bottom{flex-direction:column;text-align:center;} }