155 lines
14 KiB
CSS
155 lines
14 KiB
CSS
body { background-color:var(--back1);background-image:var(--dots);background-attachment:fixed;margin:0px;
|
|
|
|
--accent: #0606bf;
|
|
|
|
--thunder: #bf9643;
|
|
--shadow: #807399;
|
|
--wind: #659965;
|
|
--river: #6b89b3;
|
|
--outsider: #b36b95;
|
|
|
|
--back1: #e5e5e5;
|
|
--back2: #e2e2e2;
|
|
--back3: #dfdfdf;
|
|
--back4: #e9e9e9;
|
|
|
|
--border: #cccccc;
|
|
|
|
--dark1: #292929;
|
|
--dark2: #2e2e2e;
|
|
--dark3: #393939;
|
|
|
|
--font: playfair display, serif;
|
|
--title: abril fatface, serif;
|
|
--body: source serif pro, serif;
|
|
|
|
--dots: url(https://i.ibb.co/gRdFvZD/dark-spots2.png);
|
|
--dots2: url(https://i.ibb.co/j4zSdj5/light-spots2.png);
|
|
--banner: url(https://i.ibb.co/HxDQDfc/Shesa-Jackalope.png);
|
|
|
|
--fast: .5s;
|
|
--slow: 1s;
|
|
}
|
|
|
|
|
|
|
|
#thunder { --accent:var(--thunder); }
|
|
#shadow { --accent:var(--shadow); }
|
|
#wind { --accent:var(--wind); }
|
|
#river { --accent:var(--river); }
|
|
#outsider { --accent:var(--outsider); }
|
|
|
|
body::-webkit-scrollbar { background-color:var(--back4);width:19px;height:19px; }
|
|
body::-webkit-scrollbar-thumb { border:solid 9px var(--back4);background-color:var(--accent); }
|
|
|
|
.Sabellian-left { height:100vh;background-color:var(--dark1);position:fixed;z-index:10;top:0;left:0px;display:grid; }
|
|
.Sabellian-left-icons { padding:35px;display:flex;flex-direction:column;gap:15px; }
|
|
.Sabellian-left-icons a { display:block;border:solid 1px var(--dark3);background-color:var(--dark2);height:38px;width:38px;border-radius:100%;text-align:center;line-height:43px;color:var(--border);text-decoration:none;background-image:var(--dots2);background-blend-mode:soft-light;transition:var(--fast);font-size:17px;cursor:pointer; }
|
|
.Sabellian-left-icons a:hover { color:var(--accent); }
|
|
.Sabellian-left .togged { transform:rotate(45deg); }
|
|
.Sabellian-left-icons a span { display:block;height:20px;width:19px;padding-right:1px;position:absolute;background-color:var(--accent);border-radius:100%;font:700 8px var(--body);line-height:20px;color:var(--dark1);margin:0px 0px 0px 30px; }
|
|
.Sabellian-left-icons div { flex-grow:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:var(--border);font:500 italic 11px var(--font);line-height:12px;letter-spacing:1px;width:40px;white-space:nowrap; }
|
|
.Sabellian-left-icons div:before { content:'';display:block;width:1px;flex-grow:1;background-color:var(--dark3);margin:25px 0px 160px 0px; }
|
|
.Sabellian-left-icons div span { align-self:flex-start;display:block;transform:rotate(-90deg);transform-origin:0px 0px;height:0px;width:0px;padding-top:5px; }
|
|
|
|
.Sabellian-mid { position:fixed;top:0;left:-211px;height:100vh;border-right:solid 1px var(--border);z-index:9;width:320px;background-color:var(--dark3);color:var(--dark3);transition:var(--slow); }
|
|
.mid-togged { left:109px; }
|
|
.Sabellian-mid input { display:none; }
|
|
.Sabellian-mid label { position:absolute;z-index:11;height:48px;width:48px;border:solid 1px var(--border);background-color:var(--back3);border-radius:100%;font:italic 800 20px var(--font);line-height:42px;text-align:center;cursor:pointer;top:50%;margin:-20px 0px 0px 295px;pointer-events:none;transform:scale(.65);opacity:0;transition:var(--slow); }
|
|
.Sabellian-mid-arrow { position:absolute;z-index:11;top:50%;margin:-150px 0px 0px 295px;height:310px;display:flex;flex-direction:column;justify-content:space-between; }
|
|
.Sabellian-mid-arrow a { pointer-events:none;transform:scale(.65);opacity:0;transition:var(--slow);height:48px;width:48px;border:solid 1px var(--border);background-color:var(--back3);border-radius:100%;font:italic 800 22px var(--font);line-height:42px;text-align:center;cursor:pointer;text-decoration:none;color:var(--dark3); }
|
|
.Sabellian-mid-arrow a i::before { display:block;line-height:48px; }
|
|
.mid-togged label, .mid-togged .Sabellian-mid-arrow a { transform:scale(1);opacity:1;pointer-events:auto; }
|
|
.Sabellian-mid label:hover, .Sabellian-mid input:checked + label, .Sabellian-mid-arrow a:hover { color:var(--accent); }
|
|
.Sabellian-pop { display:grid;grid-template-rows:100vh 100vh 100vh;transition:var(--slow); }
|
|
#Sabellian-tab-2:checked ~ .Sabellian-pop { margin-top:-100vh; }
|
|
#Sabellian-tab-3:checked ~ .Sabellian-pop { margin-top:-200vh; }
|
|
.Sabellian-popout { padding:55px 60px;width:200px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;background-color:var(--back4);background-image:url(https://i.ibb.co/6Rnp2s1/Back-Broung.png);background-blend-mode:overlay;background-attachment:fixed;background-position:0px 0px;mix-blend-mode:lighten; }
|
|
.Sabellian-popout-icon { height:74px;width:74px;padding:32px;border:solid 1px var(--border);background-color:var(--back1);border-radius:5px;background-image:var(--dots);background-attachment:fixed; }
|
|
.Sabellian-popout-icon img { height:60px;width:60px;border:solid 7px var(--dark1);border-radius:3px; }
|
|
.Sabellian-popout-icon a { display:block;position:absolute;height:35px;width:35px;border-radius:100%;background-color:var(--accent);z-index:1;font-size:17px;text-align:center;color:var(--back4);text-decoration:none;margin:45px 0px 0px -5px; }
|
|
.Sabellian-popout-icon a i::before { display:block;line-height:35px;}
|
|
.Sabellian-popout-name { text-transform:uppercase;font:47px var(--title);line-height:40px;padding:35px 0px 0px 0px;white-space:nowrap;text-align:right; }
|
|
.Sabellian-popout-name div { font:700 italic 17px var(--font);letter-spacing:3px;line-height:15px;padding-bottom:5px;color:var(--accent); }
|
|
.Sabellian-popout-blurb { font:500 12px var(--body);text-align:justify;line-height:18px;letter-spacing:.25px; }
|
|
.Sabellian-popout-blurb:before { display:block;content:'';height:1px;background-color:var(--border);margin:27px 0px 25px 120px; }
|
|
.Sabellian-popout-blurb span { text-transform:uppercase;font-weight:800!important;line-height:18px;color:var(--accent); }
|
|
.Sabellian-popout-event { display:block;border:solid 1px var(--border);border-radius:5px;background-color:var(--back1);border-radius:5px;background-image:var(--dots);background-attachment:fixed;padding:14px;margin-top:25px;width:170px; }
|
|
.Sabellian-popout-event div { height:75px;width:170px;background-color:var(--accent);border-radius:3px;background-blend-mode:multiply;background-size:cover;background-position:center; }
|
|
|
|
.Sabellian-nav-name { font:800 italic 40px var(--font);line-height:25px;color:var(--accent1);letter-spacing:0px;text-transform:lowercase;padding:0px 0px 25px 0px; }
|
|
.Sabellian-nav-name:before { content:'';display:block;position:absolute;height:1px;width:120px;background-color:var(--accent);margin:12px 0px 0px 75px; }
|
|
.Sabellian-nav-title { font:800 11px var(--font);text-transform:uppercase;line-height:10px;padding:15px;border:solid 1px var(--border);background-color:var(--back1);border-radius:5px;letter-spacing:3px;margin:15px 0px 20px 0px;background-image:var(--dots);background-attachment:fixed; }
|
|
.Sabellian-nav-links a { display:block;text-decoration:none;color:var(--dark3);font:600 12px var(--body);text-transform:uppercase;line-height:20px;letter-spacing:.5px;padding-left:10px;transition:var(--fast); }
|
|
.Sabellian-nav-links a:before { content:'+';padding-right:15px;color:var(--accent);font-weight:800!important;transition:var(--fast); }
|
|
.Sabellian-nav-links a:hover { color:var(--accent); }
|
|
.Sabellian-nav-links a:hover:before { padding-right:20px; }
|
|
.Sabellian-staff { display:block;text-decoration:none;border:solid 1px var(--border);background-color:var(--back1);border-radius:5px;margin-bottom:10px;align-self:stretch;padding:24px;text-transform:uppercase;color:var(--dark3);font:700 10px var(--font);line-height:10px;letter-spacing:2px;position:relative;overflow:hidden;background-image:var(--dots);background-attachment:fixed;transition:var(--fast);height:35px; }
|
|
.Sabellian-staff:hover { background-color:var(--back3); }
|
|
.Sabellian-staff div { font:27px var(--title);line-height:20px;padding-bottom:5px;letter-spacing:0px;color:var(--accent);position:relative; }
|
|
.Sabellian-staff i { position:absolute;font-size:75px;color:var(--back1);text-shadow:0px 0px 1px var(--dark3);margin:-35px 0px 0px 109px;transform:rotate(30deg); }
|
|
.Sabellian-staff i:before { display:block;line-height:75px; }
|
|
.Sabellian-staff-name { font:500 italic 30px var(--font);line-height:20px;color:var(--border);letter-spacing:.5px;padding-right:10px; }
|
|
.Sabellian-up { display:grid;grid-template-columns:50px auto;align-self:stretch;margin-top:20px; }
|
|
.Sabellian-up-icon { display:flex;flex-direction:column; }
|
|
.Sabellian-up-icon div { height:31px;width:31px;padding:5px;border:solid 1px var(--border);border-radius:100%;background-color:var(--back1); }
|
|
.Sabellian-up-icon div img { height:31px;width:31px;border-radius:100%; }
|
|
.Sabellian-up-icon:after { content:'';display:block;width:1px;flex-grow:2;background-color:var(--border);margin:0px 22px; }
|
|
.Sabellian-up-blurb h1 { margin:10px 0px 0px 15px;font:700 15px var(--body);line-height:10px;text-transform:uppercase;color:var(--accent); }
|
|
.Sabellian-up-blurb h2 { margin:5px 0px 15px 15px;font:700 12px var(--body);line-height:10px;text-transform:uppercase;letter-spacing:.25px; }
|
|
.Sabellian-up-blurb div { font:500 12px var(--body);text-align:justify;line-height:18px;letter-spacing:.25px;max-height:108px;overflow:auto;padding-right:10px; }
|
|
.Sabellian-up-blurb div::-webkit-scrollbar { width:10px;background-color:transparent; }
|
|
.Sabellian-up-blurb div::-webkit-scrollbar-thumb { border-left:solid 9px var(--back4);background-color:var(--accent); }
|
|
.Sabellian-up-blurb div a { text-decoration:none;font-weight:700!important;color:var(--accent);transition:var(--fast); }
|
|
.Sabellian-up-blurb div a:hover { color:var(--dark3); }
|
|
|
|
.Sabellian-right { padding-left:110px;border-right:solid 1px var(--border);color:var(--dark3);transition:var(--slow); }
|
|
.right-togged { padding-left:430px; }
|
|
.Sabellian-banner-img { height:400px;width:100%;border-bottom:solid 1px var(--border);background-color:#f5f5f5;background-image:var(--banner);background-blend-mode:multiply;background-size:cover;background-position:center;filter:grayscale(100%); }
|
|
.Sabellian-banner-name { margin-top:-401px;padding-top:401px;position:relative;overflow:hidden;border-bottom:solid 1px var(--border); }
|
|
.Sabellian-banner-name-1 { background-color:var(--back4);padding:0px 0px 75px 0px;display:flex;flex-direction:column;align-items:center;font:100px var(--title);line-height:80px;text-transform:uppercase; }
|
|
.Sabellian-banner-name-2 { text-align:center;margin-top:-43px;position:relative;z-index:1;white-space:nowrap;background:linear-gradient(to bottom,var(--accent),var(--dark3) 60%);background-clip: text;-webkit-background-clip: text;color: transparent; }
|
|
.Sabellian-banner-name-2 span { display:block;font:700 13px var(--font);letter-spacing:2px;line-height:10px;margin-top:30px; }
|
|
.Sabellian-banner-name-2 span i { font-style:normal!important; }
|
|
.Sabellian-banner-links { display:flex;justify-content:center;gap:10px;margin-top:-110px;position:absolute;z-index:1; }
|
|
.Sabellian-banner-links a, .Sabellian-banner-links-1 { display:block;text-decoration:none;text-transform:uppercase;font:500 12px var(--body);color:var(--back1);background-color:var(--dark3);line-height:10px;padding:15px;border-radius:3px;letter-spacing:2px;transition:var(--fast); }
|
|
.Sabellian-banner-links a:hover, .Sabellian-banner-links-1 b { color:var(--accent); }
|
|
|
|
.Sabellian-body { padding:65px;position:relative;min-height:200vh; }
|
|
.Sabellian-navigation { background-color:var(--accent);padding:20px;display:flex;gap:10px;text-transform:uppercase;position:sticky;top:0px;z-index:1000000000;overflow:hidden; }
|
|
.Sabellian-navigation a { display:block;text-decoration:none;font:bold 10px var(--body);line-height:10px;padding:10px;border-radius:3px;background-color:rgba(20,20,20,.10);color:var(--back1);letter-spacing:1px;text-align:center;white-space:nowrap; }
|
|
.Sabellian-navigation a:first-of-type { background-color:var(--dark1); }
|
|
|
|
.Sabellian-category { margin:20px 0px;border:solid 1px var(--border);background:linear-gradient(to right,var(--back2) 500px,var(--accent) 200%);display:grid;grid-template-rows:170px 0px;height:170px;position:relative;overflow:hidden; }
|
|
.Sabellian-category-img { background-image:var(--banner);background-size:cover;background-position:center;opacity:.35;grid-row-start:1;grid-row-end:2; }
|
|
.Sabellian-category-name { grid-row-start:1;grid-row-end:2;position:absolute;height:400px;width:500px;border-radius:0px 100% 100% 0px;background-color:var(--back4);border:solid 1px var(--border);margin:-116px 0px 0px -1px; }
|
|
.Sabellian-category-name div { padding:170px 0px 0px 55px; }
|
|
.Sabellian-category-name div i { position:absolute;font-size:300px;color:var(--accent);opacity:.075;margin:-120px 30px; }
|
|
.Sabellian-category-name div h1 { margin:0px;font:45px var(--title);line-height:35px;color:var(--accent);position:relative;z-index:1; }
|
|
.Sabellian-category-name div h2 { margin:10px 0px 0px 0px;font:700 11px var(--font);text-transform:uppercase;line-height:15px;position:relative;z-index:1;letter-spacing:3px; }
|
|
.Sabellian-category-1 { display:grid;gap:20px;grid-template-columns:31% auto 31%; }
|
|
.Sabellian-category-1 div { border:solid 1px var(--border);background-color:var(--back4);min-height:350px; }
|
|
.Sabellian-category-2 { display:grid;gap:20px; }
|
|
.Sabellian-category-2 div { border:solid 1px var(--border);background-color:var(--back4);min-height:250px; }
|
|
|
|
|
|
|
|
|
|
@media (max-width: 1400px) {
|
|
.Sabellian-category-1 { grid-template-columns:49% auto; }
|
|
.Sabellian-category-1 div:first-of-type { grid-column-start:1;grid-column-end:3; }
|
|
}
|
|
@media (max-width: 1300px) {
|
|
.Sabellian-banner-name-1 { font-size:75px; }
|
|
.Sabellian-banner-name-1 span { font-size:11px;letter-spacing:1.5px; }
|
|
}
|
|
@media (max-width: 1100px) {
|
|
.Sabellian-banner-name-1 { font-size:65px;line-height:55px;padding-top:13px; }
|
|
.Sabellian-banner-name-1 span i, .Sabellian-banner-links-1 { display:none; }
|
|
.Sabellian-category-1 { grid-template-columns: auto; }
|
|
.Sabellian-category-1 div:first-of-type { grid-column-start:1;grid-column-end:2; }
|
|
}
|
|
@media (max-width: 975px) {
|
|
.Sabellian-mid, #js-toggle-sidebar { display:none; }
|
|
.Sabellian-right { padding-left:110px; }
|
|
} |