:root {
--primary: #db7e17;
--secondary: #fff;
--textcolor: #000;
--textcolor-secondary: #414141; }
/*
Media Query mixin
See https://github.com/sass-mq/sass-mq/ for original full version.
@example scss
.element {
@include mq($from: mobile) {
color: red;
}
@include mq($to: tablet) {
color: blue;
}
@include mq(mobile, tablet) {
color: green;
}
@include mq($from: tablet, $and: '(orientation: landscape)') {
color: teal;
}
@include mq(em(950px)) {
color: hotpink;
}
@include mq(em(950px), $media-feature: height) {
color: hotpink;
}
@include mq(tablet, $media-type: screen) {
color: hotpink;
}
// Advanced use:
$custom-breakpoints: (L: 900px, XL: 1200px);
@include mq(L, $bp: $custom-breakpoints) {
color: hotpink;
}
}
*/
/*
Margin / Padding Quick Resets
example: top & bottom margin set to $spacing-unit
.element {
@include push--ends;
}
example: left & right padding set to $spacing-unit--small
.element {
@include soft--sides($spacing-unit--small);
}
*/
/*
Helper mixins
*/
/*
Form input placeholder text
example:
input,
textarea {
@include input-placeholder {
color: $grey;
}
}
*/
/*
Retina images
example:
.element {
@include retina {
background-image: url(../img/background@2x.png);
}
}
*/
/*
Content margins
fore removing first/last child margins
example: default
.element {
@include content-margins;
}
output:
.element > *:first-child {
margin-top: 0;
}
.element > *:last-child {
margin-bottom: 0;
}
example: empty selector
.element {
@include content-margins('false');
}
output:
.element:first-child {
margin-top: 0;
}
.element:last-child {
margin-bottom: 0;
}
*/
/*
CSS Triangle
used for creating CSS only triangles
example:
.element {
&::before {
@include css-triangle(blue, down);
}
}
*/
/*
Hide text
example:
.element {
@include hide-text;
}
*/
/*
Responsive ratio
Used for creating scalable elements that maintain the same ratio
example:
.element {
@include responsive-ratio(400, 300);
}
*/
/*
Icon
For using fontastic icons in pseudo elements
*/
/*
Colours
background, colour, etc. match up with colour map in _variables.scss
modify to suit per project
*/
/*
Fluid Property
http://www.adrenalinmedia.com.au/the-agency/insights/this-changes-everything-css-fluid-properties.aspx
HTML:
Text to replace
example:
h1 {
@include fp(font-size, 50, 100); // 50px at 320, 100px at 1920;
}
output:
h1 {
font-size: calc(3.125vw + 40px); //This is the magic!
}
@media (max-width:320px){ //Clips the start to the min value
font-size:50px;
}
@media (min-width:1920px){ //Clips the end to the max value
font-size:100px;
}
*/
/*
Misc
*/
/*
Font face
example:
@include font-face('Clarendon', 'clarendon-webfont');
@include font-face('Clarendon', 'clarendon-webfont', $w--bold, italic);
*/
/*
REMs
*/
/*
EMs calculator
*/
/*
SVG inliner
*/
/*
Media Query mixin
See https://github.com/sass-mq/sass-mq/ for original full version.
@example scss
.element {
@include mq($from: mobile) {
color: red;
}
@include mq($to: tablet) {
color: blue;
}
@include mq(mobile, tablet) {
color: green;
}
@include mq($from: tablet, $and: '(orientation: landscape)') {
color: teal;
}
@include mq(em(950px)) {
color: hotpink;
}
@include mq(em(950px), $media-feature: height) {
color: hotpink;
}
@include mq(tablet, $media-type: screen) {
color: hotpink;
}
// Advanced use:
$custom-breakpoints: (L: 900px, XL: 1200px);
@include mq(L, $bp: $custom-breakpoints) {
color: hotpink;
}
}
*/
/*
Margin / Padding Quick Resets
example: top & bottom margin set to $spacing-unit
.element {
@include push--ends;
}
example: left & right padding set to $spacing-unit--small
.element {
@include soft--sides($spacing-unit--small);
}
*/
/*
Helper mixins
*/
/*
Form input placeholder text
example:
input,
textarea {
@include input-placeholder {
color: $grey;
}
}
*/
/*
Retina images
example:
.element {
@include retina {
background-image: url(../img/background@2x.png);
}
}
*/
/*
Content margins
fore removing first/last child margins
example: default
.element {
@include content-margins;
}
output:
.element > *:first-child {
margin-top: 0;
}
.element > *:last-child {
margin-bottom: 0;
}
example: empty selector
.element {
@include content-margins('false');
}
output:
.element:first-child {
margin-top: 0;
}
.element:last-child {
margin-bottom: 0;
}
*/
/*
CSS Triangle
used for creating CSS only triangles
example:
.element {
&::before {
@include css-triangle(blue, down);
}
}
*/
/*
Hide text
example:
.element {
@include hide-text;
}
*/
/*
Responsive ratio
Used for creating scalable elements that maintain the same ratio
example:
.element {
@include responsive-ratio(400, 300);
}
*/
/*
Icon
For using fontastic icons in pseudo elements
*/
/*
Colours
background, colour, etc. match up with colour map in _variables.scss
modify to suit per project
*/
/*
Fluid Property
http://www.adrenalinmedia.com.au/the-agency/insights/this-changes-everything-css-fluid-properties.aspx
HTML:
Text to replace
example:
h1 {
@include fp(font-size, 50, 100); // 50px at 320, 100px at 1920;
}
output:
h1 {
font-size: calc(3.125vw + 40px); //This is the magic!
}
@media (max-width:320px){ //Clips the start to the min value
font-size:50px;
}
@media (min-width:1920px){ //Clips the end to the max value
font-size:100px;
}
*/
/*
Misc
*/
/*
Font face
example:
@include font-face('Clarendon', 'clarendon-webfont');
@include font-face('Clarendon', 'clarendon-webfont', $w--bold, italic);
*/
/*
REMs
*/
/*
EMs calculator
*/
/*
SVG inliner
*/
/*
Media Query mixin
See https://github.com/sass-mq/sass-mq/ for original full version.
@example scss
.element {
@include mq($from: mobile) {
color: red;
}
@include mq($to: tablet) {
color: blue;
}
@include mq(mobile, tablet) {
color: green;
}
@include mq($from: tablet, $and: '(orientation: landscape)') {
color: teal;
}
@include mq(em(950px)) {
color: hotpink;
}
@include mq(em(950px), $media-feature: height) {
color: hotpink;
}
@include mq(tablet, $media-type: screen) {
color: hotpink;
}
// Advanced use:
$custom-breakpoints: (L: 900px, XL: 1200px);
@include mq(L, $bp: $custom-breakpoints) {
color: hotpink;
}
}
*/
/*
Margin / Padding Quick Resets
example: top & bottom margin set to $spacing-unit
.element {
@include push--ends;
}
example: left & right padding set to $spacing-unit--small
.element {
@include soft--sides($spacing-unit--small);
}
*/
/*
Helper mixins
*/
/*
Form input placeholder text
example:
input,
textarea {
@include input-placeholder {
color: $grey;
}
}
*/
/*
Retina images
example:
.element {
@include retina {
background-image: url(../img/background@2x.png);
}
}
*/
/*
Content margins
fore removing first/last child margins
example: default
.element {
@include content-margins;
}
output:
.element > *:first-child {
margin-top: 0;
}
.element > *:last-child {
margin-bottom: 0;
}
example: empty selector
.element {
@include content-margins('false');
}
output:
.element:first-child {
margin-top: 0;
}
.element:last-child {
margin-bottom: 0;
}
*/
/*
CSS Triangle
used for creating CSS only triangles
example:
.element {
&::before {
@include css-triangle(blue, down);
}
}
*/
/*
Hide text
example:
.element {
@include hide-text;
}
*/
/*
Responsive ratio
Used for creating scalable elements that maintain the same ratio
example:
.element {
@include responsive-ratio(400, 300);
}
*/
/*
Icon
For using fontastic icons in pseudo elements
*/
/*
Colours
background, colour, etc. match up with colour map in _variables.scss
modify to suit per project
*/
/*
Fluid Property
http://www.adrenalinmedia.com.au/the-agency/insights/this-changes-everything-css-fluid-properties.aspx
HTML:
Text to replace
example:
h1 {
@include fp(font-size, 50, 100); // 50px at 320, 100px at 1920;
}
output:
h1 {
font-size: calc(3.125vw + 40px); //This is the magic!
}
@media (max-width:320px){ //Clips the start to the min value
font-size:50px;
}
@media (min-width:1920px){ //Clips the end to the max value
font-size:100px;
}
*/
/*
Misc
*/
/*
Font face
example:
@include font-face('Clarendon', 'clarendon-webfont');
@include font-face('Clarendon', 'clarendon-webfont', $w--bold, italic);
*/
.familyChart {
font-family: "Tajawal", sans-serif; }
.familyChart__row {
position: relative; }
.familyChart__row:after, .familyChart__row:before {
position: absolute;
background: #323232; }
.familyChart__row .connector {
position: absolute;
inset-inline-start: 50%;
transform: translateX(-50%);
top: -95px;
background-image: url("data:image/svg+xml,%3Csvg width='535' height='89' viewBox='0 0 535 89' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M534.195 1C534.195 0.447715 533.748 0 533.195 0C532.643 0 532.195 0.447715 532.195 1H533.195H534.195ZM0.755143 78.5C0.202858 78.5 -0.187666 79.1764 0.0884767 79.6547L4.52865 87.3453C4.80479 87.8236 5.58584 87.8236 5.86198 87.3453L10.3021 79.6547C10.5783 79.1764 10.1878 78.5 9.63548 78.5H0.755143ZM533.195 1H532.195V20.75H533.195H534.195V1H533.195ZM509.195 44.75V43.75H29.1953V44.75V45.75H509.195V44.75ZM5.19531 68.75H4.19531V79.5H5.19531H6.19531V68.75H5.19531ZM29.1953 44.75V43.75C15.3882 43.75 4.19531 54.9429 4.19531 68.75H5.19531H6.19531C6.19531 56.0475 16.4928 45.75 29.1953 45.75V44.75ZM533.195 20.75H532.195C532.195 33.4525 521.898 43.75 509.195 43.75V44.75V45.75C523.002 45.75 534.195 34.5571 534.195 20.75H533.195Z' fill='%23323232'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
width: 535px;
height: 89px;
inset-inline-start: 100%; }
.familyChart ul {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
position: relative;
margin: 0;
padding: 0; }
.familyChart ul li {
position: relative;
font-size: 1rem;
font-weight: 700;
color: #000;
background: #fff;
box-shadow: 0px 4px 18px 0px #00000040;
border-radius: 6px;
text-align: center;
padding: 8px 17px;
height: 64px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: column;
line-height: 1.4; }
.familyChart ul li:after, .familyChart ul li:before {
position: absolute;
background: #323232; }
.familyChart ul li p {
margin: 0;
font-size: 1rem;
font-weight: 700;
line-height: 1.3; }
.familyChart ul.main li {
color: #db7e17; }
.familyChart.ateeqi {
max-width: 1232px;
margin-left: auto;
margin-right: auto; }
.familyChart.ateeqi ul {
padding-bottom: 98px; }
.familyChart.ateeqi ul li {
border: 1.5px solid #aaaaaa;
background: #00000005;
backdrop-filter: blur(18.5px);
box-shadow: 0px 0px 14.4px 0px #ffffff40 inset; }
.familyChart.ateeqi ul.main {
max-width: 800px;
margin-left: auto;
margin-right: auto; }
.familyChart.ateeqi ul.main li {
flex-direction: row-reverse;
gap: 10px; }
.familyChart.ateeqi ul.main li img {
position: relative;
top: 3px; }
.familyChart.ateeqi ul.main:after {
content: "";
position: absolute;
background-image: url("data:image/svg+xml,%3Csvg width='11' height='89' viewBox='0 0 11 89' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.19531 1C6.19531 0.447715 5.7476 0 5.19531 0C4.64303 0 4.19531 0.447715 4.19531 1H5.19531H6.19531ZM0.755143 78.5C0.202858 78.5 -0.187666 79.1764 0.0884767 79.6547L4.52865 87.3453C4.80479 87.8236 5.58584 87.8236 5.86198 87.3453L10.3021 79.6547C10.5783 79.1764 10.1878 78.5 9.63548 78.5H0.755143ZM5.19531 1H4.19531V79.5H5.19531H6.19531V1H5.19531Z' fill='%23323232'/%3E%3C/svg%3E%0A");
width: 11px;
height: 89px;
left: 50%;
transform: translateX(-50%);
bottom: 2px; }
.familyChart.ateeqi ul.head:after {
content: "";
position: absolute;
background-image: url("data:image/svg+xml,%3Csvg width='11' height='89' viewBox='0 0 11 89' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.19531 1C6.19531 0.447715 5.7476 0 5.19531 0C4.64303 0 4.19531 0.447715 4.19531 1H5.19531H6.19531ZM0.755143 78.5C0.202858 78.5 -0.187666 79.1764 0.0884767 79.6547L4.52865 87.3453C4.80479 87.8236 5.58584 87.8236 5.86198 87.3453L10.3021 79.6547C10.5783 79.1764 10.1878 78.5 9.63548 78.5H0.755143ZM5.19531 1H4.19531V79.5H5.19531H6.19531V1H5.19531Z' fill='%23323232'/%3E%3C/svg%3E%0A");
width: 11px;
height: 89px;
left: 50%;
transform: translateX(-50%);
bottom: 2px; }
.familyChart.ateeqi ul.head li {
min-width: 176px; }
.familyChart.ateeqi .familyChart__row.three {
display: flex;
justify-content: space-between; }
.familyChart.ateeqi .familyChart__row.three > div {
width: 368px; }
.familyChart.ateeqi .familyChart__row.three > div ul {
padding-bottom: 0; }
.familyChart.ateeqi .familyChart__row.three > div:not(:first-child) ul {
height: 100%; }
.familyChart.ateeqi .familyChart__row.three > div:not(:first-child) ul li {
width: 100%;
height: 100%; }
.familyChart.ateeqi .familyChart__row.three > div:first-child ul:first-child {
padding-bottom: 16px;
gap: 16px; }
.familyChart.ateeqi .familyChart__row.three > div:first-child ul:first-child li {
min-height: 48px;
min-width: 176px; }
.familyChart.ateeqi .familyChart__row.three > div:first-child ul:first-child li:first-child span {
width: 535px;
left: 349px; }
.familyChart.ateeqi .familyChart__row.three > div:first-child ul:first-child li:last-child span {
background-image: url("data:image/svg+xml,%3Csvg width='343' height='89' viewBox='0 0 343 89' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M342.195 1C342.195 0.447715 341.748 0 341.195 0C340.643 0 340.195 0.447715 340.195 1H341.195H342.195ZM0.755143 78.5C0.202858 78.5 -0.187666 79.1764 0.0884767 79.6547L4.52865 87.3453C4.80479 87.8236 5.58584 87.8236 5.86198 87.3453L10.3021 79.6547C10.5783 79.1764 10.1878 78.5 9.63548 78.5H0.755143ZM341.195 1H340.195V20.75H341.195H342.195V1H341.195ZM317.195 44.75V43.75H29.1953V44.75V45.75H317.195V44.75ZM5.19531 68.75H4.19531V79.5H5.19531H6.19531V68.75H5.19531ZM29.1953 44.75V43.75C15.3882 43.75 4.19531 54.9429 4.19531 68.75H5.19531H6.19531C6.19531 56.0475 16.4928 45.75 29.1953 45.75V44.75ZM341.195 20.75H340.195C340.195 33.4525 329.898 43.75 317.195 43.75V44.75V45.75C331.002 45.75 342.195 34.5571 342.195 20.75H341.195Z' fill='%23323232'/%3E%3C/svg%3E%0A");
width: 343px;
left: 253px; }
.familyChart.ateeqi .familyChart__row.three > div:first-child ul:last-child li {
max-width: 368px; }
.familyChart.ateeqi .familyChart__row.three > div:first-child ul:last-child li:before {
content: "";
width: 2px;
height: 15px;
inset-inline-end: 22%;
transform: translateX(-50%);
top: -17px; }
.familyChart.ateeqi .familyChart__row.three > div:last-child ul li span {
background-image: url("data:image/svg+xml,%3Csvg width='439' height='89' viewBox='0 0 439 89' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1H1H2ZM428.56 78.5C428.008 78.5 427.617 79.1764 427.893 79.6547L432.333 87.3453C432.609 87.8236 433.391 87.8236 433.667 87.3453L438.107 79.6547C438.383 79.1764 437.992 78.5 437.44 78.5H428.56ZM1 1H0V20.75H1H2V1H1ZM25 44.75V45.75H409V44.75V43.75H25V44.75ZM433 68.75H432V79.5H433H434V68.75H433ZM409 44.75V45.75C421.703 45.75 432 56.0475 432 68.75H433H434C434 54.9429 422.807 43.75 409 43.75V44.75ZM1 20.75H0C0 34.5571 11.1929 45.75 25 45.75V44.75V43.75C12.2975 43.75 2 33.4525 2 20.75H1Z' fill='%23323232'/%3E%3C/svg%3E%0A");
width: 439px;
left: -31px; }
.familyChart.ateeqi .familyChart__row.four ul {
padding-top: 98px;
padding-bottom: 0;
gap: 40px;
justify-content: start; }
.familyChart.ateeqi .familyChart__row.four ul li {
width: 256px; }
.familyChart.ateeqi .familyChart__row.four ul li:first-child span {
background-image: url("data:image/svg+xml,%3Csvg width='159' height='169' viewBox='0 0 159 169' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M158.195 1C158.195 0.447715 157.748 0 157.195 0C156.643 0 156.195 0.447715 156.195 1H157.195H158.195ZM0.755143 158.5C0.202858 158.5 -0.187666 159.176 0.0884767 159.655L4.52865 167.345C4.80479 167.824 5.58584 167.824 5.86198 167.345L10.3021 159.655C10.5783 159.176 10.1878 158.5 9.63548 158.5H0.755143ZM157.195 1H156.195V84.75H157.195H158.195V1H157.195ZM133.195 108.75V107.75H29.1953V108.75V109.75H133.195V108.75ZM5.19531 132.75H4.19531V159.5H5.19531H6.19531V132.75H5.19531ZM29.1953 108.75V107.75C15.3882 107.75 4.19531 118.943 4.19531 132.75H5.19531H6.19531C6.19531 120.047 16.4928 109.75 29.1953 109.75V108.75ZM157.195 84.75H156.195C156.195 97.4526 145.898 107.75 133.195 107.75V108.75V109.75C147.002 109.75 158.195 98.5571 158.195 84.75H157.195Z' fill='%23323232'/%3E%3C/svg%3E%0A");
width: 160px;
height: 98px;
background-position: 100% 100%;
inset-inline-start: 205px;
top: -99px; }
.familyChart.ateeqi .familyChart__row.four ul li:last-child span {
background-image: url("data:image/svg+xml,%3Csvg width='151' height='169' viewBox='0 0 151 169' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1H1H2ZM140.56 158.5C140.008 158.5 139.617 159.176 139.893 159.655L144.333 167.345C144.609 167.824 145.391 167.824 145.667 167.345L150.107 159.655C150.383 159.176 149.992 158.5 149.44 158.5H140.56ZM1 1H0V84.75H1H2V1H1ZM25 108.75V109.75H121V108.75V107.75H25V108.75ZM145 132.75H144V159.5H145H146V132.75H145ZM121 108.75V109.75C133.703 109.75 144 120.047 144 132.75H145H146C146 118.943 134.807 107.75 121 107.75V108.75ZM1 84.75H0C0 98.5571 11.1929 109.75 25 109.75V108.75V107.75C12.2975 107.75 2 97.4526 2 84.75H1Z' fill='%23323232'/%3E%3C/svg%3E%0A");
width: 151px;
height: 98px;
background-position: 100% 100%;
inset-inline-start: 63px;
top: -99px; }
.familyChart.intrective .tree__container__branch.from_3 .tree__container__step__card__p {
width: 100%; }
.familyChart .tree__container__step__card p {
font-size: 1rem;
font-weight: 700;
color: #000;
background: #fff;
box-shadow: 0px 4px 18px 0px #00000040;
border-radius: 6px;
width: auto;
padding: 8px 17px;
min-height: 64px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: column;
line-height: 1.4; }
.familyChart .tree__container__step__card p br {
display: none; }
.familyChart .tree__container__step__card p span {
display: flex;
align-items: center;
gap: 31px; }
.familyChart #tree__container__step__card__first .tree__container__step__card__p {
color: var(--primary); }
.familyChart #interactive {
zoom: .4; }
.familyChart #interactive {
transition: transform 0.3s ease;
transform-origin: 0 0;
padding: 20px 0; }
.familyChart #card_1,
.familyChart #card_2,
.familyChart #card_3,
.familyChart #card_member-1,
.familyChart #card_member-2,
.familyChart #card_member-3 {
width: 170px; }
@media screen and (max-width: 1300px) {
.familyChart.ateeqi {
max-width: unset;
width: 1300px; } }