/* ================================================================================== */ /* == Normalize.css v8.0.1 ========================================================== */ /* ================================================================================== */ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} *,*:before,*:after { box-sizing: border-box; margin: 0; padding: 0; list-style: none; } /* Viewport Sizing */ @-webkit-viewport{width:device-width} @-moz-viewport{width:device-width} @-ms-viewport{width:device-width} @-o-viewport{width:device-width} @viewport{width:device-width} /* ================================================================================== */ /* == Global Variables ============================================================== */ /* ================================================================================== */ :root { --primary-color: #000000; --secondary-color: #4A4A4A; --accent-color: #007AFF; --background-color: #FFFFFF; --light-gray: #F5F5F5; --border-color: #E5E5E5; --text-default: #4B5563; --text-darkest: #0F172A; /* Stripe */ --text-default: #425466; --text-darkest: #0a2540; --text-lightest: #8898aa; --primary-color: #0073E9; --light-gray: #f6f9fc; --border-color: #F9F4F9; /* TailWind */ --text-default: #4a5565; --text-darkest: #030713; --text-lighter: #6a7282; --text-lightest:#90a1b9; --primary-color: #0073E9; --light-gray: #fbf9fa; --border-color: #e7e7e9; --light-gray: #e3e7eb; --border-color: #eceef4; --text-primary: #000000; --text-secondary: #4A4A4A; --text-light-on-dark: #9ebce7; --text-light-on-dark: rgb(177 202 237 / 80%); --background-color: #f7f9fc; --space: 6rem; --radius: 1rem; --font-headline: "ff-dagny-web-pro", "proxima-nova", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; --font-default: "proxima-nova", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } @media only screen and (max-width: 980px) { :root { --space: 5rem; } } @media only screen and (max-width: 880px) { :root { --space: 4rem; } } @media only screen and (max-width: 640px) { :root { --space: 3rem; } } @media only screen and (max-width: 440px) { :root { --space: 2rem; } } /* ================================================================================== */ /* == Base Styles =================================================================== */ /* ================================================================================== */ html, body { font-family: var(--font-default); color: var(--text-default); font-size: 18px; font-optical-sizing: auto; line-height: 1.3; background-color: var(--background-color); } body:not(.homepage):before { content: ""; width: 100vw; aspect-ratio: 2560/1820; position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; background: linear-gradient(to right, #43cea2, #185a9d); background: linear-gradient(to right, #feac5e, #c779d0, #4bc0c8); backgro///und: linear-gradient(145deg, #12c2e9, #c471ed, #f64f59), url(../../img/noise2.png); background-size: cover, 250px; background-blend-mo///de: overlay; background: url(../../img/noise2.png), linear-gradient(145deg, #12c2e9, #c471ed, #f64f59); background-size: 250px, cover; backgro/und-blend-mode: overlay; } body:not(.homepage):after { content: ""; width: 100vw; aspect-ratio: 2560/1850; position: absolute; top: 0; left: 0; z-index: 1; background: linear-gradient(0deg, var(--background-color) 10%, rgba(247, 249, 252,0.7) 100%); } @media only screen and (max-width: 640px) { body { font-size: 17px; } } .site-wrapper { max-width: 1380px; max-width: 1580px; margin: 0 auto; bac///kground: var(--background-color); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .container { max-width: calc(1250px + var(--space) + var(--space)); margin: 0 auto; padding: 0 var(--space); } h1, h2, h3, h4, h5 { color: var(--text-darkest); font-weight: 700; font-family: var(--font-headline); } h1, h2 { letter-spacing: -.015em; } h2 { font-size: 3rem; line-height: 1.2; color: var(--text-darkest); margin-bottom: 2rem; } a { text-decoration: none; color: var(--primary-color); transition: all 0.218s; } a:hover { color: var(--text-darkest); } .btn { position: relative; background-color: var(--primary-color); color: white; padding: 1em 1.5em; border-radius: 0.5em; font-weight: 500; text-decoration: none; transition: all 0.218s; } .btn:after { content: ""; position: absolute; top:0; left:0; width: 100%; height: 100%; border-radius: 0.5em; background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); opacity: 0.1; } .btn:hover:after { opacity: 0.2;} .btn-dark { background-color: var(--primary-color); } .btn-primary { background-color: #055ed4; color: white !important; border: 1px solid #055ed4; box-shadow: inset 0 1px 0 rgba(255,255,255,0.17), inset 0 2em 1em -1em rgba(0,115,233,1), inset 0 -2em 1em -1em rgba(11,74,191,0.1), 0 0.1em 0.3em rgba(24,37,56,0.25), 0 0.05em 0.1em rgba(24,37,56,0.15); text-shadow: 0 -1px 1px #055ed4; } .btn-primary:hover { background: #0073E9; } .btn-secondary { background-color: var(--light-gray); color: var(--text-primary); } .btn-yellow { background: #ffd028; color: var(--text-darkest) !important; border: 1px solid #ffd028; box-shadow: inset 0 1px 0 rgba(255,255,255,0.17), inset 0 2em 1em -1em #ffeb45, inset 0 -2em 1em -1em rgba(11,74,191,0.1), 0 0.1em 0.3em rgba(24,37,56,0.25), 0 0.05em 0.1em rgba(24,37,56,0.15); text-shadow: 0 -1px 1px #ffd028; } .btn-yell/ow:hover { background: #e8bb1a; } /* sticky footer */ body { min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } /* ================================================================================== */ /* == Header & Navigation =========================================================== */ /* ================================================================================== */ header { font-size: 0.925rem; background: #fff; border-bottom: 1px solid var(--border-color); position: relative; z-index: 3; } header { background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,255,255,1) 100%); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05); border: none; } header:before { content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: radial-gradient(circle, rgba(127, 181, 250, 0.1) 0%, rgba(49, 83, 220, 0.15) 100%); } header .container { max-width: calc(1250px + 2rem); padding: 0 1rem; } header nav { display: flex; justify-content: space-between; align-items: center; height: 4.85rem; line-height: 4.85rem; } header .logo-group { } header .logo { float: left; text-indent: -9999px; width: 8.3rem; height: 100%; background: url(../../img/logo-super-colorful3.png) no-repeat center; background-size: 100% auto; margin-top: 7px; } header .logo-docs { float: left; font-size: 33px; font-weight: 400; color: var(--text-lightest); letter-spacing: -0.025em; line-height: normal; margin: 33px 0 0 7px; } header .logo-docs:hover { color: var(--text-default); } #main-nav .btn { display: inline-block; line-height: 1; padding: 0.75em 1.15em; font-weight: 400; font-size: 0.89rem; } #main-nav { } #main-nav > ul { } #main-nav li { display: inline-block; position: relative; } #main-nav li a { padding: 0 1.25em; display: block; color: var(--text-default); } #main-nav li.has-submenu > a { padding-right: 1.75em; position: relative; } #main-nav li .button-toggle { position: absolute; right: 8px; top: 0; text-indent: -9999px; width: 1em; height: 100%; background: url(../../img/chevron-down.svg) no-repeat center 49%; background-size: 1em; border: none; } #main-nav li > ul { display: none; } .no-touchevents #main-nav li:hover > ul { display: block; } #main-nav li.open > ul { display: block; } #main-nav li > ul > li { display: block; font-size: 0.85em; } #main-nav li > ul a { line-height: normal; height: auto; display: block; padding: 0.5em 1em; co/lor: var(--primary-color); font-weight: 500; transition: all 0.218s; } #main-nav li > ul a:hover { background: #eee; } #main-nav-trigger { display: none; position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 1; background: url(../../img/menu.svg) no-repeat center; background-size: 50%; text-indent: -9999px; } .open #main-nav-trigger { background: url(../../img/close.svg) no-repeat center; background-size: 45%; } .homepage #main-nav-trigger { background: url(../../img/menu-white.svg) no-repeat center; background-size: 50%; } .homepage .open #main-nav-trigger { background: url(../../img/close-white.svg) no-repeat center; background-size: 45%; } @media only screen and (min-width: 750px) { #main-nav li > ul { position: absolute; top: 70px; left: 0; background: #fff; border-radius: 0.5em; z-index: 9; min-width: 100%; width: 210px; padding: 0.5em 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.15), 0 7px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0.5px rgba(41, 41, 41, .04), 0 3px 3px -1.5px rgba(41, 41, 41, .02), 0 6px 6px -3px rgba(41, 41, 41, .04), 0 12px 12px -6px rgba(41, 41, 41, .04), 0 24px 24px -12px rgba(41, 41, 41, .04), 0 48px 48px -24px rgba(41, 41, 41, .04), 0 0 0 1px rgba(41, 41, 41, .04), inset 0 -1px 1px -0.5px rgba(51, 51, 51, .06), 0 2px 10px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05); } #main-nav li > ul a:after { content: ""; position: absolute; right: 1em; width: 1em; height: 1em; background: url(../../img/chevron-right.svg) no-repeat right; background-size: 0.95em; transition: all 0.218s; } #main-nav li > ul a:hover:after { right: 0.5em; } #main-nav > ul > li > a:hover { backgr/ound: #fff; } #main-nav li a.active { } } @media only screen and (max-width: 750px) { header nav ul { line-height: 3rem; } #main-nav-trigger { display: block; } #main-nav { } #main-nav > ul { display: none; position: absolute; top: 99px; right: 10px; width: 300px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05); bor/der: 1px solid var(--border-color); border-radius: 7px; z-index: 999; } #main-nav.open > ul { display: block; } #main-nav li { display: block; } #main-nav > ul > li { border-bottom: 1px solid var(--border-color); } #main-nav > ul > li:last-child { border: none; padding: 0.75rem 1rem; } #main-nav li .button-toggle { width: 2rem; height: 3rem; } #main-nav .btn { width: 100%; text-align: center; } } /* Homepage Header */ .homepage header { position: absolute; top: 0; left: 0; width: 100%; z-index: 1000; background: radial-gradient(circle, rgba(127, 181, 250, 0.05) 0%, rgba(49, 83, 220, 0.125) 100%); border: none; } .homepage header:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: radial-gradient(circle, rgba(127, 181, 250, 0.1) 0%, rgba(49, 83, 220, 0.35) 100%); background: radial-gradient(60% 80% at 50% 120%, rgba(127, 181, 250, 0.5) 0%, rgba(49, 83, 220, 0.15) 100%); } .homepage header .logo { background: url(../../img/logo-colorful.png) no-repeat center; background-size: 100% auto; } .homepage header #main-nav li > ul li a { color: var(--text-default); } @media only screen and (min-width: 750px) { .homepage header #main-nav a { color: var(--text-light-on-dark); } .homepage header #main-nav li .button-toggle { background: url(../../img/chevron-down-white.svg) no-repeat center 49%; background-size: 1em; opacity: 0.4; } .homepage header #main-nav .btn { background: #0a3f79; background: radial-gradient(50% 50% at 50% 50%, #0a41a8 -90%, #0a3f79 100%); border: 1px solid #2d62da; box-shadow: none; } } /* ================================================================================== */ /* == HOMEPAGE ====================================================================== */ /* ================================================================================== */ .homepage section { padding: var(--space) 0; font-size: 18px; } .homepage section h2 { font-size: 3em; } @media only screen and (max-width: 900px) { .homepage section { --space: 4em; font-size: 16px; } } @media only screen and (max-width: 700px) { .homepage section h2 { font-size: 2.5em; } } @media only screen and (max-width: 450px) { .homepage section { --space: 2em; } .homepage section h2 { font-size: 2em; } } /* ================================================================================== */ /* == Hero ========================================================================== */ /* ================================================================================== */ .homepage .hero { background: url('../../img/bricks3.svg'), radial-gradient(114% 98% at 100% 100%, #0b4abf 0%, rgb(0, 3, 15) 100%); background-blend-mode: soft-light; background-size: 1600px, cover; background-position: center, center; padding-bottom: calc(var(--space) + 480px); overflow: hidden; position: relative; padding-top: calc(var(--space) + 5rem); } .homepage .hero:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../img/noise.png); background-size: 100px; opacity: 0.06 } .homepage .hero:after { content: ""; position: absolute; bottom: -500px; left: 0; width: 100%; height: 500px; background: var(--background-color); z-index: 1; transform: skewY(-185.5deg); transform-origin: top left; } .homepage .hero .text { text-align: center; max-width: 800px; margin: 0 auto; color: var(--text-light-on-dark); } .homepage .hero h1 { font-size: 4.25em; line-height: 1.15; color: var(--text-darkest); color: #fff; margin: 0 0 0.45em 0; text-shadow: 0 2px 3px rgba(0,0,0,0.35); -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 250%); mask-image: linear-gradient(to bottom, black 60%, transparent 250%); opacity: 0.99; } .homepage .hero p { font-size: 1.5em; margin-bottom: 1.7em; font-weight: 300; } .homepage .hero-buttons { display: flex; gap: 2.5rem; justify-content: center; } .homepage .hero-meta { display: flex; gap: 3rem; justify-content: center; font-size: 1em; font-weight: 300; margin-top: 2.5em; } .homepage .hero-meta span:before { content:""; display: inline-block; width: 1.35em; height: 1.35em; vertical-align: -0.325em; margin-right: 0.4em; background: url(../../img/check.svg) no-repeat center; background-size: 100% 100%; } .homepage .hero-screen { display: block; position: relative; z-index: 9; margin: calc(-480px - var(--space)) auto var(--space) auto; width: 100%; max-width: 1000px; border-radius: 6px; background: white; box-shadow: 0 5px 15px rgba(0,0,0,0.5); box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px; } @media (prefers-reduced-motion: no-preference) { @keyframes fadeInUp { 0% { transform: translateY(50%); opacity: 0; } 100% { transform: translateY(0%); opacity: 1; } } .homepage .hero h1, .homepage .hero p, .homepage .hero-buttons, .homepage .hero-meta { animation: 1.5s fadeInUp; } @keyframes screenSlide { 0% { transform: translateY(80%); scale: 0.9; } 100% { transform: translateY(0%); scale: 1; } } .homepage .hero-screen { animation: 1.5s screenSlide; } } @property --r2 { syntax: ""; inherits: false; initial-value: 0deg; } @property --x { syntax: ""; inherits: false; initial-value: 0; } @keyframes btn-fancy { 0% { --x: 20px } 33% { --x: 206px } 50% { --x: 206px } 83% { --x: 20px } to { --x: 20px } } @keyframes btn-fancy2 { 0% { --r2: 0deg } 33% { --r2: 0deg } 50% { --r2: 180deg } 83% { --r2: 180deg } to { --r2: 360deg } } .homepage .hero .btn { width: 21ch; z-index: 99; } .homepage .hero .btn-fancy { background: conic-gradient(from calc(var(--r2) - 80deg) at var(--x) 15px,transparent 0,#a5d5ec 20%,transparent 25%),#2d62da; border-radius: 0.5em; box-shadow: 0 0 20px 0 rgb(48 121 245 / 21%); transition: all .2s ease; transform: translateZ(0); padding: 1px; cursor: pointer; animation: btn-fancy2 -.64s linear 3s infinite, btn-fancy -.64s linear 3s infinite } .homepage .hero .btn-fancy-inner { display: block; width: 21ch; padding: 1em 1.5em; color: rgba(255,255,255,0.85); font-weight: 500; background: #0a3f79; background: radial-gradient(50% 50% at 50% 50%, #0a41a8 -90%, #0a3f79 100%); border-radius: 0.5em; text-shadow: 0 1px 3px rgba(0,0,0,0.2); } .homepage .hero .btn-fancy:hover { background-color: #2691dd; box-shadow: 0 0 20px 3px rgb(49 145 245 / 35%); } .homepage .hero .btn-fancy:hover a { color: #fff; background: #0d54a3; } .homepage .hero .btn:nth-child(2) { background: rgba(255, 208, 40, 0.425); border: 1px solid rgba(255, 208, 40, 0.45); color: rgba(255,255,255,0.9) !important; box-shadow: 0 0 20px 0 rgb(245 224 48 / 21%); text-shadow: 0 1px 3px rgba(0,0,0,0.5); } .homepage .hero .btn:nth-child(2):hover { color: #fff !important; background: rgba(255, 208, 40, 0.5); border: 1px solid rgba(255, 208, 40, 0.5); box-shadow: 0 0 20px 3px rgb(245 234 49 / 25%); } @media (max-width: 768px) { .hero-me///ta { flex-direction: column; gap: 1rem; } } @media only screen and (max-width: 700px) { .homepage .hero h1 { font-size: 3.5em; } } @media only screen and (max-width: 570px) { .homepage .hero-buttons { display: block; } .homepage .hero .btn, .homepage .hero .btn-fancy, .homepage .hero .btn-fancy-inner { display: block; width: 100%; } .homepage .hero .btn, .homepage .hero .btn-fancy{ margin-bottom: 1.1rem; } } /* ================================================================================== */ /* == Content Worth ================================================================= */ /* ================================================================================== */ .homepage .content-worth { background: linear-gradient(0deg, var(--light-gray) 0%, var(--background-color) 100%);} .homepage .content-worth .inner { max-wi/dth: 1050px; margin: 0 auto; overflow: hidden; margin: 8rem auto 2rem; } .homepage .content-worth h2 { text-align: center; text-wrap: balance; margin-bottom: .5rem; } .homepage .content-worth .text { max-width: 840px; margin: 0 auto; background: url(../../img/piggy-bank2.png) no-repeat center top; background-size: 415px auto; padding-top: 428px; } .homepage .content-worth .text .subtitle { font-size: 2.75rem; text-align: center; font-family: var(--font-headline); font-weight: 700; color: var(--text-darkest); backg/round:#fff; padding: 1rem 1.5rem; background: -webkit-linear-gradient(var(--text-darkest), red); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .homepage .content-worth .text strong { display: block; font-family: var(--font-headline); font-size: 1.225em; color: var(--text-darkest); co/lor: var(--accent-color); margin-bottom: 0.15rem; } .homepage .content-worth .text ul { padding-bottom: 1.5rem; } .homepage .content-worth .text li { padding: 1.5rem 1.5rem 1.5rem 5.5rem; position: relative; display: flex; flex-basis: 50%; flex-direction: column; border: 1px solid rgba(255,255,255,0.5); background: linear-gradient(9deg, rgba(255,255,255,0.75) -20%, rgba(255,255,255,0.1) 80%); border-radius: var(--radius); margin-top: 1rem; font-size: 0.95rem; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px, rgba(0, 0, 0, 0.35) 0px 15px 15px -20px; } .homepage .content-worth .text li:before { content: ""; background: #ff891d; border-radius: 50%; width: 2.5rem; height: 2.5rem; position: absolute; top: 1.5rem; left: 1.5rem; } .homepage .content-worth .text li:before { background: #ffb2b0 url(../../img/thumbs-down.svg) no-repeat center; background-size: 60%; } .homepage .content-worth .text li:before { border-radius: 10px; top: calc(50% - calc((1.25rem + 20px) / 2)); } .homepage .content-worth .text li:nth-child(1):before { background: #ffb2b0 url(../../img/thumbs-down.svg) no-repeat center; background-size: 60%; box-shadow: 0 0 0 5px rgba(255, 178, 176, 0.35); } .homepage .content-worth .text li:nth-child(2):before { background: #c6e6b7 url(../../img/trending-down.svg) no-repeat center; background-size: 60%; box-shadow: 0 0 0 5px rgba(198, 230, 183, .5); } .homepage .content-worth .text li:nth-child(3):before { background: #bbdfff url(../../img/user-group.svg) no-repeat center; background-size: 60%; box-shadow: 0 0 0 5px rgba(187, 223, 255, 0.4); } .homepage .content-worth .text li:nth-child(4):before { background: #ffc69e url(../../img/fire.svg) no-repeat center; background-size: 60%; box-shadow: 0 0 0 5px rgba(255, 198, 158, 0.4); } @media (prefers-reduced-motion: no-preference) { .homepage .content-worth .inner { scale: .85; opacity: 0; animation: worth-fade-in linear forwards; animation-timeline: view(); animation-range: entry; animation-range: 400px 600px; } @keyframes worth-fade-in { to { scale: 1; bottom: 0; opacity: 1; } } } /* ================================================================================== */ /* == Pigeon Can Help =============================================================== */ /* ================================================================================== */ .homepage .pigeon-can-help { padding-top: 0; background: linear-gradient(0deg, #d1d5da 0%, var(--light-gray) 100%); } .homepage .pigeon-can-help .box { background: url('../../img/bricks3.svg'), radial-gradient(75% 75% at 50% 100%, #5c1913 0%, rgb(0, 0, 0) 100%); background-blend-mode: soft-light; background-size: 1700px, cover; background-position: center, center; padding: calc(var(--space) / 1.5); padding-right: 3.5rem; border-radius: var(--radius); position: relative; box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 4px, rgba(0, 0, 0, 0.09) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; } .homepage .pigeon-can-help .box:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../img/noise.png); background-size: 100px; opacity: 0.08 } .homepage .pigeon-can-help img { position: absolute; bottom: 0; height: 112%; z-index: 1; } .homepage .pigeon-can-help h2 { color: #fff; margin-bottom: 0.3em; font-size: 3.25em; text-shadow: 0 0 20px rgba(191, 11, 11, 0.35); } .homepage .pigeon-can-help p { color: rgb(213 198 185 / 80%); font-size: 2em; } .homepage .pigeon-can-help .text { padding-left: 50%; position: relative; z-index: 1; } .homepage .pigeon-can-help .text .read-more { display: block; font-size: 1.225rem; margin-top: 1.5rem; text-decoration: none; } .homepage .pigeon-can-help .box:before { content: ""; position: absolute; z-index: 1; top: 55%; left: 2%; width: 52%; height: 60%; background: radial-gradient(#d07777 10%, #ffa6d8 20%, #ffa6b0 30%, #ee3a2c 60%); filter: blur(40px); border-radius: 50%; mix-blend-mode: color-dodge; opacity: 0.17; } @media (prefers-reduced-motion: no-preference) { .homepage .pigeon-can-help img { scale: .8; bottom: -100px; /* opacity: 0; */ animation: fade-in linear forwards; animation-timeline: view(); animation-range: entry; /* animation-range: 250px 500px; */ } .homepage .pigeon-can-help .text { opacity: 0; animation: fade-in linear forwards; animation-timeline: view(); animation-range: 250px 500px; } @keyframes fade-in { to { scale: 1; bottom: 0; opacity: 1; } } } @media only screen and (max-width: 1350px) { .homepage .pigeon-can-help h2 { font-size: 3em; } .homepage .pigeon-can-help p { font-size: 1.75em; } .homepage .pigeon-can-help .box { padding: 3em; } .homepage .pigeon-can-help .text { padding-left: 38%; } .homepage .pigeon-can-help img { width: 30%; height: auto; } } @media only screen and (max-width: 1300px) { .homepage .pigeon-can-help p { font-size: 1.5em; } .homepage .pigeon-can-help .box { padding: 2em; } } @media only screen and (max-width: 1100px) { .homepage .pigeon-can-help p { font-size: 1.25em; } } @media only screen and (max-width: 800px) { .homepage .pigeon-can-help p { font-size: 1em; } } @media only screen and (max-width: 700px) { .homepage .pigeon-can-help h2 { font-size: 2.5em; } } @media only screen and (max-width: 680px) { .homepage .pigeon-can-help .text { padding: 0 0 65% 0; text-align: center; } .homepage .pigeon-can-help img { width: 50%; height: auto; left: 25%; } } /* ================================================================================== */ /* == Pigeon the Paywall Pioneer ==================================================== */ /* ================================================================================== */ .homepage .our-experience { } .homepage .our-experience .container { max-width: 850px; } .homepage .our-experience h2 { text-align: center; } /* ================================================================================== */ /* == Who is Pigeon For ============================================================= */ /* ================================================================================== */ .homepage .who-is-pigeon { background: #18181B; background: radial-gradient(104% 118% at 100% -40%, #32363b 0%, #18181B 100%); border-top: 1px solid #000; border-bottom: 1px solid #000; box-shadow: inset 0 3px 0 -2px rgba(255,255,255,0.2); padding-left: 0; padding-right: 0; position: relative; } .homepage .who-is-pigeon:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../img/noise.png); background-size: 100px; opacity: 0.06; } .homepage .who-is-pigeon .section-header { display: flex; justify-content: space-between; align-items: center; padding-left: var(--space); padding-right: var(--space); margin-bottom: 0.5em; position: relative; z-index: 1; } .homepage .who-is-pigeon h2 { color: #fff; margin-bottom: 0; } .homepage .who-is-pigeon .scroll-container-wrapper { position: relative; z-index: 1; } .homepage .who-is-pigeon .scroll-container { display: flex; gap: 40px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding: 1rem 0; } .homepage .who-is-pigeon .scroll-container::-webkit-scrollbar { display: none; } .homepage .who-is-pigeon .scroll-buttons { display: flex; gap: 0.5em; } .homepage .who-is-pigeon .scroll-button { width: 2.75em; height: 2.75em; opac//ity: 0.6; border-radius: 50%; background: rgba(255, 255, 255, .015); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(0.025rem); box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px, rgba(0, 0, 0, 0.1) 0px 6px 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); text-indent: -9999px; transition: all 0.3s ease; } .homepage .who-is-pigeon .scroll-button:hover { color: white; border-color: var(--primary-color); opacity: 1; } .homepage .who-is-pigeon .scroll-button:disabled { opacity: 0.5; cursor: not-allowed; } .homepage .who-is-pigeon .scroll-button.scroll-right { background: rgba(255, 255, 255, .015) url(../../img/arrow-right.svg) no-repeat center; background-size: 65%; } .homepage .who-is-pigeon .scroll-button.scroll-left { background: rgba(255, 255, 255, .015) url(../../img/arrow-left.svg) no-repeat center; background-size: 65%; } .homepage .pigeon-card { flex: 0 0 475px; display: flex; flex-direction: column; padding: 2em; color: #A1A1AA; backdrop-filter: blur(1rem); background: rgba(255, 255, 255, .015); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px, rgba(0, 0, 0, 0.1) 0px 6px 6px; border-radius: var(--radius); text-align: left; transition: all 0.3s ease; } .homepage .pigeon-card:first-child { margin-left: var(--space); } .homepage .pigeon-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, 0.15); color: #A1A1AA; box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 25px, rgba(0, 0, 0, 0.1) 0px 9px 9px; } .homepage .pigeon-card h3 { color: #fff; font-size: 1.25em; margin-bottom: 0.8em; } .homepage .pigeon-card p { margin-bottom: 1.5em; } .homepage .pigeon-card .learn-more { color: var(--primary-color); font-weight: 500; margin-top: auto; } .homepage .pigeon-card:hover .learn-more { text-decoration: underline; } .homepage .pigeon-card a { color: var(--primary-color); text-decoration: none; font-weight: 500; } .homepage .pigeon-card a:hover { text-decoration: underline; } @media only screen and (min-width: 1450px) { .homepage .who-is-pigeon .section-header { padding-left: calc((100% - 1250px) / 2); padding-right: calc((100% - 1250px) / 2); } .homepage .who-is-pigeon .pigeon-card:first-child { margin-left: calc((100% - 1250px) / 2); } } /* ================================================================================== */ /* == Video ========================================================================= */ /* ================================================================================== */ .homepage .video-section { text-align: center; padding-bottom: 0; } .homepage .video-container { max-width: 950px; margin: 0 auto; aspect-ratio: 16/9; background: url(https://graduum.niklausgerber.com/assets/images/gallery01/eb6c8e95_original.jpg?v=a66bfeb6); background-size: cover; border-radius: var(--radius); position: relative; box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 4px, rgba(0, 0, 0, 0.09) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px, rgba(0, 0, 0, 0.05) 0px 0 0 7px; } .homepage .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; } /* ================================================================================== */ /* == Features ====================================================================== */ /* ================================================================================== */ .features { text-align: center; } .features h2 { margin-bottom: 0.1em; } .features p { text-wrap: balance; } .features .container { max-wid/th: calc(1250px + 2em); } .features .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.75em; margin: 3em auto 0; padding: 0 1em; } .features .feature h3 { color: #fff; margin-bottom: 0.8em; font-size: 1.25em; } .features .feature .learn-more { color: var(--accent-color); font-weight: 500; } .features .feature .learn-more:after { content: "→"; vertical-align: -0.1ch; margin-left: 0.5ch; transition: all 0.3s ease; } .features .feature:hover .learn-more:after { margin-left: 1ch; } .features .feature { min-height: 16.75em; position: relative; overflow: hidden; padding: 2em; border-radius: var(--radius); text-align: left; transition: all 0.3s ease; background: radial-gradient(114% 98% at 100% 100%, #0b4abf 0%, rgb(0, 3, 15) 100%); box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 4px, rgba(0, 0, 0, 0.09) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; } .features .feature:hover { margin-top: -0.5rem; } .features .feature:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../img/noise.png); background-size: 100px; opacity: 0.09; } .features .feature:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.95; } .features .feature:nth-child(1) { background: radial-gradient(114% 98% at 100% 100%, #bf0b0b 0%, rgb(0, 3, 15) 100%); } .features .feature:nth-child(1):after { background: url('../../img/feature1.png') no-repeat center bottom; background-size: 100% auto; } .features .feature:nth-child(2) { background: radial-gradient(114% 98% at 100% 100%, #0b4abf 0%, rgb(0, 3, 15) 100%); } .features .feature:nth-child(2):after { background: url('../../img/feature2.png') no-repeat center bottom; background-size: 100% auto; } .features .feature:nth-child(3) { background: radial-gradient(114% 98% at 100% 100%, #8d0bbf 0%, rgb(0, 3, 15) 100%); } .features .feature:nth-child(3):after { background: url('../../img/feature3.png') no-repeat center bottom; background-size: 100% auto; } .features .feature:nth-child(4) { background: radial-gradient(114% 98% at 100% 100%, #0eaaa0 0%, rgb(0, 3, 15) 100%); } .features .feature:nth-child(4):after { background: url('../../img/feature4.png') no-repeat center bottom; background-size: 100% auto; } .features .feature:nth-child(5) { background: radial-gradient(114% 98% at 100% 100%, #635f4d 0%, rgb(0, 3, 15) 100%); } .features .feature:nth-child(5):after { background: url('../../img/feature5.png') no-repeat center bottom; background-size: 100% auto; } .features .feature:nth-child(6) { background: radial-gradient(114% 98% at 100% 100%, #0b4abf 0%, rgb(0, 3, 15) 100%); } .features .feature:nth-child(6):after { background: url('../../img/feature6.png') no-repeat center bottom; background-size: 100% auto; } .features .feature:nth-child(7) { background: radial-gradient(114% 98% at 100% 100%, #985e18 0%, rgb(0, 3, 15) 100%); } .features .feature:nth-child(7):after { background: url('../../img/feature7.png') no-repeat center bottom; background-size: 100% auto; } .features .feature:nth-child(8) { background: radial-gradient(114% 98% at 100% 100%, #1597c9 0%, rgb(0, 3, 15) 100%); } .features .feature:nth-child(8):after { background: url('../../img/feature8.png') no-repeat center bottom; background-size: 100% auto; } .features .feature:nth-child(9) { background: radial-gradient(114% 98% at 100% 100%, #353d46 0%, rgb(0, 3, 15) 100%); } @media (prefers-reduced-motion: no-preference) { .features .feature { scale: .8; opa//city: 0.25; animation: feature-fade-in linear forwards; animation-timeline: view(); animation-range: entry; /* animation-range: 250px 500px; */ transform: translateZ(400px) translateY(300px) rotateX(-90deg); transform-style: preserve-3d; } @keyframes feature-fade-in { to { scale: 1; bottom: 0; opacity: 1; transform: translateZ(0px) translateY(0px) rotateX(0deg); } } } /* ================================================================================== */ /* == Pricing ======================================================================= */ /* ================================================================================== */ .pricing { background: url('../../img/bricks3.svg'), radial-gradient(114% 98% at 100% 100%, #0b4abf 0%, rgb(0, 3, 15) 100%); background-blend-mode: soft-light; background-size: 1600px, cover; background-position: center, center; text-align: center; position: relative; } .pricing:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../img/noise.png); background-size: 100px; opacity: 0.06; } .pricing .container { position: relative; z-index: 1; } .pricing h2 { color: #fff; margin-bottom: 0.1em; } .pricing .subtitle { margin-bottom: calc((var(--space) / 2.25) + 1.5rem); color: var(--text-light-on-dark); } .pricing .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: calc(var(--space) / 1.5); } .pricing .footnote { font-size: 0.835em; color: var(--text-light-on-dark); margin: 2.75em 0 0 0; } .pricing .price-card { background: white; bor//der: 8px solid var(--accent-color); overflow: hidden; background: linear-gradient(0deg, var(--background-color) 0%, #ffffff 100%); border-radius: var(--radius); text-align: center; box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 4px, rgba(0, 0, 0, 0.09) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px, rgba(0, 122, 255, 0.15) 0 0 0 10px, rgba(0, 122, 255, 0.25) 0 0 10px 1px, inset rgba(0, 122, 255, 0.1) 0 0 15px 2px; } .pricing .price-card > div { padding: 2em; border-bottom: 1px solid var(--border-color); } .pricing .price-card > div:last-child { border: none;} .pricing .price-card h3 { font-size: 2.15em; font-wei/ght: 800; margin-bottom: 0.2em; color:#fff; position: relative; z-index: 1; } .pricing .price-card .card-header { text-shadow: 0 1px 2px rgba(0,0,0,0.35); background: radial-gradient(130% 185% at 50% 15%, #0b63bf 0%, rgb(4 13 48) 100%); color: #79b4f5; text-wrap: balance; position: relative; } .pricing .price-card .card-header:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../img/noise.png); background-size: 100px; opacity: 0.06; } .pricing .price-card .card-price { font-weight: 500; box-shadow: 0 25px 25px rgba(0,0,0,0.03), 0 -25px 25px rgba(0,0,0,0.03); color: var(--text-lighter);} .pricing .price-card .card-price .price { font-size: 2.75em; font-weight: bold; color: var(--text-darkest); margin: 0.1em 0; color: #0b63bf; } .pricing .price-card .card-points { text-align: left; font-weight: 500; } .pricing .price-card .card-points li { margin-bottom: 1em; } .pricing .price-card .card-points li:last-child { margin: 0; } .pricing .price-card .card-points .tooltip { float: right; } .pricing .price-card .card-points .tooltip-trigger { text-indent: -9999px; width: 1.3em; height: 1.3em; background: url(../../img/circle-info.svg) no-repeat center; background-size: 100%; opacity: 0.25; } .pricing .price-card .card-points .tooltip-content { transform: translateX(0); left: auto; right: -1rem; width: 270px; padding: 15px; } .pricing .price-card .card-points .tooltip-content::after { left: auto; right: 1.35rem; } .pricing .price-card .btn { display: block; } @media only screen and (min-width: 1260px) { .pricing .price-card:nth-child(2) { transform: scale(1.05) translateY(-0.5em); } } @media (prefers-reduced-motion: no-preference) { .pricing .price-card { scale: .8; /* opacity: 0; */ animation: price-fade-in linear forwards; animation-timeline: view(); animation-range: entry; /* animation-range: 250px 500px; */ } .price-card:first-child, .price-card:last-child { scale: 0.6; } @keyframes price-fade-in { to { scale: 1; bottom: 0; opacity: 1; } } } .pricing-page .pricing { background: none; padding: var(--space) 0; } .pricing-page .pricing:after { display: none; } .pricing-page .pricing h1, .pricing-page .pricing h2 { color: var(--text-darkest); } .pricing-page .pricing .subtitle, .pricing-page .pricing .footnote { color: var(--text-default); } .pricing-page .pricing .price-card { box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 4px, rgba(0, 0, 0, 0.09) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; } @media only scre/////en and (max-width: 1260px) { .pricing .pricing-grid { display: block; } .pricing .price-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 2fr)); margin-top: calc(var(--space) / 2); } } /* ================================================================================== */ /* == FAQ =========================================================================== */ /* ================================================================================== */ .homepage .faq { margin: 0 auto; background: radial-gradient(94% 98% at 10% 0%, #ffffff 0%, var(--background-color)); } .homepage .faq h2 { text-align: center; margin-bottom: 1em; } .homepage .faq .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 725px; margin: 0 auto; border-top: 1px solid var(--border-color); } .homepage .faq .faq-list details { padding: 1.6em 0; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: all 0.3s ease; } .homepage .faq .faq-list details:hover { } .homepage .faq .faq-list details[open] { } .homepage .faq .faq-list summary { font-weight: 500; font-size: 1.1em; list-style: none; position: relative; padding-right: 2em; cursor: pointer; } .homepage .faq .faq-list summary::-webkit-details-marker { display: none; } .homepage .faq .faq-list summary::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1em; height: 1em; background: url(../../img/chevron-down.svg) no-repeat center; background-size: 100%; font-size: 1.35em; color: var(--text-secondary); transition: transform 0.3s ease; } .homepage .faq .faq-list details[open] summary::after { content: ""; background: url(../../img/chevron-up.svg) no-repeat center; background-size: 100%; } .homepage .faq .faq-list .faq-content { padding-top: 1em; color: var(--text-secondary); padding-right: 2rem; max-height: 0; opacity: 0; overflow: hidden; transition: all 1.5s ease-in-out; } .homepage .faq .faq-list details[open] .faq-content { max-height: 500px; opacity: 1; } .homepage .faq .faq-list .faq-content p { margin: 0; font-size: 1em; } .homepage .faq .faq-list details::details-content { opacity: 0; block-size: 0; overflow-y: clip; transition: content-visibility 1s allow-discrete, opacity 1s, block-size 1s; } .homepage .faq .faq-list details[open]::details-content { opacity: 1; block-size: auto; } @media (prefers-reduced-motion: no-preference) { .homepage .faq .faq-list details { interpolate-size: allow-keywords; } } @media only screen and (max-width: 680px) { .homepage .faq .faq-list summary { font-size: 1em; } } /* ================================================================================== */ /* == CTA =========================================================================== */ /* ================================================================================== */ .homepage .cta { padding-top: 0; background: linear-gradient(0deg, var(--light-gray) 0%, var(--background-color) 100%); margin: 0; } .cta { text-align: center; color: var(--text-light-on-dark); margin-bottom: var(--space); } .cta .box { background: url('../../img/bricks3.svg'), radial-gradient(94% 98% at 50% 5%, #0b4abf 0%, rgb(0, 3, 15) 100%); background-blend-mode: soft-light; background-size: 1600px, cover; background-position: center, center; overflow: hidden; padding: calc(var(--space) / 1.5); border-radius: var(--radius); box-shadow: inset 0 0 2px 2px rgba(14, 73, 189, 0.7), inset 0 0 0px 1px rgba(55, 118, 240, 0.7), 0 10px 15px 2px rgba(55, 118, 240, 0.07); b/order-top: 1px solid #5689ed; position: relative;box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 4px, rgba(0, 0, 0, 0.09) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; } .cta .box:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../img/noise.png); background-size: 100px; opacity: 0.06; } .cta .box:before { content: ""; position: absolute; z-index: 0; top: -5%; left: 10%; width: 80%; height: 50%; background: radial-gradient(#ffc58b 10%, #e1a6ff 20%, #e1a6ff 30%, #352cee 60%); filter: blur(40px); border-radius: 50%; mix-blend-mode: color-dodge; opacity: 0.25; } .cta .box-inner { max-width: 650px; margin: 0 auto; position: relative; z-index: 1 } .cta .logo { display: block; margin: 0 auto 0.5em; width: 13.25em; } .cta h2 { -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 200%); mask-image: linear-gradient(to bottom, black 55%, transparent 200%); text-shadow: 0 2px 3px rgba(0,0,0,0.35); color: #fff; font-size: 2.75em; opacity: 0.98; margin-bottom: 0.35em; text-w///rap: balance; } .cta p { margin: 0 auto 2em; max-width: 510px; text-shadow: 0 2px 3px rgba(0,0,0,0.35); } .cta .cta-buttons { display: flex; gap: 2.5em; justify-content: center; } .cta .btn { width: 20ch; } @media (prefers-reduced-motion: no-preference) { .cta .box { scale: .9; /* opacity: 0.25; */ animation: cta-fade-in linear forwards; animation-timeline: view(); animation-range: entry-crossing; /* animation-range: 250px 500px; */ transform: translateY(200px); transform-style: preserve-3d; } @keyframes cta-fade-in { to { scale: 1; transform: translateY(0px); } } } @media only screen and (max-width: 800px) { .cta { font-size: 0.889rem; } .cta h2 { font-size: 5.3vw; line-height: 1.15; } .cta .logo { width: 30vw; } } @media only screen and (max-width: 570px) { .cta h2 { font-size: 5.75vw; margin: 1rem 0; } .cta .logo { width: 35vw; } .cta p { margin: 1rem 0 1.5rem 0; } .cta .cta-buttons { flex-direction: column; gap: 1rem; } .cta .btn { width: 100%;} } /* ================================================================================== */ /* == Footer ======================================================================== */ /* ================================================================================== */ footer { background: #fff; border-top: 1px solid var(--border-color); position: relative; z-index: 2; } footer > .container { position: relative; z-index: 1; max-width: calc(1250px + var(--space)); padd/////ing: var(--space) calc(var(--space) / 2); } footer .logo img { display: block; width: 125px; } footer .footer-columns { display: flex; justify-content: space-between; flex-wrap: wrap; padding: var(--space) 0; } footer .footer-section { font-size: 0.925rem; width: 20%; } footer .footer-section h4 { color: var(--text-darkest); } footer .footer-section ul { list-style: none; } footer .footer-section ul li { margin-top: 0.5rem; } footer .footer-section ul a { color: var(--text-default); text-decoration: none; } footer .footer-section ul a:hover { color: var(--primary-color); } footer .footer-bottom { background: #f7f7f7; border-top: 1px solid var(--border-color); position: relative; padding: 1rem 1.5rem; overflow: hidden; font-size: 14px; color: var(--text-lightest); } footer .footer-bottom .container { max-width: 1250px; padding: 0; } footer .footer-bottom, footer .footer-bottom a { color: var(--text-lightest); } footer .footer-bottom p { float: left; } footer .footer-bottom ul { float: right; } footer .footer-bottom ul li { display: inline-block; margin-left: 1rem; } .homepage footer { background: url('../../img/bricks3.svg'), radial-gradient(60% 80% at 50% 120%, #07204e 0%, rgb(0, 3, 15) 100%); background-blend-mode: soft-light; background-size: 1600px, cover; background-position: center, center; border: none; } .homepage footer:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../img/noise.png); background-size: 100px; opacity: 0.06; } .homepage footer .footer-section h4 { color: rgba(255,255,255, 0.9); } .homepage footer .footer-section ul a { color: var(--text-light-on-dark); opacity: 0.9; } .homepage footer .footer-bottom { background: rgb(0, 3, 15); border: none; } .homepage footer .footer-bottom:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: radial-gradient(60% 80% at 50% 120%, rgba(127, 181, 250, 0.65) 0%, rgba(49, 83, 220, 0.15) 100%); } .homepage footer .footer-bottom, .homepage footer .footer-bottom a { color: rgb(77 84 110 / 100%); } @media only screen and (max-width: 1000px) { foo////////ter > .container { padding: calc(var(--space) / 2); } footer .footer-columns { padding: calc(var(--space) / 1.1) 0; } footer .logo img { width: 100px; } footer .footer-section { font-size: 0.889rem; } footer .footer-section:first-child { flex: 1 1 100%; margin-bottom: calc(var(--space) / 4); } footer .footer-section:not(:first-child) { flex: 1 1 25%; width: auto; } } @media only screen and (max-width: 700px) { footer .footer-section:first-child { flex: 1 1 100%; margin-bottom: 0; } footer .footer-section:not(:first-child) { flex: 1 1 50%; margin-top: calc(var(--space) / 2); } footer .footer-section:nth-child(2) { order: 4; } footer .footer-section:nth-child(5) { order: 5; } footer .footer-bottom { padding: 1rem var(--space); font-size: 0.7rem; } footer .footer-bottom ul li { margin-left: 0.65rem; } } @media only screen and (max-width: 440px) { footer .footer-columns { padding: var(--space) 0; } footer .footer-section { font-size: 0.825rem; } footer .footer-section:not(:first-child) { margin-top: calc(var(--space) / 1.5); } } @media only screen and (max-width: 400px) { footer .footer-bottom { text-align: center; } footer .footer-bottom p { float: none; } footer .footer-bottom ul { float: none; margin: 0.5rem auto 0; } footer .footer-bottom ul li { margin: 0 0.35rem; } } /* Floating button to schedule a demo */ .floating-schedule-demo { position: fixed; right: 40px; bottom: 40px; width: 78px; height: 74px; border-radius: 10px 10px 10px 0; padding-top: 36px; z-index: 9; color: #7caedd; text-decoration: none; text-shadow: none; text-align: center; font-size: 13px; font-weight: 600; line-height: 1.1; background: #0b2d53 url(../../img/icon-videocam.svg) no-repeat center 4px; background-size: 35px; box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 18px 16px; animation-name: floating; animation-duration: 6s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .floating-schedule-demo:after { content: ""; position: absolute; left: 0; bottom: -9px; width: 0; height: 0; border-style: solid; border-width: 20px 34px 0 0; border-color: #0b2d53 transparent transparent transparent; transition: all 0.218s; } .floating-schedule-demo:hover { background-color: #2361a8; color: #b3cde4; } .floating-schedule-demo:hover:after { border-color: #2361a8 transparent transparent transparent; } @keyframes floating { 0% { transform: translate(0, 0px); } 50% { transform: translate(0, 8px) scale(0.96); } 100% { transform: translate(0, -0px); } } @media only screen and (max-width: 680px) { .floating-schedule-demo { display: none; } } /* ================================================================================== */ /* == Page Header =================================================================== */ /* ================================================================================== */ .page-header { background: var(--light-gray); background: radial-gradient(94% 98% at 100% 100%, #0b4abf 0%, rgb(0, 3, 15) 100%); color: rgb(181 213 226 / 70%); background: url('../../img/bricks3.svg'), radial-gradient(114% 98% at 100% 100%, #0b4abf 0%, rgb(0, 3, 15) 100%); background-blend-mode: soft-light; background-size: 1600px, cover; background-position: center, center; padding: calc(var(--space) + 4.25rem) var(--space) var(--space) var(--space); } .page-header:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../img/noise.png); background-size: 100px; opacity: 0.06 } .page-header .text { text-align: center; max-width: 800px; margin: 0 auto; color: var(--text-light-on-dark); } .page-header h1 { font-size: 4.25rem; line-height: 1.15; color: var(--text-darkest); color: #fff; margin: 0; text-shadow: 0 2px 3px rgba(0,0,0,0.35); -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 250%); mask-image: linear-gradient(to bottom, black 60%, transparent 250%); opacity: 0.99;} .page-header p { font-size: 1.5rem; margin-bottom: 2.5rem; font-weight: 300; } /* .page-header:after { content: ""; position: absolute; bottom: -500px; left: 0; width: 100%; height: 500px; background: var(--background-color); z-index: 1; transform: skewY(-185.5deg); transform-origin: top left; } */ /* ================================================================================== */ /* == Articles ====================================================================== */ /* ================================================================================== */ .page-body { position: relative; z-index: 2; } article .container { max-width: 1050px; padding: var(--space); } /* 3px = 0.167rem 4px = 0.222rem 5px = 0.278rem 6px = 0.333rem 8px = 0.444rem 10px = 0.556rem 12px = 0.667rem 16px = 0.889rem 18px = 1rem 20px = 1.111rem 26px = 1.444rem 32px = 1.778rem */ article p { line-height: 1.444rem; font-size: 0.889rem; color: var(--text-default); padding-top: 0.667rem; } article h1, article h2, article h3, article h4, article h5, article h6 { font-weight: 700; color: var(--text-darkest); margin: 0; } article h2 { padding-top: 1.8rem; } article h3 { padding-top: 1.111rem; font-size: 0.889rem; } article h3:not(:first-child) { margin-top: 1rem; padding-top: 0.889rem; } article h4, article h5, article h6 { font-size: 0.889rem; font-weight: 600; margin-top: 1.111rem; padding-top: 0.556rem; } article h1 { font-size: 3rem; } article h2 { font-size: 1.5rem; } /* Lists */ article ul, article ol { padding-top: 0.667rem; font-size: 0.889rem; line-height: 1.444rem; list-style: none; padding-left: 0; } article ul > li, article ol > li { padding-left: 1.778rem; margin: 0.222rem 0; position: relative; } article ul > li > h3, article ol > li > h3 { padding: 0; } article ul > li > h3 + p, article ol > li > h3 + p { padding: 0; } article ul > li > p:first-child, article ol > li > p:first-child { padding-top: 0; } article ul > li > p:last-child:not(:first-child), article ol > li > p:last-child:not(:first-child) { padding-bottom: 0.667rem; } article ul > li p + p, article ol > li p + p { padding-top: 0.667rem; } article ul > li:before { content: ""; position: absolute; width: 0.333rem; height: 0.333rem; left: 0.444rem; top: 0.556rem; border-radius: 50%; background: #c1c9d2; } article ol { counter-reset: listitem; } article ol > li:before { counter-increment: listitem; content: counter(listitem); background: #e3e8ee; color: #697386; font-size: 0.667rem; font-weight: 500; line-height: 0.556rem; text-align: center; padding: 0.278rem 0; height: 1.111rem; width: 1.111rem; border-radius: 0.556rem; position: absolute; left: 0; top: 0.167rem; } /* Nested Lists */ article ul ul, article ul ol, article ol ol, article ol ul { padding: 0.222rem 0; } /* List as a grid */ @media(min-width: 768px) { article .list-grid { display: grid; grid-template-columns: repeat(2, 1fr); } } .intro-graphic { } .intro-graphic .container { max-width: 1050px; padding: var(--space) var(--space) 0 var(--space); } .intro-graphic img { display: block; max-width: 100%; margin: 0 auto; } /* General Tooltips */ .tooltip { display: inline-block; position: relative; } .tooltip-trigger { background: none; border: none; color: #0066cc; text-decoration: underline; cursor: pointer; font-size: inherit; padding: 0; margin: 0; font-weight: bold; } .tooltip-trigger:focus { outline: 2px solid #0066cc; outline-offset: 2px; } .tooltip-content { position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); background-color: #333; color: white; font-weight: 400; padding: 8px 12px; border-radius: 4px; font-size: 0.7em; width: 220px; z-index: 9; display: none; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .tooltip-content::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; } p.tagline { color: var(--accent-color); font-weight: 500; padding-top: 0; } /* ================================================================================== */ /* == Features Page ================================================================= */ /* ================================================================================== */ .features-page { } .features-page h1 { text-align: center; } .features-page article .container { padding-bottom: 0; } .features-page .feature-grid { margin-bottom: var(--space); } /* article .sub-feature { display: flex; gap: var(--space); margin: 5rem 0; } article .sub-feature .text { width: 50% } article .sub-feature .graphic { width: 50%; } article .sub-feature .text h2 { padding-top: 0; } */ article .sub-feature { margin: 2.5rem 0; } article .sub-feature .graphic { display: none; } /* #convoluted-url { display: block; background: #dfffdf; padding: 1rem; border-radius: var(--radius); } #convoluted-url p { font-size: 0.75rem; color: var(--text-lighter); padding: 0; line-height: 1.5; } #convoluted-url strong { display: block; font-size: 0.8rem; color: var(--text-default); } #convoluted-url .convoluted-url-box { background: #fff; border-radius: 0.5rem; overflow: hidden; margin-top: 1rem; box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; } #convoluted-url .convoluted-url-box p:first-child { background: #97d1ae; color: #18593b; font-weight: 500; padding: 7px 15px; } #convoluted-url .convoluted-url-box p:last-child { padding: 10px 15px; white-spa//ce: pre;} */ #convoluted-url { background: #fff; border-radius: 0.35rem; overflow: hidden; margin-top: 1rem; box-shadow: rgba(14, 63, 126, 0.05) 0px 0px 0px 1px, rgba(42, 51, 70, 0.02) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.03) 0px 2px 2px -1px, rgba(42, 51, 70, 0.03) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.02) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.02) 0px 10px 10px -5px, rgba(42, 51, 70, 0.02) 0px 24px 24px -8px;} #convoluted-url p { font-size: 0.75rem; color: var(--text-lighter); } #convoluted-url p:first-child { background: #97d1ae; color: #18593b; font-weight: 500; padding: 7px 15px; } #convoluted-url p:last-child { padding: 10px 15px; white-spa//ce: pre; } .more-features-link { margin: var(--space) -2.5rem 0; background: radial-gradient(94% 98% at 50% 5%, #0b4abf 0%, rgb(0, 3, 15) 300%); position: relative; border-radius: var(--radius); } .more-features-link:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../img/noise.png); background-size: 100px; opacity: 0.06; pointer-events: none; } .more-features-link a { display: block; color: #fff; font-weight: 500; padding: 2.5rem; } .more-features-link a:after { content: ""; display: inline-block; width: 2em; height: 1em; background: url(../../img/arrow-right-white.svg) no-repeat center; background-size: 1.25em; vertical-align: -0.09em; transition: all 0.218s; } .more-features-link a:hover:after { width: 3.25em; } /* ================================================================================== */ /* == Pigeon + Metro Publisher Page ================================================= */ /* ================================================================================== */ #pigeon-metro-graphic .box { padding: 100px 20px 40px; background: rgba(55,105,105,0.17) radial-gradient(circle at center, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%); border-radius: 24px; box-shadow: rgba(50, 50, 93, 0.2) 0px 40px 30px -20px, rgba(0, 0, 0, 0.2) 0px 25px 30px -30px; overflow: hidden; } .partner-offer { margin-top: 50px; background: #FDD948; background-image: linear-gradient(-6deg, #FDCF1A 0%, #FDD948 80%); padding: 40px; font-weight: 600; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.15); } .partner-offer h2 { padding: 0; margin: 0; } .partner-offer p { color: #1a1f36; } /* ================================================================================== */ /* == Pigeon + PageSuite Page ======================================================= */ /* ================================================================================== */ /* Small Call to Action */ .cta-small { display: block; background-color: #21D4FD; background: linear-gradient(135deg, #5c58c0 0%, #0083c5 50%, rgba(0,173,203,1) 100%); color: #fff; border-radius: 14px; text-shadow: 0 1px 1px rgba(0,0,0,0.5); padding: 40px 210px 40px 40px; box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.15); margin: 65px auto 50px; position: relative; font-size: 18px; line-height: 1.5; font-weight: 600; text-wrap: balance; } .cta-small a.bird { content: ""; position: absolute; bottom: 0; right: -50px; width: 300px; height: 285px; background: url(../../img/pigeon-bird.png) no-repeat top left; background-size: 100% auto; transition: all 0.35s; text-indent: -9999px; } .cta-small:hover a.bird { width: 320px; height: 295px; right: -70px; } .cta-small p { color: #9beaff; padding-top: 5px; font-size: 18px; font-weight: 400; font-style: italic; } .cta-small a.learn { color: #1a1f36; color: #fff; font-size: 32px; line-height: 1.2; font-weight: 700; padding: 0; font-style: italic; } .cta-small a.demo { display: inline-block; margin-top: 20px; background: #FDD948; background-image: linear-gradient(12deg, #FDCF1A -30%, #FDD948 130%); color: #1a1f36; border-radius: 5px; padding: 12px 20px; text-shadow: none; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.25); } @media only screen and (max-width: 680px) { .cta-small { padding-right: 180px; } .cta-small a.learn { font-size: 26px; } .cta-small a.bird { right: -100px; height: 250px; } } @media only screen and (max-width: 500px) { .cta-small { padding: 25px 120px 25px 30px; } .cta-small a.learn { font-size: 24px; } .cta-small a.bird { right: -150px; height: 260px; } } @media only screen and (max-width: 400px) { .cta-small { padding: 25px 100px 25px 25px; } .cta-small a.learn { font-size: 22px; } .cta-small a.bird { right: -170px; height: 260px; } } /* ================================================================================== */ /* == Compare Paywall Providers ===================================================== */ /* ================================================================================== */ .compare-page .nifty-graphic { padding: 50px 0; position: relative; height: 480px; background: rgba(255,255,255,0.2) radial-gradient(circle at center bottom, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 70%); background-position: center bottom; border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; box-shadow: rgba(50, 50, 93, 0.25) 0px 40px 100px -20px, rgba(0, 0, 0, 0.3) 0px 25px 60px -30px; overflow: hidden; } .compare-page .nifty-graphic #lock { display: block; width: 420px; margin: 0 auto; position: absolute; top: 55px; left: 50%; margin-left: -210px; z-index: 2; } @media only screen and (max-width: 700px) { .compare-page .nifty-graphic { margin: 0 -35px; border-radius: 0; box-shadow: none; } .compare-page .nifty-graphic #lock { width: 340px; top: 90px; margin-left: -170px; } } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-250px * 7)); } } @keyframes scroll2 { 0% { transform: translateX(calc(-250px * 7)); } 100% { transform: translateX(0); } } @keyframes scroll3 { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-300px * 11)); } } .compare-page .slider { height: 100px; margin: auto; overflow: hidden; position: absolute; top: 285px; left: 50%; margin-left: -450px; transform: rotate(8deg); width: 900px; } .compare-page .slider .slide-track { animation: scroll 40s linear infinite; display: flex; width: calc(250px * 14); } .compare-page .slider1 .slide-track{ animation: scroll 150s linear infinite; } .compare-page .slider2 .slide-track{ animation: scroll 150s linear infinite; } .compare-page .slider3 .slide-track{ animation: scroll2 100s linear infinite; } .compare-page .slider4 .slide-track{ animation: scroll2 100s linear infinite; } .compare-page .slider5 .slide-track{ animation: scroll3 50s linear infinite; } .compare-page .slider .slide { height: 100px; width: 250px; } .compare-page .slider1 { top: 230px; transform: rotate(20deg); opacity: 0.1; filter: blur(5px); } .compare-page .slider2 { top: 230px; transform: rotate(-20deg); opacity: 0.1; filter: blur(5px); } .compare-page .slider3 { top: 230px; transform: rotate(10deg); opacity: 0.15; filter: blur(3px); } .compare-page .slider4 { top: 230px; transform: rotate(-10deg); opacity: 0.15; filter: blur(3px); } .compare-page .slider5 { top: 230px; transform: rotate(0deg); background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%); } .compare-page .slider5 { top: 220px; } .compare-page .slider5 .slide { width: 300px; height: 150px;} .compare-page .slider5 .slide img { display: block; width: 100% !important; height: auto !important; } .compare-page .slider5 .slide-track { width: calc(300px * 14); } .compare-page .intro-section .not-included { background: #ffede7; bord/er: 1px solid #D45245; border-radius: 10px; color: #D45245; font-sty//le: italic; font-wei//ght: 500; font-size: 15px; line-height: 26px; padding: 15px; text-align: center; margin: 25px 0; } .compare-page .intro-section .not-included a { color: #D45245; text-decoration: underline; } /* Cut to the chase */ .compare-page .cut-to-the-chase a { display: block; background-color: #21D4FD; background-image: linear-gradient(12deg, #239DEF -5%, #F86B67 105%); color: #fff; border-radius: 10px; text-shadow: 0 1px 1px rgba(0,0,0,0.25); padding: 40px 210px 40px 40px; box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.15); margin-top: 35px; position: relative; font-size: 18px; line-height: 1.5; font-style: italic; font-weight: 600; cursor: pointer; } .compare-page .cut-to-the-chase a:after { content: ""; position: absolute; bottom: 0; right: 0; width: 200px; height: 160px; background: url(../../img/compare/pigeon-bird.png) no-repeat top left; background-size: 100% auto; transition: all 0.35s; } .compare-page .cut-to-the-chase a:hover { background-image: linear-gradient(8deg, #239DEF -10%, #F86B67 100%); color: #fff; } .compare-page .cut-to-the-chase a:hover:after { height: 180px; } @media only screen and (max-width: 880px) { .compare-page .cut-to-the-chase a:after { height: 185px; } } @media only screen and (max-width: 700px) { .compare-page .cut-to-the-chase a:after { height: 210px; } } @media only screen and (max-width: 600px) { .compare-page .cut-to-the-chase a { padding: 30px 180px 30px 35px; } .compare-page .cut-to-the-chase a:after { height: 190px; right: -20px; } } @media only screen and (max-width: 500px) { .compare-page .cut-to-the-chase a { padding: 20px 110px 20px 25px; } .compare-page .cut-to-the-chase a:after { height: 190px; right: -80px; } } .competitors-section .toolbar { overflow: hidden; } .competitors-section .toolbar p { float: left; color: #697386; font-weight: 600; margin-top: -7px; } .competitors-section .toolbar #sort { float: right; border: 1px solid #d8dee4; border-radius: 4px; background: #f7fafc url(../../img/compare/sort.svg) no-repeat 10px center; background-size: 15px; padding: 10px 15px 10px 32px; font-size: 13px; font-weight: 600; color: #697386; margin: 0 0 19px 0; cursor: pointer; } .competitors-section { margin-top: 100px; } .competitor { border-top: 1px solid #d8dee4; padding: 45px 0 25px 0; } .competitor h2 { padding: 0; color: #3d4eac; } .competitor h2 a { color: #1a1f36; color: #3d4eac; } .competitor h2 a:hover { color: #3d4eac; color: #1a1f36; } .competitor h2 em { font-weight: 400; color: #697386; font-size: 20px; vertical-align: 1px; } .competitor .claim { padding: 18px; background: #fcfdfe; border: 1px solid #e3e8ee; border-radius: 4px; margin: 25px 0; position: relative; overflow: hidden; } .competitor .claim p strong { color: #1a1f36; } .competitor .claim p { padding: 0; font-style: italic; } .competitor .claim .claim-label { background: #f7fafc; border-bottom: 1px solid #e3e8ee; color: #697386; margin: -18px -18px 18px -18px; padding: 12px 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.025em; text-transform: uppercase; } .competitor .rating { background: #fff; border: 1px solid #e3e8ee; border-radius: 4px; margin: 25px 0; overflow: hidden; display:grid; grid-template-columns: repeat(6, 1fr); } .competitor .rating .feature {border-left: 1px solid #e3e8ee;text-align: center;} .competitor .rating .feature:first-child { border: none; } .competitor .rating .label { background: #f7fafc; border-bottom: 1px solid #e3e8ee; font-size: 14px; font-weight: 600; color: #1a1f36; padding: 10px 0; } @media only screen and (max-width: 680px) { .competitor .rating { grid-template-columns: repeat(3, 1fr); } .competitor .rating .feature:nth-last-child(-n+3) { border-top: 1px solid #e3e8ee; } } .competitor .rating .status { padding: 9px; } .competitor .rating .status div { border-radius: 5px; color: #fff; line-height: 50px; font-size: 15px; font-weight: 500; text-shadow: 0 -1px 1px rgba(0,0,0,0.1), 0 -1px 2px rgba(0,0,0,0.2), 0 0 5px rgba(0,0,0,0.2); } .competitor .rating .status .yes { background: #36AF47; background-image: linear-gradient(12deg, #36AF47 0%, #7BC43C 100%); } .competitor .rating .status .yes { border: 1px solid rgba(0,0,0,0.25); border-top: 1px solid rgba(0,0,0,0.15); border-bottom: 1px solid rgba(0,0,0,0.35); position: relative; background: radial-gradient(circle, #7BC43C 0%, #36AF47 100%); box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 2px 6px rgba(54, 175, 71, 0.7), inset 0 0 10px rgb(25 129 40); overflow: hidden; -webkit-box-reflect: below 0 linear-gradient(transparent 80%, rgba(0, 0, 0, .1) 100%); } .competitor .rating .status .yes:after { content: ""; position: absolute; border-radius: 100px; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 100%); z-index: 3; top: -18px; left: 0; transform: scale(0.96, 0.8); opacity: 0.6; } .competitor .rating .status .no { background: #D45245; background-image: linear-gradient(12deg, #D45245 0%, #F86B67 100%); } .competitor .rating .status .no { border: 1px solid rgba(0,0,0,0.25); border-top: 1px solid rgba(0,0,0,0.15); border-bottom: 1px solid rgba(0,0,0,0.35); position: relative; background: radial-gradient(circle, #f86c67 0%, #d45345 100%); box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 2px 6px rgba(248, 108, 103, 0.6), inset 0 0 10px rgb(174 46 32); overflow: hidden; -webkit-box-reflect: below 0 linear-gradient(transparent 80%, rgba(0, 0, 0, .1) 100%); } .competitor .rating .status .no:after { content: ""; position: absolute; border-radius: 100px; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 100%); z-index: 3; top: -18px; left: 0; transform: scale(0.96, 0.8); opacity: 0.6; } .competitor .rating .status .sorta { background: #DA932C; background-image: linear-gradient(12deg, #DA932C -30%, #FDCF1A 130%); } .competitor .rating .status .sorta { border: 1px solid rgba(0,0,0,0.25); border-top: 1px solid rgba(0,0,0,0.15); border-bottom: 1px solid rgba(0,0,0,0.35); position: relative; background: radial-gradient(circle, #FDCF1A 0%, #DA932C 100%); box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 2px 6px rgba(253, 207, 27, 0.6), inset 0 0 10px rgb(177 110 12); overflow: hidden; -webkit-box-reflect: below 0 linear-gradient(transparent 80%, rgba(0, 0, 0, .1) 100%); } .competitor .rating .status .sorta:after { content: ""; position: absolute; border-radius: 100px; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 100%); z-index: 3; top: -18px; left: 0; transform: scale(0.96, 0.8); opacity: 0.6; } .competitor .special-note { background: #3d4eac; border-radius: 4px; color: #fff; font-style: italic; font-weight: 500; padding: 30px; text-align: center; margin: 25px 0; } .competitor .unfinished { background: #ffede7; border: 1px solid #D45245; border-radius: 4px; color: #D45245; font-style: italic; font-weight: 500; padding: 30px; text-align: center; margin: 25px 0; font-size: 14px; } .competitor .notes { margin: 25px 0; } .competitor .notes h3 { margin: 0; padding: 0; font-size: 15px; } .competitor .notes ul { padding: 0 32px 0 0; font-size: 15px; line-height: 22px; } .competitor .compare { display: block; color: #3d4eac; } /* ================================================================================== */ /* == Contact Us Page =============================================================== */ /* ================================================================================== */ .contact-us .container { max-width: 1050px; padding: var(--space); text-align: center; } .contact-us h1 { margin-top: 0; } .contact-us .voForm { background: #fff; padding: calc(var(--space) / 2); border-radius: var(--radius); margin-top: calc(var(--space) / 2); box-shadow: inset 0 0 2px 2px rgba(14, 73, 189, 0.7), inset 0 0 0px 1px rgba(55, 118, 240, 0.7), 0 10px 15px 2px rgba(55, 118, 240, 0.07); b/order-top: 1px solid #5689ed; position: relative;box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 4px, rgba(0, 0, 0, 0.09) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;} .contact-us fieldset { padding: 0; border: none; } .contact-us legend { display: none; } .contact-us input, .contact-us textarea, .contact-us .submit { backgr/ound: var(--background-color); border: 1px solid var(--border-color); font-size: 0.925rem; color: var(--text-default); height: 45px; width: 100%; line-height: 35px; padding: 0 12px; margin-bottom: 15px; border-radius: calc(var(--radius) / 3); } .contact-us input { } .contact-us textarea { height: 176px; line-height: 1.3em; padding: 7px 12px; } .contact-us li { list-style: none; display: block; width: 100% !important; margin: 0 !important; } .contact-us .submit { display: inline-block; color: #fff; background: var(--primary-color); border: none; cursor: pointer; margin: 0; } .contact-us .submit:hover { background: #78C600; } .contact-us .success-message, .contact-us .error-message { background: #78C600; padding: 20px; margin-bottom: 15px; border-radius: 3px; color: #fff; text-align: center; text-shadow: 0px 1px 1px rgba(0,0,0,0.6); font-size: 1.1em; } .contact-us .error-message { background: #CF0E3D; } /* ================================================================================== */ /* == Integrations Page ============================================================= */ /* ================================================================================== */ .integrations-page section { padding: var(--space); padding-bottom: calc(var(--space) / 2); text-align: center; } .integrations-grid { grid-column-gap: 1rem; grid-row-gap: 1rem; flex-wrap: wrap; grid-template-rows: auto auto; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-columns: 1fr; display: grid } .integrations-grid li { text-align: center; background: #fff; box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 4px, rgba(0, 0, 0, 0.09) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; border-radius: 12px; flex-direction: column; justify-content: center; align-items: center; height: 100%; font-family: Inter,sans-serif; text-decoration: none; transition: all .2s; position: relative; } .integrations-grid li:hover { transform: translate(0, -0.3rem);} .integrations-grid li a { display: block; padding: 1.5rem; } .integrations-grid li h2 { font-size: 1rem; margin: 0; } .integrations-grid li img { height: 100px; width: 100px; border: 1px solid var(--border-color); border-radius: calc(var(--radius) / 1.5); } .integrations-page .still-more { margin: calc(var(--space) / 1.5); margin-bottom: 0; text-align: center; } .integrations-page .still-more a { display: inline-block; padding: calc(var(--space) / 3); background: var(--accent-color); border-radius: var(--radius); color: #fff; box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 4px, rgba(0, 0, 0, 0.09) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; } .integrations-page .still-more a:hover { background: var(--primary-color); } /* ================================================================================== */ /* == Who For Page ================================================================== */ /* ================================================================================== */ .who-for-page {} .who-for-page article h2 { border-top: 1px solid rgba(0,0,0,0.05); padding: 1.25em 0 0 0; margin-top: 1.25em; } .who-for-page article h2 a { color: var(--text-darkest); } .more-for-link { margin: var(--space) 0 0; background: radial-gradient(94% 98% at 50% 5%, #0b4abf 0%, rgb(0, 3, 15) 300%); position: relative; border-radius: var(--radius); } .more-for-link:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../img/noise.png); background-size: 100px; opacity: 0.06; pointer-events: none; } .more-for-link a { display: block; color: #fff; font-weight: 500; padding: 2.5rem; } .more-for-link a:after { content: ""; display: inline-block; width: 2em; height: 1em; background: url(../../img/arrow-right-white.svg) no-repeat center; background-size: 1.25em; vertical-align: -0.09em; transition: all 0.218s; } .more-for-link a:hover:after { width: 3.25em; } .special-quote { position: relative; font-size: 1.1rem; padding: 3em; border-radius: var(--radius); margin: 1.5rem -0.6rem; overflow: hidden; position: relative; text-shadow: 0 1px 3px rgba(0,0,0,0.25); box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 4px, rgba(0, 0, 0, 0.09) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; } .special-quote { background: radial-gradient(94% 98% at 50% 5%, #0b4abf 0%, rgb(0, 3, 15) 300%); color: rgba(255,255,255,0.9); } .special-quote .text { font-st/yle: italic; font-weight: 500; position: relative; } .special-quote:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../img/noise.png); background-size: 100px; opacity: 0.06; } .special-quote:before { content: ""; position: absolute; top: 2.5rem; left: 2.5rem; width: 2.5rem; height: 2.5rem; background: #68a2f5; background: url(../../img/quote-left.svg) no-repeat center; background-size: 100%; opacity: 0.35; } .special-quote .person { font-weight: 600; display: block; margin-top: 1em; font-style: italic; } .special-quote .person a { color: #ffd028; } #img-for-newspapers { float: right; width: 50%; } /* ================================================================================== */ /* == 404 Error Page ================================================================ */ /* ================================================================================== */ .error-page { } .error-page article { text-align: center; } .error-page h1 span { display: block; text-indent: -9999px; height: 400px; background: url(../../img/404-pigeon.png) no-repeat center; background-size: contain; margin-top: -15px; } /* ================================================================================== */ /* == Why you need a paywall Page =================================================== */ /* ================================================================================== */ .why-paywall-page { } .why-paywall-page section { border-bottom: 1px solid var(--border-color); } .why-paywall-page section:not(#survive, .pricing) { background: linear-gradient(135deg, #fff 0%, var(--light-gray) 150%); } .why-paywall-page .container { max-width: calc(920px + var(--space) + var(--space)); } .why-paywall-page h1 { text-align: center; } .why-paywall-page h2 { font-size: 2.5rem; text-align: center; margin: 0 0 1rem 0; padding: 0; } /*Who Will Survive the Death of Newspaper Industry?*/ .why-paywall-page #survive ul { margin: 5%; padding: 30px; background: #fff; border-radius: 8px; box-shadow: inset 0px 1px 3px rgba(0,0,0,0.3), inset 0px -1px 2px rgba(0,0,0,0.1); list-style: none; } .why-paywall-page #survive ul li { border-bottom: 1px dotted #dcdcdc; padding-bottom: 25px; margin-bottom: 25px; } .why-paywall-page #survive ul li:last-child { margin: 0; padding: 0; border: none; } .why-paywall-page #survive h3 { font-size: 19px; } .why-paywall-page #survive .buffett { float: left; margin: 15px 35px 10px 0; } .why-paywall-page #survive .buffett img { display: block; } .why-paywall-page #survive .buffett p { font-size: 13px; text-align: center; background: #fff; box-shadow: 0px 1px 3px rgba(0,0,0,0.3); border-radius: 0 0 4px 4px; padding: 5px 0; font-style: italic; color: #17191A; margin: 0;} .why-paywall-page #survive p { z-index: 66; position: relative; } .why-paywall-page #survive img#highlight { position: absolute; top: 790px; left: -42px; z-index: 9; } /*Adveristing Revenue is Unreliable*/ .why-paywall-page #secret img { float: right; width: 200px; margin: 0 0 0 30px; } /*A Sure-Fire Alternative Revenue Source*/ .why-paywall-page #sure p#note { background: url(../../img/underline.png) no-repeat center bottom; text-align: center; padding-bottom: 5px; font-s///ize: 18px; } /*The Accepted Future of Online Content*/ .why-paywall-page #accepted img#lockedout { display: block; margin: 35px auto -100px auto; } /*A Changing Medium*/ .why-paywall-page #changing img { display: block; margin: 50px auto 25px auto; } /*Paywall Success After Success*/ .why-paywall-page .quote { background: linear-gradient(0deg,rgba(185, 208, 231, 1) 0%, rgba(209, 232, 255, 1) 100%); box-shadow: inset 0px 1px 1px rgba(0,0,0,0.35); padding: 20px; border-radius: 6px; margin-bottom: 20px; } .why-paywall-page .quote p { font-family: Georgia; font-style: italic; margin-bottom: 10px; background: #fff; padding: 15px 20px; border-radius: 5px; box-shadow: 0px 1px 1px rgba(0,0,0,0.35); } .why-paywall-page .quote p:before { content: '“'; color: #dc0028; font-size: 30px; display: inline-block; line-height: 10px; margin-right: 3px; vertical-align: text-bottom;} .why-paywall-page .quote p:after { content: '”'; color: #dc0028; font-size: 30px; display: inline-block; line-height: 10px; vertical-align: text-bottom;} .why-paywall-page .quote strong { color: #369; text-shadow: 0px 1px 0px rgba(250,250,250,0.8); display: block; te/xt-align: right; margin: 15px 0px 0 20px; } .why-paywall-page #success #blurbs { overflow: hidden; text-align: left; margin-top: 35px; } .why-paywall-page #success .blurb { float: left; width: 30%; overflow: hidden; font-size: 14px; } .why-paywall-page #success .blurb:nth-child(2) { margin: 0 5%; } .why-paywall-page #success .blurb:last-child { margin: 0; } .why-paywall-page #success .blurb .quote { } /*Tips for Ensuring Paywall Success*/ .why-paywall-page #tips h1 { /*background: url(../../img/icon-tips.png) no-repeat left; background-size: 30px 39px; padding-left: 45px;*/ } .why-paywall-page #tips ul { overflow: hidden; list-style: none; margin-top: 70px;} .why-paywall-page #tips ul li { display: inline-block; margin: 0 3.6% 35px 0; width: 21.83%; vertical-align: top; font-size: 16px; } .why-paywall-page #tips ul li:nth-child(4n+4) { margin-right: 0; } .why-paywall-page #tips ul li span { display: block; width: 100%; height: 110px; margin-bottom: 18px; background: #fff; border: 1px solid #d7d7d7; border-radius: 4px; } .why-paywall-page #tips ul li span#lock { background: #fff url(../../img/icon-padlock.png) no-repeat center; background-size: 38px 59px; } .why-paywall-page #tips ul li span#pass { background: #fff url(../../img/icon-ticket.png) no-repeat center; background-size: 80px 43px; } .why-paywall-page #tips ul li span#mobile { background: #fff url(../../img/icon-mobile.png) no-repeat center; background-size: 32px 48px; } .why-paywall-page #tips ul li span#time { background: #fff url(../../img/icon-clock.png) no-repeat center; background-size: 55px 59px; } .why-paywall-page #tips ul li span#value { background: #fff url(../../img/icon-diamond.png) no-repeat center; background-size: 56px 50px; } .why-paywall-page #tips ul li span#meter { background: #fff url(../../img/icon-meter.png) no-repeat center; background-size: 35px 55px; } .why-paywall-page #tips ul li span#social { background: #fff url(../../img/icon-social.png) no-repeat center; background-size: 56px 45px; } .why-paywall-page #tips ul li span#ads { background: #fff url(../../img/icon-sale.png) no-repeat center; background-size: 60px 59px; } .why-paywall-page #tips ul li span#perk { background: #fff url(../../img/icon-perk.png) no-repeat center; background-size: 56px 48px; } .why-paywall-page #tips ul li span#curate { background: #fff url(../../img/icon-newspaper.png) no-repeat center; background-size: 55px 48px; } .why-paywall-page #tips ul li span#email { background: #fff url(../../img/icon-email.png) no-repeat center; background-size: 56px 40px; } .why-paywall-page #tips ul li span#process { background: #fff url(../../img/icon-process.png) no-repeat center; background-size: 44px 63px; } .why-paywall-page #tips ul li span#special { background: #fff url(../../img/icon-target.png) no-repeat center; background-size: 49px 59px; } .why-paywall-page #tips ul li span#first { background: #fff url(../../img/icon-first.png) no-repeat center; background-size: 52px 53px; } /*Pigeon Makes Paywalls Easy*/ .why-paywall-page #pigeon h1 { /*background: url(../../img/icon-case.png) no-repeat left; background-size: 33px 31px; padding-left: 50px;*/ } .why-paywall-page #pigeon ul#highlights { list-style: none; overflow: hidden; } .why-paywall-page #pigeon ul#highlights li { float: left; width: 30.797101445%;/*283.33/920*/ margin: 0 3.804347826% 0 0; /*35/920*/ } .why-paywall-page #pigeon ul#highlights li:last-child { margin: 0; } .why-paywall-page .pricing { background: linear-gradient(180deg, #fff -50%, var(--background-color) 100%); padding: var(--space) 0; border: none; } .why-paywall-page .pricing:after { display: none; } .why-paywall-page .pricing h2 { color: var(--text-darkest); } .why-paywall-page .pricing .subtitle, .why-paywall-page .pricing .footnote { color: var(--text-default); } .why-paywall-page .pricing .price-card { box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 4px, rgba(0, 0, 0, 0.09) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; } .why-paywall-page .cta { border: none; background: none !important; }