/* One page, and the cyan finally where somebody sees it. The complaint about the old site was that it was "very light and a bit dull", and the answer in the five-page version was a dark band two thirds of the way down - which nobody reaches before deciding. So the hero itself is the dark ground now, and the cyan is the light on it. */ /* --- the bar stays with you ------------------------------------------- */ header.site{ position:sticky; top:0; z-index:50; background:rgba(7,24,42,.86); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid rgba(255,255,255,.10); } header.site .brand svg path{ fill:#fff; } header.site .nav ul a.link{ color:#c6d8e6; } header.site .nav ul a.link:hover{ color:#fff; } header.site .nav a.login{ color:var(--cyan-hi); font-weight:600; margin-right:14px; text-decoration:none; white-space:nowrap; } header.site .nav a.login:hover{ text-decoration:underline; } header.site .btn-p{ background:var(--cta-cyan); color:#04222b; border-color:transparent; font-weight:650; } header.site .btn-p:hover{ filter:brightness(1.07); } /* --- the hero, which is the whole point of this revision --------------- */ .hero.deep{ position:relative; overflow:hidden; color:#fff; background: radial-gradient(120% 90% at 78% -10%, rgba(11,179,207,.42), rgba(11,179,207,0) 60%), radial-gradient(90% 70% at 8% 110%, rgba(24,120,192,.38), rgba(24,120,192,0) 62%), linear-gradient(158deg,#061626 0%,#0b2b48 55%,#0f3f66 100%); border-bottom:1px solid rgba(255,255,255,.08); } /* a hairline of pure cyan along the bottom: the "it is live" cue, at the one place every visitor's eye crosses on the way down */ .hero.deep::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg, rgba(63,216,239,0), var(--cyan-hi) 22%, #7fe6f8 50%, var(--cyan-hi) 78%, rgba(63,216,239,0)); } .hero.deep h1{ color:#fff; } .hero.deep h1 .lit{ color:var(--cyan-hi); } .hero.deep .lead{ color:#cfe2f0; } /* the definition comes first, at full weight; the sentence about what the board is for follows it, one step quieter */ .hero .lead2{ margin-top:12px; font-size:17px; color:#b9cfe0; } .hero.deep .eyebrow{ color:#7fe6f8; } .hero.deep .pill{ color:#cfe6f2; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.05); } /* the dot keeps its own colour cycle on the deep hero (see site.css) */ .btn-ghost{ color:#fff; border:1px solid rgba(255,255,255,.34); background:transparent; } .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.07); } /* --- the positioning couplet ------------------------------------------ */ .couplet{ display:grid; grid-template-columns:1.5fr 1fr; gap:34px; align-items:center; } .couplet h2{ font-size:31px; line-height:1.24; letter-spacing:-.02em; margin:0; } .couplet .lit-ink{ color:var(--cyan-ink); } .couplet .roles{ display:flex; flex-wrap:wrap; gap:8px; } .couplet .roles span{ font-size:13.5px; color:var(--ink-2); border:1px solid var(--cyan-line); background:#fff; border-radius:999px; padding:6px 13px; } /* --- the feature list, two columns on a wide screen -------------------- */ .flist.two{ display:grid; grid-template-columns:1fr 1fr; gap:26px 40px; } /* --- industries as lines rather than six more cards -------------------- */ .inds{ display:grid; grid-template-columns:1fr 1fr; gap:2px 40px; } .indrow{ display:grid; grid-template-columns:138px 1fr; gap:14px; align-items:baseline; padding:15px 0; border-top:1px solid var(--tint-line); } .indrow b{ font-size:15px; white-space:nowrap; color:var(--ink); } .indrow span{ color:var(--ink-2); font-size:14.5px; line-height:1.55; } /* --- four short cards on the dark ground ------------------------------- */ .grid.g4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .sec.deep .card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13); } .sec.deep .card h3{ color:#fff; } .sec.deep .card p{ color:#cfe0ec; } .sec.deep .card .ic{ background:rgba(63,216,239,.14); border-color:rgba(63,216,239,.30); } .sec.deep .card .ic svg{ stroke:var(--cyan-hi); } .already{ margin-top:18px; font-size:15px; } .already a{ color:var(--cyan-ink); font-weight:600; } @media (max-width:900px){ .couplet{ grid-template-columns:1fr; gap:18px; } .flist.two, .inds{ grid-template-columns:1fr; } .grid.g4{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .grid.g4{ grid-template-columns:1fr; } header.site .nav ul{ display:none; } } /* the hero was leaving a band of empty navy under the art */ .hero.deep .in{ align-items:center; } .hero.deep{ padding-top:66px; padding-bottom:66px; } /* the form's own button, in the same cyan as the one in the bar */ .form button[type="submit"], .formwrap button[type="submit"]{ background:var(--cta-cyan); color:#04222b; border-color:transparent; font-weight:650; } .form button[type="submit"]:hover{ filter:brightness(1.07); } /* the left column of the contact block should not be a tall empty space */ .formwrap{ align-items:start; } /* --- pricing ----------------------------------------------------------- */ .pricing{ display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:46px; align-items:start; } .pricecard{ background:#fff; border:1px solid var(--cyan-line); border-radius:var(--r); padding:30px 30px 28px; box-shadow:var(--shadow-2); position:relative; overflow:hidden; } /* the one place a price is quoted gets the cyan edge, so the eye finds it */ .pricecard::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,var(--cyan),var(--cyan-hi)); } .pricecard .amount{ display:flex; align-items:baseline; gap:12px; } .pricecard .amount b{ font-family:Chivo,Barlow,sans-serif; font-weight:600; font-size:62px; line-height:1; letter-spacing:-.03em; color:var(--cyan-ink); } .pricecard .amount span{ color:var(--ink-2); font-size:14.5px; line-height:1.35; } .pricecard .pack{ margin:18px 0 22px; color:var(--ink-2); font-size:15px; } .incl{ list-style:none; margin:0; padding:0; display:grid; gap:14px; align-content:start; } .incl li{ position:relative; padding-left:30px; color:var(--ink-2); font-size:15.5px; line-height:1.55; } .incl li::before{ content:""; position:absolute; left:0; top:7px; width:16px; height:16px; border-radius:50%; background:var(--cyan-soft); border:1px solid var(--cyan-line); } .incl li::after{ content:""; position:absolute; left:5px; top:11px; width:5px; height:8px; border:solid var(--cyan-ink); border-width:0 2px 2px 0; transform:rotate(42deg); } @media (max-width:900px){ .pricing{ grid-template-columns:1fr; gap:26px; } } /* --- copy revision: longer hero, prose blocks, metric list ------------- */ .hero.deep .lead.sub{ font-size:16px; color:#bdd4e4; margin-top:12px; } .hero.deep h1{ font-size:clamp(34px,4.2vw,52px); } .twocol{ display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:start; } .twocol.wide{ grid-template-columns:1.1fr 1fr; } .twocol .prose p{ margin:0 0 15px; } .twocol .shot img{ display:block; width:100%; height:auto; border-radius:var(--r); box-shadow:var(--shadow-2); } .prose-lead{ font-size:16.5px; color:var(--ink-2); margin:0 0 16px; } ul.metrics{ list-style:none; margin:0 0 18px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 26px; } ul.metrics li{ position:relative; padding-left:22px; font-size:15.5px; color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:9px; } ul.metrics li::before{ content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:2px; background:var(--cyan); } .subcards{ display:grid; gap:18px; align-content:start; } .subcards .card{ padding:22px 24px; } .subcards .card h3{ margin:0 0 8px; } .sec.deep .panel{ margin-top:26px; border-radius:var(--r); padding:26px 28px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13); border-left:3px solid var(--cyan); } .sec.deep .panel h3{ margin:0 0 10px; color:#fff; } .sec.deep .panel p{ margin:0 0 10px; color:#cfe0ec; } .sec.deep .panel p:last-child{ margin:0; } .wide-note{ margin-top:22px; max-width:62ch; } .form .consent{ font-size:13.5px; color:var(--ink-2); margin:4px 0 16px; } @media (max-width:900px){ .twocol, .twocol.wide{ grid-template-columns:1fr; gap:26px; } ul.metrics{ grid-template-columns:1fr; } } .incl + .note{ margin-top:16px; } /* --- the fixes -------------------------------------------------------- */ /* the mark was 26px in a 68px bar, which reads as a footnote rather than a brand; the bar grows with it so nothing sits tight against the edge */ header.site .nav{ height:80px; } header.site .brand svg{ height:42px; } header.site .nav ul{ gap:22px; } /* "Where can you use it?" leads with the thing itself now, each screenshot in the frame of the device it belongs to - a wall display, a browser window and a phone - so the picture says which one before the heading does. */ .shotcard{ padding:0; overflow:hidden; display:flex; flex-direction:column; } .shotcard .media{ height:262px; padding:26px 26px 0; display:flex; align-items:center; justify-content:center; } .shotcard .media > .tvwrap, .shotcard .media > .win{ width:100%; } .shotcard .media .phone{ width:122px; padding:5px; border-radius:18px; } /* Two phones in the space one was in. They are narrower rather than the card taller, so the three cards in the row still line up along one baseline, and the pair is aligned to the bottom so the frames are cut at the same line. */ .shotcard .media .twophones{ display:flex; gap:14px; align-items:flex-end; justify-content:center; width:100%; } .shotcard .media .twophones .phone{ width:112px; flex:none; } .shotcard .media .phone .scr{ border-radius:14px; } .shotcard .media .phone img{ display:block; width:100%; } .shotcard-body{ padding:24px 26px 26px; } .shotcard-body .ic{ margin-bottom:12px; } @media (max-width:900px){ .shotcard .media{ height:auto; padding:22px 22px 0; } } /* the closing word about who makes it */ .sec.company{ border-top:1px solid var(--line); } /* it is the closing word before the form, so it gets the tint the contact block used to sit alone in */ .sec.company + .sec.tint{ border-top:1px solid var(--line); } .sec.company h2{ margin:8px 0 0; } .sec.company .prose p{ margin:0 0 15px; } .sec.company .prose p:last-child{ margin:0; } footer.site .ftitle a{ color:inherit; text-decoration:none; } footer.site .ftitle a:hover{ text-decoration:underline; } @media (max-width:900px){ header.site .nav{ height:70px; } header.site .brand svg{ height:34px; } } /* --- store badges ------------------------------------------------------ */ .badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; } .badge{ display:inline-flex; align-items:center; gap:9px; background:#000; border:1px solid rgba(255,255,255,.30); border-radius:8px; padding:7px 13px 7px 11px; } .badge .bg svg{ display:block; width:19px; height:19px; fill:#fff; } .badge .bt{ display:flex; flex-direction:column; line-height:1.05; } .badge .bt b{ font-family:Barlow,system-ui,sans-serif; font-weight:400; font-size:9px; letter-spacing:.02em; color:#e6eef5; text-transform:none; } .badge .bt i{ font-family:Chivo,Barlow,sans-serif; font-style:normal; font-weight:600; font-size:15px; letter-spacing:-.01em; color:#fff; margin-top:2px; } /* the honeypot: present for anything that fills in every input, and for nobody else - off-screen rather than display:none, which some bots skip */ .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .form .err{ margin:10px 0 0; font-size:14.5px; color:#a3231d; } /* The thank-you panel is toggled with the hidden attribute now, not with a style, so its own rule must not hold it shut. */ .sent{ display:block; } .sent[hidden]{ display:none !important; } /* --- the phone in front of the wall display ---------------------------- */ /* A still cannot show the one thing that matters about a wallboard, so the phone that overlaps it is the moving one. */ .shot.withphone{ position:relative; } .shot.withphone .base{ display:block; width:100%; height:auto; border-radius:var(--r); box-shadow:var(--shadow-2); } .shot.withphone .phone{ position:absolute; left:-48px; bottom:-44px; width:138px; padding:5px; border-radius:20px; box-shadow:0 28px 56px rgba(6,24,42,.36); } .shot.withphone .phone .scr{ border-radius:16px; } .shot.withphone .phone img{ display:block; width:100%; height:auto; border-radius:0; box-shadow:none; } @media (max-width:900px){ .shot.withphone .phone{ left:8px; bottom:-22px; width:124px; } } @media (max-width:560px){ .shot.withphone .phone{ left:4px; bottom:-18px; width:104px; } } /* --- the fixes, round three -------------------------------------------- */ /* Anchors were landing under the sticky bar, so "About Fullon Advisors" put the reader half a section past the heading it names. */ section[id]{ scroll-margin-top:96px; } /* the mark in the footer was smaller than the one in the bar, which read as an afterthought rather than a sign-off */ footer.site .brand svg{ height:52px; } footer.site .brand{ margin-bottom:16px; } /* --- the form, tightened ----------------------------------------------- */ /* Every field is asked for at once now, so the panel is kept short by putting them two to a row. Each row is its own grid rather than one grid over all six, so a field carrying an error message cannot push its neighbor down. */ .row2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; align-items:start; } .form{ padding:22px 24px 24px; } .form .field{ margin-bottom:12px; } .form .field label{ font-size:13px; margin-bottom:5px; } .form .field label span{ font-weight:400; color:var(--ink-2); } .form .field input, .form .field select, .form .field textarea{ font-size:15px; padding:9px 12px; border-radius:8px; } .form .field textarea{ min-height:42px; resize:vertical; } .form .consent{ margin:2px 0 14px; font-size:13px; line-height:1.5; } .form button[type="submit"]{ padding:11px 22px; } .form .note{ margin-top:12px; font-size:13.5px; } .formwrap{ gap:44px; } @media (max-width:560px){ .row2{ grid-template-columns:1fr; } } /* The AWS partner badge, under the sentence that claims the designation. Deliberately NOT called .badge: that class already belongs to the App Store and Google Play tiles further up, and it paints a black rounded rectangle - which is exactly what this became when the two names collided, AWS's white artwork sitting in a black box of our making. Capped by height rather than width: AWS ships these at whatever width the wordmark needs, and a width cap makes a wide one tiny. 68px is as large as this particular file goes: the artwork is only 118x123, so past about 60 a 2x screen is already upscaling it, and the "Amazon Connect Delivery" line under the wordmark is the first thing to go soft. A larger original would let this grow. */ .sec.company .partner{ margin-top:26px; } .sec.company .partner img{ display:block; height:68px; width:auto; max-width:100%; } @media (max-width:700px){ .sec.company .partner img{ height:58px; } } /* the company section's own link out */ .sec.company a.ext{ color:var(--cyan-ink); font-weight:600; } /* the contact block's own column had lost the air between its paragraphs when the form beside it was tightened */ .formwrap > div > h2{ margin-bottom:14px; } .formwrap > div > p{ margin:0 0 12px; } /* ===== the rewrite: benefits, comparison, checklist, FAQ, tighter form ==== */ /* the hero's supporting points are a list now, not three loose spans */ ul.pills{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:9px; } /* a section-closing button, centred under a grid or left under a column */ .secact{ margin-top:34px; display:flex; justify-content:center; } .secact.left{ margin-top:22px; justify-content:flex-start; } /* the four reasons: same cards, a little more room to breathe */ .bens .card p{ font-size:15.5px; } /* what Pulse adds beside Amazon Connect Customer */ ul.ticks{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:13px; } ul.ticks li{ position:relative; padding-left:30px; color:var(--ink); font-size:16px; line-height:1.5; } ul.ticks li::before{ content:""; position:absolute; left:0; top:6px; width:18px; height:18px; border-radius:50%; background:var(--cyan-soft); border:1px solid var(--cyan-line); } ul.ticks li::after{ content:""; position:absolute; left:6px; top:11px; width:5px; height:9px; border:solid var(--cyan-ink); border-width:0 2px 2px 0; transform:rotate(42deg); } /* the metric list runs the full width now that the cards beside it are gone */ ul.metrics.wide{ grid-template-columns:repeat(4, 1fr); margin-bottom:0; } /* the setup guarantees, as a list somebody can hand to their AWS team */ ul.checks{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px; } ul.checks li{ position:relative; padding-left:29px; font-size:15.5px; line-height:1.5; color:var(--ink-2); } ul.checks li::before{ content:""; position:absolute; left:0; top:3px; width:19px; height:19px; border-radius:6px; background:var(--cyan-soft); border:1px solid var(--cyan-line); } ul.checks li::after{ content:""; position:absolute; left:6px; top:8px; width:6px; height:9px; border:solid var(--cyan-ink); border-width:0 2px 2px 0; transform:rotate(42deg); } .grid.g1{ display:grid; grid-template-columns:1fr; gap:16px; } .steps-col .card.step{ padding:20px 22px; } .steps-col .card.step h3{ margin:10px 0 6px; } /* the store badges are gone: there is nothing to link them to yet, and a badge that goes nowhere is worse than a sentence that is true */ .avail{ margin:14px 0 0; font-size:13.5px; line-height:1.5; color:#b9cfe0; } /* the questions */ .faqs{ display:grid; gap:0; border-top:1px solid var(--line); } details.qa{ border-bottom:1px solid var(--line); } details.qa summary{ cursor:pointer; list-style:none; padding:18px 44px 18px 0; position:relative; font-family:Chivo,Barlow,sans-serif; font-weight:600; font-size:17px; line-height:1.4; color:var(--ink); } details.qa summary::-webkit-details-marker{ display:none; } details.qa summary:hover{ color:var(--cyan-ink); } details.qa summary:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; } details.qa summary::after{ content:""; position:absolute; right:6px; top:26px; width:10px; height:10px; border:solid var(--cyan-ink); border-width:0 2px 2px 0; transform:rotate(45deg); transition:transform .15s; } details.qa[open] summary::after{ transform:rotate(-135deg); top:30px; } details.qa .ans{ padding:0 44px 20px 0; } details.qa .ans p{ margin:0; color:var(--ink-2); font-size:16px; line-height:1.62; max-width:74ch; } /* the three promises beside the form */ ul.reassure{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px; } ul.reassure li{ position:relative; padding-left:28px; font-size:15.5px; color:var(--ink); } ul.reassure li::before{ content:""; position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:50%; background:var(--cyan-soft); border:1px solid var(--cyan-line); } ul.reassure li::after{ content:""; position:absolute; left:5px; top:10px; width:5px; height:8px; border:solid var(--cyan-ink); border-width:0 2px 2px 0; transform:rotate(42deg); } /* --- the form ----------------------------------------------------------- */ /* a field that is wrong says so, under itself, and looks wrong */ .form .field .msg{ margin:6px 0 0; font-size:13px; color:#a3231d; } .form .field.bad input, .form .field.bad select, .form .field.bad textarea{ border-color:#d05a52; background:#fff7f6; } .form .field.bad label{ color:#a3231d; } .form button[type="submit"]:disabled{ filter:none; opacity:.6; cursor:progress; } .form .sent:focus-visible, .sent:focus{ outline:2px solid var(--cyan); outline-offset:3px; } @media (max-width:900px){ ul.metrics.wide{ grid-template-columns:1fr 1fr; } .secact{ justify-content:flex-start; } } @media (max-width:560px){ ul.metrics.wide{ grid-template-columns:1fr; } details.qa summary{ font-size:16px; padding-right:36px; } /* The navigation collapses here, so the one thing worth doing has to stay - and stay on one line: wrapped over two it made the bar taller than the logo and pushed everything else against the edge. */ header.site .nav{ height:62px; gap:12px; } header.site .brand svg{ height:30px; } header.site .btn-p{ white-space:nowrap; padding:8px 12px; font-size:12.5px; } header.site .nav a.login{ margin-right:2px; font-size:13px; } section[id]{ scroll-margin-top:74px; } } /* keyboard users can see where they are, everywhere */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; } /* the sign-in line needed air under the three promises */ ul.reassure + .already{ margin-top:20px; } /* On the narrowest phones the demo button is the one thing that must survive, so the sign-in link goes first rather than letting the button shrink or wrap. Anyone signing in on a phone can reach it from the footer. */ @media (max-width:412px){ header.site .nav a.login{ display:none; } } /* the booking card: one button, one sentence */ .bookcard{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; } .bookcard .btn{ width:100%; justify-content:center; } .bookcard .consent{ margin:0; } /* ---- cookie banner: generated from work/consent/consent.css; edit there ---- */ /* Fullon Pulse cookie banner. One block, used unchanged on the marketing site and on the front page of fullonpulse.com; the .fpc-dark variant is the front page's, on its blue. Namespaced so it cannot collide with either page. */ .fpc{position:fixed;left:22px;bottom:22px;z-index:1000;width:min(420px,calc(100% - 44px)); background:#fff;color:#101418;border:1px solid #dde3e8;border-radius:14px;padding:18px 20px 14px; box-shadow:0 3px 8px rgba(16,20,24,.07),0 26px 60px rgba(16,20,24,.18); font:500 14.5px/1.5 Barlow,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif} .fpc[hidden],.fpc [hidden]{display:none} .fpc p{margin:0} .fpc-t{font-family:Chivo,Barlow,system-ui,sans-serif;font-weight:600;font-size:16px} .fpc-p{color:#48525c;margin:6px 0 14px!important} .fpc-btns{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .fpc-b{font:600 13.5px Chivo,Barlow,system-ui,sans-serif;padding:9px 12px;border-radius:9px; border:1px solid transparent;cursor:pointer;background:transparent;color:#15558f} .fpc-bp{background:#0ec2e0;color:#032029;padding:10px 22px;font-size:14px} .fpc-bp:hover{background:#3fd1ea} .fpc-b:hover{text-decoration:underline}.fpc-bp:hover{text-decoration:none} .fpc-b:focus-visible{outline:2px solid #0ec2e0;outline-offset:2px} .fpc-links{margin:12px 0 0!important;font-size:12.5px;color:#78838d;display:flex;gap:8px} .fpc-links a{color:#48525c} .fpc-prefs{display:grid;gap:10px;margin:2px 0 14px} .fpc-cat{border:1px solid #e9eef2;border-radius:10px;padding:10px 12px;background:#f9fbfc} .fpc-cat.off{background:transparent} .fpc-ch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:3px;font-size:14px} .fpc-cat p{font-size:12.5px;color:#48525c;line-height:1.45} .fpc-pill{font:600 11px Chivo,Barlow,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase; color:#1c7a4b;background:#e6f4ec;padding:3px 8px;border-radius:999px} .fpc-pill.none{color:#78838d;background:#eef1f4} .fpc-sw{position:relative;width:38px;height:22px;flex:none;display:block} .fpc-sw input{position:absolute;opacity:0;inset:0;margin:0;width:100%;height:100%;cursor:pointer} .fpc-sw span{position:absolute;inset:0;border-radius:999px;background:#c9d2da;transition:background .15s;pointer-events:none} .fpc-sw span:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s} .fpc-sw input:checked+span{background:#15558f}.fpc-sw input:checked+span:after{transform:translateX(16px)} .fpc-sw input:focus-visible+span{outline:2px solid #0ec2e0;outline-offset:2px} .fpc-dark{background:#0F3D68;color:#fff;border-color:rgba(255,255,255,.18);box-shadow:0 26px 60px rgba(0,0,0,.35)} .fpc-dark .fpc-p{color:#dbe8f5}.fpc-dark .fpc-b{color:#bfe0ff}.fpc-dark .fpc-bp{color:#032029} .fpc-dark .fpc-links,.fpc-dark .fpc-links a{color:#bcd2e6} .fpc-dark .fpc-cat{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)} .fpc-dark .fpc-cat p{color:#dbe8f5}.fpc-dark .fpc-pill{background:rgba(255,255,255,.14);color:#dff5e8} .fpc-dark .fpc-pill.none{color:#bcd2e6}.fpc-dark .fpc-sw span{background:rgba(255,255,255,.3)} .fpc-dark .fpc-sw input:checked+span{background:#0ec2e0} @media (max-width:640px){ .fpc{left:0;right:0;bottom:0;width:100%;border-radius:18px 18px 0 0;padding:16px 18px 18px} .fpc-btns{display:grid;grid-template-columns:1fr 1fr} .fpc-bp{grid-column:1/-1;text-align:center} .fpc-b{padding:11px 12px;text-align:center}} @media (prefers-reduced-motion:reduce){.fpc-sw span,.fpc-sw span:after{transition:none}} /* --- the phone menu ---------------------------------------------------- */ /* The row of section links is hidden below 900px and nothing took its place, so a visitor on a phone could only scroll: Pricing, FAQ and Contact were unreachable. A
needs no script to open, which is why it is one. */ .mnav{ display:none; position:relative; margin-left:6px; } .mnav > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center; width:42px; height:38px; border:1px solid rgba(255,255,255,.22); border-radius:9px; background:rgba(255,255,255,.06); } .mnav > summary::-webkit-details-marker{ display:none; } .mnav > summary:hover{ background:rgba(255,255,255,.12); } .mnav .bars, .mnav .bars::before, .mnav .bars::after{ display:block; width:18px; height:2px; border-radius:2px; background:#e8f2f8; } .mnav .bars{ position:relative; } .mnav .bars::before, .mnav .bars::after{ content:""; position:absolute; left:0; } .mnav .bars::before{ top:-6px; } .mnav .bars::after{ top:6px; } /* open: the two outer bars become a cross, so the control says what it does */ .mnav[open] > summary .bars{ background:transparent; } .mnav[open] > summary .bars::before{ top:0; transform:rotate(45deg); } .mnav[open] > summary .bars::after{ top:0; transform:rotate(-45deg); } .mnav .mpanel{ position:absolute; right:0; top:calc(100% + 10px); min-width:210px; padding:8px; background:#0b2137; border:1px solid rgba(255,255,255,.14); border-radius:12px; box-shadow:0 18px 46px rgba(0,0,0,.42); } /* Two rules in this file and site.css hide every