/* ================================================================ ANANYOO ACCESSIBILITY THEME: homepage mockup v2 Palette: all pairings verified ≥ WCAG 2.2 AA (lowest text = 4.64:1) base #F7F9FC · ink #0E1B36 · body #2B3B57 · teal #184FCB (7.5:1) teal-bright #7FB0FF (on dark) · coral #2563EB (icon/large) coral-dark #184FCB (text accent) · muted #B8C9EA (on dark) ================================================================ */ :root{ --base:#F7F9FC; --surface:#ECF1F8; --ink:#0E1B36; --body:#2B3B57; --teal:#184FCB; --teal-deep:#0B1A3D; --teal-bright:#7FB0FF; --coral:#2563EB; --coral-dark:#184FCB; --coral-light:#3B6FE0; --muted:#B8C9EA; --line:#DCE4F0; --white:#fff; --violet:#6D28D9; --fuchsia:#BE185D; --pink:#DB2777; --display:"Barlow Semi Condensed",system-ui,sans-serif; --body-font:"Geist",system-ui,-apple-system,sans-serif; --maxw:1200px; --shadow:0 24px 60px -28px rgba(12,43,41,.5); --shadow-sm:0 10px 30px -18px rgba(12,43,41,.45); --ease:cubic-bezier(.2,.7,.2,1); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } /* Full-bleed guard: sections that stretch to width:100vw (the aurora hero, .alignfull rows, etc.) count the vertical scrollbar inside 100vw, so the document ends a few pixels wider than the viewport and a stray horizontal scrollbar appears at the bottom of the window. Clipping the root on the X axis removes it. `clip` (unlike overflow:hidden) creates NO scroll container, so position:sticky headers and normal vertical scrolling are unaffected. */ html{overflow-x:clip} body{margin:0;background:var(--base);color:var(--body);font-family:var(--body-font);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased} body.menu-open{overflow:hidden} h1,h2,h3,h4{font-family:var(--display);color:var(--ink);line-height:1.02;margin:0;letter-spacing:.005em} p{margin:0} /* Links in running text take the colour and weight of the text around them and are marked by the underline alone. Buttons, menus and cards set their own styles. */ a{color:inherit;font-weight:inherit;text-decoration-line:underline;text-underline-offset:3px;text-decoration-thickness:.08em} a:hover{text-decoration-thickness:.16em} img,svg{max-width:100%;display:block} /* WordPress adds width and height attributes to images in content. height:auto keeps the picture in proportion and lets aspect-ratio rules such as the team portraits apply. */ img{height:auto} svg{stroke-linecap:round;stroke-linejoin:round} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* eyebrow with squiggle mark */ .eyebrow{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:.82rem;color:var(--coral-dark);display:inline-flex;align-items:center;gap:.7rem;margin:0 0 1.2rem} .eyebrow svg{width:30px;height:10px;color:var(--coral)} .eyebrow.on-dark{color:var(--teal-bright)} .eyebrow.on-dark svg{color:var(--teal-bright)} /* focus is a feature, not an afterthought */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px} .on-dark a:focus-visible,.dark-scope :focus-visible{outline-color:var(--teal-bright)} .skip{position:absolute;left:1rem;top:-120px;z-index:300;background:var(--ink);color:#fff;font-weight:700;padding:.85rem 1.2rem;border-radius:10px;text-decoration:none;transition:top .15s ease} .skip:focus{top:1rem;color:#fff} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:50px;padding:.75rem 1.5rem;border-radius:11px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;white-space:nowrap;text-decoration:none;cursor:pointer;border:2px solid transparent;transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s ease,border-color .15s ease} .btn-primary{background:var(--teal);color:#fff} .btn-primary:hover{background:#084f4b} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{border-color:var(--teal)} .btn-light{background:#fff;color:var(--teal)} .btn-coral{background:#4F46E5;color:#fff} .btn-coral:hover{background:#3F37C9} @media (prefers-reduced-motion:no-preference){ .btn-primary:hover,.btn-light:hover,.btn-coral:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)} } .textlink{display:inline-flex;align-items:center;gap:.5rem;min-height:50px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--coral);align-self:start} .textlink span{transition:transform .15s var(--ease)} @media (prefers-reduced-motion:no-preference){ .textlink:hover span{transform:translateX(5px)} } /* ============================ HEADER ============================ */ .site-header{position:sticky;top:0;z-index:120;background:rgba(250,251,251,.88);backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line)} .header-inner{display:flex;align-items:center;gap:1.5rem;min-height:80px} .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none} .brand-mark{width:48px;height:48px;flex:none} .brand .brand-logo{height:68px;width:auto;max-width:380px;display:block;object-fit:contain} @media (max-width:781px){ .brand .brand-logo{height:52px} } .brand-name{font-family:var(--display);font-weight:900;font-size:1.5rem;letter-spacing:.01em;color:var(--ink);line-height:1} .brand-tag{font-size:.72rem;letter-spacing:.03em;color:var(--body);font-weight:500;margin-top:3px} /* Core Site Logo / Site Title blocks used inside the header brand group. */ .brand .wp-block-site-logo{margin:0;line-height:0} .brand .wp-block-site-logo a{display:block} .brand .wp-block-site-logo img,.brand .custom-logo{height:68px;width:auto;max-width:380px;display:block;object-fit:contain} @media (max-width:781px){ .brand .wp-block-site-logo img,.brand .custom-logo{height:52px} } .brand .wp-block-site-title{margin:0;font-family:var(--display);font-weight:900;font-size:1.5rem;letter-spacing:.01em;line-height:1} .brand .wp-block-site-title a{color:var(--ink);text-decoration:none} /* When a logo image is set, show the logo alone (hide the site-title text). */ .brand:has(.wp-block-site-logo img) .wp-block-site-title{display:none} .nav-desktop{margin-left:auto} .nav-desktop ul{list-style:none;display:flex;gap:.25rem;margin:0;padding:0} .nav-desktop a{display:inline-flex;align-items:center;min-height:44px;padding:.4rem .85rem;border-radius:8px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.95rem;color:var(--body);text-decoration:none} .nav-desktop a:hover{background:var(--surface);color:var(--ink)} .nav-desktop a[aria-current="page"],.nav-desktop a[aria-current="true"]{color:var(--teal)} .menu-nav a[aria-current="page"],.menu-nav a[aria-current="true"]{color:var(--teal-bright)} .header-actions{display:flex;align-items:center;gap:.6rem} .icon-btn{width:50px;height:50px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:2px solid var(--line);border-radius:11px;cursor:pointer;color:var(--ink)} .icon-btn:hover{border-color:var(--teal)} /* hamburger -> X */ .burger{display:none;background:linear-gradient(120deg,#184FCB,#6D28D9 55%,#BE185D);color:#fff;border:0;box-shadow:0 10px 22px -12px rgba(109,40,217,.7)} .burger .bar{display:block;width:22px;height:2.4px;background:currentColor;border-radius:2px;transition:transform .25s var(--ease),opacity .2s ease} .burger .bar+ .bar{margin-top:5px} @media (prefers-reduced-motion:reduce){ .burger .bar{transition:none} } /* ============================ MOBILE MENU (full-screen, focus-trapped) ===== */ .menu-overlay{position:fixed;inset:0;z-index:200;background:var(--teal-deep);color:#fff;display:flex;flex-direction:column;padding:1.2rem clamp(1.1rem,5vw,2rem) 2rem;visibility:hidden;opacity:0;transition:opacity .28s var(--ease),visibility 0s linear .28s;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .menu-overlay.open{visibility:visible;opacity:1;transition:opacity .28s var(--ease)} .menu-top{display:flex;align-items:center;justify-content:space-between;min-height:64px} .menu-top .brand-name{color:#fff;font-family:var(--display);font-weight:900;font-size:1.35rem} /* Drawer logo: whitened so it reads on the dark drawer (like the footer logo). */ .menu-brand{display:inline-flex;align-items:center;line-height:0} .menu-brand img,.menu-logo{height:40px;width:auto;max-width:190px;display:block;filter:brightness(0) invert(1)} .menu-logo.is-default-white{filter:none;max-width:230px} .menu-close{width:52px;height:52px;border:2px solid rgba(255,255,255,.3);background:transparent;color:#fff;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer} .menu-close:hover{border-color:var(--teal-bright)} .menu-nav{margin-top:2rem;flex:1} .menu-nav ul{list-style:none;margin:0;padding:0} .menu-nav li{border-bottom:1px solid rgba(255,255,255,.12)} .menu-nav a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem .2rem;min-height:64px;font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.02em;font-size:1.6rem;color:#fff;text-decoration:none} .menu-nav a .idx{font-family:var(--body-font);font-size:.85rem;color:var(--teal-bright);font-weight:600;letter-spacing:.1em} .menu-nav a:hover{color:var(--teal-bright)} .menu-foot{margin-top:1.6rem;display:flex;flex-direction:column;gap:1.1rem} .menu-foot .btn{width:100%} .menu-cta{display:flex;align-items:center;justify-content:center;width:100%;padding:1.05rem;border-radius:14px;background:linear-gradient(120deg,#184FCB,#6D28D9 55%,#BE185D);color:#fff;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;box-shadow:0 14px 30px -14px rgba(109,40,217,.7)} .menu-cta:hover{filter:brightness(1.06)} .menu-contact{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;color:var(--muted);font-size:.95rem} .menu-contact a{color:var(--muted)} @media (prefers-reduced-motion:no-preference){ .menu-overlay.open .menu-nav li{animation:menuItem .4s var(--ease) both} .menu-overlay.open .menu-nav li:nth-child(1){animation-delay:.05s} .menu-overlay.open .menu-nav li:nth-child(2){animation-delay:.10s} .menu-overlay.open .menu-nav li:nth-child(3){animation-delay:.15s} .menu-overlay.open .menu-nav li:nth-child(4){animation-delay:.20s} .menu-overlay.open .menu-nav li:nth-child(5){animation-delay:.25s} .menu-overlay.open .menu-nav li:nth-child(6){animation-delay:.30s} @keyframes menuItem{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} } /* The desktop row needs more than 980px once a menu has a few items, so the nav and the header icons ran past the header between about 980px and 1075px and gave the page a sideways scrollbar. Hold the drawer until the row genuinely fits. */ @media (max-width:1080px){ .nav-desktop,.header-actions .only-desktop{display:none} .burger{display:inline-flex;flex-direction:column;align-items:center;justify-content:center} } /* ============================ MARQUEE ============================ */ .ribbon{background:var(--ink);color:#fff;border-block:1px solid rgba(255,255,255,.08)} .ribbon .wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.7rem 1.5rem;padding-block:1.15rem;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1rem,2.2vw,1.35rem);letter-spacing:.05em;color:#fff} .ribbon .star{color:var(--teal-bright)} .blog .wrap{padding-block:clamp(3rem,6vw,4.6rem)} /* ============================ FOOTER ============================ */ .site-footer{background:var(--ink);color:var(--muted)} /* Footer newsletter band: floating gradient card, Option C. Gradient pill card with rounded corners sits over the boundary between the page bg (light) and the dark footer body below. Negative bottom margin makes it overlap into the footer-body by 3rem so the visual break between newsletter and footer columns is clear and intentional. Site-footer bg goes transparent so the page bg shows through around the card; the new .footer-body child carries the dark navy background for the columns area. */ .site-footer{background:transparent!important} /* Home page only: tint the strip behind the newsletter card. WordPress puts the "home" class on for the front page, so inner pages stay as-is. */ .home .site-footer{background:#ECF1F8!important} /* Kill the default 24px flow margin between the template's top-level blocks (header / main / footer): it showed as a body-coloured gap strip above the footer. Sections manage their own spacing. */ .wp-site-blocks > header,.wp-site-blocks > main,.wp-site-blocks > footer{margin-block-start:0;margin-block-end:0} .footer-body{background:#0e1b36;color:#fff;padding:clamp(4.5rem,7vw,6rem) 0 clamp(1.5rem,3vw,2.5rem);position:relative;z-index:1} .footer-body .wrap{padding-top:0;padding-bottom:0} .footer-cta{background:linear-gradient(100deg,#2743d0,#7a2fd6 55%,#c02582);border-radius:18px;max-width:1360px;width:calc(100% - 2rem);margin:clamp(1.5rem,3vw,2.5rem) auto -3rem;position:relative;z-index:2;color:#fff;box-shadow:0 24px 48px -20px rgba(122,47,214,.55);overflow:hidden} .footer-cta::before{display:none} .footer-cta-in{display:flex;flex-wrap:wrap;gap:1.6rem 3rem;align-items:center;justify-content:space-between;padding:clamp(1.8rem,3.5vw,2.6rem) clamp(1.5rem,3vw,2.4rem);max-width:none} .footer-cta-content{max-width:520px;flex:1 1 400px;min-width:260px} .footer-cta-badge{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:0;color:#3c3489;font-family:var(--display);font-weight:600;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:.4rem .85rem;border-radius:999px;margin:0 0 1rem} .footer-cta-badge::before{content:"";width:6px;height:6px;background:#d4537e;border-radius:50%;flex-shrink:0} .footer-cta-h{font-family:var(--display);font-weight:600;color:#fff;font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.2;letter-spacing:0;text-transform:none;margin:0;max-width:24ch} .footer-cta-p{color:rgba(255,255,255,.9);margin:.6rem 0 0;font-size:.95rem;line-height:1.55;max-width:46ch} .footer-cta-form-wrap{flex:1 1 360px;min-width:280px;max-width:440px} .footer-form{display:block;margin:0} .footer-field-label{display:block;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;color:rgba(255,255,255,.9);margin:0 0 .45rem} .footer-field-inline{display:flex;background:#fff;border:0;border-radius:12px;padding:4px;gap:4px;transition:box-shadow .15s var(--ease)} .footer-field-inline:focus-within{box-shadow:0 0 0 3px rgba(255,255,255,.45)} .footer-field-inline input{flex:1;font-family:var(--body-font);font-size:.95rem;padding:.65rem .85rem;border-radius:9px;border:0;background:transparent;color:#0e1b36;min-width:0;outline:none} .footer-field-inline input::placeholder{color:#64748b} .footer-sub{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;background:#0e1b36;color:#fff;border:0;border-radius:9px;padding:.7rem 1.3rem;cursor:pointer;transition:background .15s var(--ease),transform .15s var(--ease);flex-shrink:0;white-space:nowrap} .footer-sub:hover{background:#534ab7;transform:translateY(-1px)} .footer-sub:focus-visible{outline:2px solid #0e1b36;outline-offset:3px} .footer-cta-consent{color:rgba(255,255,255,.92);margin:.75rem 0 0;font-size:.78rem;line-height:1.5} @media (prefers-reduced-motion:reduce){ .footer-sub{transition:none} .footer-sub:hover{transform:none} } @media (max-width:720px){ .footer-cta{margin-bottom:-2rem} .footer-body{padding-top:clamp(3.5rem,8vw,5rem)} .footer-cta-content,.footer-cta-form-wrap{max-width:none;min-width:0;flex-basis:100%} } .site-footer a{color:#e1e9f9;font-weight:500} .site-footer a:hover{color:#fff} .footer-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem;padding-block:clamp(2.6rem,5vw,3.4rem)} .footer-logo{display:inline-flex;align-items:center;text-decoration:none} .footer-logo-img{height:58px;width:auto;max-width:260px;display:block} .footer-logo .brand-mark{width:44px;height:44px;flex:none} .footer-logo .brand-name{font-family:var(--display);font-weight:800;font-size:1.8rem;line-height:1;color:#fff;letter-spacing:.01em} .footer-brand p{color:var(--muted);font-size:.95rem;max-width:36ch;margin-top:1.1rem} .brand-note{grid-column:1/-1;color:var(--muted);font-size:.85rem;max-width:80ch;margin-top:1.6rem;font-style:italic;line-height:1.55;padding-left:.9rem;border-left:2px solid transparent;border-image:linear-gradient(180deg,#7FB0FF,#A78BFA,#F472B6) 1} .socials{display:flex;gap:.6rem;margin-top:1.4rem} .socials a{width:44px;height:44px;border:1.5px solid rgba(127,176,255,.28);border-radius:11px;display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:transform .18s var(--ease),background .18s,border-color .18s} .socials a:hover{border-color:transparent;background:linear-gradient(135deg,#184FCB,#6D28D9);transform:translateY(-2px)} .footer-col h3{font-family:var(--display);font-size:.95rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:#fff;margin-bottom:1.2rem} .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem} .footer-col a{text-decoration:none;font-size:.82rem;transition:color .15s} .footer-col a:hover{color:#fff;text-decoration:underline;text-decoration-color:#7FB0FF;text-underline-offset:3px} .footer-bottom{border-top:1px solid rgba(127,176,255,.18);padding-block:1.5rem;display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;justify-content:space-between;align-items:center;font-size:.82rem;color:var(--muted)} /* Neutral (default) footer: site title + tagline, page list, latest posts. */ .footer-top-neutral{grid-template-columns:1.4fr 1fr 1fr} .site-footer .footer-body:first-child{padding-top:clamp(2.5rem,4vw,3.5rem)} .site-footer .footer-brand .footer-site-title{margin:0;font-family:var(--display);font-weight:800;font-style:normal;font-size:1.7rem;line-height:1.1;letter-spacing:.01em} .site-footer .footer-brand .footer-site-title a{color:#fff;text-decoration:none} .site-footer .footer-brand .footer-site-title a:hover,.site-footer .footer-brand .footer-site-title a:focus-visible{text-decoration:underline;text-underline-offset:4px} .site-footer .footer-brand .footer-site-tagline{color:var(--muted);font-size:.95rem;font-style:normal;max-width:36ch;margin-top:.7rem} .footer-col .footer-nav{margin:0} .footer-col .footer-nav .wp-block-navigation__container,.footer-col .footer-nav .wp-block-page-list{display:flex;flex-direction:column;gap:.6rem;list-style:none;margin:0;padding:0} .footer-col .footer-nav .wp-block-navigation-item__content,.footer-col .footer-latest a{text-decoration:none;font-size:.82rem;color:#e1e9f9;font-weight:500} .footer-col .footer-nav .wp-block-navigation-item__content:hover,.footer-col .footer-latest a:hover{color:#fff;text-decoration:underline;text-decoration-color:#7FB0FF;text-underline-offset:3px} .footer-col .footer-latest{padding-left:0} .footer-col .footer-latest li{margin:0} @media (max-width:980px){.footer-top-neutral{grid-template-columns:1fr 1fr}} @media (max-width:560px){.footer-top-neutral{grid-template-columns:1fr}} .footer-aa{display:block;font-size:.82rem} .footer-aa b{font-family:var(--display);font-weight:800;font-size:.76rem;letter-spacing:.05em;color:#fff;background:linear-gradient(135deg,#184FCB,#6D28D9);padding:.22rem .55rem;border-radius:6px} @media (max-width:980px){ .footer-top{grid-template-columns:1fr 1fr} .nav-desktop,.header-actions .only-desktop{display:none} .burger{display:inline-flex;flex-direction:column;align-items:center;justify-content:center} } @media (max-width:560px){ .footer-top{grid-template-columns:1fr} } .cart-btn{position:relative} .ariade-cart-badge{position:absolute;top:-6px;right:-6px;min-width:1.15rem;height:1.15rem;padding:0 .25rem;border-radius:999px;background:#a52752;color:#fff;font-size:.72rem;font-weight:600;line-height:1.15rem;text-align:center;box-shadow:0 0 0 2px #fff} .ariade-cart-badge--empty{display:none} .cart-count{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--fuchsia);color:#fff;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--body-font)} /* ===== outline button + section-head top-right action ===== */ .btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)} .btn-outline:hover{background:var(--ink);color:#fff} .section-head.with-action{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:1.2rem 2rem;flex-wrap:wrap} .section-head.with-action .sh-text{max-width:48ch} .section-head.with-action .sh-text h2{margin-bottom:.7rem} .section-head.with-action .sh-text>:last-child{margin-bottom:0} .section-head.with-action .head-action{flex:none} @media (max-width:600px){ .section-head.with-action .head-action,.section-head.with-action .head-action .btn{width:100%} } /* ===== desktop nav dropdown (disclosure pattern) ===== */ .has-dropdown{position:relative} .nav-dd-toggle{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:.4rem .85rem;border-radius:8px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.95rem;color:var(--body);background:none;border:0;cursor:pointer} .nav-dd-toggle:hover{background:var(--surface);color:var(--ink)} .dd-caret{width:16px!important;height:16px!important;min-width:16px;min-height:16px;flex-shrink:0;transition:transform .18s var(--ease);display:inline-block;vertical-align:middle} .nav-dd-toggle[aria-expanded="true"] .dd-caret{transform:rotate(180deg)} .nav-desktop .nav-dropdown{position:absolute;top:calc(100% + .4rem);left:0;min-width:236px;list-style:none;margin:0;padding:.4rem;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:130;display:block} .nav-desktop .nav-dropdown[hidden]{display:none} .nav-desktop .nav-dropdown li{margin:0;width:100%} .nav-desktop .nav-dropdown a{display:block;padding:.65rem .8rem;border-radius:8px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;color:var(--body);text-decoration:none;min-height:0} .nav-desktop .nav-dropdown a:hover,.nav-desktop .nav-dropdown a:focus-visible{background:var(--surface);color:var(--ink)} /* ===== mobile submenu (accordion) ===== */ .menu-nav .has-sub{border-bottom:1px solid rgba(255,255,255,.12)} .menu-nav .has-sub>.msub-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem .2rem;min-height:64px;font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.02em;font-size:1.6rem;color:#fff;background:none;border:0;cursor:pointer;text-align:left} .menu-nav .has-sub>.msub-toggle:hover{color:var(--teal-bright)} /* Round +/- disclosure indicator (replaces the old chevron). */ .menu-nav .msub-pm{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:2px solid rgba(255,255,255,.3);background:transparent;position:relative} .menu-nav .msub-pm::before,.menu-nav .msub-pm::after{content:"";position:absolute;left:50%;top:50%;width:15px;height:2.6px;background:#fff;border-radius:2px;transform:translate(-50%,-50%);transition:transform .2s var(--ease),opacity .2s var(--ease)} .menu-nav .msub-pm::after{transform:translate(-50%,-50%) rotate(90deg)} .menu-nav .msub-toggle[aria-expanded="true"] .msub-pm{background:linear-gradient(120deg,#184FCB,#6D28D9 55%,#BE185D);border-color:transparent} .menu-nav .msub-toggle[aria-expanded="true"] .msub-pm::after{opacity:0} .menu-nav .msub{list-style:none;margin:0;padding:0 0 .7rem} .menu-nav .msub[hidden]{display:none} .menu-nav .msub li{border-bottom:0} .menu-nav .msub a{display:flex;align-items:center;gap:.7rem;font-size:1.05rem;font-weight:500;color:var(--muted);padding:.6rem .2rem .6rem 1.3rem;min-height:48px;justify-content:flex-start;text-transform:uppercase;letter-spacing:.03em} .menu-nav .msub a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal-bright);flex:0 0 auto} .menu-nav .msub a:hover{color:#fff} /* ---- Parent-as-link navigation (label link + separate chevron toggle) ------ WAI-ARIA APG "disclosure navigation with top-level links": used automatically for any parent menu item that has a real URL. Parents without a URL keep the single-button disclosure above. */ /* Desktop */ .nav-desktop .has-dropdown.has-link{display:inline-flex;align-items:center;gap:0} .nav-desktop .has-dropdown.has-link>a{padding-right:.4rem} .nav-desktop .nav-dd-caret{gap:0;min-width:34px;padding:.4rem .45rem;justify-content:center} .nav-desktop .nav-dd-caret:hover{background:var(--surface);color:var(--ink)} /* Mobile drawer */ .menu-nav .has-sub.has-link{display:block} .menu-nav .has-sub.has-link>.msub-row{display:flex;align-items:center;gap:.4rem} .menu-nav .has-sub.has-link>.msub-row>a{flex:1 1 auto;min-width:0} .menu-nav .has-sub.has-link .msub-caret{flex:0 0 auto;width:auto;min-width:60px;display:inline-flex;align-items:center;justify-content:center;padding:1.15rem .2rem;min-height:64px;background:none;border:0;color:#fff;cursor:pointer;border-left:1px solid rgba(255,255,255,.12)} .menu-nav .has-sub.has-link .msub-caret:hover{color:var(--teal-bright)} /* ============================================================ MULTI-LEVEL (3rd-level) MENUS Desktop: nested dropdown flies out to the side of its parent item. Mobile: nested accordion nests one indent deeper. ============================================================ */ /* Desktop: a parent item that itself sits inside a dropdown */ .nav-desktop .nav-dropdown .has-dropdown{position:relative;width:100%} .nav-desktop .nav-dropdown .has-dropdown.has-link{display:flex;align-items:center;gap:0} .nav-desktop .nav-dropdown .has-dropdown.has-link>a{flex:1 1 auto;min-width:0} .nav-desktop .nav-dropdown .has-dropdown>.nav-dd-toggle{flex:0 0 auto;min-width:34px;padding:.55rem .45rem;justify-content:center} /* caret inside a submenu points right, and rotates to point down when open */ .nav-desktop .nav-dropdown .has-dropdown>.nav-dd-toggle .dd-caret{transform:rotate(-90deg)} .nav-desktop .nav-dropdown .has-dropdown>.nav-dd-toggle[aria-expanded="true"] .dd-caret{transform:rotate(0deg)} /* the nested submenu itself: flyout to the right, aligned to the parent row */ .nav-desktop .nav-dropdown.nav-dropdown--sub{position:absolute;top:-.4rem;left:calc(100% + .35rem);min-width:230px} /* if the flyout would run past the viewport on narrower desktops, open leftward */ @media (max-width:1280px){ .nav-desktop .nav-dropdown.nav-dropdown--sub{left:auto;right:calc(100% + .35rem)} } /* Mobile: nested (3rd-level) accordion */ .menu-nav .msub .has-sub{border-bottom:0} .menu-nav .msub .has-sub.has-link{display:block} .menu-nav .msub .has-sub.has-link>.msub-row{display:flex;align-items:center;gap:.4rem} .menu-nav .msub .has-sub.has-link>.msub-row>a{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:.7rem; font-size:1.05rem;font-weight:500;color:var(--muted);padding:.6rem .2rem .6rem 1.3rem;min-height:48px; text-transform:uppercase;letter-spacing:.03em;justify-content:flex-start} .menu-nav .msub .has-sub.has-link>.msub-row>a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal-bright);flex:0 0 auto} .menu-nav .msub .has-sub.has-link>.msub-row>a:hover{color:#fff} .menu-nav .msub .msub-caret{flex:0 0 auto;width:auto;min-width:48px;display:inline-flex;align-items:center;justify-content:center; padding:.6rem .2rem;min-height:48px;background:none;border:0;color:var(--muted);cursor:pointer;border-left:1px solid rgba(255,255,255,.12)} .menu-nav .msub .msub-caret:hover{color:#fff} .menu-nav .msub .msub-pm{width:30px;height:30px} .menu-nav .msub .msub-pm::before,.menu-nav .msub .msub-pm::after{width:11px} /* the 3rd-level list, indented deeper under its parent */ .menu-nav .msub .msub{padding:0 0 .5rem} .menu-nav .msub .msub a{padding-left:2.5rem;font-size:0.95rem} @media (max-width:560px){ .header-inner{gap:.8rem} .header-actions{gap:.45rem} .header-actions .btn{font-size:.72rem;padding:.5rem .8rem;letter-spacing:.02em;min-height:44px} } /* When the drawer is open, hide only the header BAR pieces: the brand/logo, the desktop menu and the action buttons (incl. the hamburger). We target these by class and deliberately never hide .site-header, .header-inner or the drawer itself: in the block header the drawer (.menu-overlay) is rendered inside .header-inner, so hiding any ancestor would hide the open drawer too. This leaves the drawer visible with its own single ✕ close control. */ /* The header uses backdrop-filter (frosted glass). A backdrop-filter ancestor traps position:fixed descendants: and in the block header the drawer lives inside .site-header: so the fixed drawer would size to the header instead of the viewport. Neutralise the filter while the drawer is open so it fills the screen. (Harmless for the legacy header, where the drawer sits outside.) */ body.menu-open .site-header{backdrop-filter:none;-webkit-backdrop-filter:none} body.menu-open .brand, body.menu-open .nav-desktop, body.menu-open .header-actions{display:none} /* ===== Fix: remove WordPress flow block-gap between full-width homepage sections ===== */ #main.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; } #main > section, #main > .ribbon { margin-top: 0; margin-bottom: 0; } /* ===== Mobile drawer close button (gradient, matches original design) ===== */ .menu-close{background:linear-gradient(120deg,#184FCB,#6D28D9 55%,#BE185D);border-color:transparent;color:#fff} .menu-close:hover{filter:brightness(1.08);border-color:transparent} /* ===================================================================== Ariade brand mark in the hero. Decorative, and only on theme demo sites: the body class is added when the ariade_branding filter returns true (see functions.php). Neutral sites show no mark. ===================================================================== */ .ariade-brand .hero .hero-copy::before{ content:"";display:block;width:min(330px,74vw);height:64px; margin:0 auto 1.2rem; background:url(../img/ariade-logo.png?v=146) no-repeat center / contain} @media (max-width:781px){ .ariade-brand .hero .hero-copy::before{height:44px;margin-bottom:.9rem} } /* ---- Page hero band (fading pattern, v1.3.11) ------------------- */ .ariade-page-hero, .ariade-sitemap-hero, .ariade-search-hero { position: relative; text-align: center; background: linear-gradient(180deg, #f3f5fb 0%, #f3f5fb 55%, rgba(243, 245, 251, 0) 100%); } .ariade-page-hero::before, .ariade-sitemap-hero::before, .ariade-search-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200'%3E%3Cpath d='M-20 60 C 60 10, 120 110, 200 60 S 340 10, 360 60' fill='none' stroke='%23534ab7' stroke-opacity='0.10' stroke-width='2.5'/%3E%3Cpath d='M-20 150 C 80 100, 140 200, 220 150 S 340 100, 360 150' fill='none' stroke='%230e1b36' stroke-opacity='0.07' stroke-width='2.5'/%3E%3Ccircle cx='200' cy='60' r='4' fill='%23d4537e' fill-opacity='0.25'/%3E%3C/svg%3E"); -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 96%); mask-image: linear-gradient(to bottom, #000 40%, transparent 96%); } .ariade-page-hero > *, .ariade-sitemap-hero__inner, .ariade-search-hero__inner { position: relative; z-index: 1; } .ariade-page-hero .wp-block-post-excerpt, .ariade-page-hero p { max-width: 52ch; margin-left: auto; margin-right: auto; } .ariade-page-hero .wp-block-post-excerpt__more-text, .ariade-page-hero .wp-block-post-excerpt__more-link { display: none; } /* Slimmer site header (v1.3.11): override the shared .wrap padding. */ .site-header .header-inner { padding-top: clamp(0.9rem, 1.6vw, 1.4rem); padding-bottom: clamp(0.9rem, 1.6vw, 1.4rem); } /* Remove the root block-gap between the site header and main (v1.3.12). */ .wp-site-blocks > main { margin-block-start: 0; } .ariade-view-toggle{display:flex;gap:.5rem;justify-content:flex-end;margin-bottom:1.25rem} .ariade-view-toggle button{display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-size:.85rem;font-weight:700;color:#0e1b36;background:#fff;border:1.5px solid rgba(14,27,54,.25);border-radius:999px;padding:.45rem 1rem;cursor:pointer} .ariade-view-toggle button[aria-pressed="true"]{background:#0e1b36;color:#fff;border-color:#0e1b36} .ariade-view-toggle button:focus-visible{outline:2.4px solid #0e1b36;outline-offset:2px} .wp-block-query-pagination{margin-top:2rem;font-weight:700} .wp-block-query-pagination a,.wp-block-query-pagination .page-numbers{border:1.5px solid rgba(14,27,54,.25);border-radius:10px;padding:.4rem .8rem;text-decoration:none;color:#0e1b36} .wp-block-query-pagination .page-numbers.current{background:#0e1b36;color:#fff;border-color:#0e1b36} .wp-block-query-pagination a:hover,.wp-block-query-pagination a:focus-visible{background:#0e1b36;color:#fff;border-color:#0e1b36} .wp-block-query-pagination a:focus-visible{outline:2.4px solid #0e1b36;outline-offset:2px} /* ---- Content heading rhythm: air before, tight after (v1.4.9) --- */ main .wp-block-post-content h2{margin-block-start:2.4rem;margin-block-end:0} main .wp-block-post-content h2:first-child{margin-block-start:0} main .wp-block-post-content h2 + p, main .wp-block-post-content h2 + ul, main .wp-block-post-content h2 + ol, main .wp-block-post-content h2 + figure{margin-block-start:.65rem} main .wp-block-post-content h3{margin-block-start:1.8rem;margin-block-end:0} main .wp-block-post-content h3 + p, main .wp-block-post-content h3 + ul, main .wp-block-post-content h3 + ol{margin-block-start:.55rem} main > h2.wp-block-heading + .wp-block-post-content{margin-block-start:.65rem} /* Portfolio single: prev/next side by side (v1.4.10). */ .single-portfolio main .ariade-post-nav.ariade-post-nav{flex-direction:row;flex-wrap:wrap} .single-portfolio .ariade-post-nav .wp-block-post-navigation-link{flex:1 1 46%;width:auto} @media (max-width:640px){ .single-portfolio .ariade-post-nav .wp-block-post-navigation-link{flex-basis:100%} } /* ---- Hero sub-line: larger lead text under every H1 (v1.5.1) ---- */ .ariade-page-hero p,.ariade-page-hero .wp-block-post-excerpt p{font-size:1.35rem;line-height:1.55} /* ================================================================ INNER-PAGE HERO TITLE: one control for every inner page. Every inner-page title reads its size from --ariade-page-title-size: the four single-post layouts (aurora / editorial / split / cover) are wired to it inline above; the page & archive hero title and the Accessible Events banner title are wired to it here. Each falls back to the value it uses today, so the theme looks identical until a site DEFINES the variable: then every inner-page title matches at once. Set it once on a site (child theme style.css or Global Styles → CSS), the front page is never affected because it has no hero title block: :root{ --ariade-page-title-size: clamp(1.6rem, 4.8vw, 2.3rem); } ================================================================ */ .ariade-page-hero .wp-block-post-title, .ariade-page-hero .wp-block-query-title{ font-size: var(--ariade-page-title-size, var(--wp--preset--font-size--xx-large)) !important; font-weight: 700; } .ae-ebanner .ae-ebanner__title{ font-size: var(--ariade-page-title-size, clamp(1.9rem, 4.8vw, 2.7rem)) !important; font-weight: 700; } /* ================================================================ INNER-PAGE HERO PADDING: one pair of controls for every hero (v1.4.68). Companion to --ariade-page-title-size above: every inner-page hero reads its top clearance from --ariade-hero-pad-top, and the band-style heroes also read their depth below the text from --ariade-hero-pad-bottom. Each falls back to the exact value it uses today, so the theme is visually identical until a site DEFINES the variables: then every hero shares one vertical rhythm at once, with no per-page CSS. Set once per site (child theme style.css or Appearance > Editor > Styles > Additional CSS): :root{ --ariade-hero-pad-top: 80px; --ariade-hero-pad-bottom: 20px; } Wired here: the page / archive / blog hero band (and its slimmer checkout variant). Wired at their own rules further down: the four single-post layouts (aurora / editorial / split / cover) and the WooCommerce cart title band. The front page is never affected (its hero is its own design). Because this is a stylesheet-level control (it out-ranks the templates' inline padding), it also applies where a template was customised in the Site Editor: no "Clear customizations" step is needed for it to take effect. ================================================================ */ .ariade-page-hero{ padding-top: var(--ariade-hero-pad-top, var(--wp--preset--spacing--60)) !important; padding-bottom: var(--ariade-hero-pad-bottom, var(--wp--preset--spacing--60)) !important; } /* Checkout keeps its deliberately slimmer band as the fallback. */ .page-template-page-checkout .ariade-page-hero{ padding-top: var(--ariade-hero-pad-top, var(--wp--preset--spacing--50)) !important; padding-bottom: var(--ariade-hero-pad-bottom, var(--wp--preset--spacing--50)) !important; } /* screen-reader-only utility (used by star ratings etc.) */ .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .single .wp-block-post-content>p:first-child{font-size:1.16rem;color:#0e1b36} .single .wp-block-post-content blockquote,.single .wp-block-post-content .wp-block-pullquote{border:0;border-left:4px solid #d4537e;background:#fdf3f7;border-radius:0 12px 12px 0;padding:1rem 1.2rem;margin:1.4rem 0;font-style:italic;color:#a52752;text-align:left} .single .wp-block-post-content .wp-block-pullquote blockquote{border:0;background:none;padding:0;margin:0} /* Footer about text: small italic (address-like) */ .site-footer .footer-brand p{font-size:.82rem;font-style:italic;line-height:1.6} /* Content headings: calmer weight on pages and posts (v1.6.2). */ main .wp-block-post-content h2,main .wp-block-post-content h3{font-weight:600} /* ================= Mailchimp for WordPress (mc4wp) integration ================= */ /* The theme footer ships a visual placeholder newsletter form. Users install the free Mailchimp for WordPress plugin (wordpress.org/plugins/mailchimp-for-wp/), create a form there, then replace the placeholder in the footer template part with the [mc4wp_form id="X"] shortcode. This block styles that shortcode so it inherits the Option C floating gradient card visual: white input, dark navy submit button, uppercase eyebrow label, white consent line. */ .site-footer .mc4wp-form{display:block;margin:0} .site-footer .mc4wp-form-fields{display:block} .site-footer .mc4wp-form p{margin:0 0 .6rem;display:block} .site-footer .mc4wp-form p:last-of-type{margin-bottom:0} .site-footer .mc4wp-form label{display:block;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;color:rgba(255,255,255,.9);margin:0 0 .45rem} .site-footer .mc4wp-form input[type="email"],.site-footer .mc4wp-form input[type="text"]{width:100%;box-sizing:border-box;font-family:var(--body-font);font-size:.95rem;padding:.8rem 1rem;border-radius:11px;border:0;background:#fff;color:#0e1b36;transition:box-shadow .15s var(--ease)} .site-footer .mc4wp-form input::placeholder{color:#64748b} .site-footer .mc4wp-form input:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.45)} .site-footer .mc4wp-form input[type="submit"]{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;background:#0e1b36;color:#fff;border:0;border-radius:11px;padding:.82rem 1.4rem;cursor:pointer;transition:background .15s var(--ease),transform .15s var(--ease);margin-top:.5rem} .site-footer .mc4wp-form input[type="submit"]:hover{background:#534ab7;transform:translateY(-1px)} .site-footer .mc4wp-form input[type="submit"]:focus-visible{outline:2px solid #0e1b36;outline-offset:3px} .site-footer .mc4wp-response,.site-footer .mc4wp-alert{color:rgba(255,255,255,.9);font-size:.85rem;margin-top:.6rem;line-height:1.5} .site-footer .mc4wp-response .mc4wp-error{color:#fecaca} .site-footer .mc4wp-response .mc4wp-success{color:#a7f3d0} @media (prefers-reduced-motion:reduce){ .site-footer .mc4wp-form input[type="submit"]{transition:none} .site-footer .mc4wp-form input[type="submit"]:hover{transform:none} } /* Editor-only guidance blocks: visible in the Site Editor and page editor, hidden on the public front end. Themes ship these to help site owners find the "replace me with a form plugin" slots without cluttering the visitor UI. */ .ariade-editor-note{display:none} .wp-admin .ariade-editor-note,.block-editor-page .ariade-editor-note,body.editor-styles-wrapper .ariade-editor-note{display:block;background:#f6f5fd;border-left:3px solid #534ab7;border-radius:6px;padding:.75rem 1rem;margin:.75rem 0;font-size:.85rem;line-height:1.5;color:#3c3489;font-family:var(--body-font)} .wp-admin .ariade-editor-note strong,.block-editor-page .ariade-editor-note strong{color:#26215c} .wp-admin .ariade-editor-note a,.block-editor-page .ariade-editor-note a{color:#534ab7;text-decoration:underline} /* ===== Breadcrumbs (Rank Math data, Ariade semantic markup) ===== ariade_breadcrumb_markup() renders a real accessible list from Rank Math's crumb data: