@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');.counter { font-size: 16px; padding: 5px 10px; border-radius: 5px; color: var(--accent); background: var(--accent-bg); border: 2px solid transparent; transition: border-color 0.3s; margin-bottom: 24px; &:hover { border-color: var(--accent-border); } &:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } } .hero { position: relative; .base, .framework, .vite { inset-inline: 0; margin: 0 auto; } .base { width: 170px; position: relative; z-index: 0; } .framework, .vite { position: absolute; } .framework { z-index: 1; top: 34px; height: 28px; transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) scale(1.4); } .vite { z-index: 0; top: 107px; height: 26px; width: auto; transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) scale(0.8); } } #center { display: flex; flex-direction: column; gap: 25px; place-content: center; place-items: center; flex-grow: 1; @media (max-width: 1024px) { padding: 32px 20px 24px; gap: 18px; } } #next-steps { display: flex; border-top: 1px solid var(--border); text-align: left; & > div { flex: 1 1 0; padding: 32px; @media (max-width: 1024px) { padding: 24px 20px; } } .icon { margin-bottom: 16px; width: 22px; height: 22px; } @media (max-width: 1024px) { flex-direction: column; text-align: center; } } #docs { border-right: 1px solid var(--border); @media (max-width: 1024px) { border-right: none; border-bottom: 1px solid var(--border); } } #next-steps ul { list-style: none; padding: 0; display: flex; gap: 8px; margin: 32px 0 0; .logo { height: 18px; } a { color: var(--text-h); font-size: 16px; border-radius: 6px; background: var(--social-bg); display: flex; padding: 6px 12px; align-items: center; gap: 8px; text-decoration: none; transition: box-shadow 0.3s; &:hover { box-shadow: var(--shadow); } .button-icon { height: 18px; width: 18px; } } @media (max-width: 1024px) { margin-top: 20px; flex-wrap: wrap; justify-content: center; li { flex: 1 1 calc(50% - 8px); } a { width: 100%; justify-content: center; box-sizing: border-box; } } } #spacer { height: 88px; border-top: 1px solid var(--border); @media (max-width: 1024px) { height: 48px; } } .ticks { position: relative; width: 100%; &::before, &::after { content: ''; position: absolute; top: -4.5px; border: 5px solid transparent; } &::before { left: 0; border-left-color: var(--border); } &::after { right: 0; border-right-color: var(--border); } } /* CSS variables. */ :root { --PhoneInput-color--focus: #03b2cb; --PhoneInputInternationalIconPhone-opacity: 0.8; --PhoneInputInternationalIconGlobe-opacity: 0.65; --PhoneInputCountrySelect-marginRight: 0.35em; --PhoneInputCountrySelectArrow-width: 0.3em; --PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight); --PhoneInputCountrySelectArrow-borderWidth: 1px; --PhoneInputCountrySelectArrow-opacity: 0.45; --PhoneInputCountrySelectArrow-color: currentColor; --PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus); --PhoneInputCountrySelectArrow-transform: rotate(45deg); --PhoneInputCountryFlag-aspectRatio: 1.5; --PhoneInputCountryFlag-height: 1em; --PhoneInputCountryFlag-borderWidth: 1px; --PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5); --PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus); --PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1); } .PhoneInput { /* This is done to stretch the contents of this component. */ display: flex; align-items: center; } .PhoneInputInput { /* The phone number input stretches to fill all empty space */ flex: 1; /* The phone number input should shrink to make room for the extension input */ min-width: 0; } .PhoneInputCountryIcon { width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio)); height: var(--PhoneInputCountryFlag-height); } .PhoneInputCountryIcon--square { width: var(--PhoneInputCountryFlag-height); } .PhoneInputCountryIcon--border { /* Removed `background-color` because when an `` was still loading it would show a dark gray rectangle. */ /* For some reason the `` is not stretched to 100% width and height and sometime there can be seen white pixels of the background at top and bottom. */ background-color: var(--PhoneInputCountryFlag-backgroundColor--loading); /* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */ /* For some reason the `` is not stretched to 100% width and height and sometime there can be seen white pixels of the background at top and bottom, so an additional "inset" border is added. */ box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor), inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor); } .PhoneInputCountryIconImg { /* Fixes weird vertical space above the flag icon. */ /* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */ display: block; /* 3rd party flag icons won't stretch if they have `width` and `height`. Also, if an icon's aspect ratio was different, it wouldn't fit too. */ width: 100%; height: 100%; } .PhoneInputInternationalIconPhone { opacity: var(--PhoneInputInternationalIconPhone-opacity); } .PhoneInputInternationalIconGlobe { opacity: var(--PhoneInputInternationalIconGlobe-opacity); } /* Styling native country `