/* Theme Name: Insurance By Heroes — Oath Theme URI: https://insurancebyheroes.com/ Author: Insurance By Heroes Author URI: https://insurancebyheroes.com/ Description: The OATH theme for Insurance By Heroes — a cinematic, independent insurance agency homepage with looping hero video, three.js starfield, a 3D carrier dial, and constellation "oath" emblems. Agents are former public servants; we serve everyone, quote-first. Version: 1.5.3 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: ibh-oath */ /* ========================================================================== Design tokens ========================================================================== */ :root{ --obsidian:#05070F; --deep:#0A1230; --navy:#16247A; --bone:#EDEBE4; --bone-dim:#9A99A6; --ember:#E5252C; --ember-glow:#FF4046; --hairline:rgba(237,235,228,.12); } /* ========================================================================== Base / typography ========================================================================== */ *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:auto;} body{background:var(--obsidian);color:var(--bone);font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 100;overflow-x:hidden;} ::selection{background:var(--ember);color:var(--bone);} .serif{font-family:"Fraunces",serif;} img{max-width:100%;height:auto;} /* ========================================================================== Header ========================================================================== */ .hd{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:22px 42px;mix-blend-mode:normal;transition:background .4s ease, backdrop-filter .4s ease;} .hd.scrolled{background:rgba(5,7,15,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline);} .hd img{height:34px;display:block;width:auto;} .hd .custom-logo-link{display:block;line-height:0;} .hd nav{display:flex;gap:30px;align-items:center;} .hd nav a{color:var(--bone-dim);text-decoration:none;font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;transition:color .25s;} .hd nav a:hover{color:var(--bone);} .hd .cta{background:var(--ember);color:#fff;border:1px solid var(--ember);padding:11px 24px;border-radius:100px;font-weight:600;transition:all .3s ease;box-shadow:0 0 0 0 rgba(229,37,44,.5);} .hd .cta:hover{background:var(--ember-glow);border-color:var(--ember-glow);color:#fff;box-shadow:0 0 30px 3px rgba(229,37,44,.45);transform:translateY(-1px);} /* keep WP nav menu markup from breaking the flex row */ .hd nav ul{display:flex;gap:30px;align-items:center;list-style:none;margin:0;padding:0;} .hd nav li{list-style:none;} /* ========================================================================== Buttons ========================================================================== */ .btn-ember{display:inline-block;background:var(--ember);color:#fff;text-decoration:none;font-weight:600;font-size:14px;letter-spacing:.05em;padding:16px 36px;border-radius:100px;box-shadow:0 0 0 0 rgba(229,37,44,.5);transition:box-shadow .4s ease, transform .3s ease;} .btn-ember:hover{box-shadow:0 0 44px 4px rgba(229,37,44,.45);transform:translateY(-1px);} a.btn-quiet{color:var(--bone) !important;text-decoration:none;font-size:14px;font-weight:500;border-bottom:1px solid rgba(237,235,228,.3);padding-bottom:3px;transition:border-color .3s;} .btn-quiet:hover{border-color:var(--ember);} /* ========================================================================== Hero ========================================================================== */ .hero{position:relative;height:100vh;height:100dvh;min-height:640px;overflow:hidden;display:flex;align-items:center;justify-content:center;} .hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;filter:saturate(.9) contrast(1.05);} .hero .veil{position:absolute;inset:0;background: radial-gradient(120% 90% at 50% 110%, rgba(5,7,15,.92) 20%, rgba(5,7,15,.25) 60%, transparent), linear-gradient(180deg, rgba(5,7,15,.55), rgba(5,7,15,.15) 30%, rgba(5,7,15,.9) 92%);} #stars{position:absolute;inset:0;width:100%;height:100%;} .hero-copy{position:relative;z-index:5;text-align:center;padding:0 24px 130px;} .hero-copy .over{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:34px;font-weight:500;} .hero-copy h1{font-size:clamp(44px,8.2vw,118px);font-weight:480;line-height:1.02;letter-spacing:-0.015em;font-variation-settings:"opsz" 144,"SOFT" 40,"WONK" 0;} .hero-copy h1 .l2{display:block;font-style:italic;font-weight:340;color:transparent;background:linear-gradient(100deg,var(--bone) 30%, #F6C6C8 55%, var(--ember-glow) 78%);-webkit-background-clip:text;background-clip:text;} .hero-copy .sub{margin:36px auto 0;max-width:52ch;color:var(--bone-dim);font-size:17px;line-height:1.7;} .hero-copy .row{margin-top:44px;display:flex;gap:18px;justify-content:center;align-items:center;} .hero-carriers{position:absolute;bottom:0;left:0;right:0;z-index:6;} .hero-carriers .hc-label{display:block;text-align:center;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:rgba(154,153,166,.85);margin-bottom:20px;} .hc-more{color:transparent;background:linear-gradient(100deg, rgba(154,153,166,.85) 40%, #EDEBE4 50%, rgba(255,64,70,.95) 54%, rgba(154,153,166,.85) 62%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;animation:moreglint 5.6s ease-in-out infinite;} @keyframes moreglint{0%,55%{background-position:120% 0;}85%,100%{background-position:-60% 0;}} .hc-more i{font-style:normal;animation:moredot 2.1s infinite backwards;} .hc-more .d2{animation-delay:.28s;} .hc-more .d3{animation-delay:.56s;} @keyframes moredot{0%,20%{opacity:0;}40%,100%{opacity:1;}} @media(prefers-reduced-motion:reduce){.hc-more{animation:none;color:rgba(154,153,166,.85);background:none;}.hc-more i{animation:none;}} .hero-carriers::before{content:"";display:block;max-width:1180px;margin:0 auto 20px;border-top:1px solid rgba(237,235,228,.14);} .dial{position:relative;height:64px;max-width:1180px;margin:0 auto 10px;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);} .di{position:absolute;left:50%;top:50%;will-change:transform,opacity;} .di img{height:calc(var(--lh,26)*1px);width:auto;max-width:180px;object-fit:contain;display:block; filter:brightness(0) invert(0.92);} @media(max-width:860px){.dial{height:52px;}.di img{height:calc(var(--lh,26)*0.73px);max-width:126px;}.hero{height:90dvh;min-height:560px;}.hero-carriers{bottom:6px;}} @media(max-width:860px){.hero-copy h1 .l2{margin-top:10px;}.hero-copy .sub{margin-top:26px;}} @media(max-height:640px){.hero-carriers{display:none;}} .scrollcue{display:none;position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--bone-dim);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;} .scrollcue .line{width:1px;height:44px;background:linear-gradient(180deg,var(--bone-dim),transparent);animation:cue 2.2s ease-in-out infinite;} @keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}} @media(max-height:700px){.scrollcue{display:none;}} /* ========================================================================== Oath trifold ========================================================================== */ .oathfold{scroll-margin-top:80px;position:relative;padding:54px 24px 46px;background:linear-gradient(180deg,var(--obsidian),#070B1D 55%,var(--obsidian));overflow:hidden;} .of-head{max-width:880px;margin:0 auto;text-align:center;} .of-head .k{font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--bone-dim);} .of-head h2{margin-top:22px;font-family:"Fraunces",serif;font-size:clamp(26px,3.3vw,42px);font-weight:420;line-height:1.18;font-variation-settings:"opsz" 100,"SOFT" 40;text-wrap:balance;} .of-head h2 em{font-style:italic;color:var(--ember-glow);} .of-head p{margin:18px auto 0;color:var(--bone-dim);font-size:15.5px;line-height:1.65;max-width:66ch;} .of-grid{max-width:1180px;margin:32px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .of-panel{position:relative;border:1px solid var(--hairline);border-radius:18px;padding:20px 24px 22px;background:rgba(237,235,228,.02);transition:transform .45s ease,border-color .45s ease,background .45s ease;} .of-panel:hover{transform:translateY(-5px);border-color:rgba(237,235,228,.28);background:rgba(237,235,228,.04);} .of-c{display:block;width:100%;height:80px;margin-bottom:8px;} .of-panel .n{display:block;font-family:"Fraunces",serif;font-style:italic;font-size:14px;color:var(--ember-glow);letter-spacing:.08em;margin-bottom:8px;} .of-panel h3{font-family:"Fraunces",serif;font-size:clamp(20px,1.6vw,23px);font-weight:450;line-height:1.15;font-variation-settings:"opsz" 60,"SOFT" 30;} .of-panel p{margin-top:10px;color:var(--bone-dim);font-size:14px;line-height:1.6;} .of-panel.reveal{transition:opacity .9s ease,transform .9s ease,border-color .45s ease,background .45s ease;} .of-panel:nth-child(2){transition-delay:.12s;} .of-panel:nth-child(3){transition-delay:.24s;} .of-panel:hover{transition-delay:0s;} .of-cta{margin-top:32px;text-align:center;} .of-attr{margin-top:16px;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--bone-dim);} @media(max-width:860px){.oathfold{padding:44px 20px 56px;}.of-grid{grid-template-columns:1fr;max-width:520px;gap:18px;margin-top:60px;}.of-c{height:118px;}} /* ========================================================================== Footer ========================================================================== */ .ft{padding:22px 42px 22px;border-top:1px solid var(--hairline);} .ft .inner{max-width:1180px;margin:0 auto;} .ft .top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;} .ft img{height:26px;opacity:.9;width:auto;} .ft .links{display:flex;gap:34px;} .ft .links a{color:var(--bone-dim);text-decoration:none;font-size:13px;letter-spacing:.1em;text-transform:uppercase;} .ft .links a:hover{color:var(--bone);} .ft .legal{margin-top:14px;color:#5E5F6E;font-size:11px;line-height:1.6;max-width:110ch;} /* ========================================================================== Reveal + responsive ========================================================================== */ .reveal{opacity:0;transform:translateY(34px);} @media(max-width:860px){ .hd{padding:18px 22px;} .hd nav a:not(.cta){display:none;} .ft .top{flex-direction:column;} } @media(prefers-reduced-motion:reduce){ .scrollcue .line{animation:none;} } /* ========================================================================== Generic index fallback (posts) — same design language ========================================================================== */ .ibh-index{max-width:820px;margin:0 auto;padding:140px 24px 80px;} .ibh-index .idx-head{text-align:center;margin-bottom:56px;} .ibh-index .idx-head h1{font-family:"Fraunces",serif;font-size:clamp(32px,5vw,56px);font-weight:440;line-height:1.05;} .ibh-index .idx-head p{margin-top:18px;color:var(--bone-dim);font-size:16px;} .ibh-post{border-top:1px solid var(--hairline);padding:34px 0;} .ibh-post:last-child{border-bottom:1px solid var(--hairline);} .ibh-post .meta{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:12px;} .ibh-post h2{font-family:"Fraunces",serif;font-size:clamp(22px,2.6vw,30px);font-weight:440;line-height:1.18;} .ibh-post h2 a{color:var(--bone);text-decoration:none;transition:color .25s;} .ibh-post h2 a:hover{color:var(--ember-glow);} .ibh-post .excerpt{margin-top:14px;color:var(--bone-dim);font-size:15px;line-height:1.65;} .ibh-post .more{display:inline-block;margin-top:16px;} .ibh-pagination{margin-top:48px;display:flex;justify-content:center;gap:20px;} .ibh-pagination a,.ibh-pagination span{color:var(--bone-dim);text-decoration:none;font-size:13px;letter-spacing:.08em;} .ibh-pagination a:hover{color:var(--bone);} .ibh-none{text-align:center;color:var(--bone-dim);padding:60px 0;} /* Primary menu CTA item (WP menu) — added 2026-08-16 */ .hd nav li.cta a{display:inline-block;color:var(--bone);border:1px solid rgba(237,235,228,.35);padding:11px 24px;border-radius:100px;transition:all .3s ease;} .hd nav li.cta a:hover{background:var(--ember);border-color:var(--ember);color:#fff;} /* Footer navigation columns */ .ft .top{gap:48px;} .ft-nav{display:flex;gap:56px;flex-wrap:wrap;} .ft-col{display:flex;flex-direction:column;gap:10px;} .ft-h{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);margin-bottom:4px;opacity:.9;} .ft-col a{color:var(--bone-dim);text-decoration:none;font-size:13.5px;letter-spacing:.02em;transition:color .25s;} .ft-col a:hover{color:var(--bone);} @media(max-width:860px){.ft-nav{gap:36px;}.ft .top{flex-direction:column;}} /* =================================================================== ATLAS rollout — shared header additions (flag loop + mobile CTA). The flag