/* ##### ##### ##### ##### - FF v2025 CSS - ##### ##### ##### ##### */ @charset "utf-8"; /* ---------- RESET CSS --------- */ /* Use a more-intuitive box-sizing model */ *, *::before, *::after { box-sizing: border-box; } /* Remove default margin & Avoid text overflows */ *, body, h1, h2, h3, h4, h5, h6, p, blockquote, figure, ol, ul { margin:0; padding:0; overflow-wrap: break-word; } /* Typographic tweaks! Add accessible line-height - Improve text rendering */ body { -webkit-font-smoothing: antialiased; } /* Improve media defaults */ img, picture, video, canvas, svg { display: block; max-width: 100%; height:auto; } /* Remove built-in form typography styles */ input, button, textarea, select { font: inherit; } /* Remove default style from links */ a { color:inherit; text-decoration:none; } /* ---------- RESET CSS --------- */ /* ---------- VARIABLES ---------- */ :root { --width: 90%; --min-width: 480px; --max-width: 1440px; /* https://www.joshwcomeau.com/gradient-generator?colors=38008b|ffc300&angle=90&colorMode=hcl&precision=6&easingCurve=0.25|0.75|0.75|0.25 */ --gradient-sunrise: linear-gradient(90deg, #7700af 0%, #ed00b8 27%, #ff7e00 52%, #ffc000 66%, transparent 100%); --gradient-fadetoblack: linear-gradient(90deg, transparent 0%, #000 100%); } /* ---------- VARIABLES ---------- */ /* ---------- MAIN STRUCTURE ---------- */ .wrapper { width:var(--width); min-width:var(--min-width); max-width:var(--max-width); margin:0 auto; } section { padding:4rem 0; } header { padding: 0; } footer { padding: 3rem 0; } section { background-color:#292929; } section:nth-child(even) { background-color:#242424; } body, header , footer { background-color:#171717; } /* ---------- MAIN STRUCTURE ---------- */ /* ------------ FONT SCHEME ------------ */ /* include from google : Oswald:400,700|Roboto+Condensed:400,70 */ body { font-family:'roboto condensed',Tahoma,sans-serif; font-size:16px; line-height: 1.3; color:#FFF; } p { text-align:justify; margin-top:1rem; } p:first-of-type { margin-top:0; } p.min { font-size:14px; } a { color:#ff9800; } a:hover { color:#FFF; animation: flashing 1.4s infinite alternate; } h1 , h2 { font-family:'Oswald',impact,sans-serif; font-weight:normal; text-transform:uppercase; color:#FFF; display:inline-block; } h1 { font-size:clamp(1.8rem, 4vw, 3.2rem); line-height:clamp(1.8rem, 4vw, 3.2rem); } h2 { font-size:clamp(1.4rem, 3vw, 2.2rem); line-height:2.2rem; } h1:after { content:""; display:block; height:1.2rem; background-image:var(--gradient-sunrise); margin-bottom:1.6rem; } h2:after { content:""; display:block; height:0.6rem; background-image:var(--gradient-sunrise); margin-bottom:0.8rem; } h3 { font-family:'Oswald',impact,sans-serif; font-weight:normal; text-transform:uppercase; color:#FFF; } h4 { font-family:'roboto condensed',Tahoma,sans-serif; font-weight:bold; text-transform:uppercase; color:#FFF; margin-bottom:1rem; } h4 { background:#ff9800; color:#131313; text-align:left; padding:4px 8px; } /* ------------ FONT SCHEME ------------ */ /* -------- HEAD FOOT & SECTIONS -------- */ #header-grid { font-family:'Oswald',impact,sans-serif; text-transform:uppercase; } #header-grid { display: grid; grid-template-columns:auto auto; justify-content:space-between; } #footer-grid { display: grid; grid-template-areas: "network letter who" ". legal legal"; grid-template-columns: 1fr 1fr 1fr; gap:2rem; } #footer-grid-who { grid-area: who; } #footer-grid-letter { grid-area: letter; } #footer-grid-network { grid-area: network; display:flex; flex-direction:row; } #footer-grid-network a img { width:48px; } #footer-grid-network a { margin-right:0.5rem; } #footer-grid-legal { grid-area:legal; color:#777; font-size:clamp(0.7rem,1.3vw,0.9rem); line-height:0.9rem; text-align:right; align-self:center; } #footer-grid-legal a , #footer-grid-legal a:hover { color:inherit; animation:none; } #home { display: grid; grid-template-columns: 2fr 1fr; gap:3rem; } #home #connect a { display:block; } #home #connect a:hover { background:#212121; } #introduce { display: grid; grid-template-columns: 3fr 1fr; gap:3rem; } @media screen and (max-width: 960px) { .hide840 { display:none; } #home { grid-template-columns: 1fr; } } @media screen and (max-width: 680px) { .hide600 { display:none; } } /* -------- HEAD FOOT & SECTIONS -------- */ /* --------------- INPUT --------------- */ input , button { overflow:visible; font:inherit; color:inherit; letter-spacing:inherit; -webkit-font-smoothing:inherit; background:none; border:none; } input[type="text"] , input[type="email"] , input[type="submit"] { background:#232323; color:#ff9800; font-size:1rem; padding:8px; } input[type="submit"] { text-align:center; text-transform:uppercase; cursor:pointer; background:#272727; } input[type="submit"]:hover { color:#FFF; animation: flashing 1.4s infinite alternate; } /* --------------- INPUT --------------- */ /* ---------------- ITEMS ---------------- */ .tracclist { font-size:14px;font-weight:bold; text-transform:uppercase; } .tracclist a { display: grid; grid-template-columns: auto 4fr 8.5fr auto; padding:8px 16px; background:#333; gap:16px; margin-bottom:2px; } .tracclist .num { color:#9a9a9a; } /* num */ .tracclist .onoff { color:chartreuse; text-align:left; } /* play */ .tracclist .art { color:#ff9800; text-align:right; } /* artist */ .tracclist .tit { color:#fff; text-align:left; } /* title */ /* ---------------- ITEMS ---------------- */ /* --------------- WIDGETS --------------- */ #lgtbox { display:block; position:fixed; left:0; top:0; width:100%; height:100%; z-index:7; background:rgba(0,0,0,0.87); text-align:center; cursor:pointer; } #lgtbox img { display:inline-block; border:solid #aaa 2px; max-width:calc(100% - 2rem); max-height:calc(95% - 5rem); margin:1rem; } #lgtbox p { padding:1rem 0; text-align:center; font-size:1.2rem; font-weight:bold; text-transform:uppercase; color:#ff9800; background:#131313; } /* --------------- WIDGETS --------------- */ /* ---------- ANIMATION SPECIAL ---------- */ @keyframes flashing { 0%, 18%, 21%, 32%, 35%, 39%, 42%, 100% { text-shadow: 0 -1px 4px #FFF, 0 -2px 10px #ff0, 0 -10px 20px #ff8000, 0 -18px 40px #F00; } 20%, 34%, 41% { text-shadow: none; } } /* ---------- ANIMATION SPECIAL ---------- */