From 9bd12cc14a7ea3260b953f40d8a7e0eb9ab9dd89 Mon Sep 17 00:00:00 2001 From: edwin <47649bd5-eeee-4f47-89f4-9f3e4d57ba93@localhost> Date: Wed, 19 Jul 2023 15:09:08 +0000 Subject: [PATCH] =?UTF-8?q?Mise=20=C3=A0=20jour=20de=20'css/horde.css'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/horde.css | 184 +++++++++++++++++++++++++------------------------- 1 file changed, 92 insertions(+), 92 deletions(-) diff --git a/css/horde.css b/css/horde.css index 131d005..851dd4e 100644 --- a/css/horde.css +++ b/css/horde.css @@ -42,114 +42,114 @@ body { background-color:var(--back1);background-image:var(--dots);background-att body::-webkit-scrollbar { background-color:var(--back4);width:19px;height:19px; } body::-webkit-scrollbar-thumb { border:solid 9px var(--back4);background-color:var(--accent); } -.elysian-left { height:100vh;background-color:var(--dark1);position:fixed;z-index:10;top:0;left:0px;display:grid; } -.elysian-left-icons { padding:35px;display:flex;flex-direction:column;gap:15px; } -.elysian-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; } -.elysian-left-icons a:hover { color:var(--accent); } -.elysian-left .togged { transform:rotate(45deg); } -.elysian-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; } -.elysian-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; } -.elysian-left-icons div:before { content:'';display:block;width:1px;flex-grow:1;background-color:var(--dark3);margin:25px 0px 160px 0px; } -.elysian-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-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; } -.elysian-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); } +.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; } -.elysian-mid input { display:none; } -.elysian-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); } -.elysian-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; } -.elysian-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); } -.elysian-mid-arrow a i::before { display:block;line-height:48px; } -.mid-togged label, .mid-togged .elysian-mid-arrow a { transform:scale(1);opacity:1;pointer-events:auto; } -.elysian-mid label:hover, .elysian-mid input:checked + label, .elysian-mid-arrow a:hover { color:var(--accent); } -.elysian-pop { display:grid;grid-template-rows:100vh 100vh 100vh;transition:var(--slow); } -#elysian-tab-2:checked ~ .elysian-pop { margin-top:-100vh; } -#elysian-tab-3:checked ~ .elysian-pop { margin-top:-200vh; } -.elysian-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; } -.elysian-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; } -.elysian-popout-icon img { height:60px;width:60px;border:solid 7px var(--dark1);border-radius:3px; } -.elysian-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; } -.elysian-popout-icon a i::before { display:block;line-height:35px;} -.elysian-popout-name { text-transform:uppercase;font:47px var(--title);line-height:40px;padding:35px 0px 0px 0px;white-space:nowrap;text-align:right; } -.elysian-popout-name div { font:700 italic 17px var(--font);letter-spacing:3px;line-height:15px;padding-bottom:5px;color:var(--accent); } -.elysian-popout-blurb { font:500 12px var(--body);text-align:justify;line-height:18px;letter-spacing:.25px; } -.elysian-popout-blurb:before { display:block;content:'';height:1px;background-color:var(--border);margin:27px 0px 25px 120px; } -.elysian-popout-blurb span { text-transform:uppercase;font-weight:800!important;line-height:18px;color:var(--accent); } -.elysian-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; } -.elysian-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-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; } -.elysian-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; } -.elysian-nav-name:before { content:'';display:block;position:absolute;height:1px;width:120px;background-color:var(--accent);margin:12px 0px 0px 75px; } -.elysian-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; } -.elysian-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); } -.elysian-nav-links a:before { content:'+';padding-right:15px;color:var(--accent);font-weight:800!important;transition:var(--fast); } -.elysian-nav-links a:hover { color:var(--accent); } -.elysian-nav-links a:hover:before { padding-right:20px; } -.elysian-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; } -.elysian-staff:hover { background-color:var(--back3); } -.elysian-staff div { font:27px var(--title);line-height:20px;padding-bottom:5px;letter-spacing:0px;color:var(--accent);position:relative; } -.elysian-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); } -.elysian-staff i:before { display:block;line-height:75px; } -.elysian-staff-name { font:500 italic 30px var(--font);line-height:20px;color:var(--border);letter-spacing:.5px;padding-right:10px; } -.elysian-up { display:grid;grid-template-columns:50px auto;align-self:stretch;margin-top:20px; } -.elysian-up-icon { display:flex;flex-direction:column; } -.elysian-up-icon div { height:31px;width:31px;padding:5px;border:solid 1px var(--border);border-radius:100%;background-color:var(--back1); } -.elysian-up-icon div img { height:31px;width:31px;border-radius:100%; } -.elysian-up-icon:after { content:'';display:block;width:1px;flex-grow:2;background-color:var(--border);margin:0px 22px; } -.elysian-up-blurb h1 { margin:10px 0px 0px 15px;font:700 15px var(--body);line-height:10px;text-transform:uppercase;color:var(--accent); } -.elysian-up-blurb h2 { margin:5px 0px 15px 15px;font:700 12px var(--body);line-height:10px;text-transform:uppercase;letter-spacing:.25px; } -.elysian-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; } -.elysian-up-blurb div::-webkit-scrollbar { width:10px;background-color:transparent; } -.elysian-up-blurb div::-webkit-scrollbar-thumb { border-left:solid 9px var(--back4);background-color:var(--accent); } -.elysian-up-blurb div a { text-decoration:none;font-weight:700!important;color:var(--accent);transition:var(--fast); } -.elysian-up-blurb div a:hover { color:var(--dark3); } +.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); } -.elysian-right { padding-left:110px;border-right:solid 1px var(--border);color:var(--dark3);transition:var(--slow); } +.Sabellian-right { padding-left:110px;border-right:solid 1px var(--border);color:var(--dark3);transition:var(--slow); } .right-togged { padding-left:430px; } -.elysian-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%); } -.elysian-banner-name { margin-top:-401px;padding-top:401px;position:relative;overflow:hidden;border-bottom:solid 1px var(--border); } -.elysian-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; } -.elysian-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; } -.elysian-banner-name-2 span { display:block;font:700 13px var(--font);letter-spacing:2px;line-height:10px;margin-top:30px; } -.elysian-banner-name-2 span i { font-style:normal!important; } -.elysian-banner-links { display:flex;justify-content:center;gap:10px;margin-top:-110px;position:absolute;z-index:1; } -.elysian-banner-links a, .elysian-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); } -.elysian-banner-links a:hover, .elysian-banner-links-1 b { color:var(--accent); } +.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); } -.elysian-body { padding:65px;position:relative;min-height:200vh; } -.elysian-navigation { background-color:var(--accent);padding:20px;display:flex;gap:10px;text-transform:uppercase;position:sticky;top:0px;z-index:1000000000;overflow:hidden; } -.elysian-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; } -.elysian-navigation a:first-of-type { background-color:var(--dark1); } +.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); } -.elysian-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; } -.elysian-category-img { background-image:var(--banner);background-size:cover;background-position:center;opacity:.35;grid-row-start:1;grid-row-end:2; } -.elysian-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; } -.elysian-category-name div { padding:170px 0px 0px 55px; } -.elysian-category-name div i { position:absolute;font-size:300px;color:var(--accent);opacity:.075;margin:-120px 30px; } -.elysian-category-name div h1 { margin:0px;font:45px var(--title);line-height:35px;color:var(--accent);position:relative;z-index:1; } -.elysian-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; } -.elysian-category-1 { display:grid;gap:20px;grid-template-columns:31% auto 31%; } -.elysian-category-1 div { border:solid 1px var(--border);background-color:var(--back4);min-height:350px; } -.elysian-category-2 { display:grid;gap:20px; } -.elysian-category-2 div { border:solid 1px var(--border);background-color:var(--back4);min-height:250px; } +.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) { - .elysian-category-1 { grid-template-columns:49% auto; } - .elysian-category-1 div:first-of-type { grid-column-start:1;grid-column-end:3; } + .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) { - .elysian-banner-name-1 { font-size:75px; } - .elysian-banner-name-1 span { font-size:11px;letter-spacing:1.5px; } + .Sabellian-banner-name-1 { font-size:75px; } + .Sabellian-banner-name-1 span { font-size:11px;letter-spacing:1.5px; } } @media (max-width: 1100px) { - .elysian-banner-name-1 { font-size:65px;line-height:55px;padding-top:13px; } - .elysian-banner-name-1 span i, .elysian-banner-links-1 { display:none; } - .elysian-category-1 { grid-template-columns: auto; } - .elysian-category-1 div:first-of-type { grid-column-start:1;grid-column-end:2; } + .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) { - .elysian-mid, #js-toggle-sidebar { display:none; } - .elysian-right { padding-left:110px; } + .Sabellian-mid, #js-toggle-sidebar { display:none; } + .Sabellian-right { padding-left:110px; } } \ No newline at end of file