/* ============================================================ ClaimCompass theme styles Colors, fonts & radius come from CSS variables printed in by claimcompass_css_vars() (driven by the Customizer). Templates carry their own inline styles using these vars; this file handles reset, layout grids, hover states, responsiveness, and standard WP content. ============================================================ */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} img{max-width:100%;height:auto;display:block;} a{color:var(--accent);} button{font-family:inherit;} ::selection{background:var(--accent);color:#fff;} @keyframes cc-rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} .cc-container{max-width:1200px;margin:0 auto;padding-left:32px;padding-right:32px;} .cc-narrow{max-width:820px;} /* ---- layout grids (responsive collapse handled below) ---- */ .cc-hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;} .cc-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .cc-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;} .cc-compare{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:center;} .cc-tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;} .cc-fmcsa-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:center;} .cc-pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start;} .cc-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;} /* ---- hover affordances ---- */ .cc-hover-card{transition:transform .15s,box-shadow .15s,border-color .15s;} .cc-situation:hover{border-color:var(--accent)!important;box-shadow:0 18px 40px -26px rgba(15,34,64,0.4);transform:translateY(-3px);} .cc-template:hover{box-shadow:0 18px 40px -28px rgba(15,34,64,0.4);} .cc-btn{transition:filter .15s,transform .1s,box-shadow .15s;cursor:pointer;text-decoration:none;} .cc-btn:hover{filter:brightness(0.96);} .cc-btn:active{transform:translateY(1px);} .cc-link:hover{text-decoration:underline;} /* ---- primary nav (built from wp_nav_menu) ---- */ .cc-nav-menu{list-style:none;margin:0;padding:0;display:flex;gap:6px;align-items:center;} .cc-nav-menu>li{position:relative;} .cc-nav-menu a,.cc-nav-menu .cc-menu-label{text-decoration:none;color:var(--body);font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:5px;padding:8px 11px;border-radius:8px;cursor:pointer;} .cc-nav-menu a:hover,.cc-nav-menu .cc-menu-label:hover{color:var(--ink);background:var(--surface);} .cc-nav-menu .current-menu-item>a{color:var(--ink);} .cc-nav-menu .menu-item-has-children>a::after,.cc-nav-menu .cc-menu-label.has-children::after{content:"\25be";font-size:9px;color:var(--muted);margin-top:1px;} .cc-nav-menu .sub-menu{list-style:none;margin:0;padding:8px;position:absolute;top:100%;left:0;min-width:216px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -22px rgba(15,34,64,0.4);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .14s,transform .14s;z-index:60;} .cc-nav-menu>li:hover>.sub-menu,.cc-nav-menu>li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none;} .cc-nav-menu .sub-menu li{display:block;} .cc-nav-menu .sub-menu a{display:block;white-space:nowrap;font-size:14.5px;} .cc-menu-toggle{display:none;border:1px solid var(--line);background:var(--card);border-radius:10px;width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center;} .cc-menu-toggle span,.cc-menu-toggle span::before,.cc-menu-toggle span::after{content:"";display:block;width:18px;height:2px;background:var(--ink);position:relative;} .cc-menu-toggle span::before{position:absolute;top:-6px;} .cc-menu-toggle span::after{position:absolute;top:6px;} /* ---- footer menu ---- */ .cc-footer-menu{list-style:none;margin:0;padding:0;} .cc-footer-menu a{display:block;text-decoration:none;color:var(--body);font-size:14.5px;padding:5px 0;} .cc-footer-menu a:hover{color:var(--accent);} /* ---- modal ---- */ .cc-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(15,34,64,0.55);backdrop-filter:blur(4px);} .cc-modal.is-open{display:flex;} .cc-modal__card{background:var(--card);border-radius:20px;width:100%;max-width:440px;box-shadow:0 40px 90px -30px rgba(0,0,0,0.5);overflow:hidden;animation:cc-rise .25s ease;} .cc-field{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-family:var(--font-body);color:var(--ink);background:var(--surface);} .cc-field:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);} /* ---- standard WP content (posts, pages) ---- */ .cc-content{max-width:820px;margin:0 auto;padding:64px 32px;} .cc-content h1{font-family:var(--font-head);font-weight:600;font-size:42px;line-height:1.1;letter-spacing:-0.02em;color:var(--ink);margin:0 0 8px;} .cc-content h2{font-family:var(--font-head);font-weight:600;font-size:30px;line-height:1.2;color:var(--ink);margin:40px 0 12px;} .cc-content h3{font-family:var(--font-head);font-weight:600;font-size:22px;color:var(--ink);margin:32px 0 10px;} .cc-content p,.cc-content li{font-size:17px;line-height:1.7;color:var(--body);} .cc-content ul,.cc-content ol{padding-left:1.3em;margin:0 0 1.2em;} .cc-content li{margin:.35em 0;} .cc-content a{color:var(--accent);} .cc-content blockquote{border-left:3px solid var(--accent);background:var(--surface);margin:1.5em 0;padding:14px 22px;border-radius:0 10px 10px 0;} .cc-content img,.cc-content figure{border-radius:14px;margin:1.5em 0;} .cc-content code{background:var(--surface);padding:2px 6px;border-radius:5px;font-size:.9em;} .cc-meta{color:var(--muted);font-size:14px;margin:0 0 26px;} .cc-page-hero{background:linear-gradient(180deg,var(--accent-soft) 0%,var(--card) 100%);border-bottom:1px solid var(--line);} /* alignments */ .alignleft{float:left;margin:0 1.5em 1em 0;} .alignright{float:right;margin:0 0 1em 1.5em;} .aligncenter{margin-left:auto;margin-right:auto;} .wp-caption-text{font-size:13px;color:var(--muted);text-align:center;} .sticky,.bypostauthor{display:block;} .screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;} .cc-skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font-weight:600;text-decoration:none;} .cc-skip-link:focus{left:0;} /* brand logo image */ .brand--img{display:inline-flex;align-items:center;text-decoration:none;} .brand__img{height:40px;width:auto;display:block;} .site-footer .brand__img{height:38px;} .cc-modal__card .brand__img{height:30px;} /* WordPress custom logo (Customizer → Site Identity) — constrain its height */ .custom-logo-link{display:inline-flex;align-items:center;text-decoration:none;} .custom-logo{height:44px;width:auto;max-width:260px;display:block;} .site-footer .custom-logo{height:38px;} .cc-modal__card .custom-logo{height:30px;} @media (max-width:720px){.brand__img,.custom-logo{height:36px;}} @media (max-width:380px){.brand__img,.custom-logo{height:30px;}} /* widgets */ .widget{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:20px;} .widget-title{font-family:var(--font-head);font-weight:600;font-size:18px;color:var(--ink);margin:0 0 12px;} .widget ul{list-style:none;padding:0;margin:0;} .widget li{padding:7px 0;border-top:1px solid var(--line);} .widget li:first-child{border-top:none;} /* pagination / comments */ .cc-pagination{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:30px 0;} .cc-pagination .page-numbers{padding:9px 14px;border:1px solid var(--line);border-radius:9px;text-decoration:none;color:var(--ink);background:var(--card);} .cc-pagination .page-numbers.current{background:var(--accent);color:#fff;border-color:var(--accent);} .cc-comments{max-width:820px;margin:0 auto;padding:0 32px 64px;} .cc-comments .comment-list{list-style:none;padding:0;} .cc-comments textarea,.cc-comments input[type=text],.cc-comments input[type=email],.cc-comments input[type=url]{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-family:var(--font-body);font-size:15px;background:var(--surface);margin-bottom:12px;} /* ============================================================ RESPONSIVE (down to 320px) ============================================================ */ @media (max-width:1024px){ .cc-loc-grid{grid-template-columns:repeat(3,1fr)!important;} } @media (max-width:980px){ .cc-hero-grid,.cc-compare,.cc-fmcsa-grid,.cc-tools-grid{grid-template-columns:1fr;gap:40px;} .cc-grid-3,.cc-pricing-grid{grid-template-columns:repeat(2,1fr);} .cc-footer-grid{grid-template-columns:1fr 1fr;gap:32px;} .cc-dash-grid{grid-template-columns:1fr!important;} .cc-dash-stats{grid-template-columns:repeat(2,1fr)!important;} .cc-loc-grid{grid-template-columns:repeat(2,1fr)!important;} } @media (max-width:720px){ .cc-container{padding-left:20px;padding-right:20px;} /* mobile menu: collapse to a panel under the header */ .cc-nav-menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 18px 16px;box-shadow:0 16px 30px -20px rgba(15,34,64,0.3);} .cc-nav-menu.is-open{display:flex;} .cc-nav-menu>li{position:static;} .cc-nav-menu a,.cc-nav-menu .cc-menu-label{padding:12px 8px;width:100%;font-size:16px;} .cc-nav-menu .menu-item-has-children>a::after,.cc-nav-menu .cc-menu-label.has-children::after{margin-left:auto;} /* submenu becomes an indented accordion, toggled by JS (.is-open) */ .cc-nav-menu .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 6px 14px;min-width:0;display:none;} .cc-nav-menu .menu-item-has-children.is-open>.sub-menu{display:block;} .cc-nav-menu .sub-menu a{font-size:15.5px;padding:10px 8px;} .cc-menu-toggle{display:inline-flex;} .cc-grid-3,.cc-grid-2,.cc-pricing-grid,.cc-footer-grid,.cc-loc-grid{grid-template-columns:1fr!important;} .cc-dash-stats,.cc-dash-cols{grid-template-columns:1fr!important;} .cc-hide-mobile{display:none!important;} /* scale down oversized headings on phones */ h1,.cc-display{font-size:32px!important;line-height:1.1!important;} .cc-content h1{font-size:30px!important;} .cc-content h2{font-size:24px!important;} [style*="font-size:54px"],[style*="font-size:48px"],[style*="font-size:46px"]{font-size:30px!important;line-height:1.12!important;} [style*="font-size:42px"],[style*="font-size:38px"],[style*="font-size:36px"]{font-size:26px!important;line-height:1.18!important;} [style*="font-size:34px"],[style*="font-size:32px"]{font-size:24px!important;} /* shrink big section paddings */ [style*="padding:86px"],[style*="padding:80px"],[style*="padding:72px"]{padding-top:48px!important;padding-bottom:48px!important;} } @media (max-width:380px){ .cc-container{padding-left:15px;padding-right:15px;} .cc-dash-stats{grid-template-columns:1fr!important;} .cc-modal__card{border-radius:16px;} }