fbpx

Rio colour test

Rio colour boxes

Elephant Grey

Colour boxes

no. 38 grey
RAL:7035

!defines flex area
.selection-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;}

!define picture area
.has-bg {background-size: cover !important;} 

!defines the colour box appearance
.inset-box {
  width: 12vw;
  height: 12vw;
  max-width: 200px;
  max-height: 200px;
  min-width: 110px;
  min-height: 110px;
  padding: 8px;
  margin: 5px;
  color: #fff;}

!defines the line inside the colour box
.inset-box-inner {
  border: 2px solid #fff;
  width: 100%;
  height: 100%;
  display: flex; 
  flex-direction: column; 
  flex: 1;}

!defines the colour text appearance in the inner box
.inset-box-inner p {
  margin: auto 0 12px 12px;
  font-size: 1vw;
  min-font-size:0.6vw;
  color: #ffffff;
  font-family: Josefin Sans !important, Alata;
  font-weight: 500;
  text-transform: uppercase !important;}

Colour boxes

No. 10 Black
RAL:8022 

.selection-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;}

.colour-box {
  width: 200px;
  height: 200px;
  margin: 5px;
  position: relative;
  color: #fff;
  border: none;
  background-size: cover;}

.colour-box::before {
  content: "";
  position: absolute;
  top: 6%;
  left: 6%;
  border: 2px solid #fff;
  border-radius: 0px;
  width: calc(88%);
  height: calc(88%);
  z-index: 99;}

.colour-box p{
  padding: 17px;
  position: absolute;
  bottom: -16px;
  font-size:1rem;
  /*font-size: clamp(1rem, 20px, 2vw);*/
  line-height: 1;
  color: #ffffff;
  font-family: Josefin Sans;
  font-weight: 500;
  text-transform: uppercase;}  

!defines the RAL text appearance
style = "font-size: 80%;font-weight: 400; letter-spacing: 2px;"

/*square boxes*/
.square-box {
width: 300px;
height: 300px;
background-color: #151515;
border: 1px;
}

/*aura square box*/
.page-id-7436 .square-box {
color:#fbbc00;
}

headline h1

headline h2

headline h3

headline h4

headline h5
headline h6

P Large intro text “class=”product-grey-24” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P standfirst para “class=”p1” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P standfirst b para “class=”p2” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P following para “class=”p3” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P normal paragraph Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P Paragraph grey class=”grey-text” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P footnote Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

headline h2

P Large intro text “class=”product-grey-24” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


.product-grey-24 {
  font-size: 24px;
  line-height: 1.5;
  color: #ededed;
}

 

P1 “class=”p1” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P Paragraph Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


.p1 {font-size: 22px;
  line-height: 1.5;
  color: #29333f;
}

p {font-size: 16px;
  color: black;
}

 

Headline H3 class=”overline”

P standfirst “class=”p2” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P standfirst “class=”p3” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


.p2 {
  font-size: 19px; 
  text-decoration-color: #29333f;
  line-height: 1.5;
}

.p3 {
  font-size: 16px; 
  color: #29333f;
}

 

Headline h4

P Paragraph standfirst class=”p2″ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Headline h5

P Paragraph class=”p3″ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P Paragraph Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Headline h6 (in parent brand colour)

Headline H3 class=”overline”

P standfirst “class=”p2” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P Paragraph class=”grey-text” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P footnote Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


  .grey-text p{
   color: #dedede;
}
  .footnote p{
  font-size: 10px; 
  color: #bababa
}

 

Headline H3 class=”spaced-grey”


.spaced-grey {
  font-family: Josefin Sans, Alata !important;
  text-transform: uppercase !important;
  font-size: 24px;
  line-height: 1.5;
  color:silver;
  text-align: center;
  letter-spacing:2px;
 transition: transform .2s;
  transition-timing-function: ease-in-out;
}
.spaced-grey:hover{
  transform: scale(1.1);

}

headline h1

headline h2

headline h3

headline h4

headline h5
headline h6

P Large intro text “class=”product-grey-24” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P standfirst para “class=”p1” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P standfirst b para “class=”p2” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P following para “class=”p3” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P normal paragraph Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P Paragraph grey class=”grey-text” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P footnote Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

headline h2

P Large intro text “class=”product-grey-24” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


.product-grey-24 {
  font-size: 24px;
  line-height: 1.5;
  color: #ededed;
}

 

P1 “class=”p1” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P Paragraph Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


.p1 {font-size: 22px;
  line-height: 1.5;
  color: #29333f;
}

p {font-size: 16px;
  color: black;
}

 

Headline H3 class=”overline”

P standfirst “class=”p2” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P standfirst “class=”p3” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


.p2 {
  font-size: 19px; 
  text-decoration-color: #29333f;
  line-height: 1.5;
}

.p3 {
  font-size: 16px; 
  color: #29333f;
}

 

Headline h4

P Paragraph standfirst class=”p2″ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Headline h5

P Paragraph class=”p3″ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P Paragraph Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Headline h6 (in parent brand colour)

Headline H3 class=”overline”

P standfirst “class=”p2” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P Paragraph class=”grey-text” Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P footnote Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


  .grey-text p{
   color: #dedede;
}
  .footnote p{
  font-size: 10px; 
  color: #bababa
}

 

Headline H3 class=”spaced-grey”


.spaced-grey {
  font-family: Josefin Sans, Alata !important;
  text-transform: uppercase !important;
  font-size: 24px;
  line-height: 1.5;
  color:silver;
  text-align: center;
  letter-spacing:2px;
 transition: transform .2s;
  transition-timing-function: ease-in-out;
}
.spaced-grey:hover{
  transform: scale(1.1);

}

headline 3 sub head

  • I am bullet-text line one
  • I am bullet-text line two
  • I am bullet-text line three

Header 2

P class p2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Header 3

P class p3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Header 4

P class p3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Header 5

P class p3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Header 6

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


.label-box-m p::first-line {
  color: #29333f;
  font-size: 110%;
}

.label-box-m p {
  color: #5a708a;
  font-size: 15px;
  font-family: Josefin Sans !important;
  font-weight: 400;
  text-transform: uppercase !important;
  text-align: center !important;
  vertical-align: middle;
}

.label-box-m {
  box-sizing: border-box;
  padding: 6px 8px; 
  margin: auto;
  border: 1px solid #29333f;
  background-color: none;

caption/label
second line

caption/label
second line

caption/label
second line