index.styl

$font-color = #24292e

html
	box-sizing border-box
	height 100%

body
	margin 0 auto
	padding 3em 1em
	min-height 100%
	box-sizing border-box
	max-width 46em

	font-family -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
	font-size 16px
	line-height 1.3
	color $font-color

	font-weight normal
	font-style normal

	-webkit-font-smoothing antialiased
	text-rendering optimizeLegibility

*
::before
::after
	box-sizing inherit
	margin 0

* + *
	margin-top .8em

li
	margin-top 0

header
main
footer
article
section
iframe
input
img
	display block
	max-width 100%

img
	border none

// prose
p
textarea
code
li
	line-height 1.5
	word-wrap break-word
	hyphens auto

a
	color #0366d6
	text-decoration none

	&:hover
		text-decoration underline

code
	font-family 'Courier New', monospace
	white-space pre-wrap
	padding 0 .1em
	color black

code.secondary
	font-size .85em
	line-height 1.3
* +
	& h1
	& h2
	& h3
	& h4
	& h5
	& h6
		margin-top 1.5em

h1
h2
h3
h4
h5
h6
	line-height 1

h1.logo
	font-family 'Courier New', monospace
	text-transform uppercase
	font-weight normal
	color $font-color
	font-size 2.3em

	padding .5em 0

	position relative

	&::before
		display block
		position absolute
		top 0
		bottom 0.05em
		left 0.1em
		width 1.48em
		height 1.48em
		content ''
		margin auto
		border 2px solid $font-color
		z-index -2

	&::after
		display block
		position absolute
		bottom 0.05em
		top 0
		left 0
		width 100%
		height 1em
		content ''
		margin auto
		background #fff
		z-index -1

h2
	font-weight 300
	font-size 2em
	line-height 1.15

h3
	font-weight 400
	font-size 1.25em
	line-height 1.15

section.lookup
	margin 4em 0

	form
		margin-bottom 4em

		input.iin
			font-family 'Courier New', monospace
			font-size 1.6em
			padding .3em .5em
			outline none
			border-style solid
			border-width 0 0 1px 0
			border-color #eee
			border-radius 0
			background white

			transition border-color .2s

			margin-left auto
			margin-right auto
			text-align center

			appearance none

			&:focus
				border-color #0078ff

		p
			margin-top .2em
			font-weight 300
			font-size .75em
			color rgba(0, 0, 0, .4)
			text-align center

	ul.result
	ul.result ul
		list-style-type none
		padding 0

		li
			margin 0
			padding .75em 0 .75em 0

	ul.result
		margin-top 2em

		columns auto 9em
		column-gap 5em

		> *
			break-inside avoid

		h2
			font-size .75em
			text-transform uppercase
			font-weight 300
			color rgba(0, 0, 0, .4)
			width 100%

		h3
			font-weight 300
			text-transform uppercase
			font-size .6em
			color rgba(0, 0, 0, .4)

		p
		ol
			margin-top .1em
			color $font-color

		ul
			display flex
			flex-flow row wrap
			justify-content space-between

			margin 0

			li
				padding .5em 0 .1em 0

		li.bank p.name
		li.country p.name
			white-space pre
			overflow hidden
			text-overflow ellipsis

		li.bank p.url
		li.bank p.phone
		li.country p.geo
			font-size .75em


		p.geo
			color rgba(0, 0, 0, .4)

			span
				color $font-color
				margin 0 .1em

		li.number
			max-width 10em

		p.any::after
		span.any::after
			content '?'
			color rgba(0, 0, 0, .2)

		ol
			padding 0

			li
				display inline
				margin 0

				&::after
				&:not(.selected)
					color rgba(0, 0, 0, .2)
					font-weight 300

				&::after
					content ' / '

				&:last-child::after
					content ''