… * The body holds the multi-stop gradient and an 18px padding so the * gradient shows as a frame; .site is the white rounded card that * floats on top with a big soft shadow. Collapses to full-bleed < 700px. * ------------------------------------------------------------------ */ body.auxillia-shell{ background:linear-gradient(135deg,var(--purple) 0%,var(--teal) 34%,var(--yellow) 68%,var(--orange) 100%); min-height:100vh; padding:18px; } .site{ background:linear-gradient(180deg,#fff 0%,#fff 65%,#fbfdff 100%); border-radius:28px; overflow:hidden; box-shadow:0 20px 70px rgba(7,31,61,.25); } /* WordPress admin bar sits inside the body padding; nudge it to the top edge. */ body.auxillia-shell.admin-bar{padding-top:calc(18px + 32px)} /* ------------------------------------------------------------------ * Header * ------------------------------------------------------------------ */ .header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(7,31,61,.07)} .navbar{height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px} .logo{display:flex;align-items:center;gap:12px;min-width:150px} .logo img{width:118px;height:76px;object-fit:contain} .logo .mark-text{font-weight:900;font-size:13px;text-transform:uppercase;color:var(--navy);line-height:1.05;letter-spacing:.02em;display:none} .navlinks{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:900;color:#14223a} .navlinks a{position:relative;white-space:nowrap} .navlinks a.active{color:var(--orange)} .navlinks a.active::after{content:"";position:absolute;left:0;right:0;bottom:-18px;height:3px;background:var(--orange);border-radius:2px} .chev::after{content:"⌄";font-size:11px;margin-left:6px} /* ------------------------------------------------------------------ * Buttons * ------------------------------------------------------------------ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:var(--rounded);font-weight:900;line-height:1;padding:15px 22px;box-shadow:0 8px 18px rgba(7,31,61,.12);transition:.2s ease;white-space:nowrap} .btn:hover{transform:translateY(-2px);box-shadow:0 16px 28px rgba(7,31,61,.16)} .btn-orange{background:linear-gradient(135deg,var(--orange),var(--orange-2));color:white} .btn-teal{background:linear-gradient(135deg,var(--teal),var(--teal-2));color:white} .btn-purple{background:linear-gradient(135deg,var(--purple),#9b65ef);color:white} .btn-green{background:linear-gradient(135deg,var(--green),#339844);color:white} .btn-yellow{background:linear-gradient(135deg,var(--yellow),#ffa500);color:#10243e} .btn-white{background:#fff;color:var(--navy);border:1px solid var(--line)} .btn-small{padding:11px 16px;font-size:13px} /* ------------------------------------------------------------------ * Typography atoms * ------------------------------------------------------------------ */ .kicker{display:inline-flex;align-items:center;gap:9px;text-transform:uppercase;font-size:13px;letter-spacing:.08em;font-weight:900;color:var(--orange)} .kicker::before{content:"";width:34px;height:4px;border-radius:10px;background:var(--yellow)} .display{font-size:clamp(46px,6vw,86px);line-height:.95;margin:0;color:var(--navy);font-weight:1000;letter-spacing:-.045em} .display .orange{color:var(--orange)} .display .teal{color:var(--teal)} .display .purple{color:var(--purple)} .display .green{color:var(--green)} .display .script{font-family:"Comic Sans MS","Trebuchet MS",cursive;font-weight:900;letter-spacing:-.02em} .lead{font-size:clamp(17px,1.4vw,21px);color:#213149;margin:22px 0 0;max-width:620px} .section-title{font-size:clamp(34px,3.4vw,54px);line-height:1;margin:0;color:var(--navy);font-weight:1000;letter-spacing:-.035em} .section-title.center{text-align:center} .section-sub{font-size:18px;color:var(--muted);max-width:660px;margin:14px auto 0;text-align:center} /* Decorative doodle */ .doodle-star{position:absolute;color:var(--yellow);font-size:42px;font-weight:900;transform:rotate(-12deg);line-height:1} .doodle-star.blue{color:#196dff} .doodle-star.purple{color:var(--purple)} /* ------------------------------------------------------------------ * Reusable atoms * ------------------------------------------------------------------ */ .card{background:#fff;border:1px solid rgba(7,31,61,.09);border-radius:22px;box-shadow:var(--shadow-soft)} .icon-dot{width:56px;height:56px;border-radius:20px;display:grid;place-items:center;color:#fff;font-size:25px;font-weight:900;box-shadow:inset 0 -7px 0 rgba(0,0,0,.08)} .icon-teal{background:linear-gradient(135deg,var(--teal),var(--teal-2))} .icon-orange{background:linear-gradient(135deg,var(--orange),var(--orange-2))} .icon-purple{background:linear-gradient(135deg,var(--purple),#a06af0)} .icon-green{background:linear-gradient(135deg,var(--green),#43a53d)} .icon-yellow{background:linear-gradient(135deg,var(--yellow),#ffb000);color:var(--navy)} .photo{width:100%;height:100%;object-fit:cover} .hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px} /* ------------------------------------------------------------------ * Footer * ------------------------------------------------------------------ */ .footer{background:#061f3d;color:#fff;margin-top:0;padding:56px 0 0} .footer-grid{display:grid;grid-template-columns:1.35fr .8fr .9fr 1.1fr 1.2fr;gap:36px;align-items:start} .footer img{width:132px;filter:drop-shadow(0 12px 20px rgba(0,0,0,.3));margin-bottom:14px} .footer h3{font-size:17px;margin:0 0 14px;color:white} .footer p, .footer li{color:rgba(255,255,255,.78);font-size:14px;margin:0 0 8px} .footer ul{list-style:none;padding:0;margin:0} .footer .socials{display:flex;gap:10px;margin-top:14px} .footer .socials span, .footer .socials a{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;font-weight:900} .footer input{border:0;border-radius:12px;padding:13px 14px;width:100%;margin:8px 0 10px} .footer-bottom{margin-top:40px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:20px;padding:18px 0;color:rgba(255,255,255,.7);font-size:13px} /* ------------------------------------------------------------------ * Interaction polish (global) * ------------------------------------------------------------------ */ .chev::after{content:"";display:none} .navlinks a{transition:color .22s ease} .navlinks a::before{content:"";position:absolute;left:0;right:100%;bottom:-18px;height:3px;border-radius:2px;background:var(--teal);transition:right .24s ease} .navlinks a:hover{color:var(--teal)} .navlinks a:hover::before{right:0} .navlinks a.active::before{display:none} .btn{will-change:transform,box-shadow} .btn:focus-visible, .navlinks a:focus-visible, .footer a:focus-visible{outline:3px solid rgba(255,201,40,.85);outline-offset:4px} .icon-dot, .circle-arrow{transition:transform .26s ease} .icon-dot:hover{transform:translateY(-2px) rotate(-4deg)} /* ------------------------------------------------------------------ * Responsive (base only) * ------------------------------------------------------------------ */ @media (max-width:1080px){ .navlinks{display:none} .navbar{height:76px} .logo img{width:100px;height:64px} .footer-grid{grid-template-columns:1fr 1fr} } @media (max-width:700px){ :root{--container:min(100% - 28px, 1240px)} /* Collapse the site shell to full-bleed on small screens. */ body.auxillia-shell, body.auxillia-shell.admin-bar{padding:0} .site{border-radius:0;box-shadow:none} .display{font-size:44px} .section-title{font-size:34px} .hero-actions{flex-direction:column;align-items:stretch} .btn{width:100%} .footer-bottom{flex-direction:column;align-items:flex-start} .footer-grid{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ *, *::before, *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important} }