/* Gravity Ranger public site: "Low orbit". Dark by default. Light mode keeps the top band dark and turns the page below light. */ /* ---- Tokens ---- */ :root { --bg: #02030A; --surface: #070B16; --surface-2: #050812; --text: #DCE3EE; --muted: #B9C3D3; --faint: #8C97AA; --heading: #FFFFFF; --prose: #C9D2E0; --link: #7CCBFF; --link-hover: #B5E2FF; --tag: #FFC27A; --line: rgba(220,227,238,.16); --line-soft: rgba(220,227,238,.1); --card-line: rgba(220,227,238,.14); --btn-bg: #FFFFFF; --btn-ink: #02030A; --input-line: rgba(220,227,238,.25); --note-line: rgba(255,194,122,.45); --note-bg: rgba(255,194,122,.06); --note-ink: #E6DCCB; --feature-bg: #120D08; --feature-line: #FFC27A; --feature-name: #FFC27A; --panel-bg: linear-gradient(180deg, #071226, #02030A); --panel-line: rgba(124,203,255,.25); --row-hover: rgba(124,203,255,.05); --accent: #FFC27A; --accent-ink: #1A0E00; --sky: #7CCBFF; --ship: #FFC27A; --ship-halo: rgba(255,194,122,.18); --ship-glow: rgba(255,194,122,.7); --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif; --body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; --header-h: 88px; color-scheme: dark; } :root[data-theme="light"] { --bg: #F5F7FB; --surface: #FFFFFF; --surface-2: #F1F4F9; --text: #1B2230; --muted: #3E4859; --faint: #596377; --heading: #0E1422; --prose: #1B2230; --link: #1C67A8; --link-hover: #124B80; --tag: #A3560B; --line: rgba(14,20,34,.12); --line-soft: rgba(14,20,34,.08); --card-line: rgba(14,20,34,.10); --btn-bg: #0E1422; --btn-ink: #FFFFFF; --input-line: rgba(14,20,34,.18); --note-line: rgba(190,110,25,.45); --note-bg: rgba(190,110,25,.06); --note-ink: #4A3A22; --feature-bg: #FFF6EA; --feature-line: #D88A2E; --feature-name: #A3560B; --panel-bg: linear-gradient(180deg, #E7F1FC, #FFFFFF); --panel-line: rgba(28,103,168,.35); --row-hover: rgba(28,103,168,.05); --ship: #D27A16; --ship-halo: rgba(210,122,22,.16); --ship-glow: rgba(210,122,22,.45); color-scheme: light; } /* The top band and header are always night side. */ .gr-dark, :root[data-theme="light"] .gr-dark { --bg: #02030A; --surface: #070B16; --surface-2: #050812; --text: #DCE3EE; --muted: #B9C3D3; --faint: #8C97AA; --heading: #FFFFFF; --prose: #C9D2E0; --link: #7CCBFF; --link-hover: #B5E2FF; --tag: #FFC27A; --line: rgba(220,227,238,.16); --line-soft: rgba(220,227,238,.1); --card-line: rgba(220,227,238,.14); --btn-bg: #FFFFFF; --btn-ink: #02030A; --input-line: rgba(220,227,238,.25); color: var(--text); } /* ---- Base ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; } body.gr-site { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .gr-site a { color: var(--link); } .gr-site a:hover { color: var(--link-hover); } .gr-site img { max-width: 100%; height: auto; } .gr-site :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .gr-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .gr-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 4px; background: var(--accent); color: var(--accent-ink) !important; font-weight: 600; text-decoration: none; } .gr-skip:focus { top: 12px; } .gr-page { position: relative; min-height: 100vh; overflow-x: clip; } .gr-wrap { max-width: 1240px; margin: 0 auto; padding-left: 28px; padding-right: 28px; } .gr-eyebrow, .gr-mono { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--link); } .gr-mono { letter-spacing: .04em; text-transform: none; color: var(--faint); } .gr-h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 48px; line-height: 1; text-transform: uppercase; color: var(--heading); } .gr-h2--big { font-weight: 900; font-size: 56px; line-height: .95; } .gr-more { font-weight: 600; text-decoration: none; } .gr-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 0; border-radius: 4px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; } .gr-site .gr-btn--accent, .gr-site .gr-btn--accent:hover { background: var(--accent); color: var(--accent-ink); } .gr-btn--accent:hover { filter: brightness(1.06); } .gr-site .gr-btn--plain, .gr-site .gr-btn--plain:hover { background: var(--btn-bg); color: var(--btn-ink); } .gr-btn--plain:hover { opacity: .9; } /* ---- Header ---- */ .gr-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; } .gr-header__inner { max-width: 1240px; height: var(--header-h); margin: 0 auto; padding: 0 28px; display: flex; align-items: center; gap: 12px 28px; } .gr-site .gr-logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; color: #FFFFFF; text-decoration: none; } .gr-logo span:not(.gr-logo__ranger) { font-family: var(--display); font-weight: 900; font-size: 26px; letter-spacing: .04em; text-transform: uppercase; line-height: 1; } .gr-nav { flex: 1 1 auto; display: flex; align-items: center; } .gr-nav__list { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 15px; font-weight: 500; } .gr-site .gr-nav__list a { display: block; padding: 10px 12px; color: var(--muted); text-decoration: none; border-radius: 4px; } .gr-site .gr-nav__list a:hover, .gr-site .gr-nav__list a[aria-current], .gr-site .gr-nav__list .current-menu-item > a { color: #FFFFFF; } .gr-nav__account { display: none; } .gr-header__tools { display: flex; align-items: center; gap: 12px 20px; } .gr-switch, .gr-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(220,227,238,.28); background: transparent; color: #DCE3EE; cursor: pointer; } .gr-switch:hover, .gr-menu-btn:hover { border-color: #7CCBFF; color: #FFFFFF; } .gr-switch .gr-icon-moon, :root[data-theme="light"] .gr-switch .gr-icon-sun { display: none; } :root[data-theme="light"] .gr-switch .gr-icon-moon { display: block; } .gr-site .gr-header__login { color: #DCE3EE; text-decoration: none; font-weight: 500; } .gr-menu-btn { display: none; border-radius: 4px; } @media (max-width: 1060px) { :root { --header-h: 76px; } .gr-header__inner { gap: 10px; padding: 0 16px; } .gr-header__tools { margin-left: auto; gap: 8px; } .gr-menu-btn { display: inline-flex; } .gr-header__login { display: none; } .gr-nav { display: none; position: absolute; top: calc(var(--header-h) - 4px); left: 12px; right: 12px; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; border: 1px solid rgba(124,203,255,.25); border-radius: 8px; background: rgba(5,9,20,.97); box-shadow: 0 20px 50px rgba(0,0,0,.5); } .gr-header.is-open .gr-nav { display: flex; } .gr-nav__list { flex-direction: column; font-size: 17px; } .gr-site .gr-nav__list a { padding: 12px; } .gr-nav__account { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 12px; border-top: 1px solid rgba(220,227,238,.12); } .gr-site .gr-nav__account a:not(.gr-btn) { color: #DCE3EE; text-decoration: none; font-weight: 500; } } @media (max-width: 560px) { .gr-logo span:not(.gr-logo__ranger) { font-size: 22px; } .gr-logo__ranger, .gr-logo__ranger img { width: 38px; height: 38px; } .gr-header__cta { display: none; } } /* ---- Top band (always dark) ---- */ .gr-top { position: relative; overflow: hidden; background: #02030A; padding-top: var(--header-h); } .gr-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .gr-sky__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(to bottom, rgba(2,3,10,0), #02030A); } .gr-stars { position: absolute; inset: -40px; opacity: .8; background-image: radial-gradient(1px 1px at 30px 40px,#fff 50%,transparent 52%),radial-gradient(1px 1px at 190px 120px,#dfe9ff 50%,transparent 52%),radial-gradient(1.5px 1.5px at 330px 60px,#fff 50%,transparent 52%),radial-gradient(1px 1px at 90px 230px,#fff 50%,transparent 52%),radial-gradient(1.5px 1.5px at 260px 260px,#fff3e6 50%,transparent 52%),radial-gradient(1px 1px at 380px 190px,#fff 50%,transparent 52%); background-size: 420px 300px; animation: gr-drift 200s linear infinite; } .gr-sky--inner .gr-stars { inset: 0; opacity: .7; } .gr-par { transition: translate .9s cubic-bezier(.2,.7,.2,1); } @keyframes gr-drift { from { background-position: 0 0; } to { background-position: -1260px 0; } } /* Inner pages: a dark horizon under the title. */ .gr-horizon { position: absolute; left: 50%; top: calc(100% - 150px); width: 3400px; height: 3400px; margin-left: -1700px; border-radius: 50%; background: radial-gradient(circle at 50% 0%, #0F2A4D 0%, #071428 4%, #02030A 12%); box-shadow: 0 -2px 24px 2px rgba(92,170,255,.45), inset 0 10px 24px -10px rgba(170,215,255,.6); } /* Home: Earth from low orbit. */ .gr-top--home { min-height: 890px; } /* Fade the bottom of the Earth into the page (a layer, so the sun's glow above the rim isn't clipped). */ .gr-top--home::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to bottom, rgba(2,3,10,0), #02030A); pointer-events: none; } .gr-planet { position: absolute; left: 50%; top: calc(100% - 270px); width: 2600px; height: 2600px; margin-left: -1300px; transform-origin: 50% 0; } .gr-planet > div { position: absolute; inset: 0; border-radius: 50%; } .gr-planet__air { inset: -22px !important; background: radial-gradient(circle, rgba(0,0,0,0) 49.1%, rgba(92,170,255,.75) 49.55%, rgba(92,170,255,.18) 50.15%, rgba(0,0,0,0) 51%); } .gr-planet__land, .gr-planet__clouds { background-repeat: repeat-x; background-size: 5200px 404px; background-position: 0 -18px; } .gr-planet__land { background-image: url(../img/earth-band.webp); animation: gr-turn 360s linear infinite; } .gr-planet__clouds { background-image: url(../img/earth-clouds-band.jpg); mix-blend-mode: screen; opacity: .85; animation: gr-turn 260s linear infinite; } @keyframes gr-turn { from { background-position: 0 -18px; } to { background-position: -5200px -18px; } } .gr-planet__shade { background: radial-gradient(circle at 50% 0%, rgba(120,180,255,.18) 0%, rgba(0,0,0,0) 11%, rgba(2,3,10,.3) 16%, rgba(2,3,10,.8) 22%, #02030A 28%); box-shadow: inset 0 18px 30px -12px rgba(170,215,255,.55); } .gr-planet > .gr-sun { inset: auto; left: 66%; top: 68px; mix-blend-mode: screen; } .gr-sun--haze { width: 1300px; height: 260px; margin: -130px 0 0 -650px; background: radial-gradient(ellipse at center, rgba(255,196,128,.55) 0%, rgba(255,150,80,.22) 30%, rgba(120,160,255,0) 65%); } .gr-sun--glow { width: 460px; height: 460px; margin: -230px 0 0 -230px; background: radial-gradient(circle, rgba(255,250,235,.9) 0%, rgba(255,228,170,.45) 9%, rgba(255,190,110,.14) 28%, rgba(255,190,110,0) 60%); } .gr-planet > .gr-sun--line { width: 760px; height: 2px; margin: -1px 0 0 -380px; border-radius: 0; mix-blend-mode: normal; background: linear-gradient(to right, rgba(255,235,200,0), rgba(255,240,215,.75) 50%, rgba(255,235,200,0)); } .gr-planet > .gr-sun--core { width: 16px; height: 16px; margin: -8px 0 0 -8px; mix-blend-mode: normal; background: #FFFFFF; box-shadow: 0 0 12px 6px rgba(255,255,245,.95), 0 0 40px 18px rgba(255,220,160,.6); } .gr-sat { position: absolute; top: 150px; left: 0; animation: gr-pass 26s linear infinite; } .gr-sat span { display: block; width: 4px; height: 4px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 8px 2px rgba(255,255,255,.6); animation: gr-blink 2.4s linear infinite; } @keyframes gr-pass { from { transform: translateX(-10vw); } to { transform: translateX(110vw); } } @keyframes gr-blink { 0%, 92%, 100% { opacity: .25; } 95% { opacity: 1; } } .gr-meteor { position: absolute; height: 1px; opacity: 0; } .gr-m1 { left: 82%; top: 70px; width: 170px; height: 1.5px; background: linear-gradient(to right, rgba(255,255,255,0), #FFFFFF); animation: gr-meteor 7s ease-in infinite; } .gr-m2 { left: 60%; top: 30px; width: 110px; background: linear-gradient(to right, rgba(255,255,255,0), #FFE6C9); animation: gr-meteor 11s 3s ease-in infinite; } .gr-m3 { left: 35%; top: 120px; width: 130px; background: linear-gradient(to right, rgba(255,255,255,0), #CFE9FF); animation: gr-meteor 15s 8s ease-in infinite; } @keyframes gr-meteor { 0%, 80% { opacity: 0; transform: translate(0,0) rotate(-32deg); } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(-640px,400px) rotate(-32deg); } } .gr-hero { position: relative; max-width: 1000px; margin: 0 auto; padding: 76px 28px 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; } .gr-hero__title { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(56px, 10vw, 112px); line-height: .9; letter-spacing: .01em; text-transform: uppercase; color: #FFFFFF; } .gr-hero__lede { margin: 0; max-width: 580px; font-size: 20px; color: var(--muted); } .gr-search { position: relative; width: 100%; max-width: 620px; display: flex; gap: 8px; padding: 6px; border: 1px solid rgba(124,203,255,.35); border-radius: 6px; background: rgba(2,3,10,.7); } .gr-search input { flex: 1 1 auto; min-width: 0; min-height: 50px; padding: 0 14px; border: 0; outline: none; background: transparent; color: #FFFFFF; font: inherit; font-size: 17px; } .gr-search input::placeholder { color: #8C97AA; } .gr-search button { min-height: 50px; padding: 0 22px; border: 0; border-radius: 4px; background: #7CCBFF; color: #021022; font: inherit; font-weight: 600; cursor: pointer; } .gr-search button:hover { background: #A6DCFF; } .gr-search:focus-within { border-color: #7CCBFF; } @media (max-width: 760px) { .gr-top--home { min-height: 700px; } .gr-hero { padding-top: 56px; gap: 20px; } .gr-hero__lede { font-size: 18px; } .gr-planet { top: calc(100% - 210px); transform: scale(.55); } .gr-planet > .gr-sun { left: 57%; top: 13px; } /* on the rim: the edge sits ~13px below the top here (68px at 66% on desktop) */ } /* Inner page titles. */ .gr-title { position: relative; max-width: 1000px; margin: 0 auto; padding: 72px 28px 200px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; } .gr-title--list, .gr-title--page { padding-bottom: 110px; } .gr-title__h1 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(44px, 7vw, 76px); line-height: .95; text-transform: uppercase; color: #FFFFFF; overflow-wrap: anywhere; } .gr-title__lede { margin: 0; max-width: 640px; font-size: 20px; color: var(--muted); } .gr-title .gr-search { margin-top: 6px; } .gr-crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); } .gr-crumbs a { text-decoration: none; } .gr-crumbs:empty { display: none; } .gr-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; margin-top: 4px; padding: 7px 18px 7px 8px; border: 1px solid rgba(124,203,255,.22); border-radius: 999px; background: rgba(7,11,22,.72); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #DCE3EE; } .gr-meta > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 18px; border-radius: 50%; background: #FFC27A; vertical-align: middle; transform: translateY(-1px); } .gr-meta__author { display: inline-flex; align-items: center; gap: 8px; } .gr-meta__badge { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(124,203,255,.5); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; letter-spacing: 0; color: #FFFFFF; } @media (max-width: 760px) { .gr-title { padding: 48px 16px 150px; } .gr-meta { border-radius: 14px; padding: 8px 14px; } .gr-meta > * + *::before { margin-right: 10px; } .gr-title__lede { font-size: 18px; } } /* ---- Sections ---- */ .gr-section { padding-top: 72px; padding-bottom: 110px; } .gr-section + .gr-section { padding-top: 0; } .gr-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .gr-section__head--plain { border-bottom: 0; padding-bottom: 22px; } .gr-reveal { animation: gr-in linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; } @keyframes gr-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } /* Post rows. */ .gr-rows--top { border-top: 1px solid var(--line); } .gr-site .gr-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 140px 32px; gap: 20px; align-items: center; padding: 22px 8px; border-bottom: 1px solid var(--line-soft); color: var(--text); text-decoration: none; transition: background .2s ease; } .gr-site .gr-row:hover { background: var(--row-hover); color: var(--text); } .gr-row__date { font-family: var(--mono); font-size: 13px; color: var(--faint); } .gr-row__title { font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--heading); } .gr-row__tag { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tag); } .gr-row__arrow { font-size: 20px; color: var(--faint); transition: transform .2s ease, color .2s ease; } .gr-row:hover .gr-row__arrow { color: var(--tag); transform: translateX(4px); } @media (max-width: 760px) { .gr-site .gr-row { grid-template-columns: auto 1fr; gap: 6px 14px; padding: 18px 4px; } .gr-row__date { order: 1; } .gr-row__tag { order: 2; justify-self: end; } .gr-row__title { order: 3; grid-column: 1 / -1; font-size: 19px; } .gr-row__arrow { display: none; } } /* Add-on panel. */ .gr-panel { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; padding: 48px; border: 1px solid var(--panel-line); border-radius: 8px; background: var(--panel-bg); } .gr-panel__text { flex: 999 1 440px; display: flex; flex-direction: column; gap: 14px; } .gr-panel__text p { margin: 0; color: var(--muted); font-size: 18px; max-width: 560px; } .gr-panel__text .gr-eyebrow { color: var(--link); font-size: 12px; } .gr-panel__list { flex: 1 1 300px; margin: 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 13px; } .gr-panel__list li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .gr-panel__list li:last-child { border-bottom: 0; } .gr-panel__list a, .gr-panel__name { color: var(--heading); text-decoration: none; } .gr-panel__list span:not(.gr-panel__name) { color: var(--link); } @media (max-width: 760px) { .gr-panel { padding: 28px 22px; } .gr-h2--big { font-size: 44px; } .gr-h2 { font-size: 40px; } } /* Plans. */ .gr-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .gr-site .gr-plan-card { padding: 26px; border: 1px solid var(--card-line); border-radius: 6px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; color: var(--text); text-decoration: none; transition: border-color .2s ease, transform .2s ease; } .gr-site .gr-plan-card:hover { border-color: var(--link); transform: translateY(-3px); color: var(--text); } .gr-plan-card h3 { margin: 0; font-size: 17px; color: var(--heading); } .gr-plan-card__price { margin: 0; font-family: var(--display); font-weight: 900; font-size: 52px; line-height: 1.1; color: var(--heading); } .gr-plan-card__price span { font-family: var(--body); font-size: 15px; font-weight: 500; color: var(--faint); } .gr-plan-card__blurb { flex: 1; margin: 0; color: var(--muted); font-size: 15px; } .gr-plan-card__go { margin-top: 12px; font-weight: 600; font-size: 15px; color: var(--link); } .gr-site .gr-plan-card.is-featured { border-color: var(--feature-line); background: var(--feature-bg); } .gr-plan-card.is-featured h3 { color: var(--feature-name); } /* About. */ .gr-about { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; } .gr-about__badge { flex: 0 0 120px; height: 120px; border-radius: 50%; border: 1px solid rgba(124,203,255,.5); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 900; font-size: 44px; color: var(--heading); } .gr-about__text { flex: 999 1 420px; display: flex; flex-direction: column; gap: 10px; } .gr-about__text .gr-h2 { font-size: 40px; } .gr-about__text p { margin: 0; color: var(--muted); font-size: 18px; max-width: 720px; } /* ---- Article ---- */ .gr-article { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; justify-content: center; padding-top: 72px; padding-bottom: 100px; } .gr-article--page { display: block; max-width: 796px; } .gr-prose { flex: 999 1 560px; min-width: 0; max-width: 740px; font-size: 18px; line-height: 1.7; color: var(--prose); } .gr-prose > *:first-child { margin-top: 0; } .gr-prose p, .gr-prose ul, .gr-prose ol, .gr-prose blockquote, .gr-prose table, .gr-prose figure, .gr-prose .wp-block-image { margin: 0 0 22px; } .gr-prose ul, .gr-prose ol { padding-left: 22px; } .gr-prose li + li { margin-top: 6px; } .gr-prose strong, .gr-prose b { color: var(--heading); } .gr-prose h2, .gr-prose h3, .gr-prose h4 { color: var(--heading); scroll-margin-top: 24px; } .gr-prose h2 { margin: 44px 0 14px; font-family: var(--display); font-weight: 800; font-size: 36px; line-height: 1.05; text-transform: uppercase; } .gr-prose h3 { margin: 32px 0 10px; font-size: 22px; line-height: 1.3; } .gr-prose h4 { margin: 26px 0 8px; font-size: 18px; } .gr-prose a { text-decoration-thickness: 1px; text-underline-offset: 3px; } .gr-prose hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); } .gr-prose img { border-radius: 6px; } .gr-prose figure img, .gr-prose .wp-block-image img { display: block; border: 1px solid var(--card-line); } .gr-prose figcaption, .gr-prose .wp-caption-text { padding: 8px 2px 0; font-size: 14px; color: var(--faint); } .gr-prose .wp-caption { max-width: 100%; } .gr-prose blockquote { padding: 4px 0 4px 20px; border-left: 2px solid var(--link); color: var(--text); } .gr-prose table { width: 100%; border-collapse: collapse; font-size: 16px; display: block; overflow-x: auto; } .gr-prose th, .gr-prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; } .gr-prose th { color: var(--heading); font-weight: 600; } .gr-prose code { font-family: var(--mono); font-size: .86em; padding: 2px 6px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--heading); } .gr-prose pre { margin: 0 0 26px; padding: 16px; overflow-x: auto; border: 1px solid var(--card-line); border-radius: 6px; background: var(--surface-2); font-family: var(--mono); font-size: 14px; line-height: 1.6; color: var(--text); white-space: pre; } .gr-prose pre code { padding: 0; border: 0; background: none; font-size: inherit; color: inherit; } .gr-code { margin: 0 0 26px; border: 1px solid var(--card-line); border-radius: 6px; overflow: hidden; background: var(--surface-2); } .gr-code pre { margin: 0; border: 0; border-radius: 0; } .gr-code__bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line-soft); font-family: var(--mono); font-size: 12px; color: var(--faint); } .gr-code__bar button { min-height: 32px; padding: 0 12px; border: 1px solid var(--link); border-radius: 4px; background: transparent; color: var(--link); font: inherit; cursor: pointer; } .gr-prose iframe, .gr-prose video { max-width: 100%; border-radius: 6px; } .gr-prose .wp-block-embed__wrapper iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; } .gr-prose .alignleft { float: left; margin: 0 22px 16px 0; } .gr-prose .alignright { float: right; margin: 0 0 16px 22px; } .gr-prose .aligncenter { margin-left: auto; margin-right: auto; display: block; } /* Heads-up boxes written in posts. */ .gr-prose .gr-note, .gr-prose .wp-block-group.is-style-note { margin: 0 0 26px; padding: 18px 20px; border: 1px solid var(--note-line); border-radius: 6px; background: var(--note-bg); color: var(--note-ink); } /* In this post. */ .gr-article__main { flex: 999 1 560px; min-width: 0; max-width: 740px; } .gr-side { flex: 1 1 240px; max-width: 280px; display: flex; flex-direction: column; gap: 28px; } .gr-side__sticky { display: flex; flex-direction: column; gap: 28px; } /* "In this post" as a flight path: a dashed course line, a waypoint per section, a lit trail behind you and a glowing marker that travels with your scroll. */ .gr-toc { --gr-ship-y: 0px; } .gr-toc__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 10px; } .gr-toc h2 { margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } .gr-toc__count { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--faint); } .gr-toc__count b { font-weight: 500; color: var(--ship); } .gr-toc__list { position: relative; margin: 0; padding: 0; list-style: none; } .gr-toc__list > li { margin: 0; } .gr-toc__list::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 14px; border-left: 1px dashed var(--line); } .gr-site .gr-toc__list a { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 6px 0; font-size: 15px; line-height: 1.4; color: var(--muted); text-decoration: none; transition: color .25s ease; } .gr-site .gr-toc__list a:hover { color: var(--heading); } .gr-toc__node { position: relative; z-index: 1; flex: 0 0 13px; width: 13px; height: 13px; margin-top: 3px; border-radius: 50%; border: 1px solid var(--faint); background: var(--bg); transition: border-color .3s ease, background .3s ease, transform .3s ease; } .gr-toc__list a:hover .gr-toc__node { border-color: var(--link); } .gr-toc__list li.is-passed .gr-toc__node { border-color: var(--link); background: var(--link); transform: scale(.62); } .gr-site .gr-toc__list a[aria-current] { color: var(--heading); } .gr-toc__list a[aria-current] .gr-toc__node { border-color: var(--ship); background: var(--bg); } .gr-toc__path { position: absolute !important; left: 0; top: 0; bottom: 0; width: 13px; pointer-events: none; } .gr-toc__trail { position: absolute; left: 6px; top: 14px; width: 1px; height: var(--gr-ship-y); background: linear-gradient(to bottom, transparent, var(--link) 24px); box-shadow: 0 0 6px var(--link); } .gr-toc__ship { position: absolute; left: 6px; top: calc(14px + var(--gr-ship-y)); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--ship); box-shadow: 0 0 0 3px var(--ship-halo), 0 0 14px 2px var(--ship-glow); z-index: 2; } .gr-toc__ship::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--ship); opacity: 0; animation: gr-ping 2.4s ease-out infinite; } @keyframes gr-ping { 0% { opacity: .8; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.9); } } .gr-toc:not(.is-live) .gr-toc__path { display: none; } @media (prefers-reduced-motion: reduce) { .gr-toc__ship::after { animation: none; } } @media (min-width: 1000px) { .gr-side { order: 2; align-self: stretch; } .gr-side__track { flex: 1 1 auto; } .gr-side__sticky { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 28px; max-height: calc(100vh - 48px); overflow-y: auto; scrollbar-width: thin; padding: 6px 6px 6px 16px; margin-left: -16px; } .admin-bar .gr-side__sticky { top: 56px; max-height: calc(100vh - 80px); } .gr-side__sticky > * { flex-shrink: 0; } .gr-article .gr-note-card--inline, .gr-article .gr-only-narrow { display: none; } } @media (max-width: 999px) { .gr-side { order: -1; max-width: 740px; flex-basis: 100%; } .gr-side .gr-note-card--side { display: none; } .gr-article { gap: 32px; padding-top: 48px; } } /* Paywall (markup from GR Membership). */ .gr-paywall { position: relative; margin: 8px 0 26px; padding: 32px; border: 1px solid var(--panel-line); border-radius: 8px; background: var(--panel-bg); text-align: center; color: var(--text); } .gr-paywall__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px !important; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--link); } .gr-prose .gr-paywall__title, .gr-paywall__title { margin: 0 auto 14px; max-width: 560px; font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.05; text-transform: uppercase; color: var(--heading); } .gr-paywall__outline { max-width: 520px; margin: 0 auto 22px; text-align: left; } .gr-paywall__label { margin: 0 0 6px !important; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } .gr-paywall__outline ul { margin: 0 !important; padding-left: 20px; color: var(--muted); font-size: 16px; } .gr-paywall__plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 18px; text-align: left; } .gr-plan { display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--card-line); border-radius: 6px; background: var(--surface); } .gr-plan--featured { border-color: var(--feature-line); background: var(--feature-bg); } .gr-plan__name { margin: 0 !important; font-weight: 600; color: var(--heading); font-size: 16px; } .gr-plan--featured .gr-plan__name { color: var(--feature-name); } .gr-plan__price { margin: 2px 0 10px !important; } .gr-plan__price strong { font-family: var(--display); font-weight: 900; font-size: 38px; line-height: 1.1; } .gr-plan__price span { color: var(--faint); font-size: 14px; } .gr-plan__features { flex: 1; margin: 0 0 14px !important; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--muted); } .gr-site .gr-plan__button { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 12px; border: 1px solid var(--input-line); border-radius: 4px; color: var(--heading); font-weight: 600; font-size: 15px; text-decoration: none; text-align: center; } .gr-site .gr-plan__button:hover { border-color: var(--link); color: var(--heading); } .gr-site .gr-plan__button--primary, .gr-site .gr-plan__button--primary:hover { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); } .gr-paywall__footer { margin: 0 !important; font-size: 15px; color: var(--faint); } .gr-inline-lock { margin: 0 0 26px; padding: 18px 20px; border: 1px dashed var(--panel-line); border-radius: 6px; background: var(--row-hover); } .gr-inline-lock p { margin: 0 !important; } .gr-inline-lock p + p { margin-top: 10px !important; } .gr-site .gr-inline-lock__btn, .gr-site .gr-inline-lock__btn:hover { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 4px; background: var(--accent); color: var(--accent-ink) !important; font-weight: 600; text-decoration: none; } .gr-inline-lock__login { margin-left: 14px; font-weight: 600; } /* Comments (GeneratePress markup). */ .gr-comments { max-width: 796px; padding-bottom: 80px; } .gr-comments .comments-title, .gr-comments .comment-reply-title { font-family: var(--display); font-weight: 800; font-size: 30px; text-transform: uppercase; color: var(--heading); } .gr-comments ol, .gr-comments ul { list-style: none; padding: 0; } .gr-comments .comment-body { padding: 18px 0; border-bottom: 1px solid var(--line-soft); } .gr-comments .avatar { border-radius: 50%; } .gr-comments input[type=text], .gr-comments input[type=email], .gr-comments input[type=url], .gr-comments textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--input-line); border-radius: 4px; background: transparent; color: var(--heading); font: inherit; } .gr-comments input[type=submit] { min-height: 44px; padding: 0 20px; border: 0; border-radius: 4px; background: var(--btn-bg); color: var(--btn-ink); font: inherit; font-weight: 600; cursor: pointer; } /* Lists. */ .gr-list { padding-top: 56px; } .gr-empty { padding: 40px 0; color: var(--muted); } .gr-empty .gr-search { border-color: var(--input-line); background: var(--surface); } .gr-empty .gr-search input { color: var(--heading); } .gr-pagination { margin-top: 36px; } .gr-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .gr-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--card-line); border-radius: 4px; color: var(--text); text-decoration: none; font-family: var(--mono); font-size: 14px; } .gr-pagination .page-numbers.current { border-color: var(--link); color: var(--heading); } .gr-pagination .page-numbers.dots { border: 0; } /* ---- Footer ---- */ .gr-footer { border-top: 1px solid var(--line); } .gr-footer__inner { padding-top: 44px; padding-bottom: 28px; display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; align-items: flex-end; } .gr-signup { display: flex; flex-wrap: wrap; gap: 8px; max-width: 460px; width: 100%; } .gr-signup__label { width: 100%; margin: 0; font-weight: 600; color: var(--heading); } .gr-signup input[type=email] { flex: 1 1 200px; min-height: 48px; padding: 0 14px; border: 1px solid var(--input-line); border-radius: 4px; background: transparent; color: var(--heading); font: inherit; } .gr-signup input[type=email]:focus { border-color: var(--link); outline: none; } .gr-signup .gr-btn { min-height: 48px; } .gr-footer__list { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; list-style: none; font-size: 15px; } .gr-site .gr-footer__list a { color: var(--muted); text-decoration: none; } .gr-site .gr-footer__list a:hover { color: var(--heading); } .gr-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding-top: 18px; padding-bottom: 14px; font-family: var(--mono); font-size: 12px; color: var(--faint); } .gr-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; } .gr-footer__fine { padding-bottom: 36px; } .gr-footer__fine p { margin: 0; padding-top: 14px; border-top: 1px solid var(--line-soft); max-width: 900px; font-size: 12.5px; line-height: 1.6; color: var(--faint); } .gr-site .gr-footer__base a { color: var(--faint); text-decoration: none; } @media (max-width: 760px) { .gr-wrap { padding-left: 16px; padding-right: 16px; } .gr-section { padding-top: 56px; padding-bottom: 80px; } } @media (prefers-reduced-motion: reduce) { .gr-stars, .gr-sat, .gr-sat span, .gr-reveal, .gr-planet__land, .gr-planet__clouds, .gr-meteor { animation: none !important; } .gr-meteor { display: none; } .gr-par, .gr-row, .gr-plan-card, .gr-row__arrow { transition: none; } } /* GitHub gist embeds: framed like other code, recolored for dark mode. */ .gr-prose .gist { margin: 0 0 26px; } .gr-prose .gist .gist-file { margin: 0; border: 1px solid var(--card-line); border-radius: 6px; overflow: hidden; } .gr-prose .gist .gist-data { border-bottom: 1px solid var(--line-soft); } .gr-prose .gist .blob-wrapper table { display: table; margin: 0; font-size: 13px; } .gr-prose .gist td, .gr-prose .gist th { border: 0; padding: 0 10px; } .gr-prose .gist .blob-code-inner, .gr-prose .gist .blob-num { font-family: var(--mono) !important; font-size: 13px !important; } :root[data-theme="dark"] .gr-prose .gist .gist-file, :root[data-theme="dark"] .gr-prose .gist .gist-data { background: var(--surface-2); border-color: var(--card-line); } :root[data-theme="dark"] .gr-prose .gist .gist-meta { background: var(--surface); color: var(--faint); } :root[data-theme="dark"] .gr-prose .gist .gist-meta a { color: var(--link); } :root[data-theme="dark"] .gr-prose .gist .blob-num { color: #4E5A6E; background: transparent; } :root[data-theme="dark"] .gr-prose .gist .blob-code-inner { color: #DCE3EE; } :root[data-theme="dark"] .gr-prose .gist .pl-c { color: #6F7B90; } :root[data-theme="dark"] .gr-prose .gist .pl-k, :root[data-theme="dark"] .gr-prose .gist .pl-s1 .pl-pse .pl-s1 { color: #FF9E7A; } :root[data-theme="dark"] .gr-prose .gist .pl-s, :root[data-theme="dark"] .gr-prose .gist .pl-pds, :root[data-theme="dark"] .gr-prose .gist .pl-sr { color: #A8D8A0; } :root[data-theme="dark"] .gr-prose .gist .pl-c1, :root[data-theme="dark"] .gr-prose .gist .pl-v, :root[data-theme="dark"] .gr-prose .gist .pl-smi { color: #7CCBFF; } :root[data-theme="dark"] .gr-prose .gist .pl-en, :root[data-theme="dark"] .gr-prose .gist .pl-e { color: #D6B4FF; } :root[data-theme="dark"] .gr-prose .gist .pl-ent { color: #8FE3B0; } :root[data-theme="dark"] .gr-prose .gist .pl-s1, :root[data-theme="dark"] .gr-prose .gist .pl-smw { color: #FFC27A; } /* ---- Gravity Forms (Orbital theme) ---- Orbital writes each form's colors inline with an id selector, so the site palette is applied with !important. Dark first; light mode below. */ .gr-site .gform-theme--framework { --gf-color-primary: #7CCBFF !important; --gf-color-primary-rgb: 124, 203, 255 !important; --gf-color-primary-contrast: #021022 !important; --gf-color-primary-contrast-rgb: 2, 16, 34 !important; --gf-color-primary-darker: #5BB8F5 !important; --gf-color-primary-lighter: #A6DCFF !important; --gf-color-secondary: #0E1626 !important; --gf-color-secondary-rgb: 14, 22, 38 !important; --gf-color-secondary-contrast: #DCE3EE !important; --gf-color-secondary-contrast-rgb: 220, 227, 238 !important; --gf-color-secondary-darker: #0A101C !important; --gf-color-secondary-lighter: #16203A !important; --gf-color-out-ctrl-light: rgba(220, 227, 238, .16) !important; --gf-color-out-ctrl-light-rgb: 220, 227, 238 !important; --gf-color-out-ctrl-light-darker: rgba(220, 227, 238, .28) !important; --gf-color-out-ctrl-light-lighter: rgba(220, 227, 238, .08) !important; --gf-color-out-ctrl-dark: #B9C3D3 !important; --gf-color-out-ctrl-dark-rgb: 185, 195, 211 !important; --gf-color-out-ctrl-dark-darker: #FFFFFF !important; --gf-color-out-ctrl-dark-lighter: #8C97AA !important; --gf-color-in-ctrl: #0A1020 !important; --gf-color-in-ctrl-rgb: 10, 16, 32 !important; --gf-color-in-ctrl-contrast: #FFFFFF !important; --gf-color-in-ctrl-contrast-rgb: 255, 255, 255 !important; --gf-color-in-ctrl-darker: #070B16 !important; --gf-color-in-ctrl-lighter: #121A2E !important; --gf-color-in-ctrl-primary: #7CCBFF !important; --gf-color-in-ctrl-primary-rgb: 124, 203, 255 !important; --gf-color-in-ctrl-primary-contrast: #021022 !important; --gf-color-in-ctrl-primary-contrast-rgb: 2, 16, 34 !important; --gf-color-in-ctrl-primary-darker: #5BB8F5 !important; --gf-color-in-ctrl-primary-lighter: #A6DCFF !important; --gf-color-in-ctrl-light: rgba(220, 227, 238, .08) !important; --gf-color-in-ctrl-light-rgb: 220, 227, 238 !important; --gf-color-in-ctrl-light-darker: rgba(220, 227, 238, .3) !important; --gf-color-in-ctrl-light-lighter: #121A2E !important; --gf-color-in-ctrl-dark: #8C97AA !important; --gf-color-in-ctrl-dark-rgb: 140, 151, 170 !important; --gf-color-in-ctrl-dark-darker: #DCE3EE !important; --gf-color-in-ctrl-dark-lighter: rgba(220, 227, 238, .65) !important; --gf-color-danger: #FF8A7A !important; --gf-color-danger-rgb: 255, 138, 122 !important; --gf-color-success: #7EDC9A !important; --gf-color-success-rgb: 126, 220, 154 !important; --gf-color-info: #FFC27A !important; --gf-color-info-rgb: 255, 194, 122 !important; --gf-ctrl-border-color: rgba(220, 227, 238, .28) !important; --gf-ctrl-label-color-primary: #FFFFFF !important; --gf-ctrl-label-color-secondary: #DCE3EE !important; --gf-ctrl-desc-color: #B9C3D3 !important; --gf-ctrl-placeholder-color: #8C97AA !important; --gf-ctrl-btn-border-color-secondary: rgba(220, 227, 238, .28) !important; --gf-ctrl-btn-bg-color-hover-tertiary: rgba(220, 227, 238, .08) !important; --gf-icon-ctrl-select: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B9C3D3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; --gf-icon-ctrl-search: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%23B9C3D3' stroke-width='2'/%3E%3Cpath d='M20 20l-3.5-3.5' stroke='%23B9C3D3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important; --gf-radius: 4px !important; } :root[data-theme="light"] .gr-site .gform-theme--framework { --gf-color-primary: #1C67A8 !important; --gf-color-primary-rgb: 28, 103, 168 !important; --gf-color-primary-contrast: #FFFFFF !important; --gf-color-primary-contrast-rgb: 255, 255, 255 !important; --gf-color-primary-darker: #124B80 !important; --gf-color-primary-lighter: #3D84C4 !important; --gf-color-secondary: #FFFFFF !important; --gf-color-secondary-rgb: 255, 255, 255 !important; --gf-color-secondary-contrast: #1B2230 !important; --gf-color-secondary-contrast-rgb: 27, 34, 48 !important; --gf-color-secondary-darker: #F1F4F9 !important; --gf-color-secondary-lighter: #FFFFFF !important; --gf-color-out-ctrl-light: rgba(14, 20, 34, .12) !important; --gf-color-out-ctrl-light-rgb: 14, 20, 34 !important; --gf-color-out-ctrl-light-darker: rgba(14, 20, 34, .22) !important; --gf-color-out-ctrl-light-lighter: rgba(14, 20, 34, .06) !important; --gf-color-out-ctrl-dark: #3E4859 !important; --gf-color-out-ctrl-dark-rgb: 62, 72, 89 !important; --gf-color-out-ctrl-dark-darker: #0E1422 !important; --gf-color-out-ctrl-dark-lighter: #596377 !important; --gf-color-in-ctrl: #FFFFFF !important; --gf-color-in-ctrl-rgb: 255, 255, 255 !important; --gf-color-in-ctrl-contrast: #0E1422 !important; --gf-color-in-ctrl-contrast-rgb: 14, 20, 34 !important; --gf-color-in-ctrl-darker: #F1F4F9 !important; --gf-color-in-ctrl-lighter: #FFFFFF !important; --gf-color-in-ctrl-primary: #1C67A8 !important; --gf-color-in-ctrl-primary-rgb: 28, 103, 168 !important; --gf-color-in-ctrl-primary-contrast: #FFFFFF !important; --gf-color-in-ctrl-primary-contrast-rgb: 255, 255, 255 !important; --gf-color-in-ctrl-primary-darker: #124B80 !important; --gf-color-in-ctrl-primary-lighter: #3D84C4 !important; --gf-color-in-ctrl-light: rgba(14, 20, 34, .06) !important; --gf-color-in-ctrl-light-rgb: 14, 20, 34 !important; --gf-color-in-ctrl-light-darker: rgba(14, 20, 34, .3) !important; --gf-color-in-ctrl-light-lighter: #F5F7FB !important; --gf-color-in-ctrl-dark: #596377 !important; --gf-color-in-ctrl-dark-rgb: 89, 99, 119 !important; --gf-color-in-ctrl-dark-darker: #0E1422 !important; --gf-color-in-ctrl-dark-lighter: rgba(14, 20, 34, .65) !important; --gf-color-danger: #B42318 !important; --gf-color-danger-rgb: 180, 35, 24 !important; --gf-color-success: #1E7A3C !important; --gf-color-success-rgb: 30, 122, 60 !important; --gf-color-info: #A3560B !important; --gf-color-info-rgb: 163, 86, 11 !important; --gf-ctrl-border-color: rgba(14, 20, 34, .22) !important; --gf-ctrl-label-color-primary: #0E1422 !important; --gf-ctrl-label-color-secondary: #1B2230 !important; --gf-ctrl-desc-color: #3E4859 !important; --gf-ctrl-placeholder-color: #596377 !important; --gf-ctrl-btn-border-color-secondary: rgba(14, 20, 34, .22) !important; --gf-ctrl-btn-bg-color-hover-tertiary: rgba(14, 20, 34, .05) !important; --gf-icon-ctrl-select: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23596377' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; --gf-icon-ctrl-search: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%23596377' stroke-width='2'/%3E%3Cpath d='M20 20l-3.5-3.5' stroke='%23596377' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important; } .gr-site .gform-theme--framework { font-family: var(--body); } .gr-site .gform_wrapper .gform_title { font-family: var(--display); font-weight: 800; font-size: 30px; text-transform: uppercase; color: var(--heading); } .gr-site .gform_wrapper .gform_required_legend, .gr-site .gform_wrapper .gform_description { color: var(--faint); font-size: 14px; } .gr-prose .gform_wrapper ul, .gr-prose .gform_wrapper ol { padding-left: 0; } .gr-prose .gform_wrapper li + li { margin-top: 0; } /* ---- Affiliate disclosure card ---- */ .gr-note-card { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 18px; border: 1px solid var(--note-line); border-radius: 8px; background: radial-gradient(120% 90% at 0% 0%, var(--note-bg), transparent 70%), var(--surface); overflow: hidden; } .gr-note-card--inline { margin: 8px 0 36px; } .gr-note-card__orbit { position: relative; flex: 0 0 46px; height: 46px; border-radius: 50%; border: 1px dashed var(--note-line); animation: gr-orbit 9s linear infinite; } .gr-note-card__planet { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFE3B8, #FFC27A 55%, #C47A24); box-shadow: 0 0 12px rgba(255,194,122,.55); animation: gr-orbit 9s linear infinite reverse; } .gr-note-card__sat { position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--link); box-shadow: 0 0 8px var(--link); } @keyframes gr-orbit { to { transform: rotate(360deg); } } .gr-note-card__body { min-width: 0; } .gr-note-card p { margin: 0; } .gr-note-card__eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tag); } .gr-note-card__title { margin-top: 4px !important; font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--heading); } .gr-note-card__text { margin-top: 6px !important; font-size: 14px; line-height: 1.55; color: var(--muted); } .gr-site .gr-note-card__link { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; text-decoration: none; } /* ---- Comments: a folded comms panel ---- */ .gr-comms { margin: 8px 0 0; border: 1px solid var(--panel-line); border-radius: 10px; background: var(--surface); overflow: hidden; } .gr-comms__bar { width: 100%; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 0; background: var(--panel-bg); color: var(--text); font: inherit; text-align: left; cursor: pointer; } .gr-comms__bar:hover .gr-comms__action { color: var(--heading); border-color: var(--link); } .gr-comms__signal { flex: 0 0 auto; display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; } .gr-comms__signal span { width: 4px; border-radius: 2px; background: var(--link); animation: gr-signal 1.8s ease-in-out infinite; } .gr-comms__signal span:nth-child(1) { height: 8px; } .gr-comms__signal span:nth-child(2) { height: 14px; animation-delay: .2s; } .gr-comms__signal span:nth-child(3) { height: 22px; animation-delay: .4s; } @keyframes gr-signal { 0%, 100% { opacity: .35; } 40% { opacity: 1; } } .gr-comms__label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .gr-comms__eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--link); } .gr-comms__title { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.1; text-transform: uppercase; color: var(--heading); } .gr-comms__sub { font-size: 15px; color: var(--muted); } .gr-comms__faces { display: flex; flex: 0 0 auto; } .gr-comms__faces img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--surface); } .gr-comms__faces img + img { margin-left: -10px; } .gr-comms__action { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--input-line); border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--muted); transition: border-color .2s ease, color .2s ease; } .gr-comms__action svg { transition: transform .25s ease; transform: rotate(180deg); } .gr-comms__open { display: none; } .gr-comms.is-collapsed .gr-comms__open { display: inline; } .gr-comms.is-collapsed .gr-comms__close { display: none; } .gr-comms.is-collapsed .gr-comms__action svg { transform: none; } .gr-comms.is-collapsed .gr-comms__panel { display: none; } .gr-comms__panel { padding: 8px 20px 24px; border-top: 1px solid var(--line-soft); } @media (max-width: 600px) { .gr-comms__bar { flex-wrap: wrap; padding: 16px; } .gr-comms__signal { display: none; } .gr-comms__label { flex-basis: 100%; } .gr-comms__panel { padding: 8px 14px 20px; } } .gr-comment-list, .gr-comment-list .children { list-style: none; margin: 0; padding: 0; } .gr-comment-list .children { margin-left: 22px; padding-left: 18px; border-left: 1px solid var(--line); } .gr-comment { margin: 0; } .gr-comment__card { padding: 18px 0; border-bottom: 1px solid var(--line-soft); } .gr-comment-list .children .gr-comment__card { padding: 14px 0; } .gr-comment__head { display: flex; align-items: center; gap: 12px; } .gr-comment__avatar { width: 40px; height: 40px; border-radius: 50%; } .gr-comment__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .gr-comment__name { font-weight: 600; color: var(--heading); } .gr-comment__badge { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--note-line); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tag); } .gr-site .gr-comment__date { font-family: var(--mono); font-size: 12px; color: var(--faint); text-decoration: none; } .gr-comment--crew > .gr-comment__card { position: relative; } .gr-comment--crew > .gr-comment__card::before { content: ""; position: absolute; left: -20px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: var(--accent); } .gr-comment__text { margin: 10px 0 0 52px; font-size: 16px; line-height: 1.65; color: var(--prose); overflow-wrap: anywhere; } .gr-comment__text p { margin: 0 0 12px; } .gr-comment__text p:last-child { margin-bottom: 0; } .gr-comment__text pre { font-size: 13px; } .gr-comment__pending { margin: 8px 0 0 52px; font-size: 14px; color: var(--tag); } .gr-comment__actions { display: flex; gap: 16px; margin: 8px 0 0 52px; font-size: 14px; font-weight: 600; } .gr-site .gr-comment__actions a { text-decoration: none; } @media (max-width: 600px) { .gr-comment__text, .gr-comment__actions, .gr-comment__pending { margin-left: 0; } .gr-comment-list .children { margin-left: 8px; padding-left: 12px; } .gr-comment--crew > .gr-comment__card::before { left: -14px; } } .gr-respond { margin-top: 22px; } .gr-comment-list .gr-respond { margin: 10px 0 18px 52px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; } .gr-respond__title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-family: var(--display); font-weight: 800; font-size: 24px; text-transform: uppercase; color: var(--heading); } .gr-respond__title small { font-family: var(--body); font-size: 14px; font-weight: 600; text-transform: none; } .gr-respond__note, .gr-comment-form .logged-in-as { margin: 0 0 16px; font-size: 14px; color: var(--faint); } .gr-comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .gr-comment-form > p { margin: 0; } .gr-comment-form .gr-respond__note, .gr-comment-form .logged-in-as, .gr-comment-form .gr-field--full, .gr-comment-form .form-submit, .gr-comment-form .comment-form-comment { grid-column: 1 / -1; } .gr-field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--heading); } .gr-field input[type=text], .gr-field input[type=email], .gr-field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--input-line); border-radius: 4px; background: var(--surface-2); color: var(--heading); font: inherit; font-size: 16px; } .gr-field textarea { min-height: 140px; resize: vertical; } .gr-field input:focus, .gr-field textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px var(--row-hover); } .gr-field--check { display: flex; align-items: center; gap: 10px; } .gr-field--check label { margin: 0; font-weight: 400; color: var(--muted); } .gr-field--check input { width: 18px; height: 18px; accent-color: var(--link); } .gr-comment-form .form-submit .gr-btn { min-height: 48px; } @media (max-width: 600px) { .gr-comment-form { grid-template-columns: 1fr; } .gr-comment-list .gr-respond { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .gr-note-card__orbit, .gr-note-card__planet, .gr-comms__signal span { animation: none; } } /* ---- Banners (GR Links): quiet, labelled, never the focus ---- */ .gr-ad { display: flex; flex-direction: column; gap: 6px; } .gr-ad [hidden] { display: none !important; } .gr-ad__label { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); } .gr-ad__item { display: block; line-height: 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--card-line); transition: border-color .2s ease, transform .2s ease; } .gr-ad__item:hover { border-color: var(--link); transform: translateY(-1px); } .gr-ad__item img { display: block; width: 100%; height: auto; } .gr-ad--sidebar { max-width: 300px; } .gr-ad--post-end { max-width: 728px; } .gr-ad--end { margin: 32px 0 0; } @media (max-width: 999px) { .gr-article .gr-only-wide { display: none; } } @media (max-width: 999px) { .gr-side .gr-ad { display: none; } } /* ---- GitHub embeds (Simple GitHub Embeds) in the site palette ---- */ .gr-site .sge-code { --sge-bg: var(--surface-2); --sge-head: var(--surface); --sge-border: var(--card-line); --sge-text: var(--text); --sge-muted: var(--faint); --sge-link: var(--link); --sge-btn-border: var(--input-line); --sge-gutter: var(--faint); --sge-radius: 6px; --sge-font: var(--mono); --sge-ui-font: var(--mono); --sge-t-comment: #6F7B90; --sge-t-punct: #8C97AA; --sge-t-number: #7CCBFF; --sge-t-tag: #8FE3B0; --sge-t-string: #A8D8A0; --sge-t-operator: #FF9E7A; --sge-t-keyword: #FF9E7A; --sge-t-function: #D6B4FF; --sge-t-variable: #FFC27A; margin: 0 0 26px; } :root[data-theme="light"] .gr-site .sge-code { --sge-t-comment: #6E7781; --sge-t-punct: #596377; --sge-t-number: #1C67A8; --sge-t-tag: #1E7A3C; --sge-t-string: #2F6B1F; --sge-t-operator: #B4441B; --sge-t-keyword: #B4441B; --sge-t-function: #7A3DB8; --sge-t-variable: #A3560B; } .gr-site .sge-header { padding: 8px 10px 8px 14px; } .gr-site .sge-name { color: var(--heading); } .gr-site .sge-code pre.sge-pre { font-size: 13.5px; } /* Plain code blocks wrap too, so nobody scrolls sideways. */ .gr-code pre { white-space: pre-wrap; overflow-wrap: anywhere; } /* Show code exactly as typed (no "->" turning into an arrow). */ .gr-site code, .gr-site pre, .gr-site kbd { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; } /* The ranger floats in the header. */ .gr-logo__ranger { display: block; width: 44px; height: 44px; flex: 0 0 auto; } .gr-logo__ranger img { display: block; width: 44px; height: 44px; animation: gr-hover 4.2s ease-in-out infinite; transform-origin: 50% 60%; will-change: transform; filter: drop-shadow(0 4px 6px rgba(124,203,255,.18)); } @keyframes gr-hover { 0%, 100% { transform: translateY(2px) rotate(-5deg); } 50% { transform: translateY(-4px) rotate(4deg); } } .gr-logo:hover .gr-logo__ranger img { animation-duration: 1.6s; } @media (prefers-reduced-motion: reduce) { .gr-logo__ranger img { animation: none; } } /* ===== Add-on directory ===== */ .gr-dir { padding-top: 56px; padding-bottom: 110px; display: flex; flex-direction: column; gap: 24px; } .gr-chips { display: flex; flex-wrap: wrap; gap: 8px; } .gr-site .gr-chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 4px; border: 1px solid var(--card-line); color: var(--muted); font-size: 15px; text-decoration: none; transition: border-color .2s ease, color .2s ease; } .gr-site .gr-chip:hover { border-color: var(--link); color: var(--heading); } .gr-site .gr-chip[aria-current] { border-color: var(--link); background: var(--row-hover); color: var(--heading); } .gr-dir__body { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; } .gr-dir__filters { flex: 1 1 220px; max-width: 250px; display: flex; flex-direction: column; gap: 26px; } .gr-filter { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 4px; } .gr-filter legend, .gr-filter h2 { padding: 0 0 8px; margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } .gr-filter button { display: flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 4px; border: 1px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: 15px; text-align: left; cursor: pointer; } .gr-filter button:hover { color: var(--heading); } .gr-filter button[aria-pressed="true"] { border-color: var(--panel-line); background: var(--row-hover); color: var(--heading); } .gr-site .gr-filter--devs a { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; font-size: 15px; color: var(--muted); text-decoration: none; } .gr-site .gr-filter--devs a:hover { color: var(--heading); } .gr-filter__n { font-family: var(--mono); font-size: 12px; color: var(--faint); } .gr-filter .gr-filter__more { padding: 0; min-height: 30px; color: var(--link); font-weight: 600; } .gr-dir__results { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .gr-dir__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .gr-dir__bar .gr-mono { letter-spacing: .1em; text-transform: uppercase; } .gr-dir__sort { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); } .gr-dir__sort select { min-height: 38px; padding: 0 10px; border: 1px solid var(--input-line); border-radius: 4px; background: var(--surface); color: var(--heading); font: inherit; font-size: 14px; } .gr-ao-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; } .gr-ao-card { padding: 20px; border: 1px solid var(--card-line); border-radius: 6px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; transition: border-color .2s ease, transform .2s ease; } .gr-ao-card:hover { border-color: var(--link); transform: translateY(-3px); } .gr-ao-card[hidden] { display: none; } .gr-ao-card__head { display: flex; align-items: center; gap: 12px; } .gr-ao-card__who { min-width: 0; display: flex; flex-direction: column; } .gr-ao-card__who h3 { margin: 0; font-size: 17px; line-height: 1.3; } .gr-site .gr-ao-card__who h3 a { color: var(--heading); text-decoration: none; } .gr-site .gr-ao-card__who h3 a::after { content: ""; position: absolute; inset: 0; } .gr-ao-card { position: relative; } .gr-ao-card__who span { font-size: 14px; color: var(--faint); } .gr-ao-card__blurb { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); } .gr-ao-tags { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .gr-ao-tag { padding: 3px 8px; border-radius: 3px; border: 1px solid var(--card-line); color: var(--muted); } .gr-ao-tag--free { border-color: transparent; background: rgba(124,203,255,.14); color: var(--link); } .gr-ao-tag--paid { border-color: transparent; background: var(--line-soft); color: var(--heading); } .gr-ao-tag--official { border-color: var(--note-line); color: var(--tag); } .gr-ao-card__foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--mono); font-size: 12px; color: var(--faint); } .gr-ao-card__fresh { color: var(--link); } .gr-ao-empty { margin: 0; padding: 32px; text-align: center; color: var(--faint); border: 1px dashed var(--line); border-radius: 6px; } .gr-ao-badge { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 900; font-size: 18px; color: var(--heading); border: 1px solid rgba(124,203,255,.5); background: radial-gradient(circle at 35% 30%, rgba(124,203,255,.28), transparent 75%); } .gr-ao-badge.is-official { border-color: rgba(255,194,122,.7); background: radial-gradient(circle at 35% 30%, rgba(255,194,122,.3), transparent 75%); } :root[data-theme="light"] .gr-ao-badge { border-color: rgba(28,103,168,.5); background: radial-gradient(circle at 35% 30%, #D7E8FA, #FFFFFF 75%); } :root[data-theme="light"] .gr-ao-badge.is-official { border-color: rgba(190,110,25,.7); background: radial-gradient(circle at 35% 30%, #FBE3C4, #FFFFFF 75%); } @media (max-width: 760px) { .gr-dir__filters { max-width: none; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; gap: 16px 24px; } .gr-filter--devs { display: none; } .gr-filter { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; } .gr-filter legend { width: 100%; } .gr-filter button { min-height: 34px; border-color: var(--card-line); } } /* ===== One add-on ===== */ .gr-ao-hero { position: relative; max-width: 1240px; margin: 0 auto; padding: 64px 28px 150px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px 36px; align-items: start; } .gr-ao-hero__badge { position: relative; width: 112px; height: 112px; display: flex; align-items: center; justify-content: center; } .gr-ao-badge--big { flex-basis: 84px; width: 84px; height: 84px; font-size: 32px; } .gr-ao-orbit { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(124,203,255,.35); animation: gr-orbit 14s linear infinite; } .gr-ao-orbit span { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #FFC27A; box-shadow: 0 0 10px #FFC27A; } .gr-ao-hero__text { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .gr-crumbs--left { justify-content: flex-start; } .gr-ao-hero__h1 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(44px, 6vw, 68px); line-height: .95; text-transform: uppercase; color: #FFFFFF; overflow-wrap: anywhere; } .gr-ao-hero__lede { margin: 0; max-width: 640px; font-size: 19px; color: var(--muted); } .gr-ao-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 15px; color: var(--muted); } .gr-ao-hero__meta .gr-ao-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .gr-ao-hero__fresh { font-family: var(--mono); font-size: 12px; color: var(--link); } .gr-ao-hero__dropped { margin: 4px 0 0; padding: 8px 12px; border: 1px dashed #FF8A7A; border-radius: 4px; color: #FFB4A8; font-size: 14px; } .gr-ao-hero__cta { display: flex; flex-direction: column; gap: 10px; min-width: 220px; } .gr-site .gr-btn--ghost, .gr-site .gr-btn--ghost:hover { border: 1px solid rgba(220,227,238,.3); color: #DCE3EE; background: transparent; } .gr-btn--ghost:hover { border-color: #7CCBFF !important; } .gr-ao-hero__aff { font-size: 12px; color: var(--faint); } @media (max-width: 900px) { .gr-ao-hero { grid-template-columns: auto minmax(0, 1fr); padding: 40px 16px 120px; } .gr-ao-hero__cta { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; min-width: 0; } .gr-ao-hero__badge { width: 76px; height: 76px; } .gr-ao-badge--big { width: 58px; height: 58px; flex-basis: 58px; font-size: 22px; } } .gr-ao-body { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding-top: 56px; padding-bottom: 100px; } .gr-ao-main { flex: 999 1 560px; min-width: 0; max-width: 780px; display: flex; flex-direction: column; gap: 28px; } .gr-ao-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); } .gr-ao-tabs button { min-height: 44px; padding: 0 16px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--muted); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; } .gr-ao-tabs button:hover { color: var(--heading); } .gr-ao-tabs button[aria-selected="true"] { color: var(--heading); border-bottom-color: var(--accent); } .gr-ao-panel[hidden] { display: none; } .gr-ao-h2 { margin: 0 0 12px; font-family: var(--display); font-weight: 800; font-size: 32px; line-height: 1.05; text-transform: uppercase; color: var(--heading); } .gr-ao-h3 { margin: 26px 0 12px; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.1; text-transform: uppercase; color: var(--heading); } .gr-ao-prose { max-width: none; flex: none; } .gr-ao-features { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .gr-ao-features li { position: relative; padding-left: 26px; color: var(--prose); font-size: 17px; line-height: 1.5; } .gr-ao-features li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--link); } .gr-ao-uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .gr-ao-use { padding: 16px; border: 1px solid var(--card-line); border-radius: 6px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; } .gr-ao-use strong { color: var(--heading); } .gr-ao-use span { font-size: 15px; color: var(--muted); } .gr-ao-note { margin: 18px 0 0; font-size: 13px; color: var(--faint); } .gr-ao-shot { margin: 0; } .gr-ao-shot img { display: block; width: 100%; border-radius: 6px; border: 1px solid var(--card-line); } .gr-ao-faq { border-bottom: 1px solid var(--line-soft); padding: 14px 0; } .gr-ao-faq summary { cursor: pointer; font-weight: 600; color: var(--heading); } .gr-ao-faq p { margin: 8px 0 0; color: var(--prose); } .gr-ao-take { display: flex; gap: 20px; align-items: flex-start; padding: 22px; border: 1px solid var(--note-line); border-radius: 8px; background: var(--note-bg); } .gr-ao-take .gr-ao-h3 { margin-top: 0; } .gr-ao-take p { margin: 0; color: var(--prose); } .gr-ao-take__badge { flex: 0 0 56px; width: 56px; height: 56px; font-size: 22px; } .gr-ao-more__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .gr-site .gr-ao-mini { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--card-line); border-radius: 6px; background: var(--surface); text-decoration: none; transition: border-color .2s ease, transform .2s ease; } .gr-site .gr-ao-mini:hover { border-color: var(--link); transform: translateY(-2px); } .gr-ao-mini strong { color: var(--heading); } .gr-ao-mini span { font-family: var(--mono); font-size: 12px; color: var(--faint); } .gr-ao-facts { flex: 1 1 260px; max-width: 320px; display: flex; flex-direction: column; gap: 16px; } @media (min-width: 1000px) { .gr-ao-facts { position: sticky; top: 24px; } .admin-bar .gr-ao-facts { top: 56px; } } .gr-ao-card-box { padding: 20px; border: 1px solid var(--card-line); border-radius: 8px; background: var(--surface); } .gr-ao-card-box h2 { margin: 0 0 12px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } .gr-ao-card-box dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 14px; } .gr-ao-card-box dt { color: var(--faint); } .gr-ao-card-box dd { margin: 0; color: var(--heading); text-align: right; } .gr-ao-status { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); font-family: var(--mono); font-size: 12px; color: var(--muted); } .gr-ao-status span { width: 8px; height: 8px; border-radius: 50%; background: #5FE3A0; box-shadow: 0 0 8px #5FE3A0; } .gr-ao-status.is-dropped span { background: #FF8A7A; box-shadow: 0 0 8px #FF8A7A; } .gr-site .gr-ao-links a { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; text-decoration: none; } .gr-ao-links a:last-child { border-bottom: 0; } .gr-ao-help p { margin: 0 0 10px; font-size: 15px; color: var(--muted); } .gr-site .gr-ao-help a { font-weight: 600; text-decoration: none; } @media (prefers-reduced-motion: reduce) { .gr-ao-orbit { animation: none; } } /* Add-on directory: short developer list with search, and pages */ .gr-devs__q { width: 100%; min-height: 36px; margin-bottom: 6px; padding: 0 10px; border: 1px solid var(--input-line); border-radius: 4px; background: var(--surface); color: var(--heading); font: inherit; font-size: 14px; } .gr-devs:not(.is-open) .gr-devs__q { display: none; } .gr-site .gr-devs:not(.is-open) .gr-devs__list a.is-extra { display: none; } .gr-devs.is-open .gr-devs__list { max-height: 320px; overflow-y: auto; scrollbar-width: thin; padding-right: 8px; } .gr-site .gr-devs__list a[hidden] { display: none; } .gr-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding-top: 12px; } .gr-pager[hidden] { display: none; } .gr-pager button { min-width: 40px; min-height: 40px; padding: 0 12px; border: 1px solid var(--card-line); border-radius: 4px; background: transparent; color: var(--muted); font-family: var(--mono); font-size: 14px; cursor: pointer; } .gr-pager button:hover:not(:disabled) { color: var(--heading); border-color: var(--panel-line); } .gr-pager button[aria-current="page"] { background: var(--row-hover); border-color: var(--panel-line); color: var(--heading); font-weight: 600; } .gr-pager button:disabled { opacity: .4; cursor: default; } .gr-pager__gap { padding: 0 4px; color: var(--faint); font-family: var(--mono); } .gr-dir__results { scroll-margin-top: 24px; } /* Sort menu: our own chevron with room on the right */ .gr-dir__sort { position: relative; } .gr-dir__sort select { -webkit-appearance: none; appearance: none; padding: 0 40px 0 12px; cursor: pointer; } .gr-dir__sort::after { content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); pointer-events: none; } /* Page links on lists match the add-on pager */ .gr-pager--links { padding-top: 32px; } .gr-site .gr-pager__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 12px; border: 1px solid var(--card-line); border-radius: 4px; background: transparent; color: var(--muted); font-family: var(--mono); font-size: 14px; text-decoration: none; } .gr-site a.gr-pager__btn:hover { color: var(--heading); border-color: var(--panel-line); } .gr-site .gr-pager__btn[aria-current="page"] { background: var(--row-hover); border-color: var(--panel-line); color: var(--heading); font-weight: 600; } .gr-pager__btn.is-disabled { opacity: .4; } /* Legal pages: side menu + ads */ .gr-legal-nav { padding: 20px 22px; border: 1px solid var(--card-line); border-radius: 6px; background: var(--surface); } .gr-legal-nav__h { margin: 0 0 10px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } .gr-legal-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .gr-site .gr-legal-nav a { display: block; padding: 7px 0 7px 12px; margin-left: -12px; border-left: 2px solid transparent; color: var(--muted); font-size: 15px; text-decoration: none; } .gr-site .gr-legal-nav a:hover { color: var(--heading); } .gr-site .gr-legal-nav a[aria-current="page"] { border-left-color: var(--link); color: var(--heading); font-weight: 600; } @media (max-width: 999px) { .gr-side--legal { order: 2; } } /* ===== About page ===== */ .gr-about-page .gr-section { padding-top: 56px; padding-bottom: 56px; } .gr-about-page .gr-section + .gr-section { padding-top: 0; } .gr-ab-mission { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding-top: 80px !important; } .gr-ab-mission__text { flex: 999 1 460px; display: flex; flex-direction: column; gap: 16px; } .gr-ab-mission__text p:not(.gr-eyebrow) { margin: 0; font-size: 18px; line-height: 1.65; color: var(--prose); max-width: 620px; } .gr-ab-directives { flex: 1 1 320px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: none; } .gr-ab-directives li { position: relative; padding: 20px 22px 20px 74px; border: 1px solid var(--card-line); border-radius: 8px; background: var(--surface); } .gr-ab-directives__n { position: absolute; left: 20px; top: 20px; font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; color: var(--accent); } .gr-ab-directives h3 { margin: 0 0 6px; font-size: 18px; color: var(--heading); } .gr-ab-directives p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; } .gr-ab-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; border: 1px solid var(--panel-line); border-radius: 8px; background: var(--panel-bg); overflow: hidden; } .gr-ab-stats__grid > div { padding: 26px 24px; border-right: 1px solid var(--line-soft); } .gr-ab-stats__grid > div:last-child { border-right: 0; } .gr-ab-stats__grid dt { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } .gr-ab-stats__grid dd { margin: 8px 0 0; font-family: var(--display); font-weight: 900; font-size: 54px; line-height: 1; color: var(--heading); } .gr-ab-log__list { position: relative; list-style: none; margin: 0; padding: 0 0 0 4px; } .gr-ab-log__list::before { content: ""; position: absolute; left: 131px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--link), rgba(124,203,255,.08)); } .gr-ab-log__list li { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 0 46px; padding-bottom: 34px; } .gr-ab-log__list li::before { content: ""; position: absolute; left: 121px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--link); box-shadow: 0 0 0 4px rgba(124,203,255,.12); } .gr-ab-log__list li.is-next::before { border-style: dashed; border-color: var(--accent); box-shadow: none; } .gr-ab-log__when { padding-top: 2px; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--link); text-align: right; } .gr-ab-log__list li.is-next .gr-ab-log__when { color: var(--accent); } .gr-ab-log__body h3 { margin: 0 0 6px; font-size: 20px; color: var(--heading); } .gr-ab-log__body p { margin: 0; color: var(--prose); font-size: 16px; line-height: 1.6; max-width: 640px; } @media (max-width: 640px) { .gr-ab-log__list::before { left: 7px; } .gr-ab-log__list li { grid-template-columns: 1fr; padding-left: 34px; gap: 4px; } .gr-ab-log__list li::before { left: 0; } .gr-ab-log__when { text-align: left; } } .gr-ab-board__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; } .gr-site .gr-ab-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 52px; border: 1px solid var(--card-line); border-radius: 8px; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .2s, transform .2s; } .gr-site .gr-ab-card:hover { border-color: var(--panel-line); transform: translateY(-2px); } .gr-ab-card__k { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tag); } .gr-ab-card--crew .gr-ab-card__k { color: var(--link); } .gr-ab-card h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 28px; text-transform: uppercase; color: var(--heading); } .gr-ab-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; } .gr-ab-card__go { position: absolute; left: 24px; bottom: 18px; color: var(--link); font-size: 18px; } @media (prefers-reduced-motion: reduce) { .gr-site .gr-ab-card:hover { transform: none; } } .gr-ab-pilot__card { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; padding: 44px; border: 1px solid var(--card-line); border-radius: 8px; background: var(--surface); } .gr-ab-pilot__emblem { position: relative; flex: 0 0 160px; height: 160px; display: flex; align-items: center; justify-content: center; } .gr-ab-pilot__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(124,203,255,.45); background: radial-gradient(circle at 50% 40%, rgba(124,203,255,.14), transparent 65%); } .gr-ab-pilot__ring::after { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); transform-origin: 4px 84px; animation: gr-ab-orbit 9s linear infinite; } @keyframes gr-ab-orbit { to { transform: rotate(360deg); } } .gr-ab-pilot__emblem img { position: relative; width: 104px; height: 104px; animation: gr-hover 4s ease-in-out infinite; } .gr-ab-pilot__text { flex: 999 1 420px; display: flex; flex-direction: column; gap: 14px; } .gr-ab-pilot__text p:not(.gr-eyebrow) { margin: 0; font-size: 17px; line-height: 1.65; color: var(--prose); max-width: 680px; } .gr-ab-pilot__links { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; } .gr-site .gr-ab-pilot__links a { font-weight: 600; text-decoration: none; } .gr-site .gr-ab-pilot__links a[rel~="external"]::after { content: " โ†—"; font-size: 13px; opacity: .7; } @media (prefers-reduced-motion: reduce) { .gr-ab-pilot__ring::after, .gr-ab-pilot__emblem img { animation: none; } } @media (max-width: 640px) { .gr-ab-pilot__card { padding: 28px 22px; } } .gr-ab-cta__actions { flex: 1 1 260px; display: flex; flex-wrap: wrap; gap: 12px; margin: 0; } .gr-ab-independent { margin: 20px 0 0; font-size: 13px; color: var(--faint); max-width: 760px; } .gr-ab-pilot__emblem.has-photo img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; animation: none; } /* Home: the same emblem in place of the initials badge */ .gr-about .gr-ab-pilot__emblem { flex: 0 0 140px; height: 140px; } .gr-about .gr-ab-pilot__emblem img { width: 92px; height: 92px; } .gr-about .gr-ab-pilot__emblem.has-photo img { width: 122px; height: 122px; } .gr-about .gr-ab-pilot__ring::after { transform-origin: 4px 74px; } /* ===== Join page ===== */ .gr-jn-form { padding-top: 64px; padding-bottom: 24px; } .gr-jn-form .gform_wrapper { margin: 0 !important; } .gr-jn-form .gform_heading { display: none; } /* Plan first, then details, then checkout */ .gr-jn-form .gform_fields { row-gap: 22px !important; } .gr-jn-form .gr-step--1 { order: 1; } .gr-jn-form .gfield--type-product { order: 2; } .gr-jn-form .gr-step--2 { order: 3; margin-top: 28px; } .gr-jn-form .gfield--type-name, .gr-jn-form .gfield--type-email, .gr-jn-form .gfield--type-password { order: 4; } .gr-jn-form .gr-step--3 { order: 5; margin-top: 28px; } .gr-jn-form .gfield--type-total, .gr-jn-form .gfield--type-stripe_creditcard { order: 6; } .gr-jn-form .gform_fields > .gfield:not(.gfield--type-product), .gr-jn-form .gr-step { grid-column: 1 / -1; width: 100%; max-width: 640px; justify-self: center; } .gr-site .gform-theme--framework .gr-step { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .gr-site .gform-theme--framework .gr-step__n { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--panel-line); background: radial-gradient(circle at 50% 35%, rgba(124,203,255,.18), transparent 70%); font-family: var(--display); font-weight: 900; font-size: 20px; color: var(--link); } .gr-site .gform-theme--framework .gr-step__text { display: flex; flex-direction: column; gap: 2px; } .gr-site .gform-theme--framework .gr-step__label { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1; text-transform: uppercase; color: var(--heading); } .gr-site .gform-theme--framework .gr-step__note { font-size: 14px; color: var(--faint); } .gr-jn-form .gr-step--1 { grid-column: 1 / -1; max-width: none; justify-self: stretch; } /* Plan cards: the radio buttons, dressed up */ .gr-site .gform_wrapper .gr-plan > label::before, .gr-site .gform_wrapper .gr-plan > label::after { display: none !important; content: none !important; } .gr-site .gform-theme--framework .gr-plan span { box-sizing: border-box; } .gr-site .gform_wrapper .gfield--type-product:has(.gr-plan) > legend { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .gr-site .gform_wrapper .gfield_radio:has(.gr-plan) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px !important; } .gr-site .gform_wrapper .gchoice.gr-plan { position: relative; display: flex !important; margin: 0 !important; } .gr-site .gform_wrapper .gr-plan .gfield-choice-input { position: absolute !important; top: 18px; right: 18px; width: 1px !important; height: 1px !important; opacity: 0; margin: 0 !important; } .gr-site .gform_wrapper .gr-plan > label { position: relative; display: flex !important; flex-direction: column; gap: 10px; width: 100%; max-width: none !important; margin: 0 !important; padding: 22px 22px 70px !important; border: 1px solid var(--card-line); border-radius: 10px; background: var(--surface); color: var(--text) !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.45 !important; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; } .gr-site .gform_wrapper .gr-plan > label:hover { border-color: var(--panel-line); transform: translateY(-2px); } .gr-site .gform_wrapper .gr-plan.is-featured > label { border-color: rgba(255,194,122,.45); background: linear-gradient(180deg, rgba(255,194,122,.07), transparent 40%), var(--surface); } .gr-site .gform_wrapper .gr-plan .gfield-choice-input:checked + label { border-color: var(--link); box-shadow: 0 0 0 1px var(--link), 0 0 34px rgba(124,203,255,.22); background: linear-gradient(180deg, rgba(124,203,255,.10), transparent 45%), var(--surface); } .gr-site .gform_wrapper .gr-plan .gfield-choice-input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 3px; } .gr-site .gform-theme--framework .gr-plan__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; } .gr-site .gform-theme--framework .gr-plan__orbit { flex: 0 0 auto; overflow: visible; } .gr-site .gform-theme--framework .gr-plan__ring { fill: none; stroke: var(--panel-line); stroke-width: 1; stroke-dasharray: 2 3; } .gr-site .gform-theme--framework .gr-plan__core { fill: var(--link); opacity: .9; } .gr-site .gform-theme--framework .gr-plan__sat { fill: var(--accent); } .gr-site .gform-theme--framework .gr-plan__sats { transform-origin: 24px 24px; } .gr-site .gform-theme--framework .gfield-choice-input:checked + label .gr-plan__sats { animation: gr-plan-spin 8s linear infinite; } @keyframes gr-plan-spin { to { transform: rotate(360deg); } } .gr-site .gform-theme--framework .gr-plan__badge { padding: 4px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .gr-site .gform-theme--framework .gr-plan__name { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; text-transform: uppercase; color: var(--heading); } .gr-site .gform-theme--framework .gr-plan__price { display: flex; align-items: baseline; gap: 6px; } .gr-site .gform-theme--framework .gr-plan__amt { font-family: var(--display); font-weight: 900; font-size: 48px; line-height: 1; color: var(--heading); } .gr-site .gform-theme--framework .gr-plan__per { font-family: var(--mono); font-size: 12px; color: var(--faint); } .gr-site .gform-theme--framework .gr-plan__tag { color: var(--muted); } .gr-site .gform-theme--framework .gr-plan__list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .gr-site .gform-theme--framework .gr-plan__item { position: relative; padding-left: 22px; color: var(--prose); font-size: 14px; } .gr-site .gform-theme--framework .gr-plan__item::before { content: ""; position: absolute; left: 2px; top: .45em; width: 9px; height: 5px; border-left: 2px solid var(--link); border-bottom: 2px solid var(--link); transform: rotate(-45deg); } .gr-site .gform-theme--framework .gr-plan__pick { position: absolute; left: 22px; right: 22px; bottom: 20px; display: flex; align-items: center; justify-content: center; min-height: 38px; border: 1px solid var(--card-line); border-radius: 6px; font-weight: 600; font-size: 14px; color: var(--heading); } .gr-site .gform-theme--framework .gr-plan__pick-on { display: none; } .gr-site .gform-theme--framework .gfield-choice-input:checked + label .gr-plan__pick { border-color: var(--link); background: var(--link); color: var(--bg); } .gr-site .gform-theme--framework .gfield-choice-input:checked + label .gr-plan__pick-on { display: inline; } .gr-site .gform-theme--framework .gfield-choice-input:checked + label .gr-plan__pick-off { display: none; } .gr-site .gform-theme--framework .gfield-choice-input:checked + label .gr-plan__pick-on::before { content: "โœ“ "; } [data-theme="light"] .gr-site .gform-theme--framework .gfield-choice-input:checked + label .gr-plan__pick { color: #fff; } @media (prefers-reduced-motion: reduce) { .gr-site .gform-theme--framework .gfield-choice-input:checked + label .gr-plan__sats { animation: none; } .gr-site .gform_wrapper .gr-plan > label:hover { transform: none; } } /* Details + checkout panel feel */ .gr-jn-form .gfield--type-total .ginput_container input { font-family: var(--display) !important; font-weight: 900 !important; font-size: 34px !important; color: var(--heading) !important; background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; } .gr-jn-form .gform-theme--framework .gform_footer { display: block !important; max-width: 640px; margin: 18px auto 0 !important; padding: 0 !important; } .gr-site .gr-jn-form .gform-theme--framework .gform_footer .gform_button { width: 100% !important; min-height: 56px !important; border-radius: 6px !important; background: var(--accent) !important; color: var(--accent-ink) !important; font-size: 17px !important; font-weight: 700 !important; border: 0 !important; box-shadow: 0 10px 30px rgba(255,194,122,.18); } .gr-site .gr-jn-form .gform-theme--framework .gform_footer .gform_button:hover { filter: brightness(1.06); } .gr-jn-legal { max-width: 640px; margin: 14px auto 0; text-align: center; font-size: 13px; color: var(--faint); } .gr-jn-points { padding-top: 40px; padding-bottom: 8px; } .gr-jn-points ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .gr-jn-points li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 20px 54px; border: 1px solid var(--card-line); border-radius: 8px; background: var(--surface); } .gr-jn-points__mark { position: absolute; left: 18px; top: 21px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--panel-line); } .gr-jn-points__mark::after { content: ""; position: absolute; left: 6px; top: 6px; width: 8px; height: 4px; border-left: 2px solid var(--link); border-bottom: 2px solid var(--link); transform: rotate(-45deg); } .gr-jn-points strong { color: var(--heading); } .gr-jn-points li > span:last-child { color: var(--muted); font-size: 14px; line-height: 1.5; } .gr-jn-faq { max-width: 860px; } .gr-jn-faq .gr-h2 { margin-bottom: 22px; } .gr-jn-faq__list { border-top: 1px solid var(--line); } .gr-jn-faq__item { border-bottom: 1px solid var(--line); } .gr-jn-faq__item summary { position: relative; padding: 20px 44px 20px 0; list-style: none; cursor: pointer; font-size: 18px; font-weight: 600; color: var(--heading); } .gr-jn-faq__item summary::-webkit-details-marker { display: none; } .gr-jn-faq__item summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--link); border-bottom: 2px solid var(--link); transform: rotate(45deg); transition: transform .2s; } .gr-jn-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; } .gr-jn-faq__a { padding: 0 0 20px; color: var(--prose); line-height: 1.65; } .gr-jn-faq__a p { margin: 0 0 10px; } @media (max-width: 640px) { .gr-site .gform-theme--framework .gr-step__label { font-size: 23px; } .gr-site .gform-theme--framework .gr-plan__amt { font-size: 42px; } } /* Upgrade page: launch step sits right under the plan cards; note panel when there's no form */ .gr-upgrade-page .gr-step--launch { order: 5; margin-top: 28px; } .gr-jn-note { max-width: 640px; margin: 0 auto; padding: 28px 32px; border: 1px solid var(--panel-line); border-radius: 10px; background: var(--panel-bg); text-align: center; font-size: 17px; color: var(--prose); } .gr-jn-note p { margin: 0; } /* Join / Upgrade confirmation: a "mission accomplished" panel */ .gr-jn-form:has(.gform_confirmation_wrapper) .gr-jn-legal { display: none; } .gr-site .gr-jn-form .gform_confirmation_wrapper { max-width: 680px; margin: 8px auto 0; } .gr-site .gr-jn-form .gform_confirmation_message { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 132px 40px 44px; border: 1px solid var(--panel-line); border-radius: 14px; background: radial-gradient(ellipse at 50% 0%, rgba(124,203,255,.16), transparent 60%), var(--panel-bg); text-align: center; font-size: 18px; line-height: 1.6; color: var(--prose); box-shadow: 0 30px 80px rgba(0,0,0,.25); animation: gr-confirm-in .5s ease-out both; } /* Emblem: a ring with an orbiting satellite and a check in the middle */ .gr-site .gr-jn-form .gform_confirmation_message::before { content: ""; position: absolute; top: 34px; left: 50%; width: 76px; height: 76px; margin-left: -38px; border-radius: 50%; border: 1px dashed var(--panel-line); background: radial-gradient(circle, rgba(124,203,255,.22) 0 26px, transparent 27px); animation: gr-ab-orbit 12s linear infinite; } .gr-site .gr-jn-form .gform_confirmation_message::after { content: ""; position: absolute; top: 61px; left: 50%; width: 22px; height: 11px; margin-left: -11px; border-left: 3px solid var(--link); border-bottom: 3px solid var(--link); transform: rotate(-45deg); } .gr-site .gr-jn-form .gform_confirmation_message p { margin: 0; max-width: 520px; } .gr-site .gr-jn-form .gform_confirmation_message strong:first-child { display: block; margin-bottom: 4px; font-family: var(--display); font-weight: 900; font-size: clamp(40px, 6vw, 58px); line-height: .95; text-transform: uppercase; letter-spacing: .01em; color: var(--heading); } .gr-site .gr-jn-form .gform_confirmation_message a { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; margin-top: 10px; padding: 0 26px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 16px; text-decoration: none; box-shadow: 0 10px 30px rgba(255,194,122,.2); } .gr-site .gr-jn-form .gform_confirmation_message a:hover { filter: brightness(1.06); } .gr-site .gr-jn-form .gform_confirmation_message a::after { content: " โ†’"; white-space: pre; } @keyframes gr-confirm-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .gr-site .gr-jn-form .gform_confirmation_message, .gr-site .gr-jn-form .gform_confirmation_message::before { animation: none; } } @media (max-width: 640px) { .gr-site .gr-jn-form .gform_confirmation_message { padding: 124px 22px 34px; font-size: 17px; } } /* ---- FormOasis landing page ---- */ .gr-fo-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; } .gr-fo-intro { max-width: 760px; margin-bottom: 36px; } .gr-fo-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .gr-fo-steps li { padding: 24px; border: 1px solid var(--card-line); border-radius: 8px; background: var(--surface); } .gr-fo-steps__n { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--tag); } .gr-fo-steps h3 { margin: 10px 0 6px; font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.05; text-transform: uppercase; color: var(--heading); } .gr-fo-steps p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; } .gr-fo-list { padding-top: 0; } .gr-fo-list__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 26px; } .gr-site .gr-fo-list .gr-chip { background: transparent; font: inherit; font-size: 15px; cursor: pointer; } .gr-fo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .gr-fo-card { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 20px 22px; border: 1px solid var(--card-line); border-radius: 8px; background: var(--surface); transition: border-color .2s ease; } .gr-fo-card:hover { border-color: var(--panel-line); } .gr-fo-card[hidden] { display: none; } .gr-fo-card__cat { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } .gr-fo-card__name { margin: 0; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.05; text-transform: uppercase; color: var(--heading); } .gr-fo-card__blurb { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; } .gr-fo-card__links { margin: auto 0 0; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; border-top: 1px solid var(--line-soft); font-size: 14px; font-weight: 600; } .gr-fo-card__links a { text-decoration: none; } .gr-site .gr-fo-card__tpl { color: var(--tag); } .gr-site .gr-fo-card__tpl:hover { color: var(--heading); } .gr-fo-empty { color: var(--muted); } .gr-fo-list .gr-pager { margin-top: 28px; } /* Footer newsletter: the Gravity Forms version laid out like the plain box (email + button on one line). */ .gr-signup--gf { display: block; } .gr-signup--gf .gform_wrapper { margin: 8px 0 0 !important; } .gr-signup--gf .gform_wrapper form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; } .gr-signup--gf .gform_body { flex: 1 1 200px; min-width: 0; } .gr-signup--gf .gform_fields { display: block !important; } .gr-signup--gf .gfield { margin: 0 !important; padding: 0 !important; } .gr-signup--gf .gfield input[type=email] { width: 100% !important; min-height: 48px !important; padding: 0 14px !important; border: 1px solid var(--input-line) !important; border-radius: 4px !important; background: transparent !important; color: var(--heading) !important; font: inherit !important; box-shadow: none !important; } .gr-signup--gf .gfield input[type=email]:focus { border-color: var(--link) !important; outline: none !important; } .gr-signup--gf .gform_footer { margin: 0 !important; padding: 0 !important; } .gr-signup--gf .gform_footer .gform_button { min-height: 48px !important; padding: 0 20px !important; border: 1px solid var(--input-line) !important; border-radius: 4px !important; background: transparent !important; color: var(--heading) !important; font: inherit !important; font-weight: 600 !important; cursor: pointer; } .gr-signup--gf .gform_footer .gform_button:hover { border-color: var(--link) !important; color: var(--link) !important; } .gr-signup--gf .gfield_validation_message, .gr-signup--gf .gform_validation_errors { margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; font-size: 13px !important; color: #FF8A80 !important; } .gr-signup--gf .gform_validation_errors { display: none !important; } .gr-signup--gf .gform_confirmation_message, .gr-signup__done { margin: 8px 0 0; color: var(--heading); font-weight: 600; } /* Free template download box (the "Download the Form Template" section with the Download Form Template form). Same blocks (same IDs) in all six posts that have it. */ .gr-prose .gb-container-9a197a6f { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin: 3em 0 !important; padding: 40px 32px 32px !important; border: 1px solid rgba(255,194,122,.55); border-radius: 16px; background: radial-gradient(120% 90% at 100% 0%, rgba(255,194,122,.20), rgba(255,194,122,0) 60%), var(--panel-bg) !important; box-shadow: 0 0 0 4px rgba(255,194,122,.08), 0 18px 50px rgba(0,0,0,.35); } .gr-prose .gb-container-9a197a6f::before { content: "Free template"; position: absolute; top: -13px; left: 28px; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .gr-prose .gb-container-9a197a6f > .gb-container { flex: 1 1 220px; width: auto !important; min-width: 0; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; } .gr-prose .gb-container-9a197a6f > .gb-container:last-child { flex: 0 1 42%; } .gr-prose .gb-container-9a197a6f .gb-container { border: 0 !important; box-shadow: none !important; background: none !important; } .gr-prose .gb-container-9a197a6f .gb-container-faea1eb2 { padding: 0 !important; } .gr-prose .gb-container-9a197a6f h2.gb-headline { margin: 0 0 6px !important; font-family: var(--display); font-size: clamp(28px, 4vw, 38px) !important; font-weight: 800; line-height: 1 !important; text-transform: uppercase; color: var(--heading) !important; } .gr-prose .gb-container-9a197a6f p.gb-headline { margin: 0 0 18px !important; font-family: var(--mono); font-size: 13px !important; letter-spacing: .12em; text-transform: uppercase; color: var(--accent) !important; } .gr-prose .gb-container-9a197a6f p.gb-headline::after { content: " ยท Import it into Gravity Forms in seconds"; color: var(--muted); letter-spacing: .04em; text-transform: none; font-family: inherit; } .gr-prose .gb-container-9a197a6f .gb-block-image img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--card-line); box-shadow: 0 14px 40px rgba(0,0,0,.35); transform: rotate(1.5deg); } .gr-prose .gb-container-9a197a6f .gform_wrapper { margin: 0 !important; } .gr-prose .gb-container-9a197a6f .gform_wrapper input[type=text], .gr-prose .gb-container-9a197a6f .gform_wrapper input[type=email] { min-height: 46px !important; border-radius: 6px !important; } .gr-prose .gb-container-9a197a6f .gform_footer { margin-top: 6px !important; padding: 0 !important; } .gr-prose .gb-container-9a197a6f .gform_footer .gform_button { width: 100%; min-height: 48px !important; border: 0 !important; border-radius: 6px !important; background: var(--accent) !important; color: var(--accent-ink) !important; font-weight: 700 !important; letter-spacing: .02em; } .gr-prose .gb-container-9a197a6f .gform_footer .gform_button:hover { filter: brightness(1.08); } :root[data-theme="light"] .gr-prose .gb-container-9a197a6f { border-color: rgba(214,138,40,.55); box-shadow: 0 0 0 4px rgba(255,194,122,.18), 0 18px 40px rgba(14,20,34,.10); } :root[data-theme="light"] .gr-prose .gb-container-9a197a6f p.gb-headline { color: #A35F00 !important; } @media (max-width: 640px) { .gr-prose .gb-container-9a197a6f { padding: 34px 20px 22px !important; } .gr-prose .gb-container-9a197a6f .gb-block-image img { transform: none; } } /* Donate page */ .gr-donate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; align-items: start; } .gr-donate__why { min-width: 0; } .gr-donate__card { position: sticky; top: calc(var(--header-h) + 24px); padding: 28px 26px 22px; border: 1px solid rgba(255,194,122,.5); border-radius: 16px; background: radial-gradient(120% 80% at 100% 0%, rgba(255,194,122,.16), rgba(255,194,122,0) 60%), var(--panel-bg); box-shadow: 0 18px 50px rgba(0,0,0,.30); } .gr-donate__card-title { margin: 0 0 14px; font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--heading); } .gr-donate__secure { margin: 14px 0 0; font-size: 13px; color: var(--muted); } .gr-donate-form .gform_fields { row-gap: 18px !important; } .gr-donate-form .gr-pills .gfield_radio { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; } .gr-donate-form .gr-pills .gchoice { display: flex !important; margin: 0 !important; flex: 1 1 64px; width: auto !important; min-width: 0; } .gr-donate-form .gr-pills .gchoice label { flex: 1 1 auto; width: 100% !important; } .gr-donate-form .gr-pills .gchoice input { position: absolute; opacity: 0; width: 1px; height: 1px; } .gr-donate-form .gr-pills .gchoice label { display: flex !important; align-items: center; justify-content: center; min-height: 46px; margin: 0 !important; padding: 0 16px; border: 1px solid var(--input-line); border-radius: 8px; color: var(--heading) !important; font-weight: 600; cursor: pointer; max-width: none !important; } .gr-donate-form .gr-pills .gchoice label::before, .gr-donate-form .gr-pills .gchoice label::after { display: none !important; } .gr-donate-form .gr-pills .gchoice input:checked + label { border-color: var(--accent); background: rgba(255,194,122,.14); color: var(--heading) !important; box-shadow: inset 0 0 0 1px var(--accent); } .gr-donate-form .gr-pills .gchoice input:focus-visible + label { outline: 2px solid var(--sky); outline-offset: 2px; } .gr-donate__card .ginput_total { font-family: var(--display) !important; font-size: 34px !important; font-weight: 800 !important; line-height: 1 !important; color: var(--accent) !important; } .gr-donate__card .gform_footer { display: block !important; } .gr-donate-form .gform_footer .gform_button { width: 100% !important; min-height: 52px !important; border: 0 !important; border-radius: 8px !important; background: var(--accent) !important; color: var(--accent-ink) !important; font-weight: 700 !important; font-size: 17px !important; } .gr-donate-form .gform_footer .gform_button:hover { filter: brightness(1.08); } .gr-donate-thanks { padding: 8px 0; } .gr-donate-thanks__big { margin: 0 0 8px; font-family: var(--display); font-size: 30px; font-weight: 800; text-transform: uppercase; color: var(--heading); } :root[data-theme="light"] .gr-donate__card { border-color: rgba(214,138,40,.5); box-shadow: 0 18px 40px rgba(14,20,34,.10); } :root[data-theme="light"] .gr-donate-form .gr-pills .gchoice input:checked + label { background: rgba(255,194,122,.28); } @media (max-width: 900px) { .gr-donate { grid-template-columns: 1fr; gap: 32px; } .gr-donate__card { position: static; order: -1; } }