/* * base.css: shared foundation of the Pricing page and the home page. * Load order on Pricing: fonts.css, base.css, top.css, compare.css, bottom.css. * Load order on the home page: fonts.css, base.css, top.css, bottom.css, home-base.css, * home-top.css, home-feat-a.css, home-feat-b.css, home-bottom.css. * * 1. Reset and page background (original Framer values) * 2. Page root and main wrapper * 3. Shared tokens (:root custom properties) * 4. Breakpoint contract * 5. Appear presets (data-appear) * 6. Button reset (.u-btn) * 7. Focus ring * 8. Anchor targets * * Reserved names: the class "js" on , the attributes data-appear, data-appear-in and * data-appear-done, the classes .page-root .page-main .u-*, keyframes biz-*, and every custom * property below. */ /* 1. Reset and page background ------------------------------------------- */ html, body { margin: 0; padding: 0; box-sizing: border-box; } :root { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } * { box-sizing: border-box; -webkit-font-smoothing: inherit; } h1, h2, h3, h4, h5, h6, p, figure { margin: 0; } body, input, textarea, select, button { font-size: 12px; font-family: sans-serif; } html body { background: rgb(255, 255, 255); } /* The hidden attribute always wins over section display rules. */ [hidden] { display: none !important; } /* 2. Page root and main wrapper -------------------------------------------- * .page-root is the original root box: a centered flex column that clips overflow, * so the page never scrolls sideways. .page-main is our
landmark (not in the original). * It repeats the root's flex rules, so the sections inside it lay out exactly as root children. * Section roots are flex items: give them width 100% (the form root is 1200px on desktop). */ .page-root { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; align-content: center; justify-content: flex-start; gap: 0; padding: 0; position: relative; overflow: hidden; background-color: #fff; width: auto; min-height: 100vh; height: min-content; } .page-main { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; align-content: center; justify-content: flex-start; gap: 0; flex: none; width: 100%; margin: 0; padding: 0; } /* 3. Shared tokens ----------------------------------------------------------- * Only values used by two or more sections. Section-only values stay in the section file. */ :root { /* Layout */ --nav-h: 64px; /* closed fixed nav height; also the anchor offset (section 8) */ /* Colors */ --c-brand: #62d377; /* rgb(98, 211, 119) brand green (top, bottom) */ --c-text: #333333; /* body text (top, compare, bottom) */ --c-gray-999: #999999; /* rgb(153, 153, 153) icons and muted marks (top, compare, bottom) */ --c-surface-soft: #fafafa; /* compare group rows, FAQ background */ /* Link presets (nav in top, footer and terms in bottom) */ --c-link-gray: #5e5e5e; /* preset aac0o0 */ --c-link-gray-current: #111111; /* aac0o0 current page, with underline */ --c-link-gray-hover: #bfbfbf; /* aac0o0 hover, underline removed at once */ --c-link-white: #ffffff; /* preset 1qf738v */ --c-link-white-current: #75acff; /* 1qf738v current page (footer only) */ --c-link-white-hover: #858585; /* 1qf738v hover, no transition */ /* Font stacks: pick the weight by family, keep font-weight 400 (strong 700) */ --font-bold: "Pretendard Bold", "Pretendard Bold Placeholder", sans-serif; --font-semibold: "Pretendard SemiBold", "Pretendard SemiBold Placeholder", sans-serif; --font-medium: "Pretendard Medium", "Pretendard Medium Placeholder", sans-serif; --font-regular: "Pretendard Regular", "Pretendard Regular Placeholder", sans-serif; /* Body text preset mpu97g: font var(--font-medium), color var(--c-text) */ --text-body-size: 13px; --text-body-line: 1.6em; /* keep em (20.8px); px rounding changes the table height */ --text-body-spacing: -0.02em; /* -0.26px at 13px */ /* Motion */ --ease-framer: cubic-bezier(0.44, 0, 0.56, 1); /* Framer default curve */ --dur-link: 0.3s; /* aac0o0 color transition */ /* Spring S (stiffness 100, damping 30, mass 1): hero appear. Framer's own linear(), 145 points. */ --spring-s: linear(0, 0.004591730458824799, 0.016689896640171894, 0.03423161059482894, 0.05564423077207664, 0.07973129403668608, 0.10558489868207217, 0.1325184081437891, 0.1600147657507175, 0.18768680227213339, 0.21524675651756625, 0.24248287343414363, 0.2692414390517369, 0.29541299184376413, 0.32092174217825414, 0.34571745594827163, 0.36976923087968006, 0.39306072646915496, 0.415586510265079, 0.43734926138168, 0.45835763219731107, 0.4786246153295668, 0.49816629842843385, 0.5170009165619768, 0.5351481328908835, 0.5526284944011978, 0.5694630218123871, 0.5856729022638252, 0.6012792606700068, 0.6163029912329214, 0.630764634900411, 0.6446842918627896, 0.6580815607175277, 0.6709754978809446, 0.683384592322927, 0.6953267518505163, 0.706819298049231, 0.7178789676690885, 0.7285219187629146, 0.7387637402842391, 0.7486194641588625, 0.7581035790795926, 0.7672300454542671, 0.776012311075672, 0.7844633271881223, 0.7925955647068063, 0.8004210304082477, 0.8079512829578468, 0.8151974486768409, 0.8221702369787569, 0.8288799554265597, 0.8353365243777285, 0.8415494911966498, 0.8475280440228639, 0.8532810250905825, 0.8588169436000029, 0.8641439881447412, 0.8692700387024413, 0.874202678197618, 0.8789492036471507, 0.8835166368997956, 0.8879117349816539, 0.8921410000598787, 0.8962106890370357, 0.9001268227885185, 0.9038951950553202, 0.9075213810042548, 0.9110107454674895, 0.9143684508729496, 0.9175994648768561, 0.9207085677093151, 0.9237003592435492, 0.9265792657990097, 0.9293495466882696, 0.9320153005172549, 0.9345804712480371, 0.9370488540330818, 0.9394241008295251, 0.9417097258017421, 0.9439091105201652, 0.9460255089640163, 0.9480620523353361, 0.9500217536914167, 0.9519075124024782, 0.9537221184411764, 0.9554682565102814, 0.9571485100146263, 0.9587653648832003, 0.9603212132470378, 0.9618183569783406, 0.9632590110960707, 0.964645307043046, 0.9659792958393919, 0.9672629511170088, 0.9684981720395469, 0.9696867861122073, 0.9708305518855244, 0.9719311615571341, 0.9729902434753709, 0.9740093645484018, 0.9749900325624611, 0.9759336984126137, 0.9768417582493477, 0.9777155555441756, 0.9785563830772938, 0.9793654848502468, 0.9801440579264232, 0.9808932542021069, 0.981614182110703, 0.9823079082626619, 0.9829754590235253, 0.9836178220324312, 0.9842359476633219, 0.9848307504310195, 0.9854031103442472, 0.9859538742076, 0.986483856874388, 0.9869938424522108, 0.9874845854630405, 0.9879568119595353, 0.988411220599232, 0.9888484836782072, 0.9892692481257371, 0.9896741364614274, 0.9900637477162294, 0.9904386583187034, 0.9907994229478432, 0.9911465753537222, 0.9914806291471746, 0.9918020785596808, 0.9921113991745816, 0.9924090486307016, 0.9926954672994246, 0.9929710789362223, 0.9932362913075977, 0.9934914967943755, 0.9937370729722279, 0.993973383170296, 0.9942007770087351, 0.9944195909159752, 0.9946301486264675, 0.9948327616596465, 1, 1, 1); --spring-s-ms: 1450ms; /* Spring H (400, 80, 1): scroll appear. Framer's own linear(), 105 points. */ --spring-h: linear(0, 0.0157979100706781, 0.05027976840287707, 0.09213124230250935, 0.13610197925078338, 0.1797918401036802, 0.22213846710869067, 0.26270561693632777, 0.3013483835007734, 0.3380558035924047, 0.3728769428691, 0.40588626514840576, 0.4371674830097687, 0.46680609916769344, 0.4948860308698312, 0.5214881489638412, 0.5466897114161609, 0.5705642114467147, 0.5931814147687222, 0.614607480109624, 0.6349051135059707, 0.6541337333561712, 0.6723496356686527, 0.6896061547903232, 0.7059538176389382, 0.7214404907392455, 0.736111519951304, 0.7500098630450014, 0.7631762153888255, 0.7756491290644213, 0.7874651257290842, 0.7986588035441504, 0.8092629384764778, 0.819308580266869, 0.8288251433451209, 0.8378404929573114, 0.8463810267572038, 0.8544717521005505, 0.8621363592685489, 0.86939729083483, 0.8762758073790673, 0.8827920497396267, 0.8889650979875239, 0.8948130272943756, 0.9003529608579239, 0.905601120040111, 0.9105728718645009, 0.9152827740121373, 0.9197446174475823, 0.9239714667999437, 0.9279756986171399, 0.9317690376054071, 0.9353625909601642, 0.9387668808887544, 0.9419918754202972, 0.9450470175928645, 0.9479412531034384, 0.9506830565016188, 0.9532804560037693, 0.9557410570002706, 0.9580720643247005, 0.9602803033501544, 0.9623722399744765, 0.9643539995529172, 0.9662313848336566, 0.9680098929487075, 0.9696947315099518, 0.9712908338574378, 0.9728028735045885, 0.9742352778226184, 0.975592241004223, 0.9768777363445076, 0.978095527875107, 0.979249181385567, 0.9803420748642581, 0.9813774083893895, 0.9823582134990927, 0.983287362068002, 0.984167574716331, 0.9850014287760618, 0.9857913658375771, 0.9865396988988288, 0.987248619137978, 0.9879202023293377, 0.9885564149214033, 0.9891591197947689, 0.989730081716788, 0.9902709725089519, 0.9907833759421145, 0.9912687923738982, 0.991728643141859, 0.9921642747252752, 0.9925769626877446, 0.9929679154121349, 0.9933382776388249, 0.9936891338175934, 0.9940215112829742, 0.9943363832623726, 0.9946346717257517, 0.9949172500852331, 1, 1, 1, 1, 1); --spring-h-ms: 1050ms; /* Spring C (400, 40, 1, critically damped): nav menu and FAQ open and close. x(t) = 1 - (1 + 20t) e^(-20t), sampled every 5ms over 550ms, last point 1 (max error 0.0012). */ --spring-c: linear(0, 0.004679, 0.017523, 0.036936, 0.061552, 0.090204, 0.121901, 0.155805, 0.191208, 0.227518, 0.264241, 0.300971, 0.337373, 0.373177, 0.408167, 0.442175, 0.475069, 0.506754, 0.537163, 0.566251, 0.593994, 0.620385, 0.64543, 0.669146, 0.691559, 0.712703, 0.732615, 0.75134, 0.768922, 0.785409, 0.800852, 0.815298, 0.828799, 0.841402, 0.853158, 0.864112, 0.874311, 0.883799, 0.89262, 0.900815, 0.908422, 0.915479, 0.922023, 0.928087, 0.933702, 0.938901, 0.94371, 0.948157, 0.952267, 0.956065, 0.959572, 0.96281, 0.965797, 0.968553, 0.971094, 0.973436, 0.975594, 0.977582, 0.979413, 0.981098, 0.982649, 0.984076, 0.985388, 0.986595, 0.987704, 0.988724, 0.989661, 0.990522, 0.991313, 0.992038, 0.992705, 0.993317, 0.993878, 0.994393, 0.994865, 0.995299, 0.995696, 0.99606, 0.996394, 0.9967, 0.996981, 0.997238, 0.997473, 0.997689, 0.997886, 0.998067, 0.998233, 0.998384, 0.998523, 0.99865, 0.998766, 0.998872, 0.998969, 0.999058, 0.99914, 0.999214, 0.999282, 0.999344, 0.999401, 0.999453, 0.999501, 0.999544, 0.999584, 0.99962, 0.999653, 0.999683, 0.999711, 0.999736, 0.999759, 0.99978, 1); --spring-c-ms: 550ms; /* Spring Z (400, 30, 1, underdamped, peaks at 1.028): the replaying fade (fade-repeat). Same sampling as Framer's own linear() for S and H (S and H regenerate to within 1e-15), 50 points. */ --spring-z: linear(0, 0.01878886733484353, 0.06770514404456474, 0.13705517903261788, 0.21897098531728576, 0.30721011695687506, 0.3969501997478029, 0.48458687183837734, 0.5675414594574754, 0.6440826969117859, 0.7131651615291679, 0.7742857923344403, 0.8273588537266017, 0.8726089506782886, 0.9104811603282676, 0.9415669794572598, 0.9665445648073008, 0.9861316338112894, 1.001049371119111, 1.011995729134324, 1.0196265999368008, 1.0245434560556699, 1.0272861961240656, 1.028330078665469, 1.0280857755858661, 1.0269017207816915, 1.0250680646615518, 1.0228216697070969, 1.0203516939366681, 1.0178054076092113, 1.0152939736924682, 1.0128979949767956, 1.0106726910401707, 1.008652617577381, 1.0068558800392742, 1.005287824280371, 1.0039442101746305, 1.0028138910734432, 1.0018810336159956, 1.0011269197358985, 1.0005313766116795, 1.000073881547396, 0.9997343880016801, 0.9994939167656267, 0.9993349530837035, 1, 1, 1, 1, 1); --spring-z-ms: 500ms; } /* 4. Breakpoint contract ------------------------------------------------------- * The same three strings as the original. Use them verbatim and nothing else: * desktop base rules (no query) = (min-width: 1200px) * tablet @media (min-width: 810px) and (max-width: 1199.98px) * mobile @media (max-width: 809.98px) * Write desktop values as the base rule, then override in the tablet block and the mobile block. * Sub-pixel widths between 809.98 and 810 or 1199.98 and 1200 (page zoom) then get the desktop * rules, as in the original. JS has the same strings in window.bizBase.MQ. */ /* 5. Appear presets ------------------------------------------------------------ * Put data-appear on the box that moves in the original (the appear target), not on a section root. * hero page open, first frame. Spring S 1450ms. opacity 0.001 -> 1 and y +50px -> 0. CSS only. * hero-100 page open, first frame. Spring S 1450ms. opacity 0.001 -> 1 and y +100px -> 0. CSS only. * fade scroll entry. Spring H 1050ms after a 100ms delay. opacity 0 -> 1. * fade-s scroll entry. Spring S 1450ms, no delay. opacity 0 -> 1. * rise-10 scroll entry. Spring H 1050ms after 100ms. opacity 0 -> 1 and y +10px -> 0. * rise-20 scroll entry. Spring H 1050ms after 100ms. opacity 0 -> 1 and y +20px -> 0. * rise-30 scroll entry. Spring H 1050ms after 100ms. opacity 0 -> 1 and y +30px -> 0. * rise-40 scroll entry. Spring H 1050ms after 100ms. opacity 0 -> 1 and y +40px -> 0. * rise-50 scroll entry. Spring H 1050ms after 150ms. opacity 0 -> 1 and y +50px -> 0. * fade-repeat every scroll entry. Spring Z 500ms both ways: opacity 0 -> 1 when half visible, * back to 0 when less than half is visible. transform none (the original box has none). * Every preset whose name starts with "hero" runs from the first frame. All others start on scroll. * base.js starts a scroll preset once, when visible height / min(box height, viewport height) >= 0.5, * measured at the shifted start position. It then sets data-appear-in, and data-appear-done at the end. * A preset whose name ends with "-repeat" stays watched: base.js removes data-appear-in again * when less than half is visible, and the CSS transition plays the way back. * End state = the original end state: opacity 1, transform perspective(1200px), will-change transform. * Without JS (no html.js) and under prefers-reduced-motion: reduce, every preset is at its end state. * Do not set opacity, transform, will-change or animation on a data-appear box. Wrap it instead. * A data-appear box is a containing block for position: fixed children (transform), as in the original. */ [data-appear] { opacity: 1; transform: perspective(1200px); will-change: transform; } [data-appear="fade-repeat"] { transform: none; } @keyframes biz-appear-hero { from { opacity: 0.001; transform: perspective(1200px) translateY(50px); } to { opacity: 1; transform: perspective(1200px) translateY(0px); } } @keyframes biz-appear-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes biz-appear-rise-20 { from { opacity: 0; transform: perspective(1200px) translateY(20px); } to { opacity: 1; transform: perspective(1200px) translateY(0px); } } @keyframes biz-appear-rise-50 { from { opacity: 0; transform: perspective(1200px) translateY(50px); } to { opacity: 1; transform: perspective(1200px) translateY(0px); } } @keyframes biz-appear-hero-100 { from { opacity: 0.001; transform: perspective(1200px) translateY(100px); } to { opacity: 1; transform: perspective(1200px) translateY(0px); } } @keyframes biz-appear-rise-10 { from { opacity: 0; transform: perspective(1200px) translateY(10px); } to { opacity: 1; transform: perspective(1200px) translateY(0px); } } @keyframes biz-appear-rise-30 { from { opacity: 0; transform: perspective(1200px) translateY(30px); } to { opacity: 1; transform: perspective(1200px) translateY(0px); } } @keyframes biz-appear-rise-40 { from { opacity: 0; transform: perspective(1200px) translateY(40px); } to { opacity: 1; transform: perspective(1200px) translateY(0px); } } @media (prefers-reduced-motion: no-preference) { [data-appear="hero"]:not([data-appear-done]) { animation: biz-appear-hero var(--spring-s-ms) var(--spring-s) both; } html.js [data-appear="fade"]:not([data-appear-in]) { opacity: 0; } html.js [data-appear="rise-20"]:not([data-appear-in]) { opacity: 0; transform: perspective(1200px) translateY(20px); } html.js [data-appear="rise-50"]:not([data-appear-in]) { opacity: 0; transform: perspective(1200px) translateY(50px); } html.js [data-appear="fade"][data-appear-in]:not([data-appear-done]) { animation: biz-appear-fade var(--spring-h-ms) var(--spring-h) 100ms both; } html.js [data-appear="rise-20"][data-appear-in]:not([data-appear-done]) { animation: biz-appear-rise-20 var(--spring-h-ms) var(--spring-h) 100ms both; } html.js [data-appear="rise-50"][data-appear-in]:not([data-appear-done]) { animation: biz-appear-rise-50 var(--spring-h-ms) var(--spring-h) 150ms both; } [data-appear="hero-100"]:not([data-appear-done]) { animation: biz-appear-hero-100 var(--spring-s-ms) var(--spring-s) both; } html.js [data-appear="fade-s"]:not([data-appear-in]) { opacity: 0; } html.js [data-appear="rise-10"]:not([data-appear-in]) { opacity: 0; transform: perspective(1200px) translateY(10px); } html.js [data-appear="rise-30"]:not([data-appear-in]) { opacity: 0; transform: perspective(1200px) translateY(30px); } html.js [data-appear="rise-40"]:not([data-appear-in]) { opacity: 0; transform: perspective(1200px) translateY(40px); } html.js [data-appear="fade-repeat"]:not([data-appear-in]) { opacity: 0; } html.js [data-appear="fade-s"][data-appear-in]:not([data-appear-done]) { animation: biz-appear-fade var(--spring-s-ms) var(--spring-s) both; } html.js [data-appear="rise-10"][data-appear-in]:not([data-appear-done]) { animation: biz-appear-rise-10 var(--spring-h-ms) var(--spring-h) 100ms both; } html.js [data-appear="rise-30"][data-appear-in]:not([data-appear-done]) { animation: biz-appear-rise-30 var(--spring-h-ms) var(--spring-h) 100ms both; } html.js [data-appear="rise-40"][data-appear-in]:not([data-appear-done]) { animation: biz-appear-rise-40 var(--spring-h-ms) var(--spring-h) 100ms both; } html.js [data-appear="fade-repeat"] { transition: opacity var(--spring-z-ms) var(--spring-z); } } /* data-appear-done (set by base.js on animationend) drops the finished animation. Its last frame * equals the [data-appear] rule above, so nothing moves. Measured: while a finished fill-both * animation stays attached, Chromium rasterizes later content slightly differently from the * original (the footer phone icon differed by 4 pixels at mobile widths, 0 after dropping it). * The original also ends on plain styles (section 5 header), not on a filled animation. */ /* 6. Button reset --------------------------------------------------------------- * Policy h: a clickable div becomes