/* ========================================================== EDIT WEBSITE COLORS HERE ---------------------------------------------------------- Every colour on the website comes from this list. Change a value, save, refresh the browser — the whole site updates. Your artwork is never recoloured. ========================================================== */ :root { --color-bg: #0a0a0a; /* page background */ --color-text: #f5f5f2; /* main text, big type, name */ --color-muted: #9a9a9a; /* small secondary text, numbers */ --color-border: #333333; /* thin rules, frames, dividers */ --color-accent: #f5f5f2; /* giant words (PORTFOLIO, TEDUFASH) */ --color-link: #f5f5f2; /* links */ --color-hover: #9a9a9a; /* links when the mouse is over them */ --color-focus: #f5f5f2; /* keyboard focus outline */ --color-paper: #161616; /* surface behind CTLAB clippings */ --color-panel: #f5f5f2; /* white box on the PORTFOLIO page */ --color-panel-text:#0a0a0a; /* text inside that white box */ --color-panel-line:#bdbdb8; /* thin lines inside that white box */ --cover-filter: grayscale(1) brightness(.45) contrast(1.15); /* black & white background on MAGAZINE */ --magazine-bg: #94090d; /* red background of the MAGAZINE page */ --ctlab-bg: #f8f5ef; /* off-white background of the CTLAB page */ --ctlab-texture: url("../../assets/texture/ctlab-texture.jpg"); --ctlab-texture-left: url("../../assets/texture/ctlab-stems.jpg"); --ctlab-texture-opacity: .55; /* 0 = no texture, 1 = full strength */ --ctlab-ink: #111111; /* text + handwriting on the CTLAB page */ --ctlab-muted: #6f685c; --ctlab-line: #cfc6b5; --contact-panel: #d9d9d3; /* light grey box on the CONTACT page */ --contact-ink: #111111; /* text inside that box */ --about-bg: #ffffff; /* white paper of the ABOUT section */ --about-ink: #0b0b0b; /* black text on it */ --about-paper: #eeeeec; /* torn-paper patches (names, menu) */ --video-band: #26303c; /* strip behind the video between ABOUT and CV */ --posters-bg-dim: .88; /* darkening over the POSTERS background image: 0 = none, 1 = black */ } /* ========================================================== BACKGROUND TEXTURE (behind the black on the PORTFOLIO page) opacity: 0 = no texture, 1 = full image ========================================================== */ :root { --texture-image: url("../../assets/texture/background.jpg"); --texture-opacity: .55; --texture-saturation: .9; } /* ========================================================== FONTS (loaded from Google Fonts in each page's ) ========================================================== */ :root { --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif; /* body, nav, CV, labels */ --font-hand: "Mansalva", "Marker Felt", cursive; /* HELİN ERGİN, ABOUT ME */ --font-wide: "Archivo", "Arial Black", sans-serif; /* PORTFOLIO, TEDUFASH */ --font-tall: "League Gothic", "Arial Narrow", sans-serif; /* magazine / posters … on PORTFOLIO page */ --wide-stretch: 125%; /* width of the giant words (62%–125%) */ --wide-weight: 900; /* weight of the giant words (100–900) */ } /* ========================================================== SPACING / MOTION (you rarely need to touch these) ========================================================== */ :root { --gutter: clamp(16px, 4vw, 64px); --ease: cubic-bezier(.2, .7, .2, 1); --speed: 600ms; }