Fantasy Lost Playground | Characters

[BluEndings]

Lost Playground | Characters

Art By もりょ

Matron Abella

Synopsis

History

• +++++++
• +++l/

• “

  ”

  There is calm in a familiar, unchanging life.

  Date of Birth

  34 (Late Nos)

  Gender

  Female (she/her)

  Height

  5'7 (170.2 cm)

  Profession

  Matron

  
  

  Personality

  Abella always seems to have something on her mind.
  
  Her calm demeanor persists in spite of her seemingly little tolerance for nonsense. Even in her displeasure there is a pallid tenderness just beneath the snappy lectures and sharp glares offered to the rabble-rousers. It's a flawless transition between idleness and obstinance. Truly the woman shows a laughable childishness in relation to the oddest of things. Once a decision has been declared—no matter how outlandish—there is no convincing her otherwise.
  
  Though she stand firm, she is caretaker as much as guardian.
  
• “

  ”

  What interest could you possibly have, pray tell?

  Rumors

  - Abella offers up troublesome youth the recluse by the wood's border.
  - Having rejected her original calling, she was cursed to never conceive child.
  - She is engaged in a lover's quarrel with a gentleman from the Capital.
  - Blaine is given special treatment due to shared blood relation.
  

  
  

  Biography

  There is only so much of the Matron's story the orphans could gather.
  
  Abella, naturally, was not the first to head this home. Her predecessor was far older than she, and twice as unforthcoming. Despite the inevitability of passing the torch, there was palpable shared dissension. All up until one unexpectedly passed, and left the entirety to their apprentice.
  
  Abella had much of the bygone belongings sold or burned, while the rest remained tucked away in the one place she forbid the most—the study beyond the humble trove of books.

The Code is shared down below.
It remains Ambiloquous's work, but I've bent it to do my bidding. So if it breaks that's my fault.

Spoiler: CS Code

[comment]-- Body Font -->[/comment][font=Catamaran][comment][font=Unica One]:>[/font][/comment][border=transparent;

/* Colours */
--c-1: #012D38; /* Top colour of gradient */
--c-2: #68988C; /* Bottom colour of gradient and line */
--star-g: linear-gradient(#E4DFCB, #C1B696); /* Star gradient */
--seal-g: linear-gradient(#fff, #000); /* PERSONALIZED ~MYSTICAL~ BG COLOR HERE */
--seal-t: #000; /* PERSONALIZED ~MYSTICAL~ TEXT COLOR HERE */
--text-c: lavender; /* Text colour */
--quote-c: #D9B586; /* Quotation mark colour */
--content-bg: rgba(255, 255, 200, 0.1); /* Content background colour */

--b-r: 8px;

/* Main Image URL, change first % (x-axis) and second % (y-axis) before / to shift image position in icon */
--main-img: url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fshackmanlab.org%2Fwp-content%2Fuploads%2F2013%2F07%2Fperson-placeholder.jpg&f=1&nofb=1') no-repeat 50% 0% / cover;

/* Tab 2 Images URL, change first % (x-axis) and second % (y-axis) before / to shift image position in icon */
--img-1: url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fshackmanlab.org%2Fwp-content%2Fuploads%2F2013%2F07%2Fperson-placeholder.jpg&f=1&nofb=1') 50% 0% / cover;
--img-2: url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fshackmanlab.org%2Fwp-content%2Fuploads%2F2013%2F07%2Fperson-placeholder.jpg&f=1&nofb=1') 50% 0% / cover;
--img-3: url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fshackmanlab.org%2Fwp-content%2Fuploads%2F2013%2F07%2Fperson-placeholder.jpg&f=1&nofb=1') 50% 0% / cover;

--w: 1000px;
--h: min(82vh, 540px);
--bg: linear-gradient(var(--c-1) 20%, var(--c-2) 110%);

--tabs-m: 0px 0px 30px 0px;
--tabs-w: 220px;
--tabs-h: 125px;
--tabs-l-h: 3;

--img-b-w: calc(var(--img-w) + 60px);
--img-b-h: calc(var(--img-h) + 60px);
--img-b-bg: linear-gradient(var(--c-1), var(--c-2));

--img-t: -40px;
--img-w: 200px;
--img-h: 280px;
--img-c-p: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
--img-r: 10px;

--credit-d: min(30px, 3vh);

--p: 20px;

--mask-h: calc(var(--img-h) + 20px);

--line-w: 2px;
--line-d: 70px;

--line-t-1: 238px;
--line-h-1: calc(var(--tab-t-1) - var(--line-t-1) + 1px);
--line-t-2: 298px;
--line-h-2: calc(var(--tab-t-2) - var(--line-t-2) + 1px);
--line-h-3: calc(var(--tab-t-3) - var(--line-t-1) + 1px);

--tab-d: 60px;
--tab-w: 25px;
--tab-h: 30px;

--tab-t-1: 344px;
--tab-t-s-1: calc(var(--tab-t-1)  - var(--line-d));
--tab-t-2: 388px;
--tab-t-s-2: calc(var(--tab-t-2)  - var(--line-d));
--tab-t-3: 432px;
--tab-t-s-3: calc(var(--tab-t-3)  - var(--line-d));

--header-m: 12px;
--header-f-s: 3em;/* Header font size, increase or decrease by .1 increments */
--header-f: 'Unica One', cursive; /* Header font, change the font tag above code if you change this */

--quote-m-b: -22px;
--quote-m: 20px;
--quote-f-s: 4.5em;

--content-p: 12px;
--content-l-h: 1.5;

--icon-w: 80px;
--icon-h: 110px;
--icon-m-b: 1.5em;

margin: auto;
box-sizing: border-box;
max-width: var(--w);
padding: 0px;][comment]

-- Main Content --[/comment][border=transparent;
position: relative;
border-radius: var(--b-r);
box-sizing: border-box;
min-height: var(--h);
padding: 0px;
padding-bottom: var(--p);
background: var(--bg);
display: flex;
flex-flow: row wrap;][comment]

-- Actual Tabs Container --[/comment]

[comment]-- Tab Body 1 --[/comment][comment]

-- Fake Image + Tabs Section --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 1 1 120px;
padding: 0px var(--p);
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
][comment]

-- Image Border --[/comment][border=transparent;
position: relative;
box-sizing: border-box;
flex: 0 0 100%;
width: var(--img-b-w);
padding: 0px;
display: flex;
justify-content: center;
z-index: 1;
align-items: center;][comment]

-- Image --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
margin-top: var(--p);
height: calc(var(--h) - var(--p));
background: var(--main-img);
border-radius: var(--img-r);
padding: 0px var(--p);
display: flex;
justify-content: center;][border=transparent;
position: absolute;
bottom: 0;
line-height: 1;
z-index: 2;][border=0;
margin-bottom: 4px;
padding: 2px 6px;
border-radius: calc(8px / 1.5);
background: var(--c-1);][border=transparent;
box-sizing: border-box;
flex: 0 0;
width: fit-content;
padding: 0px;
background: var(--star-g);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: calc(var(--header-f-s) / 2);
font-weight: bold;
font-family: var(--header-f);
line-height: 1;]Art By (artist)[/border][/border][/border][border=0px;
color: var(--main-c);
font-size: 2.5em;
text-align: center;
line-height: 50px;
position: relative;
right: 22.5%;][fa]far fa-gramophone[/fa][/border][border=0px;
width: 80px;
height: 100px;
display: inline-block;
opacity: 0;
position: relative;
right: 58.5%;
top: -2%;][comment]

// MUSIC PLAYER

[/comment][media=soundcloud]SOUNDCLOUD LINK HERE[/media][/border][/border][/border][/border][comment]

-- Content Section --[/comment][border=transparent;
box-sizing: border-box;
flex: 3 1 280px;
height: var(--h);
padding: var(--p);
overflow: hidden;
pointer-events: auto;
z-index: 1;][comment]-- Header --[/comment][border=transparent;
margin-bottom: calc(var(--header-m) / 2);
box-sizing: border-box;
width: calc(100% - var(--p));
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
margin-right: var(--header-m);
box-sizing: border-box;
flex: 0 0;
min-width: -moz-fit-content;
min-width: fit-content;
padding: 0px;
background: var(--star-g);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--header-f-s);
font-family: var(--header-f);
line-height: 1;]NAME[/border][comment]-- Line --[/comment][border=transparent;
margin-right: var(--header-m);
flex: 0.1 1;
height: var(--line-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Header Text --[/comment][border=transparent;
margin-right: var(--header-m);
box-sizing: border-box;
flex: 0 0;
min-width: -moz-fit-content;
min-width: fit-content;
padding: 0px;
color: var(--c-2);
font-size: calc(var(--header-f-s) / 1.5);
font-family: var(--header-f);
line-height: 1;]The (fate)[/border][comment]-- Line --[/comment][border=transparent;
margin-right: var(--header-m);
flex: 1 1;
height: var(--line-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Star --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 calc(var(--tab-w) - 4px);
height: calc(var(--tab-h) - 4px);
padding: 0px;
background: var(--star-g);
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][/border][border=0px; padding: 0; margin: 0; position: relative;][border=0px; height: 50px; position: absolute; padding: 0; margin: 0; width: calc(100% + 15px)); pointer-events: none;][border=0;
padding: 15px;
transform: translateY(5px);
display: flex;
flex-wrap: wrap;
margin-top: -4px;][border=0;
padding: 2px 6px;
margin: 4px 4px 0px;
width: fit-content;
border-radius: calc(8px / 1.5);
background: var(--star-g);][border=transparent;
box-sizing: border-box;
flex: 0 0;
padding: 0px;
color: var(--c-1);
font-size: calc(var(--header-f-s) / 2);
font-weight: bold;
font-family: var(--header-f);
line-height: 1;]Synopsis[/border][/border][border=0;
padding: 2px 6px;
margin: 4px 4px 0px;
width: fit-content;
border-radius: calc(8px / 1.5);
background: var(--star-g);][border=transparent;
box-sizing: border-box;
flex: 0 0;
padding: 0px;
color: var(--c-1);
font-size: calc(var(--header-f-s) / 2);
font-weight: bold;
font-family: var(--header-f);
line-height: 1;]History[/border][/border][border=0;
padding: 2px 6px;
margin: 4px 4px 0px;
width: fit-content;
border-radius: calc(8px / 1.5);
background: var(--star-g);][border=transparent;
box-sizing: border-box;
flex: 0 0;
padding: 0px;
color: var(--c-1);
font-size: calc(var(--header-f-s) / 2);
font-weight: bold;
font-family: var(--header-f);
line-height: 1;]Relations[/border][/border][border=0;
padding: 2px 18px;
margin: 4px 4px 0px;
width: fit-content;
border-radius: calc(8px / 1.5);
background: var(--seal-g);][border=transparent;
box-sizing: border-box;
flex: 0 0;
padding: 0px;
padding-top: 2px;
color: var(--seal-t);
font-size: calc(((var(--header-f-s) - 4px) / 2));
font-weight: bold;
font-family: var(--header-f);
line-height: 1;]Weave[/border][/border][/border][/border][br][/br][tabs][comment]

// SYNOPSIS

[/comment][tab=+++++++][comment]

-- Content Section --[/comment][border=transparent;
box-sizing: border-box;
flex: 3 1 280px;
height: calc(var(--h) * 1.65);
padding: 0;
overflow: hidden;
pointer-events: auto;
background: var(--content-bg);
z-index: 1;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--p)));
height: 45%;
padding: 0px;
overflow: auto;][comment]-- Content --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - (2 * var(--p)));
height: auto;
padding: 0px;][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--content-p);
color: var(--text-c);
line-height: var(--content-l-h);][comment]-- Synopsis Quote --[/comment][border=transparent;
display: inline-block;
margin-bottom: calc(var(--quote-m-b) - 10px);
box-sizing: border-box;
padding: 0px;][border=transparent;
margin-right: var(--quote-m);
float: left;
box-sizing: border-box;
color: var(--quote-c);
font-size: var(--quote-f-s);
line-height: 1;
padding: 0px;]“[/border][border=transparent;
margin-left: var(--quote-m);
float: right;
box-sizing: border-box;
color: var(--quote-c);
font-size: var(--quote-f-s);
line-height: 1;
padding: 0px;]”[/border][border=transparent;
display: inline;
font-style: italic;
padding: 0px;](OPTIONAL) SYNOPSIS QUOTE[/border][/border][border=0; padding: 0 10px 0 10px; display: flex; flex-flow: row wrap; gap: 4%;][comment]
 
// Date of Birth
 
[/comment][border=0; width: 48%; padding: 0;][border=0; padding: 0; font-weight: bold; font-family: var(--header-f); font-size: calc(var(--header-f-s) / 2.5); text-transform: uppercase; background: var(--star-g); -webkit-background-clip: text; -webkit-text-fill-color: transparent;]Date of Birth[/border][border=0; margin-top: 2px; padding: 0; font: 15px Roboto; padding-left: 8px]# (# of [month])[/border][/border][comment]
 
// Gender
 
[/comment][border=0; width: 48%; padding: 0;][border=0; padding: 0; font-weight: bold; font-family: var(--header-f); font-size: calc(var(--header-f-s) / 2.5); text-transform: uppercase; background: var(--star-g); -webkit-background-clip: text; -webkit-text-fill-color: transparent;]Gender[/border][border=0; margin-top: 2px; padding: 0; font: 15px Roboto; padding-left: 8px]gender[/border][/border][comment]
 
// Height
 
[/comment][border=0; width: 48%; padding: 0; margin-top: 15px;][border=0; padding: 0; font-weight: bold; font-family: var(--header-f); font-size: calc(var(--header-f-s) / 2.5); text-transform: uppercase; background: var(--star-g); -webkit-background-clip: text; -webkit-text-fill-color: transparent;]Height[/border][border=0; margin-top: 2px; padding: 0; font: 15px Roboto; text-indent: 8px]char height[/border][/border][comment]
 
// Calling
 
[/comment][border=0; width: 48%; padding: 0; margin-top: 15px;][border=0; padding: 0; font-weight: bold; font-family: var(--header-f); font-size: calc(var(--header-f-s) / 2.5); text-transform: uppercase; background: var(--star-g); -webkit-background-clip: text; -webkit-text-fill-color: transparent;]Calling[/border][border=0; margin-top: 2px; padding: 0; font: 15px Roboto; padding-left: 8px;]calling[/border][/border][/border][br][/br][comment]-- Header --[/comment][border=transparent;
margin-bottom: calc(var(--header-m) / 2);
box-sizing: border-box;
width: calc(100% - var(--p));
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
margin-right: var(--header-m);
box-sizing: border-box;
flex: 0 0;
min-width: -moz-fit-content;
min-width: fit-content;
padding: 0px;
background: var(--star-g);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: calc(var(--header-f-s) / 2);
font-family: var(--header-f);
line-height: 1;][B]Personality[/B][/border][comment]-- Line --[/comment][border=transparent;
margin-right: var(--header-m);
flex: 1 1;
height: var(--line-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Star --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 calc(var(--tab-w) - 12px);
height: calc(var(--tab-h) - 12px);
padding: 0px;
background: var(--star-g);
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dictum eu velit eu porttitor. Integer pellentesque lectus ut turpis lacinia ullamcorper. Maecenas sed pharetra ligula. In hac habitasse platea dictumst. Donec est enim, ultrices quis nunc sed, ultricies venenatis nulla. Sed magna arcu, consequat molestie ipsum non, euismod elementum libero. Nullam luctus, nibh in lacinia faucibus, eros velit bibendum tortor, ac imperdiet urna quam quis sem. Vivamus eget diam iaculis, tincidunt arcu sed, finibus odio. Integer eget placerat diam, nec fringilla nisl. Sed eu lacinia purus. Integer eget placerat diam, nec fringilla nisl. Sed eu lacinia purus. Integer eget placerat diam, nec fringilla nisl. Sed eu lacinia purus. [br][/br][/border][/border][/border][/border][/tab]
[comment]

// HISTORY

[/comment]
[tab=+++l/][comment]

-- Content Section --[/comment][border=transparent;
box-sizing: border-box;
flex: 3 1 280px;
height: calc(var(--h) * 1.65);
padding: 0;
overflow: hidden;
pointer-events: auto;
background: var(--content-bg);
z-index: 1;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--p)));
height: 45%;
padding: 0px;
overflow: auto;][comment]-- Content --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - (2 * var(--p)));
height: auto;
padding: 0px;][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--content-p);
color: var(--text-c);
line-height: var(--content-l-h);][comment]-- History Quote --[/comment][border=transparent;
display: inline-block;
margin-bottom: calc(var(--quote-m-b) - 10px);
box-sizing: border-box;
padding: 0px;][border=transparent;
margin-right: var(--quote-m);
float: left;
box-sizing: border-box;
color: var(--quote-c);
font-size: var(--quote-f-s);
line-height: 1;
padding: 0px;]“[/border][border=transparent;
margin-left: var(--quote-m);
float: right;
box-sizing: border-box;
color: var(--quote-c);
font-size: var(--quote-f-s);
line-height: 1;
padding: 0px;]”[/border][border=transparent;
display: inline;
font-style: italic;
padding: 0px;](OPTIONAL) HISTORY QUOTE[/border][/border][border=0; padding: 0 10px 0 10px; display: flex; flex-flow: row wrap; gap: 4%; margin-bottom: -6px;][comment]
 
// Rumors
 
[/comment][border=0; width: 96%; padding: 0; margin-top: 0px;][border=0; padding: 0; font-weight: bold; font-family: var(--header-f); font-size: calc(var(--header-f-s) / 2.5); text-transform: uppercase; background: var(--star-g); -webkit-background-clip: text; -webkit-text-fill-color: transparent;]Rumors[/border][border=0; margin-top: 2px; padding: 0; font: 15px Roboto; padding-left: 8px; line-height: 1.4;]- 1
- 2
- 3
- 4[/border][/border][/border][br][/br][comment]-- Header --[/comment][border=transparent;
margin-bottom: calc(var(--header-m) / 2);
box-sizing: border-box;
width: calc(100% - var(--p));
padding: 0px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;][comment]-- Header Text --[/comment][border=transparent;
margin-right: var(--header-m);
box-sizing: border-box;
flex: 0 0;
min-width: -moz-fit-content;
min-width: fit-content;
padding: 0px;
background: var(--star-g);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: calc(var(--header-f-s) / 2);
font-family: var(--header-f);
line-height: 1;][B]Biography[/B][/border][comment]-- Line --[/comment][border=transparent;
margin-right: var(--header-m);
flex: 1 1;
height: var(--line-w);
background: var(--c-2);
padding: 0px;][/border][comment]-- Star --[/comment][border=transparent;
box-sizing: border-box;
flex: 0 0 calc(var(--tab-w) - 12px);
height: calc(var(--tab-h) - 12px);
padding: 0px;
background: var(--star-g);
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dictum eu velit eu porttitor. Integer pellentesque lectus ut turpis lacinia ullamcorper. Maecenas sed pharetra ligula. In hac habitasse platea dictumst. Donec est enim, ultrices quis nunc sed, ultricies venenatis nulla. Sed magna arcu, consequat molestie ipsum non, euismod elementum libero. Nullam luctus, nibh in lacinia faucibus, eros velit bibendum tortor, ac imperdiet urna quam quis sem. Vivamus eget diam iaculis, tincidunt arcu sed, finibus odio. Integer eget placerat diam, nec fringilla nisl. Sed eu lacinia purus. Integer eget placerat diam, nec fringilla nisl. Sed eu lacinia purus. Integer eget placerat diam, nec fringilla nisl. Sed eu lacinia purus.[/border][/border][/border][/border][/tab]
[comment]

// RELATIONS

[/comment]
[tab=+++++++...][comment]

-- Content Section --[/comment][border=transparent;
box-sizing: border-box;
flex: 3 1 280px;
height: calc(var(--h) * 1.65);
padding: 0;
overflow: hidden;
pointer-events: auto;
background: var(--content-bg);
z-index: 1;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--p)));
height: 45%;
padding: 0px;
overflow: auto;][comment]-- Content --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - (2 * var(--p)));
height: auto;
padding: 0px;][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--content-p);
color: var(--text-c);
line-height: var(--content-l-h);][comment]

-- Image + Text 1 --[/comment][border=transparent;
margin-bottom: var(--icon-m-b);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
padding: 0px;][border=transparent;
margin-right: var(--content-p);
flex: 0 0 var(--icon-w);
height: var(--icon-h);
background: var(--img-1);
padding: 0px;
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][border=transparent;
flex: 1 1;
padding: 0px;][border=0; padding: 0; font-weight: bold; font-family: var(--header-f); font-size: calc(var(--header-f-s) / 2.5); text-transform: uppercase; background: var(--star-g); -webkit-background-clip: text; -webkit-text-fill-color: transparent;]SENTIMENT #1[/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet dignissim risus. Quisque eget orci tempus, condimentum neque ac, feugiat libero. Sed imperdiet blandit mauris, sed luctus tortor consectetur vel.[/border][/border][comment]

-- Image + Text 2 --[/comment][border=transparent;
margin-bottom: var(--icon-m-b);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
padding: 0px;][border=transparent;
margin-right: var(--content-p);
flex: 0 0 var(--icon-w);
height: var(--icon-h);
background: var(--img-2);
padding: 0px;
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][border=transparent;
flex: 1 1;
padding: 0px;][border=0; padding: 0; font-weight: bold; font-family: var(--header-f); font-size: calc(var(--header-f-s) / 2.5); text-transform: uppercase; background: var(--star-g); -webkit-background-clip: text; -webkit-text-fill-color: transparent;]SENTIMENT #2[/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet dignissim risus. Quisque eget orci tempus, condimentum neque ac, feugiat libero. Sed imperdiet blandit mauris, sed luctus tortor consectetur vel.[/border][/border][comment]

-- Image + Text 3 --[/comment][border=transparent;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
padding: 0px;][border=transparent;
margin-right: var(--content-p);
flex: 0 0 var(--icon-w);
height: var(--icon-h);
background: var(--img-3);
padding: 0px;
-webkit-clip-path: var(--img-c-p);
clip-path: var(--img-c-p);][/border][border=transparent;
flex: 1 1;
padding: 0px;][border=0; padding: 0; font-weight: bold; font-family: var(--header-f); font-size: calc(var(--header-f-s) / 2.5); text-transform: uppercase; background: var(--star-g); -webkit-background-clip: text; -webkit-text-fill-color: transparent;]SENTIMENT #3[/border]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet dignissim risus. Quisque eget orci tempus, condimentum neque ac, feugiat libero. Sed imperdiet blandit mauris, sed luctus tortor consectetur vel.[/border][/border][/border][/border][/border][/border][/tab]
[comment]

// WEAVE

[/comment]
[tab=++++l/.][comment]

-- Content Section --[/comment][border=transparent;
box-sizing: border-box;
flex: 3 1 280px;
height: calc(var(--h) * 1.65);
padding: 0;
overflow: hidden;
pointer-events: auto;
background: var(--content-bg);
z-index: 1;][comment]-- Hidden Scroll --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + (2 * var(--p)));
height: 45%;
padding: 0px;
overflow: auto;][comment]-- Content --[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% - (2 * var(--p)));
height: auto;
padding: 0px;][comment]-- Text --[/comment][border=transparent;
box-sizing: border-box;
width: 100%;
padding: var(--content-p);
color: var(--text-c);
line-height: var(--content-l-h);][comment]-- Weave Quote --[/comment][border=transparent;
display: inline-block;
margin-bottom: calc(var(--quote-m-b) - 10px);
box-sizing: border-box;
padding: 0px;][border=transparent;
margin-right: var(--quote-m);
float: left;
box-sizing: border-box;
color: var(--quote-c);
font-size: var(--quote-f-s);
line-height: 1;
padding: 0px;]“[/border][border=transparent;
margin-left: var(--quote-m);
float: right;
box-sizing: border-box;
color: var(--quote-c);
font-size: var(--quote-f-s);
line-height: 1;
padding: 0px;]”[/border][border=transparent;
display: inline;
font-style: italic;
padding: 0px;](OPTIONAL) WEAVE QUOTE[/border][/border][border=0; padding: 0 10px 0 10px; display: flex; flex-flow: row wrap; gap: 4%;][comment]
 
// Anima
 
[/comment][border=0; width: 30%; padding: 0; margin-top: 0px;][border=0; padding: 0; font-weight: bold; font-family: var(--header-f); font-size: calc(var(--header-f-s) / 2.5); text-transform: uppercase; background: var(--star-g); -webkit-background-clip: text; -webkit-text-fill-color: transparent;]Anima[/border][border=0; margin-top: 2px; padding: 0; font: 15px Roboto; padding-left: 8px][border=0;
text-indent: 0px;
padding: 2px 18px;
margin: 4px 4px 0px;
width: fit-content;
border-radius: calc(8px / 1.5);
background: var(--seal-g);][border=transparent;
box-sizing: border-box;
flex: 0 0;
padding: 0px;
padding-top: 2px;
color: #fff;
font-size: calc(((var(--header-f-s) - 4px) / 2.5));
font-weight: bold;
font-family: var(--header-f);
line-height: 1;][fa]fa-question-circle[/fa][/border][/border][/border][/border][comment]
 
// Shape
 
[/comment][border=0; width: 30%; padding: 0; margin-top: 0px;][border=0; padding: 0; font-weight: bold; font-family: var(--header-f); font-size: calc(var(--header-f-s) / 2.5); text-transform: uppercase; background: var(--star-g); -webkit-background-clip: text; -webkit-text-fill-color: transparent;]Shape[/border][border=0; margin-top: 2px; padding: 0; font: 15px Roboto; padding-left: 8px][border=0;
text-indent: 0px;
padding: 2px 18px;
margin: 4px 4px 0px;
width: fit-content;
border-radius: calc(8px / 1.5);
background: var(--seal-g);][border=transparent;
box-sizing: border-box;
flex: 0 0;
padding: 0px;
padding-top: 2px;
color: #fff;
font-size: calc(((var(--header-f-s) - 4px) / 2.5));
font-weight: bold;
font-family: var(--header-f);
line-height: 1;][fa]fa-lock[/fa][/border][/border][/border][/border][comment]
 
// Thread
 
[/comment][border=0; width: 30%; padding: 0; margin-top: 0px;][border=0; padding: 0; font-weight: bold; font-family: var(--header-f); font-size: calc(var(--header-f-s) / 2.5); text-transform: uppercase; background: var(--star-g); -webkit-background-clip: text; -webkit-text-fill-color: transparent;]Thread[/border][border=0; margin-top: 2px; padding: 0; font: 15px Roboto; padding-left: 8px][border=0;
text-indent: 0px;
padding: 2px 18px;
margin: 4px 4px 0px;
width: fit-content;
border-radius: calc(8px / 1.5);
background: var(--seal-g);][border=transparent;
box-sizing: border-box;
flex: 0 0;
padding: 0px;
padding-top: 2px;
color: #fff;
font-size: calc(((var(--header-f-s) - 4px) / 2.5));
font-weight: bold;
font-family: var(--header-f);
line-height: 1;][fa]fa-lock[/fa][/border][/border][/border][/border][/border][br][/br][comment]

// The Doorway remains shut.

[/comment][/border][/border][/border][/border][/tab][/tabs][/border][/border][/border][/border][/font]

Code remains optional.​