/* Shinobi Productions — shared button interactions. Every clickable control outside the top navigation gets the same response: a small scale and the red glow first used on the footer social icons. The top menu is deliberately excluded; a bar that pulses under the cursor on every item reads as noise. Loaded last in , after each page's own styles, so it adds to them rather than being overridden. The glow rules exclude the nav with :not(.nav *); the top menu has its own scale-only block below. */ :root { --glow: 0 0 0 3px rgba(255,0,37,.16), 0 0 24px rgba(255,0,37,.55); --glow-strong: 0 0 0 3px rgba(255,0,37,.2), 0 0 30px rgba(255,0,37,.65); } /* ---- motion ----------------------------------------------------------- */ .btn:not(.nav *), .filter-row button, .pain-tab, .cur-btn, .meet-tab, .quotes-nav button, .cs-go { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease; } /* ---- solid red buttons: keep the fill, add the glow ------------------- */ .btn-red:not(.nav *):hover, .btn-red:not(.nav *):focus-visible, .btn:not(.btn-ghost):not(.nav *):hover, .btn:not(.btn-ghost):not(.nav *):focus-visible { transform: scale(1.04); box-shadow: var(--glow-strong); } /* ---- outline and dark buttons: tint, red ring, glow ------------------- */ .btn-ghost:not(.nav *):hover, .btn-ghost:not(.nav *):focus-visible, .filter-row button:hover, .filter-row button:focus-visible, .pain-tab:hover, .pain-tab:focus-visible, .meet-tab:hover, .meet-tab:focus-visible, .cur-btn:hover, .cur-btn:focus-visible { transform: scale(1.04); border-color: rgba(255,0,37,.75); background-color: rgba(255,0,37,.10); box-shadow: var(--glow); color: #fff; } /* Active pills are already red; hovering them only adds the glow. */ .filter-row button.active:hover, .pain-tab.active:hover, .meet-tab.active:hover, .cur-btn.active:hover { background-image: linear-gradient(170deg, var(--red), var(--red-dark)); box-shadow: var(--glow-strong); } .quotes-nav button:hover, .quotes-nav button:focus-visible { transform: scale(1.08); } /* Carousel arrows already scale; they gain the glow. */ .carousel-btn:hover, .carousel-btn:focus-visible { box-shadow: var(--glow); } /* Case-study tiles: the pill inside glows when its card is hovered. */ .cs-card:hover .cs-go, .cs-card:focus-visible .cs-go { box-shadow: var(--glow-strong); } /* Play buttons keep their own centring transform and scale; add the glow. */ .video-card:hover .video-play, .rail .cre:hover .play, .variation-card:hover .variation-play, .work-card:hover .play-small { box-shadow: var(--glow-strong); } /* ---- top menu: scale only --------------------------------------------- */ /* The menu gets a small grow under the pointer so a click is confirmed before it lands, but no glow: a bar that lights up on every item reads as noise. Menu items are flex children, so they take a transform as they are. */ .nav-links > a, .lang-toggle button { transition: transform .18s ease, color .18s ease, background-color .18s ease; } .nav-links > a:not(.btn):hover, .nav-links > a:not(.btn):focus-visible, .lang-toggle button:hover, .lang-toggle button:focus-visible { transform: scale(1.08); } .nav-links > a.btn:hover, .nav-links > a.btn:focus-visible { transform: scale(1.05); } /* ---- phones ------------------------------------------------------------ */ /* Slightly smaller buttons, so a pair fits on one line instead of breaking a row for a single word. Touch targets stay above 44px. */ @media (max-width: 480px) { .btn { min-height: 46px; padding-left: 16px; padding-right: 16px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .btn:not(.nav *), .filter-row button, .pain-tab, .cur-btn, .meet-tab, .quotes-nav button, .carousel-btn, .nav-links > a, .lang-toggle button { transform: none !important; } } /* ---- top bar on phones ------------------------------------------------- Stacked, the bar cost about 380px before any content: logo, four links, the call button and the language switch each on their own row. Two rows now — logo, call button and switch, then the links — on every page that uses it. */ @media (max-width: 680px) { .nav { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; } .nav > a:first-child { order: 1; } .nav img { width: 124px; } .nav-links { display: contents; } .nav-links > a.btn { order: 2; margin-inline-start: auto; min-height: 38px; padding: 0 11px; font-size: 11px; letter-spacing: .02em; } .nav .lang-toggle { order: 3; padding: 3px; } .nav .lang-toggle button { min-height: 30px; min-width: 32px; padding: 0 8px; font-size: 12px; } /* A zero-height flex item that fills the line, so the links start a new row under the logo instead of wrapping one at a time. */ .nav::after { content: ""; order: 4; width: 100%; height: 0; } .nav-links > a:not(.btn) { order: 5; flex: 1 1 auto; text-align: center; font-size: 13px; } } /* Tablets: there is room for one row, so the bar keeps its desktop shape instead of the stacked phone one. */ @media (min-width: 681px) and (max-width: 980px) { .nav { flex-direction: row; flex-wrap: wrap; align-items: center; height: auto; gap: 12px 20px; padding: 14px 20px; } .nav-links { flex-wrap: wrap; } } /* Small phones: the logo, call button and switch together outgrew a 360px screen by a few pixels and the switch dropped to a row of its own. */ @media (max-width: 400px) { .nav { gap: 8px; padding: 10px 12px; } .nav img { width: 106px; } .nav-links > a.btn { padding: 0 9px; font-size: 10.5px; } .nav .lang-toggle button { min-width: 30px; padding: 0 6px; } .nav-links > a:not(.btn) { font-size: 12.5px; } } /* ---- phones: the content column sits on one centre axis --------------- Ran's call, site-wide. Centring only

left the kickers, the bold lines inside cards and the smaller headings hugging the left, which read as a mistake next to centred copy — so the column itself is centred and the exceptions are named below. Rows where an icon, a bullet, a table column or a field label sets the line keep their own alignment: centring those breaks the column they stand in. */ @media (max-width: 680px) { .page, main { text-align: center; } .bank-head, .section-head { justify-content: center; } .package li, .package ul, .cut-compare, .cut-compare th, .cut-compare td, .contact-form, .contact-form label, .contact-form input, .contact-form select, .contact-form textarea, .form-note, .site-footer, .footer-base, .a11y-menu, .a11y-menu button { text-align: start; } }