/* ========================================================================== Use One Page — static rebuild Design tokens extracted from the original BeTheme build (useonepage.com) ========================================================================== */ :root { --bg: #101010; --panel: #1f1f21; --panel-2: #161922; --border: #232323; --border-2: #3c3c40; --primary: #5f5de5; --primary-hover: #7d7bfc; --blue: #0089f7; --cyan: #0dd0ee; --text: rgba(255, 255, 255, 0.7); --text-strong: #ffffff; --text-on-white: #444444; --muted-on-white: #6a6a72; --heading-font: "DM Serif Display", Georgia, serif; --body-font: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --radius: 8px; --radius-lg: 16px; --container: 1180px; } /* Light mode — opt-in via . Dark stays the default. */ [data-theme="light"] { --bg: oklch(99% 0.004 195); /* subtle cool off-white, not a shocking pure white */ --panel: #f4f4f7; --panel-2: #eef0f4; --border: #e4e4ea; --border-2: #d6d6dd; --text: #4a4a52; --text-strong: #101014; --muted-on-white: #6a6a72; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body-font); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--heading-font); font-weight: 700; letter-spacing: 1px; color: var(--text-strong); line-height: 1.15; margin: 0 0 0.5em; } h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); } h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); } h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); } h4 { font-size: 1.2rem; } p { margin: 0 0 1.2em; } a { color: var(--primary); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--primary-hover); } img { max-width: 100%; height: auto; display: block; } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } .narrow { max-width: 880px; } section { padding: 80px 0; } .eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--panel); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin-bottom: 18px; } .eyebrow svg { width: 15px; height: 15px; } #apply .eyebrow { background: #000; } [data-theme="light"] .eyebrow { background: #101014; border-color: #101014; color: #fff; } /* Buttons — original: 8px radius, 16/30 padding, 600 weight */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; border-radius: 999px; border: none; background: transparent; color: var(--text); font-family: var(--body-font); font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; transition: all 0.2s; } .btn svg { width: 17px; height: 17px; color: currentColor; } .btn:hover { background: var(--primary); color: #fff; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-hover); color: #fff; } /* ========================================================================== Promo banner (dismissible, persisted via localStorage — see main.js) ========================================================================== */ .promo-banner { background: var(--primary); } .promo-banner-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; min-height: 44px; padding-top: 8px; padding-bottom: 8px; text-align: center; } .promo-banner p { margin: 0; color: #fff; font-size: 14px; font-weight: 600; } .promo-banner strong { letter-spacing: 0.04em; } /* Live countdown — small tabular-number chips, ticks every second (see main.js) */ .promo-countdown { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .promo-countdown-unit { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 38px; padding: 4px 6px 3px; border-radius: 8px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.22); } .promo-countdown-unit span { font-variant-numeric: tabular-nums; font-family: var(--heading-font); font-weight: 700; font-size: 15px; line-height: 1.1; color: #fff; } .promo-countdown-unit small { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; margin-top: 2px; color: rgba(255, 255, 255, 0.75); } .promo-dismiss { flex-shrink: 0; background: rgba(255, 255, 255, 0.15); border: 0; border-radius: 50%; width: 24px; height: 24px; color: #fff; font-size: 13px; line-height: 1; cursor: pointer; } .promo-dismiss:hover { background: rgba(255, 255, 255, 0.3); } html[data-promo-dismissed] .promo-banner { display: none; } /* ========================================================================== Header — the only sticky element in this stack. The promo banner sits in normal flow above it and scrolls away; only the header itself pins to the very top of the viewport. ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(16, 16, 16, 0.85); backdrop-filter: blur(10px); } [data-theme="light"] .site-header { background: rgba(255, 255, 255, 0.85); } .site-header .container { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 88px; } .site-header .logo img { height: 54px; width: auto; } /* Logo swaps with theme (white wordmark on dark, dark wordmark on light) */ .logo-on-light { display: none; } [data-theme="light"] .logo-on-dark { display: none; } [data-theme="light"] .logo-on-light { display: block; } /* Self-contained nav pill (shared header design across sites) */ .main-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 4px; padding: 7px 12px; border: 1px solid var(--border-2); border-radius: 999px; background: var(--panel); } .main-nav a { color: var(--text-strong); font-size: 15px; font-weight: 600; padding: 8px 15px; border-radius: 999px; transition: background 0.2s, color 0.2s; } .main-nav a:hover { color: var(--primary-hover); background: rgba(127, 123, 252, 0.12); } .header-actions { display: flex; align-items: center; gap: 14px; } /* Cloudflare-nav pattern: a plain bordered pill by default, filled CTA once the user scrolls (toggled via html.is-scrolled — see main.js). */ .apply-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; border: none; background: transparent; color: var(--text); font-weight: 700; font-size: 15px; white-space: nowrap; transition: background 0.2s, color 0.2s; } .apply-link:hover { color: var(--primary-hover); } .apply-link svg { width: 18px; height: 18px; color: currentColor; } html.is-scrolled .apply-link { background: var(--primary); color: #fff; } html.is-scrolled .apply-link:hover { background: var(--primary-hover); color: #fff; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--panel); color: var(--text-strong); cursor: pointer; transition: all 0.2s; } .theme-toggle:hover { border-color: var(--primary); color: var(--primary-hover); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } .nav-toggle { display: none; background: none; border: 0; color: var(--text-strong); font-size: 26px; cursor: pointer; padding: 6px; } /* ========================================================================== Hero ========================================================================== */ .hero { padding: 56px 0 0; text-align: center; } .hero h1 { font-size: clamp(2.9rem, 7.2vw, 5.6rem); margin-bottom: 22px; } .hero-gradient { -webkit-text-fill-color: transparent; background: linear-gradient(160deg, #0cd0ef, #f70983); -webkit-background-clip: text; background-clip: text; } .hero .sub { width: 800px; max-width: 100%; font-size: clamp(20px, 2.7vw, 30px); font-weight: 500; line-height: 1.4; color: var(--text-strong); margin: 0 auto 30px; } .hero-cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 32px; margin-bottom: 56px; } .hero-banner { border-radius: var(--radius-lg); overflow: hidden; } .hero-banner img { width: 100%; } /* marquee strip */ .marquee { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 16px 0; white-space: nowrap; } .marquee-track { display: inline-block; animation: marquee 28s linear infinite; } .marquee-track span { display: inline-block; margin: 0 28px; color: var(--text-strong); font-weight: 600; font-size: 15px; letter-spacing: 0.04em; } .marquee-track span::before { content: "✦"; color: var(--primary); margin-right: 12px; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================================================== Intro / founder strip ========================================================================== */ .intro { text-align: center; } .intro .goal { font-size: 15px; color: var(--text); margin-bottom: 24px; } .intro h2 { max-width: 900px; margin: 0 auto; } /* ========================================================================== Benefits ========================================================================== */ .benefits-grid { display: grid; grid-template-columns: 1fr 2.4fr; gap: 48px; align-items: start; } .benefits-intro { position: sticky; top: 110px; } .benefits-intro h3 { margin-bottom: 12px; } .benefits-intro p { color: var(--text); margin-bottom: 24px; } .benefits-intro .more { display: block; margin-top: 16px; font-size: 14px; font-weight: 600; } .benefit-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; transition: border-color 0.2s, transform 0.2s; } .card:hover { border-color: var(--primary); transform: translateY(-3px); } .card h3 { font-size: 1.25rem; margin-bottom: 10px; } .card p { font-size: 15px; margin-bottom: 14px; } .card .more { font-size: 14px; font-weight: 600; } /* ========================================================================== Section picker ("What You Get") ========================================================================== */ .picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; margin-top: 24px; } .picker-card { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 210px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 22px; text-align: left; font-family: var(--body-font); cursor: pointer; transition: border-color 0.2s, transform 0.2s, background 0.2s, opacity 0.2s; } .picker-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .picker-icon { width: 26px; height: 26px; color: var(--primary-hover); flex-shrink: 0; } .picker-card h3 { font-family: var(--body-font); font-weight: 600; letter-spacing: normal; font-size: 1rem; margin: 0 0 6px; color: var(--text-strong); } .picker-desc { font-size: 13px; line-height: 1.5; color: var(--text); margin: 0; flex: 1; } .picker-card:hover, .picker-card:focus { border-color: var(--primary); transform: translateY(-2px); outline: none; } .picker-card.is-selected { border-color: var(--primary); background: rgba(95, 93, 229, 0.14); } .picker-card.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* "Faded" (while "I don't know" is active) stays CLICKABLE — one click on any card overrides "I don't know" and reactivates the normal pick-4 flow. */ .picker-card.is-faded { opacity: 0.4; } .picker-card.is-faded:hover, .picker-card.is-faded:focus { opacity: 0.7; } .picker-card.is-locked { cursor: default; background: rgba(95, 93, 229, 0.14); border-color: var(--primary); } .picker-card.is-locked.is-faded .picker-tag { display: none; } .picker-tag { display: inline-block; flex-shrink: 0; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; /* Included = logo pink */ background: rgba(255, 0, 127, 0.16); color: #ff007f; } .picker-tag--added { display: none; /* Added = logo blue */ background: rgba(3, 216, 243, 0.16); color: #03d8f3; } .picker-card.is-selected .picker-tag--added { display: inline-block; } /* "I don't know" card gets CTA (gradient) styling, not the plain panel look */ .picker-card--unknown { background: linear-gradient(135deg, var(--primary) 0%, #4a48c4 100%); border-color: var(--primary); } .picker-card--unknown .picker-icon, .picker-card--unknown h3, .picker-card--unknown .picker-desc { color: #fff; } .picker-card--unknown:hover, .picker-card--unknown:focus { border-color: #fff; } .picker-card--unknown.is-selected { background: linear-gradient(135deg, var(--primary) 0%, #4a48c4 100%); box-shadow: 0 0 0 2px #fff inset; } .picker-summary { margin: 30px 0 0; padding: 16px 20px; border-radius: var(--radius); background: var(--panel-2); font-size: 14px; color: var(--text-strong); } .picker-summary-label { color: var(--text); margin-right: 8px; } .picker-hint { margin: 14px 0 0; font-size: 13px; color: var(--text); text-align: center; } /* ========================================================================== Hosting options ========================================================================== */ .hosting-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; align-items: stretch; } .hosting-card { text-align: left; } .hosting-card--managed { border-color: var(--primary); box-shadow: 0 0 30px rgba(95, 93, 229, 0.12); } .hosting-card .hosting-price { font-family: var(--heading-font); font-weight: 700; letter-spacing: 1px; font-size: 3.25rem; color: var(--text-strong); margin-bottom: 12px; } .hosting-card .hosting-price--free { color: var(--primary-hover); } .hosting-card .hosting-price span { font-family: var(--body-font); font-weight: 600; letter-spacing: normal; font-size: 14px; color: var(--text); margin-left: 6px; } .hosting-card .pricing-list { margin-top: 16px; margin-bottom: 0; } .hosting-card .pricing-list li { color: var(--text); font-size: 15px; gap: 8px; } .hosting-card--managed { position: relative; } .hosting-maple { position: absolute; top: 22px; right: 22px; width: 22px; height: 22px; color: #ff007f; } /* ========================================================================== Process ========================================================================== */ .process-banner { background: url("/assets/img/software2-section-bg2.webp") center/cover no-repeat; text-align: right; padding: 80px 0 150px; } .process-banner-text { max-width: 520px; margin-left: auto; } /* Always white — this sits on a dark photo regardless of site theme */ .process-banner h2 { color: #fff; } .process-banner .sub { color: #fff; opacity: 0.9; } /* pull the staggered cards up so they overlap the banner image */ .process-steps { margin-top: -130px; position: relative; z-index: 2; padding-top: 0; } /* staggered: card 1 highest, 2 and 3 step progressively lower */ .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; } .steps-grid .step:nth-child(2) { margin-top: 56px; } .steps-grid .step:nth-child(3) { margin-top: 112px; } .step { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 30px; } .step img.step-num { width: clamp(96px, 11vw, 132px); margin-bottom: 12px; } .step h3 { font-size: 1.3rem; margin-bottom: 16px; } .step p { font-size: 15px; } .step .more { font-weight: 600; font-size: 15px; } /* ========================================================================== Pricing ========================================================================== */ .pricing-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; } /* Flexbox + align-items:baseline instead of an absolutely-positioned ::before with a hand-tuned "top" offset — that approach never actually lined the checkmark up with the text's own baseline (font-metric-dependent, and wrong at every font-size/line-height combination it wasn't tuned for). Baseline alignment is correct by construction, regardless of font size. */ .pricing-list { list-style: none; padding: 0; margin: 0 0 30px; } .pricing-list li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; color: var(--text-strong); font-size: 16px; } .pricing-list li::before { content: "✓"; flex-shrink: 0; color: var(--primary-hover); font-weight: 700; } /* Price card — edit the three .price-* values below to change the offer */ .price-card { background: var(--panel); border: 1px solid var(--primary); border-radius: var(--radius-lg); padding: 30px 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; box-shadow: 0 0 40px rgba(95, 93, 229, 0.18); } .price-badge { display: inline-block; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; margin-bottom: 10px; } .price-was { font-size: 18px; color: var(--muted-on-white); text-decoration: line-through; margin-right: 10px; } .price-now { font-family: var(--heading-font); font-size: clamp(2.2rem, 4vw, 3rem); color: var(--text-strong); } .price-now small { font-size: 0.45em; color: var(--text); font-family: var(--body-font); font-weight: 600; } .price-note { font-size: 13px; color: var(--text); margin: 6px 0 0; } /* ========================================================================== Why one page ========================================================================== */ .why-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; } .why-copy p { color: var(--text); } .why-headline { position: sticky; top: 110px; } .why-photo { margin-bottom: 24px; } .why-photo img { width: 220px; height: 220px; border-radius: var(--radius-lg); object-fit: cover; object-position: center 20%; } .why-big { font-size: clamp(2rem, 3.85vw, 3.2rem); margin-bottom: 22px; } .why-big em { font-style: italic; } .rainbow-text { display: inline-block; font-family: var(--heading-font); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: 1px; -webkit-text-fill-color: transparent; background: linear-gradient(90deg, #0cd0ef, #5f5de5, #f70983); -webkit-background-clip: text; background-clip: text; } .rainbow-text:hover { opacity: 0.88; } .cta-card { background: linear-gradient(135deg, var(--primary) 0%, #4a48c4 100%); border-radius: var(--radius-lg); padding: 38px 34px; margin-bottom: 28px; } .cta-card h3 { color: #fff; margin-bottom: 18px; } .cta-card .btn { background: #fff; border-color: #fff; color: var(--primary); } .cta-card .btn:hover { background: var(--bg); border-color: var(--bg); color: #fff; } .quote-card { background: var(--panel); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: 30px 32px; } .quote-card h4 { margin-bottom: 12px; } .quote-card p { font-size: 15px; margin: 0; } /* ========================================================================== Carousels (testimonials + blog) — scroll-snap, arrows in JS ========================================================================== */ .carousel-wrap { position: relative; } .carousel { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px; } .carousel::-webkit-scrollbar { display: none; } .carousel > * { scroll-snap-align: start; flex: 0 0 calc(33.333% - 14px); min-width: 290px; } .carousel-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; } .carousel-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--panel); color: var(--text-strong); font-size: 18px; cursor: pointer; transition: all 0.2s; } .carousel-nav button:hover { background: var(--primary); border-color: var(--primary); color: #fff; } .testimonial { display: flex; flex-direction: column; } .testimonial img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 18px; } .testimonial p { font-size: 15px; flex: 1; } .testimonial .who { color: var(--text-strong); font-weight: 700; font-size: 14px; } /* blog cards (carousel + /blog/ grid) */ .post-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.2s; } .post-card:hover { border-color: var(--primary); transform: translateY(-3px); } .post-card img { aspect-ratio: 1200 / 630; object-fit: cover; width: 100%; } .post-card .post-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; } .post-card .cat { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-hover); margin-bottom: 8px; } .post-card h3 { font-family: var(--body-font); font-weight: 600; letter-spacing: normal; font-size: 1.1rem; line-height: 1.4; margin-bottom: 14px; flex: 1; } .post-card h3 a { color: var(--text-strong); } .post-card h3 a:hover { color: var(--primary-hover); } .post-card .read { font-size: 14px; font-weight: 700; } /* docs cards (no featured image — text-forward, /docs/ grid) */ .doc-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 30px; display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.2s; } .doc-card:hover { border-color: var(--primary); transform: translateY(-3px); } .doc-card .cat { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-hover); margin-bottom: 10px; } .doc-card h3 { font-family: var(--body-font); font-weight: 600; letter-spacing: normal; font-size: 1.15rem; line-height: 1.4; margin-bottom: 10px; } .doc-card h3 a { color: var(--text-strong); } .doc-card h3 a:hover { color: var(--primary-hover); } .doc-card p { font-size: 14px; color: var(--text); flex: 1; margin-bottom: 18px; } .doc-card .read { font-size: 14px; font-weight: 700; } .docs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } /* docs article layout: content + sticky sidebar CTA widget */ .doc-layout { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; max-width: 1080px; margin: 0 auto; padding: 0 24px; } .doc-layout .article-body { max-width: none; margin: 0; padding: 0; } .docs-sidebar { position: sticky; top: 110px; } .docs-widget { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 26px; } .docs-widget .eyebrow { margin-bottom: 16px; } .docs-widget h3 { font-size: 1.25rem; margin-bottom: 12px; } .docs-widget p { font-size: 14px; color: var(--text); margin-bottom: 22px; } .docs-widget .btn { width: 100%; justify-content: center; } /* ========================================================================== Apply / form ========================================================================== */ .apply-grid { max-width: 880px; margin: 0 auto; } .apply-grid form { margin-top: 34px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; } .form-row.single { grid-template-columns: 1fr; } label { display: block; font-size: 14px; font-weight: 600; color: var(--text-strong); margin-bottom: 6px; } input, textarea { width: 100%; background: rgba(30, 30, 30, 0.6); border: 1px solid #3d3d3d; border-radius: var(--radius); color: #fff; font-family: var(--body-font); font-size: 15px; padding: 13px 16px; } input:focus, textarea:focus { outline: none; border-color: var(--primary); } [data-theme="light"] input, [data-theme="light"] textarea { background: #f4f4f7; border-color: #d6d6dd; color: #101014; } textarea { min-height: 150px; resize: vertical; } .form-hint { font-size: 13px; color: var(--text); margin-top: 6px; } .form-hint.is-applied { color: #22c55e; font-weight: 600; } .contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 880px; margin: 72px auto 0; } .contact-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 30px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; transition: border-color 0.2s, transform 0.2s; } .contact-card:hover { border-color: var(--primary); transform: translateY(-3px); } .contact-card .icon-tile { width: 64px; height: 64px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), #4a48c4); margin-bottom: 8px; } .contact-card .icon-tile svg { width: 30px; height: 30px; color: #fff; } .contact-label { font-size: 15px; color: var(--text); } .contact-value { font-family: var(--heading-font); font-weight: 700; letter-spacing: 1px; font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--text-strong); } /* ========================================================================== FAQ ========================================================================== */ .faq { max-width: 880px; margin: 0 auto; } .faq details { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 14px; overflow: visible; /* let tooltips escape the accordion box */ } .faq summary { cursor: pointer; list-style: none; padding: 22px 56px 22px 26px; font-family: var(--body-font); font-weight: 600; font-size: 1.05rem; color: var(--text-strong); position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); color: var(--primary-hover); font-size: 26px; font-family: var(--body-font); transition: transform 0.2s; } .faq details[open] summary::after { content: "–"; } .faq .faq-body { padding: 0 26px 24px; font-size: 15px; } .faq .faq-body ul { padding-left: 22px; } .faq .faq-body li { margin-bottom: 6px; } .faq .faq-body p { margin: 0 0 1em; } .faq .faq-body p:last-child { margin-bottom: 0; } /* Tooltips — hover on desktop, tap-to-focus on touch (terms are tabbable) */ .tt { position: relative; color: var(--text-strong); font-weight: 600; border-bottom: 1px dotted var(--primary-hover); cursor: help; } .tt-pop { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px); width: max-content; max-width: min(280px, 78vw); background: var(--panel); color: var(--text); border: 1px solid var(--border-2); border-radius: 10px; padding: 10px 13px; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: normal; text-transform: none; white-space: normal; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.18s, transform 0.18s; z-index: 60; pointer-events: none; } .tt-pop::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--panel); } .tt:hover .tt-pop, .tt:focus .tt-pop, .tt:focus-within .tt-pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .tt:focus { outline: none; } [data-theme="light"] .tt-pop { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } /* ========================================================================== Page hero (blog index, posts, privacy) ========================================================================== */ .page-hero { padding: 70px 0 50px; text-align: center; } .page-hero .meta { font-size: 14px; color: var(--text); } .page-hero .meta span + span::before { content: "·"; margin: 0 10px; } .breadcrumbs { font-size: 13px; color: var(--text); margin-bottom: 20px; } .breadcrumbs a { color: var(--text); } .breadcrumbs a:hover { color: var(--primary-hover); } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .about-jef { display: flex; gap: 28px; align-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px; max-width: 880px; margin: 0 auto 60px; text-align: left; } .about-jef img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .about-jef h2 { font-size: 1.5rem; margin-bottom: 8px; } .about-jef p { font-size: 15px; margin-bottom: 12px; } /* ========================================================================== Article body (white section on post pages) ========================================================================== */ .post-featured { max-width: 880px; margin: 0 auto; padding: 0 24px; } .post-featured img { border-radius: var(--radius-lg); width: 100%; } .article-section { background: #ffffff; padding: 70px 0; margin-top: -120px; padding-top: 170px; } /* docs pages have no featured image to bleed under, so no negative-margin overlap */ .docs-article-section { background: #ffffff; padding: 80px 0; } .docs-article-section .article-body { color: var(--text-on-white); } .docs-article-section .article-body h2, .docs-article-section .article-body h3 { color: #101010; } .article-body { max-width: 760px; margin: 0 auto; padding: 0 24px; color: var(--text-on-white); } .article-body h2, .article-body h3, .article-body h4 { color: #101010; margin-top: 1.6em; } .article-body a { color: var(--primary); text-decoration: underline; text-decoration-color: rgba(95, 93, 229, 0.35); } .article-body a:hover { color: var(--primary-hover); } .article-body img { border-radius: var(--radius); margin: 0 auto; } .article-body figure { margin: 2em auto; } .article-body figcaption, .article-body .caption { font-size: 13px; color: var(--muted-on-white); text-align: center; margin-top: 10px; } .article-body ul, .article-body ol { padding-left: 26px; margin-bottom: 1.4em; } .article-body li { margin-bottom: 8px; } .article-body blockquote { border-left: 4px solid var(--primary); margin: 1.8em 0; padding: 4px 0 4px 22px; font-style: italic; color: #333; } .article-body .checklist, .article-body .cancel-list { list-style: none; padding-left: 4px; } .article-body .checklist li, .article-body .cancel-list li { padding-left: 30px; position: relative; } .article-body .checklist li::before { content: "✓"; position: absolute; left: 0; color: #16a34a; font-weight: 700; } .article-body .cancel-list li::before { content: "✕"; position: absolute; left: 0; color: #dc2626; font-weight: 700; } .article-body table { border-collapse: collapse; width: 100%; margin: 1.6em 0; font-size: 15px; } .article-body th, .article-body td { border: 1px solid #e5e5e5; padding: 10px 14px; text-align: left; } .article-body th { background: #f6f6f8; color: #101010; } /* post CTA */ .post-cta { text-align: center; } .post-cta h2 { max-width: 700px; margin: 0 auto 16px; } .post-cta p { max-width: 620px; margin: 0 auto 28px; } /* privacy page article on dark */ .legal-body { max-width: 800px; margin: 0 auto; padding: 0 24px; } .legal-body h2, .legal-body h3 { margin-top: 1.8em; } /* ========================================================================== Closing CTA block ("Launch Without Limitations" — Cloudflare-partners-page pattern: floating icon tiles align into two columns on hover/focus of the primary button. Reusable component — see cta_block() in build.py. ========================================================================== */ .cta-block { position: relative; padding: 110px 0; text-align: center; } /* Stretched past the section's own top/bottom edges and faded well before reaching them, so it reads as an atmospheric wash with no visible box edge or hard seam — not a rectangle of gradient dropped on a flat section. */ .cta-glow { position: absolute; left: 50%; top: -20%; bottom: -20%; width: min(1200px, 100%); transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(3, 216, 243, 0.24), rgba(255, 0, 127, 0.17) 36%, transparent 60%); filter: blur(70px); pointer-events: none; z-index: 0; } .cta-content { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; } .cta-content h2 { margin-bottom: 16px; } .cta-content .sub { color: var(--text); margin: 0 auto 32px; } .cta-buttons { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } /* Secondary CTA hovers to the brand magenta (same hue as the glow) instead of inheriting the site-wide .btn:hover purple, so it reads as its own distinct path rather than a dimmer copy of the primary button. */ .cta-buttons .btn:not(.btn-primary):hover { background: #ff007f; color: #fff; } /* Tiles are positioned via calc(50% ± px) rather than section-wide percentages so they stay close to the headline regardless of viewport width, instead of drifting out to the section's literal edges. */ .cta-tiles { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .cta-tile { position: absolute; z-index: 2; width: 56px; height: 56px; /* Hover-out (back to idle scatter): quick, with a slight overshoot bounce */ transition: top 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), right 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Hover-in (assembling into the frames): a touch slower and smoother — premium, not snappy */ .cta-block.is-aligned .cta-tile { transition: top 0.5s cubic-bezier(0.16, 1, 0.3, 1), left 0.5s cubic-bezier(0.16, 1, 0.3, 1), right 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), width 0.5s cubic-bezier(0.16, 1, 0.3, 1), height 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .cta-tile-float { position: relative; width: 100%; height: 100%; border-radius: 14px; background: var(--panel); border: 1px solid var(--border-2); color: var(--primary-hover); animation-name: cta-float; animation-timing-function: ease-in-out; animation-iteration-count: infinite; transition: transform 0.3s ease; } /* Once assembled, tiles settle into place instead of continuing to drift — they read as "landed" content, not idle decoration anymore. The resting transform itself (translate + bar-shape scale) is set per tile-group further down, alongside the bar-shape rules. */ .cta-block.is-aligned .cta-tile-float { animation: none; } .cta-tile-icon { position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.5s ease, transform 0.4s ease; } .cta-tile-icon[data-icon="a"] { opacity: 1; } .cta-tile-float.is-showing-b .cta-tile-icon[data-icon="a"] { opacity: 0; } .cta-tile-float.is-showing-b .cta-tile-icon[data-icon="b"] { opacity: 1; } /* Mini nav bar building blocks — used inside .cta-frame-nav (a permanent part of each frame, not one of the shuffling tiles; see below). */ .cta-tile-logo { flex-shrink: 0; width: 10px; height: 10px; border-radius: 3px; background: var(--primary-hover); } .cta-tile-nav { display: flex; align-items: center; gap: 5px; } .cta-tile-nav span { width: 14px; height: 4px; border-radius: 2px; background: var(--border-2); } .cta-tile-header-cta { flex-shrink: 0; width: 26px; height: 10px; border-radius: 5px; background: var(--primary-hover); } .cta-frame-nav--mobile .cta-tile-header-cta { width: 20px; height: 8px; border-radius: 4px; } .cta-tile-header-group { display: flex; align-items: center; gap: 6px; } .cta-tile-burger { display: flex; flex-direction: column; gap: 2px; } .cta-tile-burger span { width: 10px; height: 1.5px; border-radius: 1px; background: var(--border-2); } /* Organic drift — irregular steps (not a clean sine wave) so six tiles at staggered delays and durations don't read as one synchronized wave. */ @keyframes cta-float { 0% { transform: translate(0, 0); } 25% { transform: translate(2px, -6px); } 55% { transform: translate(-3px, -10px); } 80% { transform: translate(-1px, -3px); } 100% { transform: translate(0, 0); } } /* Idle: scattered loosely either side of the headline, each at its own rotation */ .cta-tile--1 { top: 22%; left: calc(50% - 460px); transform: rotate(-14deg); } .cta-tile--2 { top: 46%; left: calc(50% - 500px); transform: rotate(10deg); } .cta-tile--3 { top: 70%; left: calc(50% - 440px); transform: rotate(-9deg); } .cta-tile--4 { top: 22%; right: calc(50% - 460px); transform: rotate(13deg); } .cta-tile--5 { top: 46%; right: calc(50% - 500px); transform: rotate(-11deg); } .cta-tile--6 { top: 70%; right: calc(50% - 440px); transform: rotate(15deg); } /* Hover/focus of the primary CTA (.cta-block.is-aligned, toggled in main.js): tiles settle into a vertical stack of full-width "section" bars inside each mockup — a real page is sections stacked top to bottom, not icons in a row, so both the desktop and mobile mockups use the same stacking direction (see .cta-frame below). Bars resize via real width/height (not transform:scale) so border-radius stays a clean, non-distorted circle and the icon — centered via top/left 50% against the ACTUAL box size — never needs a counter-scale hack to stay undistorted. */ .cta-block.is-aligned .cta-tile--1 { top: calc(50% - 43px); left: calc(50% - 555px); width: 160px; height: 34px; transform: rotate(0deg); } .cta-block.is-aligned .cta-tile--2 { top: calc(50% + 1px); left: calc(50% - 555px); width: 160px; height: 34px; transform: rotate(0deg); } .cta-block.is-aligned .cta-tile--3 { top: calc(50% + 45px); left: calc(50% - 555px); width: 160px; height: 34px; transform: rotate(0deg); } .cta-block.is-aligned .cta-tile--4 { top: calc(50% - 39px); right: calc(50% - 455px); width: 70px; height: 28px; transform: rotate(0deg); } .cta-block.is-aligned .cta-tile--5 { top: calc(50% - 3px); right: calc(50% - 455px); width: 70px; height: 28px; transform: rotate(0deg); } .cta-block.is-aligned .cta-tile--6 { top: calc(50% + 33px); right: calc(50% - 455px); width: 70px; height: 28px; transform: rotate(0deg); } /* Assembled browser mockups — purely decorative scaffolding that fades in behind the tiles once they cluster. Both are tall/portrait ("a real webpage is scrolled sections stacked top to bottom, not a wide toolbar") sized around the same stacked-bar content, just at different scales: desktop = a browser window, mobile = a phone. Pushed well clear of .cta-content's 640px max-width (±320px) so the headline/subhead never overlaps them. */ .cta-frame { position: absolute; z-index: 1; top: 50%; border: 1px solid var(--border-2); border-radius: 14px; background: var(--panel-2); opacity: 0; transform: translateY(-50%) scale(0.92); transition: opacity 0.45s ease, transform 0.45s ease; } .cta-block.is-aligned .cta-frame { opacity: 1; transform: translateY(-50%) scale(1); } .cta-frame--desktop { left: calc(50% - 575px); width: 200px; height: 222px; } .cta-frame--mobile { right: calc(50% - 465px); width: 90px; height: 184px; border-radius: 20px; } .cta-frame-bar { position: absolute; top: 0; left: 0; right: 0; height: 22px; display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 0 10px; border-bottom: 1px solid var(--border-2); border-radius: 14px 14px 0 0; } /* Brand-colored dots instead of the macOS red/yellow/green convention */ .cta-frame-dot { width: 8px; height: 8px; border-radius: 50%; } .cta-frame-dot--1 { background: #03d8f3; } .cta-frame-dot--2 { background: #5f5de5; } .cta-frame-dot--3 { background: #ff007f; } .cta-frame-notch { position: absolute; top: 9px; left: 50%; width: 28px; height: 4px; border-radius: 2px; background: var(--border-2); transform: translateX(-50%); } /* The frame's own permanent mini nav bar, right below the chrome/notch — fades in with the rest of the frame (.cta-frame's own opacity transition), not tied to any individual tile. */ .cta-frame-nav { position: absolute; top: 30px; left: 10px; right: 10px; height: 26px; display: flex; align-items: center; justify-content: space-between; } .cta-frame-nav--mobile { top: 21px; left: 8px; right: 8px; height: 20px; } .cta-frame-cta { position: absolute; bottom: 10px; left: 50%; width: 60px; height: 10px; border-radius: 6px; background: var(--primary); opacity: 0.4; transform: translateX(-50%); } .cta-frame--mobile .cta-frame-cta { width: 46px; bottom: 11px; } /* ========================================================================== Footer ========================================================================== */ .site-footer { border-top: 1px solid var(--border); padding: 70px 0 30px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 48px; margin-bottom: 50px; } .footer-grid .logo img { height: 38px; width: auto; margin-bottom: 16px; } .footer-grid p { font-size: 15px; } .footer-grid h4 { font-family: var(--body-font); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; } .footer-grid ul { list-style: none; padding: 0; margin: 0; } .footer-grid li { margin-bottom: 8px; } .footer-grid a { color: var(--text); font-size: 15px; } .footer-grid a:hover { color: var(--primary-hover); } .footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; font-size: 13px; color: var(--text); text-align: center; } .footer-bottom a { color: var(--text); text-decoration: underline; } .footer-bottom a:hover { color: var(--primary-hover); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 959px) { section { padding: 60px 0; } .benefits-grid, .pricing-grid, .why-grid { grid-template-columns: 1fr; gap: 36px; } .benefits-intro { position: static; } .benefit-cards { grid-template-columns: repeat(2, 1fr); } .steps-grid { grid-template-columns: 1fr; } .steps-grid .step:nth-child(2), .steps-grid .step:nth-child(3) { margin-top: 0; } .why-headline { position: static; } .process-banner { text-align: center; padding: 70px 0 60px; } .process-banner-text { max-width: none; margin: 0 auto; } .process-steps { margin-top: 0; } .blog-grid { grid-template-columns: repeat(2, 1fr); } .docs-grid { grid-template-columns: 1fr; } .doc-layout { grid-template-columns: 1fr; max-width: 720px; } .docs-sidebar { position: static; } .picker-grid { grid-template-columns: repeat(2, 1fr); } .hosting-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } /* Tile/frame offsets (up to ~595px from center) assume a wide desktop canvas — below this, just show the headline + buttons rather than clipping the assembled mockups against the viewport edge. */ @media (max-width: 1279px) { .cta-tiles { display: none; } .cta-block { padding: 70px 0; } } /* Collapse the nav pill into a dropdown once it gets tight */ @media (max-width: 900px) { .site-header .container { height: 76px; } .nav-toggle { display: block; order: 3; } .main-nav { display: none; position: absolute; top: 76px; left: 0; right: 0; transform: none; flex-direction: column; align-items: stretch; margin: 0; background: var(--bg); border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 16px 24px 24px; gap: 6px; } .main-nav.open { display: flex; } .main-nav a { padding: 12px 10px; } .header-actions { margin-left: auto; } } @media (max-width: 767px) { .promo-banner p { font-size: 12px; line-height: 1.4; width: 100%; } .promo-banner-inner { padding: 10px 40px 10px 12px; gap: 8px; position: relative; } .promo-dismiss { position: absolute; right: 10px; top: 12px; } body { font-size: 16px; } .apply-link span { display: none; } .apply-link { padding: 10px; } .benefit-cards { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .contact-cards { grid-template-columns: 1fr; } .blog-grid { grid-template-columns: 1fr; } .picker-grid { grid-template-columns: 1fr; } .carousel > * { flex: 0 0 86%; } .about-jef { flex-direction: column; text-align: center; } .footer-grid { grid-template-columns: 1fr; gap: 32px; } .article-section { margin-top: -80px; padding-top: 120px; } }