/* ============================================================ RHINO AUTOMATIONS — Design System Bold & confident · light scheme · teal accent · big type ============================================================ */ /* Fonts are loaded non-render-blocking via in each page (see the loadCSS pattern there) — NOT @import, which would block first paint. */ :root{ /* ---- Color ---- */ --paper: #F6F7F5; /* page background, warm-cool off white */ --surface: #FFFFFF; /* cards */ --surface-2: #EEF1EF; /* subtle tinted surface */ --ink: #0E211E; /* near-black, teal-tinted */ --ink-2: #2C3E3A; /* strong body text */ --muted: #5C6B67; /* secondary text */ --faint: #616C68; /* tertiary / captions (darkened for WCAG AA) */ --line: #E0E4E1; /* hairline borders */ --line-strong: #C9D0CD; --teal: #0D9488; /* primary accent */ --teal-600: #0F766E; --teal-700: #115E56; --deep: #062B28; /* dark section bg */ --deep-2: #0A3A35; --mint: #D7EEEA; /* light teal wash */ --mint-2: #EAF6F3; /* ---- Type ---- */ --display: 'Archivo Expanded', 'Archivo', sans-serif; --sans: 'Archivo', system-ui, sans-serif; /* ---- Radius / shadow ---- */ --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(14,33,30,.06), 0 2px 8px rgba(14,33,30,.04); --shadow: 0 4px 14px rgba(14,33,30,.07), 0 18px 40px -18px rgba(14,33,30,.18); --shadow-lg: 0 10px 30px rgba(14,33,30,.10), 0 40px 80px -28px rgba(14,33,30,.30); /* ---- Layout ---- */ --maxw: 1200px; --gutter: clamp(20px, 5vw, 56px); --nav-h: 76px; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } /* Accessibility: skip-to-content link (SEO + a11y) */ .skip-link{ position:absolute; left:-9999px; top:0; z-index:1000; background:var(--ink); color:#fff; padding:.7em 1.1em; border-radius:0 0 var(--r) 0; font-weight:600; font-size:.95rem; } .skip-link:focus{ left:0; outline:2px solid var(--teal); } /* Accessibility: clear keyboard focus indicator (shows for keyboard users only via :focus-visible — invisible to mouse/touch, so no visual change for pointer users). Meets WCAG 2.4.7 Focus Visible. */ a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .chip:focus-visible, .tab:focus-visible, input[type=range]:focus-visible{ outline:3px solid var(--teal-700); outline-offset:2px; border-radius:4px; } /* keep the SVG service nodes' focus ring visible for keyboard users */ .viz-stage .node:focus-visible{ outline:3px solid var(--teal-700); outline-offset:3px; } @media (prefers-contrast: more){ :root{ --line:#9aa6a2; --line-strong:#7d8b86; --muted:#3f4d49; } } body{ margin:0; font-family:var(--sans); background:var(--paper); color:var(--ink); font-size:1.0625rem; /* 17px at default root; scales with the a11y text-size control */ line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; } ::selection{ background:var(--teal); color:#fff; } /* ---------- Typography ---------- */ .display, h1, h2, h3{ font-family:var(--display); line-height:1.02; letter-spacing:-.02em; margin:0; font-weight:700; } h1{ font-size:clamp(2.6rem, 6.4vw, 5rem); } h2{ font-size:clamp(2rem, 4.4vw, 3.4rem); } h3{ font-size:clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing:-.015em; } p{ margin:0; } .lead{ font-size:clamp(1.1rem,1.6vw,1.35rem); color:var(--ink-2); line-height:1.5; } .eyebrow{ font-family:var(--sans); font-weight:600; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-600); display:inline-flex; align-items:center; gap:.6em; } .eyebrow::before{ content:""; width:26px; height:2px; background:var(--teal); display:inline-block; } .eyebrow.center{ justify-content:center; } /* ---------- Layout helpers ---------- */ .wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .wrap-wide{ max-width:1340px; margin-inline:auto; padding-inline:var(--gutter); } section{ padding-block:clamp(64px, 9vw, 130px); } .section-tight{ padding-block:clamp(48px,6vw,84px); } .center{ text-align:center; } .stack-sm > * + *{ margin-top:.7rem; } .stack > * + *{ margin-top:1.2rem; } .grid{ display:grid; gap:clamp(18px,2.4vw,30px); } .cols-2{ grid-template-columns:repeat(2,1fr); } .cols-3{ grid-template-columns:repeat(3,1fr); } .cols-4{ grid-template-columns:repeat(4,1fr); } @media(max-width:900px){ .cols-3,.cols-4{ grid-template-columns:repeat(2,1fr);} } @media(max-width:620px){ .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr;} } .dark{ background:var(--deep); color:#E7F0EE; } .dark h1,.dark h2,.dark h3{ color:#fff; } .dark .lead{ color:#B7CCC8; } .dark .eyebrow{ color:#5FD0C2; } .dark .eyebrow::before{ background:#5FD0C2; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--sans); font-weight:600; font-size:1rem; padding:.85em 1.4em; border-radius:var(--r-pill); border:1.5px solid transparent; transition:.2s ease; white-space:nowrap; } .btn svg{ width:1.1em; height:1.1em; transition:transform .2s ease; } .btn-primary{ background:var(--teal-600); color:#fff; box-shadow:0 8px 22px -8px rgba(13,148,136,.6); } .btn-primary:hover{ background:var(--teal-700); transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(13,148,136,.7); } .btn-primary:hover svg{ transform:translateX(3px); } .btn-ink{ background:var(--ink); color:#fff; } .btn-ink:hover{ background:#162e2a; transform:translateY(-2px); } .btn-ghost{ background:transparent; color:var(--ink); border-color:#6E807A; } .btn-ghost:hover{ border-color:var(--ink); background:var(--ink); color:#fff; } .dark .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.3); } .dark .btn-ghost:hover{ background:#fff; color:var(--deep); border-color:#fff; } .btn-lg{ font-size:1.06rem; padding:1.02em 1.7em; } .link-arrow{ display:inline-flex; align-items:center; gap:.4em; font-weight:600; color:var(--teal-600); } .link-arrow svg{ width:1.05em; height:1.05em; transition:transform .2s ease; } .link-arrow:hover svg{ transform:translateX(4px); } /* ---------- Cards ---------- */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,2.6vw,32px); transition:.25s ease; } .card:hover{ border-color:var(--line-strong); box-shadow:var(--shadow); transform:translateY(-3px); } .tag{ display:inline-flex; align-items:center; gap:.45em; font-size:.8rem; font-weight:600; letter-spacing:.02em; padding:.32em .8em; border-radius:var(--r-pill); background:var(--mint-2); color:var(--teal-700); border:1px solid var(--mint); } /* ---------- Header / Nav ---------- */ .site-header{ position:sticky; top:0; z-index:200; background:rgba(246,247,245,.82); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .25s, background .25s; } .site-header.scrolled{ border-color:var(--line); background:rgba(246,247,245,.92); } .nav{ height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:24px; } .nav-links{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; } .nav-links > li{ position:relative; } .nav-link{ display:inline-flex; align-items:center; gap:.35em; padding:.6em .9em; border-radius:var(--r-pill); font-weight:500; color:var(--ink-2); transition:.18s; } .nav-link:hover, .nav-link.active{ color:var(--ink); background:rgba(13,148,136,.09); } .nav-link .chev{ width:.85em; height:.85em; transition:transform .25s; } .has-mega.open .nav-link .chev{ transform:rotate(180deg); } .nav-cta{ display:flex; align-items:center; gap:10px; } /* Logo */ .logo{ display:inline-flex; align-items:center; gap:11px; font-family:var(--display); font-weight:800; font-size:1.35rem; letter-spacing:-.02em; color:var(--ink); white-space:nowrap; flex:none; } .logo .mark{ width:38px; height:38px; flex:none; } .logo .rd-rhino{ color:var(--ink); } .logo .rd-dev{ color:var(--teal); } /* Badge-free header/footer logo lockup (sitewide, matches home) */ /* sized for the longer "Rhino Automations" wordmark */ .site-header .logo{ font-size:clamp(1.2rem, 1.3vw + .5rem, 1.62rem); gap:11px; align-items:center; } .footer-brand .logo{ font-size:1.34rem; gap:11px; align-items:center; } .site-header .logo .mark, .footer-brand .logo .mark{ display:block; } /* the rhino art sits low in its viewBox — lift the mark to optically center with the text */ .site-header .logo .mark{ position:relative; top:-5px; } .footer-brand .logo .mark{ position:relative; top:-4px; } @media(max-width:560px){ .site-header .logo{ font-size:1.18rem; gap:9px; } .site-header .logo .mark{ width:44px; height:44px; top:-3px; } } @media(max-width:380px){ .site-header .logo{ font-size:1.05rem; } .site-header .logo .mark{ width:38px; height:38px; } } /* Mega menu */ .mega{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(8px); width:min(880px, 92vw); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:26px; opacity:0; visibility:hidden; transition:.22s ease; z-index:210; } .has-mega.open .mega{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } .mega-grid{ display:grid; grid-template-columns:repeat(2,1fr) 1fr; gap:8px 26px; } .mega-col .mega-col-title{ font-family:var(--sans); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0 0 8px; font-weight:600; } .mega-item{ display:flex; gap:11px; padding:9px 10px; border-radius:var(--r); transition:.16s; } .mega-item:hover{ background:var(--mint-2); } .mega-item .mi-ico{ width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--mint-2); color:var(--teal-600); } .mega-item:hover .mi-ico{ background:var(--teal); color:#fff; } .mega-item .mi-ico svg{ width:16px; height:16px; } .mega-item b{ display:block; font-size:.95rem; font-weight:600; color:var(--ink); line-height:1.2; } .mega-item span{ font-size:.82rem; color:var(--muted); line-height:1.3; } .mega-feature{ background:linear-gradient(160deg,var(--deep),var(--deep-2)); border-radius:var(--r); padding:20px; color:#fff; display:flex; flex-direction:column; justify-content:space-between; } .mega-feature .tag{ background:rgba(95,208,194,.16); color:#9FE7DC; border-color:transparent; align-self:flex-start; } .mega-feature .mega-feature-title{ font-family:var(--display); font-size:1.15rem; margin:14px 0 6px; line-height:1.1; } .mega-feature p{ font-size:.85rem; color:#A9C4BF; } /* 4-column mega + click-to-open sub-service dropdowns */ .mega.mega-4{ width:min(1060px,95vw); } .mega-grid-4{ display:grid; grid-template-columns:1.05fr 2.25fr 1.05fr; gap:6px 26px; } @media(max-width:980px){ .mega-grid-4{ grid-template-columns:1fr 1.6fr; } } .mega-col-wide .mega-wide-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px 14px; } @media(max-width:560px){ .mega-col-wide .mega-wide-grid{ grid-template-columns:1fr; } } .mega-sublist{ list-style:none; margin:4px 0 0; padding:0; } .mega-sublist a{ display:block; padding:6px 10px; border-radius:var(--r); font-size:.86rem; font-weight:500; color:var(--ink-2); } .mega-sublist a:hover{ background:var(--mint-2); color:var(--teal-700); } .mega-more{ border-top:1px solid var(--line); margin-top:8px; padding-top:6px; } .mega-more-toggle{ width:100%; background:none; border:none; cursor:pointer; text-align:left; font-family:inherit; } .mega-more-toggle .mm-chev{ width:16px; height:16px; flex:none; margin-left:auto; color:var(--muted); transition:transform .2s ease; } .mega-more.open .mega-more-toggle .mm-chev{ transform:rotate(180deg); } .mega-more.open .mega-more-toggle{ background:var(--mint-2); } .mega-more-panel{ display:none; padding:4px 0 2px; } .mega-more.open .mega-more-panel{ display:block; animation:fadeUp .25s ease; } .mega-more-panel.cols2{ columns:2; column-gap:14px; } .mega-more-panel a{ display:block; padding:7px 10px 7px 42px; border-radius:var(--r); font-size:.86rem; font-weight:600; color:var(--ink-2); line-height:1.25; break-inside:avoid; } .mega-more-panel a:hover{ background:var(--mint-2); color:var(--teal-700); } .mega-more-panel .mm-label{ font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:700; margin:8px 0 2px 12px; break-inside:avoid; } .mega-more-panel .mm-label:first-child{ margin-top:2px; } /* Directory-style mega link lists */ .mega-col-title a{ color:inherit; text-decoration:none; } .mega-col-title a:hover{ color:var(--teal-600); } .mega-col-title.mega-col-title-ic{ display:flex; align-items:center; gap:7px; } .mega-col-title .mct-ic{ display:inline-flex; color:var(--teal-600); } .mega-col-title .mct-ic svg{ width:17px; height:17px; } .mega-links{ list-style:none; margin:9px 0 0; padding:0; } .mega-links a{ display:flex; align-items:center; gap:11px; padding:9px 2px; font-size:.9rem; color:var(--ink-2); font-weight:500; border-bottom:1px solid var(--line); transition:color .14s ease, padding .14s ease; } .mega-links li:last-child a{ border-bottom:none; } .mega-links a:hover{ color:var(--teal-700); padding-left:6px; } .mega-links .ml-ico{ width:22px; height:22px; flex:none; display:grid; place-items:center; color:var(--teal-600); } .mega-links .ml-ico svg{ width:18px; height:18px; } .mega-links a:hover .ml-ico{ color:var(--teal-700); } /* Prominent mega column headers */ .mega-4 .mega-col-title{ font-family:var(--display); font-weight:800; font-size:1.08rem; letter-spacing:0; text-transform:none; color:var(--ink); margin:0 0 4px; } .mega-4 .mega-col-title a{ color:var(--ink); } .mega-4 .mega-col-title a:hover{ color:var(--teal-700); } .mega-4 .mega-col-title .mct-ic{ color:var(--teal-600); } .mega-4 .mega-col-title .mct-ic svg{ width:21px; height:21px; } .mega-4 .mega-links{ margin-top:7px; } /* Tabbed mega menu */ .mega.mega-tabbed{ width:min(900px,95vw); padding:0; overflow:hidden; } .mega-tabwrap{ display:grid; grid-template-columns:238px 1fr; min-height:344px; } .mega-tabnav{ background:linear-gradient(165deg,var(--deep),var(--deep-2)); border-right:1px solid var(--line); padding:16px 12px; display:flex; flex-direction:column; gap:3px; } .mega-tabnav-title{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; font-weight:700; margin:6px 10px 9px; } .mega-tab{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:11px 12px; border-radius:var(--r); font-family:inherit; font-size:.96rem; font-weight:600; color:#fff; text-decoration:none; transition:background .14s ease, color .14s ease; } .mega-tab .mt-ico{ width:22px; height:22px; flex:none; display:grid; place-items:center; color:#5FD0C2; } .mega-tab .mt-ico svg{ width:19px; height:19px; } .mega-tab .mt-arrow{ width:16px; height:16px; margin-left:auto; opacity:0; transform:translateX(-4px); transition:.16s ease; color:#9FE7DC; } .mega-tab:hover, .mega-tab.active{ background:rgba(255,255,255,.1); color:#fff; } .mega-tab.active .mt-arrow{ opacity:1; transform:none; } .mega-tab-all{ margin-top:auto; display:flex; align-items:center; gap:8px; padding:12px; font-weight:700; font-size:.88rem; color:#fff; text-decoration:none; border-top:1px solid rgba(255,255,255,.12); } .mega-tab-all svg{ width:16px; height:16px; } .mega-tab-all:hover{ gap:11px; } .mega-tabpanels{ position:relative; padding:26px 28px; overflow:hidden; } .mega-tabpanel{ display:none; } .mega-tabpanel.active{ display:block; animation:mtpfade .22s ease; } @keyframes mtpfade{ from{ opacity:0; } to{ opacity:1; } } .mtp-sub{ margin:18px 0 0; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:700; padding-top:2px; } .mtp-head h3{ font-family:var(--display); font-weight:800; font-size:1.3rem; } .mtp-head h3 a{ color:var(--ink); } .mtp-head h3 a:hover{ color:var(--teal-700); } .mtp-head p{ color:var(--muted); margin-top:4px; font-size:.92rem; max-width:48ch; } .mega-grid-links{ list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 24px; position:relative; z-index:1; } .mega-grid-links a{ display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid var(--line); color:var(--ink-2); font-size:.88rem; font-weight:500; transition:color .14s ease, padding .14s ease; } .mega-grid-links a:hover{ color:var(--teal-700); padding-left:5px; } .mega-grid-links .gl-ico{ width:20px; height:20px; flex:none; display:grid; place-items:center; color:var(--teal-600); } .mega-grid-links .gl-ico svg{ width:17px; height:17px; } .mega-grid-links a:hover .gl-ico{ color:var(--teal-700); } .mtp-bg{ position:absolute; right:24px; bottom:22px; width:120px; height:120px; color:var(--teal); opacity:.06; pointer-events:none; z-index:0; } .mtp-bg svg{ width:100%; height:100%; } /* Mobile nested "More AI services" disclosure */ .m-sub details.m-sub-more{ border-left:2px solid var(--line); margin-left:2px; } .m-sub details.m-sub-more summary{ display:flex; align-items:center; gap:8px; list-style:none; cursor:pointer; padding:11px 2px 11px 14px; color:var(--muted); font-weight:600; } .m-sub details.m-sub-more summary::-webkit-details-marker{ display:none; } .m-sub details.m-sub-more summary::after{ content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .2s ease; } .m-sub details.m-sub-more[open] summary::after{ transform:rotate(-135deg); } .m-sub details.m-sub-more a{ padding-left:28px; border-left:none; margin-left:0; } /* AI page: linked sub-service list (replaces the big card grid) */ .ai-sublist{ list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px 26px; } @media(max-width:760px){ .ai-sublist{ grid-template-columns:1fr; } } .ai-sublist a{ display:flex; align-items:flex-start; gap:13px; padding:15px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); transition:.16s ease; } .ai-sublist a:hover{ border-color:var(--teal); transform:translateY(-2px); box-shadow:var(--shadow-sm); } .ai-sublist .si{ width:36px; height:36px; flex:none; border-radius:9px; background:var(--mint-2); color:var(--teal-600); display:grid; place-items:center; border:1px solid var(--mint); } .ai-sublist .si svg{ width:19px; height:19px; } .ai-sublist b{ display:block; color:var(--ink); font-size:.98rem; line-height:1.25; } .ai-sublist span.d{ display:block; color:var(--muted); font-size:.85rem; margin-top:3px; line-height:1.3; } .ai-sublist a:hover .si{ background:var(--teal); color:#fff; border-color:var(--teal); } /* Mobile nav */ .hamburger{ display:none; width:44px; height:44px; border:1px solid var(--line-strong); border-radius:12px; background:var(--surface); align-items:center; justify-content:center; flex-direction:column; gap:5px; } .hamburger span{ width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.25s; } .mobile-menu{ position:fixed; inset:var(--nav-h) 0 0; background:var(--paper); z-index:190; transform:translateX(100%); transition:transform .3s ease; overflow-y:auto; padding:24px var(--gutter) 60px; } .mobile-menu.open{ transform:translateX(0); } .m-group{ border-bottom:1px solid var(--line); } .m-top{ display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; padding:18px 2px; font-family:var(--display); font-weight:700; font-size:1.25rem; color:var(--ink); } .m-top .chev{ width:18px; height:18px; transition:transform .25s; color:var(--muted); } .m-group.open .m-top .chev{ transform:rotate(180deg); } .m-sub{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; } .m-group.open .m-sub{ grid-template-rows:1fr; } .m-sub-inner{ overflow:hidden; } .m-sub a{ display:block; padding:11px 2px 11px 14px; color:var(--muted); font-weight:500; border-left:2px solid var(--line); margin-left:2px; } .m-sub a:hover{ color:var(--teal-600); border-color:var(--teal); } .m-cta{ margin-top:26px; display:flex; flex-direction:column; gap:12px; } @media(max-width:980px){ .nav-links, .nav-cta .btn-ghost{ display:none; } .hamburger{ display:flex; } } /* ---------- Footer ---------- */ .site-footer{ background:var(--deep); color:#A9C4BF; padding-block:clamp(54px,7vw,88px) 34px; } .site-footer .footer-col-title{ font-family:var(--sans); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:#6E8C87; margin:0 0 16px; font-weight:600; } .footer-grid{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:36px 24px; } @media(max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } } @media(max-width:520px){ .footer-grid{ grid-template-columns:1fr; } } .footer-grid a{ display:block; padding:5px 0; color:#A9C4BF; font-size:.95rem; transition:.15s; } .footer-grid a:hover{ color:#fff; } .footer-contact{ margin-top:18px; } .footer-contact a{ color:#A9C4BF; } .footer-brand .logo{ color:#fff; } .footer-brand .logo .rd-rhino{ color:#fff; } .footer-brand .logo .rd-dev{ color:#5FD0C2; } .footer-note{ color:#cfe; font-size:.95rem; max-width:30ch; margin-top:14px; color:#8FAAA5; line-height:1.5; } .footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:48px; padding-top:24px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.85rem; color:#6E8C87; } /* ---------- Reveal on scroll ---------- */ [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); } [data-reveal].in{ opacity:1; transform:none; } [data-reveal][data-delay="1"]{ transition-delay:.08s; } [data-reveal][data-delay="2"]{ transition-delay:.16s; } [data-reveal][data-delay="3"]{ transition-delay:.24s; } [data-reveal][data-delay="4"]{ transition-delay:.32s; } @media(prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } } /* ---------- Forms ---------- */ .field{ display:flex; flex-direction:column; gap:7px; } .field label{ font-weight:600; font-size:.92rem; color:var(--ink-2); } .field label .req{ color:var(--teal-600); } .field input, .field select, .field textarea{ font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--surface); border:1.5px solid var(--line-strong); border-radius:var(--r); padding:.8em .95em; transition:.16s; width:100%; } .field textarea{ resize:vertical; min-height:130px; } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(13,148,136,.13); } .field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#D6453E; box-shadow:0 0 0 4px rgba(214,69,62,.12); } .field .err{ font-size:.82rem; color:#D6453E; display:none; } .field.invalid .err{ display:block; } /* chips for service select */ .chips{ display:flex; flex-wrap:wrap; gap:9px; } .chip{ font-size:.9rem; font-weight:500; padding:.55em 1em; border-radius:var(--r-pill); border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink-2); transition:.16s; white-space:nowrap; } .chip:hover{ border-color:var(--teal); color:var(--teal-700); } .chip.on{ background:var(--teal-600); border-color:var(--teal-600); color:#fff; } /* ---------- Misc components ---------- */ .stat-num{ font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,4.6vw,3.6rem); line-height:1; color:var(--ink); letter-spacing:-.03em; } .dark .stat-num{ color:#fff; } .stat-num .u{ color:var(--teal); } .divider{ height:1px; background:var(--line); border:none; margin:0; } .pill-row{ display:flex; flex-wrap:wrap; gap:10px; } /* numbered list (process) */ .steps{ counter-reset:step; display:grid; gap:2px; } .step{ display:grid; grid-template-columns:auto 1fr; gap:22px; padding:26px 0; border-top:1px solid var(--line); align-items:start; } .step:last-child{ border-bottom:1px solid var(--line); } .step .n{ font-family:var(--display); font-weight:800; font-size:1.1rem; color:var(--teal-700); width:54px; } .step h3{ margin-bottom:8px; } .icon-badge{ width:54px; height:54px; border-radius:14px; background:var(--mint-2); color:var(--teal-600); display:grid; place-items:center; margin-bottom:18px; border:1px solid var(--mint); } .icon-badge svg{ width:26px; height:26px; } .card:hover .icon-badge{ background:var(--teal); color:#fff; border-color:var(--teal); } .placeholder{ background:linear-gradient(135deg,var(--surface-2),var(--mint-2)); border:1px solid var(--line); border-radius:var(--r-lg); display:grid; place-items:center; color:var(--faint); font-size:.85rem; position:relative; overflow:hidden; } .placeholder::after{ content:"RHINO"; position:absolute; font-family:var(--display); font-weight:800; font-size:18vh; color:rgba(13,148,136,.05); letter-spacing:-.05em; } /* ---------- Breadcrumb ---------- */ .crumb{ display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--muted); font-weight:500; } .crumb a{ color:var(--teal-600); } .crumb a:hover{ text-decoration:underline; } .crumb span{ color:var(--faint); } .crumb b{ color:var(--ink); font-weight:600; } /* ---------- Tick lists (service deliverables) ---------- */ .ticks{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:9px; } .ticks li{ position:relative; padding-left:28px; font-size:.95rem; color:var(--ink-2); line-height:1.4; } .ticks li::before{ content:""; position:absolute; left:0; top:2px; width:18px; height:18px; border-radius:50%; background:var(--mint-2); border:1px solid var(--mint); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12l4 4 10-10' stroke='%230F766E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:13px; background-position:center; background-repeat:no-repeat; } .dark .ticks li, .card[style*="deep-2"] .ticks li{ color:#B7CCC8; } .card[style*="deep-2"] .ticks li::before{ background-color:rgba(95,208,194,.16); border-color:transparent; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12l4 4 10-10' stroke='%239FE7DC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* span-all card in a grid */ .span-all{ grid-column:1 / -1; } @media(max-width:620px){ .span-all{ grid-column:auto; } } /* highlighted (hot) service card */ .card.hot{ border-color:var(--teal); background:var(--mint-2); } .card.hot .icon-badge{ background:var(--teal); color:#fff; border-color:var(--teal); } /* ---------- FAQ accordion ---------- */ .faq{ display:grid; gap:12px; } .faq details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:border-color .2s; } .faq details[open]{ border-color:var(--line-strong); box-shadow:var(--shadow-sm); } .faq summary{ list-style:none; cursor:pointer; padding:20px 22px; font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:16px; } .faq summary::-webkit-details-marker{ display:none; } .faq .faq-ico{ flex:none; color:var(--teal-600); transition:transform .25s; } .faq .faq-ico svg{ width:20px; height:20px; } .faq details[open] .faq-ico{ transform:rotate(180deg); } .faq .faq-a{ padding:0 22px 22px; color:var(--muted); line-height:1.55; max-width:64ch; } /* ---------- Services hub: pillar cards ---------- */ .pillar-card{ display:flex; flex-direction:column; } /* pillar titles are

for correct outline (one per service section) but keep the visual size of the old h3 so the cards look unchanged / .pillar-card h2{ font-size:clamp(1.3rem,2.2vw,1.7rem); letter-spacing:-.015em; } .sub-links{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:2px; } .sub-links li a{ display:flex; align-items:center; gap:9px; padding:8px 0; font-weight:500; font-size:.96rem; border-bottom:1px solid var(--line); transition:.15s; } .pillar-card[style="deep"] .sub-links li a{ border-color:rgba(255,255,255,.1); } .sub-links li a::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--teal); flex:none; transition:.15s; } .sub-links li a:hover{ color:var(--teal-600); padding-left:6px; } .pillar-card[style="deep"] .sub-links li a:hover{ color:#9FE7DC; } .pillar-card .link-arrow{ margin-top:auto; padding-top:6px; } @media(max-width:620px){ .sub-links[style="columns"]{ columns:1 !important; } } /* ============================================================ RICH SERVICE-PAGE COMPONENTS ============================================================ / / ---- Sticky in-page sub-nav (scroll-spy) ---- / .subnav{ position:sticky; top:var(--nav-h); z-index:150; background:rgba(246,247,245,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .subnav-inner{ display:flex; align-items:center; gap:8px; height:60px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; } .subnav-inner::-webkit-scrollbar{ display:none; } .subnav a{ white-space:nowrap; font-size:.92rem; font-weight:600; color:var(--muted); padding:.45em .85em; border-radius:var(--r-pill); transition:.15s; } .subnav a:hover{ color:var(--ink); background:var(--surface-2); } .subnav a.current{ color:var(--teal-700); background:var(--mint-2); } .subnav .subnav-cta{ margin-left:auto; flex:none; padding:.5em 1.05em; font-size:.92rem; box-shadow:none; } @media(max-width:720px){ .subnav .subnav-cta{ display:none; } } / ---- Trust / badge row ---- / .badges{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; } .badge{ display:inline-flex; align-items:center; gap:.5em; font-size:.85rem; font-weight:600; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:.45em .9em; } .badge svg{ width:16px; height:16px; color:var(--teal-600); } / ---- Key facts / quotable Q&A card (AEO-friendly) ---- / .keyfacts{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,2.6vw,30px); } .keyfacts h3{ font-size:1.15rem; } .qa{ display:grid; gap:18px; margin-top:18px; } .qa-item p:first-child{ font-weight:600; color:var(--ink); margin-bottom:4px; } .qa-item p:last-child{ color:var(--muted); font-size:.96rem; line-height:1.5; } / ---- Prose blocks (natural body copy) ---- / .prose{ max-width:64ch; } .prose p{ color:var(--ink-2); line-height:1.7; } .prose p + p{ margin-top:1.1em; } .prose strong{ color:var(--ink); font-weight:600; } .prose .accent{ color:var(--teal-700); font-weight:600; } / ---- Interactive tabs (sub-service deep dive) ---- / .tabset{ display:grid; grid-template-columns:300px 1fr; gap:clamp(18px,2.4vw,32px); align-items:start; } @media(max-width:840px){ .tabset{ grid-template-columns:1fr; } } .tablist{ display:flex; flex-direction:column; gap:6px; position:sticky; top:150px; } @media(max-width:840px){ .tablist{ position:static; flex-direction:row; flex-wrap:wrap; } } .tab{ display:flex; align-items:center; gap:12px; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; font-family:var(--sans); font-weight:600; font-size:1rem; color:var(--ink-2); cursor:pointer; transition:.16s; } .tab .t-ico{ width:34px; height:34px; flex:none; border-radius:9px; background:var(--mint-2); color:var(--teal-600); display:grid; place-items:center; border:1px solid var(--mint); transition:.16s; } .tab .t-ico svg{ width:18px; height:18px; } .tab:hover{ border-color:var(--line-strong); } .tab[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; } .tab[aria-selected="true"] .t-ico{ background:var(--teal); color:#fff; border-color:var(--teal); } @media(max-width:840px){ .tab{ font-size:.92rem; padding:10px 13px; } .tab span:last-child{ display:none; } } .tabpanels{ position:relative; } .tabpanel{ display:none; animation:fadeUp .35s ease; } .tabpanel.active{ display:block; } @keyframes fadeUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } } .tabpanel .panel-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,3vw,38px); } .tabpanel h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); } .tabpanel .meta-line{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } .tabpanel .ideal{ margin-top:22px; padding:16px 18px; background:var(--mint-2); border:1px solid var(--mint); border-radius:var(--r); font-size:.95rem; color:var(--teal-700); } .tabpanel .ideal b{ color:var(--teal-700); } / ---- Tech stack ---- / .tech-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); } @media(max-width:780px){ .tech-grid{ grid-template-columns:1fr; } } .tech-group h3{ font-family:var(--sans); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:0 0 14px; font-weight:700; } .tech-chips{ display:flex; flex-wrap:wrap; gap:8px; } .tech-chip{ font-size:.9rem; font-weight:500; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:.5em .8em; transition:.15s; } .tech-chip:hover{ border-color:var(--teal); color:var(--teal-700); transform:translateY(-2px); } .dark .tech-chip{ background:var(--deep-2); border-color:rgba(255,255,255,.1); color:#CDE7E3; } .dark .tech-group h3{ color:#6E8C87; } / ---- Interactive estimator ---- / .estimator{ display:grid; grid-template-columns:1.1fr .9fr; gap:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow); } @media(max-width:820px){ .estimator{ grid-template-columns:1fr; } } .est-controls{ padding:clamp(24px,3vw,36px); } .est-row{ margin-bottom:24px; } .est-row:last-child{ margin-bottom:0; } .est-row label{ display:flex; justify-content:space-between; align-items:baseline; font-weight:600; color:var(--ink-2); font-size:.96rem; margin-bottom:10px; } .est-row label .val{ font-family:var(--display); font-weight:800; color:var(--teal-700); font-size:1.1rem; } .est-seg{ display:flex; gap:8px; flex-wrap:wrap; } .est-seg button{ flex:1; min-width:80px; background:var(--surface); border:1.5px solid var(--line-strong); border-radius:var(--r); padding:.6em .4em; font-family:var(--sans); font-weight:600; font-size:.92rem; color:var(--ink-2); cursor:pointer; transition:.15s; } .est-seg button.on{ background:var(--teal-600); border-color:var(--teal-600); color:#fff; } input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px; background:var(--surface-2); outline:none; } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:var(--teal); border:3px solid #fff; box-shadow:0 2px 6px rgba(13,148,136,.5); cursor:pointer; } input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--teal); border:3px solid #fff; box-shadow:0 2px 6px rgba(13,148,136,.5); cursor:pointer; } .est-output{ background:linear-gradient(160deg,var(--deep),var(--deep-2)); color:#E7F0EE; padding:clamp(24px,3vw,36px); display:flex; flex-direction:column; justify-content:center; } .est-output .eyebrow{ color:#5FD0C2; } .est-output .eyebrow::before{ background:#5FD0C2; } .est-big{ font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,5vw,3.8rem); line-height:1; letter-spacing:-.03em; color:#fff; margin:14px 0 4px; } .est-big .u{ color:#5FD0C2; font-size:.5em; } .est-sub{ color:#A9C4BF; font-size:.95rem; } .est-secondary{ display:flex; gap:24px; margin:22px 0; flex-wrap:wrap; } .est-secondary .v{ font-family:var(--display); font-weight:800; font-size:1.5rem; color:#fff; } .est-secondary .l{ font-size:.8rem; color:#8FAAA5; } .est-note{ font-size:.78rem; color:var(--faint); margin-top:14px; } / ---- Use-case / who-it's-for cards ---- / .usecase{ display:flex; gap:16px; align-items:flex-start; } .usecase .uc-ico{ width:46px; height:46px; flex:none; border-radius:12px; background:var(--mint-2); color:var(--teal-600); display:grid; place-items:center; border:1px solid var(--mint); } .usecase .uc-ico svg{ width:22px; height:22px; } .usecase h3{ font-size:1.15rem; } / ---- Inline lead form (CTA band) ---- / .lead-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,3vw,38px); box-shadow:var(--shadow); } .lead-card .field input, .lead-card .field select{ background:var(--paper); } .lead-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media(max-width:560px){ .lead-grid{ grid-template-columns:1fr; } } / ---- Related services ---- / .related{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } @media(max-width:820px){ .related{ grid-template-columns:repeat(2,1fr);} } @media(max-width:480px){ .related{ grid-template-columns:1fr;} } .related a{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); font-weight:600; color:var(--ink); transition:.16s; } .related a:hover{ border-color:var(--teal); color:var(--teal-700); transform:translateY(-2px); box-shadow:var(--shadow-sm); } .related a svg{ width:18px; height:18px; color:var(--teal-600); flex:none; } / ---- Section heading helper ---- / .sec-head{ max-width:46ch; margin-bottom:clamp(28px,4vw,46px); } .sec-head.center{ margin-inline:auto; } / ---- Featured / hero share-graphic on-page ---- / .hero-shot{ width:100%; height:auto; display:block; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); border:1px solid var(--line); } .featured-shot{ width:100%; height:auto; display:block; border-radius:var(--r-lg); box-shadow:var(--shadow); border:1px solid var(--line); } .featured-band{ max-width:920px; margin-inline:auto; } / ===== Interactive service scene (shared by pillar pages) ===== / .hero-viz{ position:relative; } .viz-stage{ width:100%; height:auto; display:block; overflow:visible; transform:scale(1.12); transform-origin:center; } @media(max-width:980px){ .viz-stage{ transform:scale(1.0); } } .viz-stage .wire{ stroke:rgba(6,43,40,.28); stroke-width:1.6; fill:none; } .viz-stage .flow{ stroke:#115E56; stroke-width:2.4; fill:none; stroke-linecap:round; stroke-dasharray:6 96; animation:vizFlow 2.4s linear infinite; } @keyframes vizFlow{ to{ stroke-dashoffset:-102; } } .viz-stage .spark{ fill:#0F766E; offset-rotate:0deg; animation:vizSpark 2.4s linear infinite; } @keyframes vizSpark{ from{ offset-distance:0%; } to{ offset-distance:100%; } } .viz-stage .node{ cursor:pointer; } .viz-stage .node[data-href]{ -webkit-tap-highlight-color:transparent; } .viz-stage .node-inner{ transition:transform .32s cubic-bezier(.34,1.56,.64,1); transform-box:fill-box; transform-origin:center; } .viz-stage .node .halo{ fill:none; stroke:#115E56; stroke-width:1.6; opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.7); transition:opacity .3s ease, transform .45s cubic-bezier(.34,1.56,.64,1); } .viz-stage .node .ring{ fill:#FFFFFF; stroke:rgba(6,43,40,.5); stroke-width:1.6; transition:fill .25s ease, stroke .25s ease; } .viz-stage .node .ico{ stroke:#0A3A35; stroke-width:2; fill:none; transition:stroke .25s ease, transform .32s cubic-bezier(.34,1.56,.64,1); transform-box:fill-box; transform-origin:center; } .viz-stage .node:hover .node-inner, .viz-stage .node:focus-visible .node-inner, .viz-stage .node.is-active .node-inner{ transform:scale(1.12); } .viz-stage .node:hover .ring, .viz-stage .node:focus-visible .ring, .viz-stage .node.is-active .ring{ fill:#062B28; stroke:#062B28; } .viz-stage .node:hover .ico, .viz-stage .node:focus-visible .ico, .viz-stage .node.is-active .ico{ stroke:#fff; transform:translateY(-1px) scale(1.06); } .viz-stage .node:hover .halo, .viz-stage .node:focus-visible .halo, .viz-stage .node.is-active .halo{ opacity:.5; transform:scale(1.18); } .viz-stage .node:active .node-inner{ transform:scale(1.04); transition-duration:.1s; } .viz-stage .node:focus{ outline:none; } .viz-stage .core-glow{ fill:#062B28; opacity:.16; animation:vizCore 3s ease-in-out infinite; transform-box:fill-box; transform-origin:center; } @keyframes vizCore{ 0%,100%{ opacity:.12; transform:scale(1);} 50%{ opacity:.22; transform:scale(1.14);} } .viz-stage .core-disc{ fill:#062B28; filter:drop-shadow(0 12px 26px rgba(6,43,40,.4)); } .viz-cap{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; font-size:.82rem; color:var(--muted); font-weight:500; } .viz-cap svg{ width:15px; height:15px; color:var(--teal-600); } @media(prefers-reduced-motion:reduce){ .viz-stage .flow, .viz-stage .core-glow, .viz-stage .spark{ animation:none; } .viz-stage .flow{ stroke-dasharray:0; opacity:.5; } .viz-stage .spark{ display:none; } } / ============================================================ RESPONSIVE / MOBILE-FIRST LAYER Collapses inline multi-column grids, fixes nav/tabs/overflow across phones, tablets, laptops and large screens. ============================================================ / / never allow accidental horizontal scrolling. NOTE: use clip, not hidden — `overflow:hidden` makes a scroll container and breaks position:sticky on the header. / html, body{ overflow-x:clip; max-width:100%; } / long words / URLs never blow out the layout / h1,h2,h3,p,a,li,summary{ overflow-wrap:break-word; } img,svg,iframe,video{ max-width:100%; } / ---- Tablet & below: collapse the two-column hero/section rows ---- / @media (max-width:860px){ / inline grid-template-columns needs !important to be overridden / .hero-grid{ grid-template-columns:1fr !important; gap:clamp(28px,6vw,40px) !important; } / sticky side columns shouldn't pin once stacked / .hero-grid [style="position:sticky"]{ position:static !important; top:auto !important; } /* lead-capture bands (class="grid" + inline 1fr 1fr) / .grid[style="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr !important; } /* keep the interactive scene centered & not oversized when stacked / .hero-viz{ max-width:540px; margin-inline:auto; width:100%; } .viz-stage{ transform:scale(1.0); } / on stacked pillar heroes, put the visual after the copy with breathing room / #top .hero-grid{ gap:clamp(24px,7vw,44px) !important; } } / ---- Tabs: swipeable strip WITH labels on small screens ---- / @media (max-width:840px){ .tablist{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; } .tablist::-webkit-scrollbar{ display:none; } .tab{ flex:0 0 auto; scroll-snap-align:start; } / override the earlier rule that hid the tab label — keep labels visible / .tab span:last-child{ display:inline; } } / ---- Header / nav on phones ---- / @media (max-width:560px){ / leave only logo + hamburger; CTAs live in the mobile menu / .nav-cta .btn-primary{ display:none; } .nav{ gap:12px; } } / ---- Tap-target & spacing comfort on phones ---- / @media (max-width:620px){ .btn{ padding:.9em 1.3em; } / keep ≥44px tall touch targets / .chip{ padding:.6em 1.05em; } .subnav-inner{ height:54px; gap:4px; } .subnav a{ padding:.45em .7em; } / estimator output reads better stacked tight / .est-secondary{ gap:18px; } / testimonial + big display quotes scale down a touch / .display{ font-size:clamp(1.5rem,6.5vw,2rem) !important; } } / ---- Small phones (≤400px) ---- / @media (max-width:400px){ :root{ --gutter:16px; } h1{ font-size:clamp(2rem,9.5vw,2.5rem); } .stat-num{ font-size:clamp(2rem,9vw,2.6rem); } .badges{ gap:8px; } .badge{ font-size:.8rem; padding:.4em .75em; } } / ---- Large / wide screens: a touch more room, stay centered ---- / @media (min-width:1500px){ :root{ --maxw:1280px; } .wrap-wide{ max-width:1440px; } } @media (min-width:1900px){ body{ font-size:1.125rem; } .wrap-wide{ max-width:1520px; } } / ============================================================ ACCESSIBILITY WIDGET (floating control + sliding panel) Injected on every page by a11y-widget.js. All page-state classes live on so a saved preference applies before the UI is built. ============================================================ / .a11y-fab{ position:fixed; top:50%; right:0; transform:translateY(-50%); z-index:99998; width:54px; height:60px; display:flex; align-items:center; justify-content:center; background:var(--deep); color:#fff; border:none; border-radius:16px 0 0 16px; cursor:pointer; box-shadow:-7px 9px 26px -10px rgba(6,43,40,.55); transition:transform .35s cubic-bezier(.34,1.56,.64,1), right .42s cubic-bezier(.65,0,.35,1), background .2s, box-shadow .2s; } .a11y-fab svg{ width:32px; height:32px; position:relative; z-index:1; } .a11y-fab .pulse{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; animation:a11yPulse 2.8s ease-out infinite; } @keyframes a11yPulse{ 0%{ box-shadow:0 0 0 0 rgba(95,208,194,.5);} 70%,100%{ box-shadow:0 0 0 15px rgba(95,208,194,0);} } .a11y-fab::after{ content:"Accessibility"; position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(8px); background:var(--deep); color:#fff; font:600 13px/1 var(--sans); padding:10px 13px; border-radius:9px; white-space:nowrap; opacity:0; pointer-events:none; transition:.25s; box-shadow:var(--shadow); } .a11y-fab:hover{ background:var(--teal-600); transform:translateY(-50%) scale(1.07); box-shadow:-9px 11px 32px -10px rgba(15,118,110,.6); } .a11y-fab:hover::after{ opacity:1; transform:translateY(-50%) translateX(0); } .a11y-fab:focus-visible{ outline:3px solid var(--teal-700); outline-offset:3px; } html.a11y-panel-open .a11y-fab{ right:min(360px,92vw); } html.a11y-panel-open .a11y-fab .pulse, .a11y-fab:hover .pulse{ animation:none; } @media(prefers-reduced-motion:reduce){ .a11y-fab .pulse{ animation:none; } } .a11y-panel{ position:fixed; top:0; right:0; z-index:99999; width:min(360px,92vw); height:100dvh; background:var(--surface); color:var(--ink); display:flex; flex-direction:column; font-family:var(--sans); box-shadow:-18px 0 55px -22px rgba(6,43,40,.45); transform:translateX(100%); visibility:hidden; transition:transform .42s cubic-bezier(.65,0,.35,1), visibility 0s linear .42s; } html.a11y-panel-open .a11y-panel{ transform:translateX(0); visibility:visible; transition:transform .42s cubic-bezier(.65,0,.35,1); } .a11y-panel { box-sizing:border-box; } .a11y-head{ background:var(--deep); color:#fff; padding:18px 18px 17px; display:flex; align-items:center; gap:12px; } .a11y-head .ic{ width:42px; height:42px; border-radius:11px; background:rgba(95,208,194,.18); color:#9FE7DC; display:grid; place-items:center; flex:none; } .a11y-head .ic svg{ width:26px; height:26px; } .a11y-title{ font-family:var(--display); font-size:18px; font-weight:700; color:#fff; line-height:1.05; letter-spacing:-.01em; } .a11y-sub{ font-size:12px; color:#A9C4BF; margin-top:3px; } .a11y-close{ margin-left:auto; width:36px; height:36px; border-radius:9px; background:rgba(255,255,255,.12); color:#fff; border:none; display:grid; place-items:center; cursor:pointer; flex:none; transition:.16s; } .a11y-close:hover{ background:rgba(255,255,255,.24); } .a11y-close svg{ width:18px; height:18px; } .a11y-body{ padding:15px; overflow-y:auto; flex:1; } .a11y-fs{ border:1px solid var(--line); border-radius:13px; padding:13px 14px; margin-bottom:13px; background:var(--surface-2); } .a11y-fs .lab{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); display:flex; align-items:center; gap:7px; margin-bottom:11px; } .a11y-fs .lab svg{ width:16px; height:16px; color:var(--teal-600); } .a11y-fs-row{ display:flex; align-items:center; gap:10px; } .a11y-step{ flex:1; height:44px; border:1.5px solid var(--line-strong); background:var(--surface); border-radius:11px; font:800 17px var(--display); color:var(--ink); cursor:pointer; display:grid; place-items:center; transition:.15s; } .a11y-step:hover{ border-color:var(--teal); color:var(--teal-700); } .a11y-step:disabled{ opacity:.4; cursor:not-allowed; } .a11y-fs-val{ min-width:62px; text-align:center; font:700 15px var(--sans); color:var(--ink); } .a11y-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .a11y-tile{ display:flex; flex-direction:column; gap:9px; align-items:flex-start; padding:13px; border:1.5px solid var(--line); border-radius:13px; background:var(--surface); color:var(--ink); cursor:pointer; text-align:left; transition:transform .16s, border-color .16s, background .16s, box-shadow .16s; min-height:86px; font-family:var(--sans); } .a11y-tile svg{ width:24px; height:24px; color:var(--teal-600); flex:none; } .a11y-tile .t{ font-size:13.5px; font-weight:600; line-height:1.2; } .a11y-tile:hover{ border-color:var(--teal); transform:translateY(-2px); box-shadow:var(--shadow-sm); } .a11y-tile[aria-pressed="true"]{ background:var(--deep); border-color:var(--deep); color:#fff; } .a11y-tile[aria-pressed="true"] svg{ color:#9FE7DC; } .a11y-tile.span{ grid-column:1 / -1; cursor:default; } .a11y-tile.span:hover{ transform:none; box-shadow:none; border-color:var(--line); } .a11y-seg{ display:flex; gap:6px; width:100%; margin-top:2px; } .a11y-seg button{ flex:1; padding:9px 4px; font:600 12px var(--sans); border:1.5px solid var(--line-strong); background:var(--surface); border-radius:9px; cursor:pointer; color:var(--ink-2); transition:.15s; } .a11y-seg button:hover{ border-color:var(--teal); } .a11y-seg button[aria-pressed="true"]{ background:var(--teal-600); border-color:var(--teal-600); color:#fff; } .a11y-foot{ padding:13px 15px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; align-items:center; } .a11y-reset{ width:100%; height:44px; border-radius:11px; border:1.5px solid var(--line-strong); background:var(--surface); font:600 14px var(--sans); color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:.15s; } .a11y-reset svg{ width:17px; height:17px; } .a11y-reset:hover{ border-color:#D6453E; color:#D6453E; } .a11y-hint{ font-size:11px; color:var(--muted); } /* reading guide bar / .a11y-readline{ position:fixed; left:0; width:100%; height:46px; background:rgba(13,148,136,.13); border-top:2px solid var(--teal-600); border-bottom:2px solid var(--teal-600); z-index:99990; pointer-events:none; transform:translateY(-50%); display:none; } html.a11y-guide .a11y-readline{ display:block; } / ---------- page-state effects ---------- / / Text size handled inline on by JS (font-size %). / / High contrast / html.a11y-contrast{ --ink:#000000; --ink-2:#0a0a0a; --muted:#1c1c1c; --faint:#1c1c1c; --line:#000000; --line-strong:#000000; --paper:#ffffff; --surface:#ffffff; --surface-2:#f2f2f2; --teal-600:#0a564f; --teal-700:#073f39; } html.a11y-contrast body{ background:#fff; } html.a11y-contrast a:not(.btn){ text-decoration:underline; text-underline-offset:2px; } html.a11y-contrast .card, html.a11y-contrast .field input, html.a11y-contrast .field select, html.a11y-contrast .field textarea{ border-color:#000 !important; } / Dark mode — remaps the design tokens to a dark palette / html.a11y-dark{ --paper:#0c1614; --surface:#13211e; --surface-2:#1b2b27; --mint:#173129; --mint-2:#142621; --ink:#eef5f3; --ink-2:#d7e4e0; --muted:#a9bdb8; --faint:#94a8a3; --line:#2a3d39; --line-strong:#3a4f4a; --teal:#2cbaa9; --teal-600:#3fcab8; --teal-700:#54d6c5; color-scheme:dark; } html.a11y-dark body{ background:var(--paper); color:var(--ink); } html.a11y-dark .placeholder{ background:linear-gradient(135deg,var(--surface-2),var(--mint-2)); } / dark-mode header / nav chrome — the bar bg & logo are hardcoded light otherwise / html.a11y-dark .site-header{ background:rgba(11,20,18,.82); } html.a11y-dark .site-header.scrolled{ background:rgba(11,20,18,.94); border-color:var(--line); } html.a11y-dark .site-header .logo .mark path[fill="#0E211E"]{ fill:#eef5f3; } html.a11y-dark .site-header .logo .mark circle[fill="#F6F7F5"]{ fill:#0b1412; } html.a11y-dark .btn-ghost{ color:var(--ink); border-color:rgba(238,245,243,.36); } html.a11y-dark .btn-ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); } html.a11y-dark .hamburger{ background:var(--surface); border-color:var(--line-strong); } html.a11y-dark .mega{ box-shadow:0 30px 60px -24px rgba(0,0,0,.7); } / Highlight links / html.a11y-links a:not(.btn):not(.logo){ text-decoration:underline !important; text-underline-offset:3px; text-decoration-thickness:2px; font-weight:700; outline:2px solid currentColor; outline-offset:2px; border-radius:3px; } / Readable font — swap display + body type for a high-legibility stack / html.a11y-readable, html.a11y-readable body{ --display:Verdana, Tahoma, Geneva, sans-serif; --sans:Verdana, Tahoma, Geneva, sans-serif; } html.a11y-readable :where(h1,h2,h3,h4,h5,p,a,span,li,button,input,textarea,select,label,div,td,th){ font-family:Verdana, Tahoma, Geneva, sans-serif !important; letter-spacing:.005em; } / Text spacing (WCAG 1.4.12 friendly) / html.a11y-spacing body{ line-height:1.8 !important; letter-spacing:.1em; word-spacing:.16em; } html.a11y-spacing p{ margin-bottom:1.4em; } / Pause animations / motion / html.a11y-pause , html.a11y-pause ::before, html.a11y-pause ::after{ animation-play-state:paused !important; animation-duration:0s !important; transition:none !important; } html.a11y-pause{ scroll-behavior:auto !important; } html.a11y-pause [data-reveal]{ opacity:1 !important; transform:none !important; } /* Big cursor / html.a11y-cursor, html.a11y-cursor { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M5 2 L5 20 L9.6 15.6 L12.3 21.6 L15 20.3 L12.4 14.5 L19 14.5 Z' fill='%23000' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 5 2, auto !important; } /* Saturation — filter the page content but never the widget itself / html.a11y-sat-gray body > :not(.a11y-panel):not(.a11y-fab):not(.a11y-readline):not(script):not(template):not(style){ filter:grayscale(1) !important; } html.a11y-sat-high body > :not(.a11y-panel):not(.a11y-fab):not(.a11y-readline):not(script):not(template):not(style){ filter:saturate(1.7) !important; } @media print{ .a11y-fab, .a11y-panel, .a11y-readline{ display:none !important; } } / =================================================================== Performance — skip rendering work for the always-below-fold footer so first paint and interaction stay cheap on long pages. The contain-intrinsic-size keeps the scrollbar stable before render. Disabled under a11y-pause so nothing interferes with reduced motion. =================================================================== */ .site-footer{ content-visibility:auto; contain-intrinsic-size:1px 520px; } html.a11y-pause .site-footer{ content-visibility:visible; }