/* ============================================================================ GLITCH ARTWORKS — SHARED CORE (glitch-core.css) Single source of truth for the chrome shared by every page: theme tokens · grain · orbs · scanline · header/nav · social icons · day-night toggle · footer · lightning image-protection. Per-page setup (in each page's , AFTER linking this file): :root{ --accent:#xxxxxx; } night/dark accent :root{ --accent:#xxxxxx; --accent-day:#yyyyyy; } if day needs a darker one Then mark the current nav link with class "active". ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,600;1,300;1,600&display=swap'); *{margin:0;padding:0;box-sizing:border-box;} /* ── Theme tokens ─────────────────────────────────────────────────────────── */ :root{ --bg:#080808; --surface:rgba(8,7,6,0.6); --bone:#f0ebe0; --ink:#0d0c0b; --muted:#7a7268; --muted-inv:#888078; --border:rgba(240,235,224,0.07); --border-inv:rgba(13,12,11,0.08); --line-stroke:rgba(255,255,255,0.09); --gold:#ffbe35; --util-red:#ff4c4c; /* non-category header links: Contact, active Home */ --orb1-col:#ffbe35; --orb2-col:#00e5b0; --text:#ffffff; --text-muted:rgba(255,255,255,0.72); --text-dim:rgba(255,255,255,0.35); --card-bg:rgba(8,8,8,0.6); --card-border:rgba(240,235,224,0.08); --logo-filter:none; --header-bg:rgba(8,8,8,0.0); --footer-bg:rgba(8,7,6,0.0); --scan-col:rgba(240,235,224,0.03); --grain-opacity:0.35; /* Category palette — the single, canonical source of truth. Used by the nav links so all six always render identically site-wide. */ --cat-branding:#4a7fc1; --cat-uiux:#fff34f; /* bright lemon — night */ --cat-uiux-day:#c9962a; /* deeper amber — day, legible on light bg */ --cat-digital:#3aad6e; --cat-art:#c13a3a; --cat-3d:#7c5cbf; --cat-arch:#ff7f00; /* Effective page accent. Pages set --accent (and optionally --accent-day). Chrome reads --accent-eff so day/night swaps happen automatically. */ --accent:var(--gold); --accent-eff:var(--accent); transition: background 0.6s ease, color 0.6s ease; } :root.day{ --bg:#f8f6f1; --surface:rgba(248,246,241,0.75); --bone:#f0ebe0; --muted:#999188; --border:rgba(13,12,11,0.07); --line-stroke:rgba(0,0,0,0.07); --text:#000000; --text-muted:rgba(0,0,0,0.82); --text-dim:rgba(0,0,0,0.55); --card-bg:rgba(248,246,241,0.82); --card-border:rgba(13,12,11,0.09); --logo-filter:invert(1) brightness(0.05); --header-bg:rgba(248,246,241,0.45); --scan-col:rgba(0,0,0,0.015); --grain-opacity:0.18; --cat-uiux:var(--cat-uiux-day); /* lemon → amber for legibility on light */ --accent-eff:var(--accent-day, var(--accent)); } html,body{width:100%;min-height:100vh;background:var(--bg);color:var(--text);font-family:"Syne",sans-serif;overflow-x:hidden;transition:background 0.6s ease,color 0.6s ease;} /* ── Grain ────────────────────────────────────────────────────────────────── */ body::after{content:"";position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:50;opacity:var(--grain-opacity);transition:opacity 0.6s;} /* ── Orbs ─────────────────────────────────────────────────────────────────── */ .orb{position:fixed;border-radius:50%;filter:blur(130px);opacity:0.06;pointer-events:none;z-index:0;transition:opacity 0.6s,background 0.6s;} .orb1{width:700px;height:700px;background:var(--accent-eff);top:-250px;left:-250px;} .orb2{width:600px;height:600px;background:var(--orb2-col);bottom:-200px;right:-200px;} .orb3{width:350px;height:350px;background:var(--accent-eff);top:30%;left:38%;transform:translate(-50%,-50%);transition:background 0.8s ease;} :root.day .orb{opacity:0.05;} :root.day .orb1{opacity:0.04;} :root.day .orb2{opacity:0 !important;} :root.day .orb3{opacity:0.04;} /* ── HEADER ───────────────────────────────────────────────────────────────── */ header{ position:fixed;top:0;left:0;right:0;z-index:100; height:50px; display:flex;align-items:center;justify-content:space-between; padding:0 28px; background:var(--header-bg); backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%); border-bottom:none; transition:background 0.6s,border-color 0.6s; } .hdr-logo span{display:none;} /* Full-bleed gallery pages: the floating header would vanish over the artwork, so give it a solid bar with a hairline edge. Other pages stay transparent. */ :root.is-gallery header{background:linear-gradient(180deg,rgba(255,255,255,0.07),rgba(255,255,255,0) 65%),rgba(8,7,6,0.18);border-bottom:none;box-shadow:inset 0 1px 0 rgba(255,255,255,0.11);} :root.day.is-gallery header{background:linear-gradient(180deg,rgba(255,255,255,0.62),rgba(255,255,255,0.16) 70%),rgba(248,246,241,0.22);border-bottom:none;box-shadow:inset 0 1px 0 rgba(255,255,255,0.85);} /* Transparent glass needs a touch of shadow so text stays legible over bright artwork */ :root.is-gallery .nav-link,:root.is-gallery .foot-l,:root.is-gallery .foot-c,:root.is-gallery .foot-r{text-shadow:0 1px 6px rgba(0,0,0,0.55);} :root.day.is-gallery .nav-link,:root.day.is-gallery .foot-l,:root.day.is-gallery .foot-c,:root.day.is-gallery .foot-r{text-shadow:0 1px 6px rgba(255,255,255,0.65);} .hdr-left{display:flex;align-items:center;gap:32px;} .hdr-logo{ width:30px;height:30px;border-radius:8px; display:flex;align-items:center;justify-content:center; text-decoration:none; background:linear-gradient(155deg,rgba(64,61,74,0.80),rgba(22,20,28,0.74)); border:0.5px solid rgba(255,255,255,0.10); box-shadow:0 2px 8px rgba(0,0,0,0.45),0 1px 0 rgba(255,255,255,0.10) inset; backdrop-filter:blur(8px) saturate(140%);-webkit-backdrop-filter:blur(8px) saturate(140%); transition:transform 0.18s,box-shadow 0.22s,background 0.6s; opacity:0.90;position:relative;overflow:hidden; } :root.day .hdr-logo{ background:linear-gradient(155deg,rgba(255,255,255,0.78),rgba(255,255,255,0.45)); border:0.5px solid rgba(0,0,0,0.08); box-shadow:0 1px 4px rgba(60,50,35,0.07),0 1px 0 rgba(255,255,255,1) inset; } .hdr-logo::before{ content:"";position:absolute;top:0;left:10%;width:80%;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent); pointer-events:none; } .hdr-logo:hover{opacity:1;transform:scale(1.10) translateY(-1px);} .hdr-logo.active{background:color-mix(in srgb,var(--util-red) 22%,transparent);border-color:color-mix(in srgb,var(--util-red) 38%,transparent);} .hdr-logo.active svg{fill:var(--util-red);filter:drop-shadow(0 0 4px var(--util-red));} .hdr-logo svg{width:14px;height:14px;fill:var(--text);transition:fill 0.6s;position:relative;z-index:1;} nav{display:flex;align-items:center;gap:24px;} .nav-link{ font-size:11.3px;letter-spacing:0.28em;text-transform:uppercase; color:var(--text-muted);text-decoration:none; transition:color 0.25s,border-color 0.25s;padding:2px 0; border-bottom:0.5px solid transparent; } .nav-link:hover{color:var(--cat,var(--gold));border-bottom-color:var(--cat,var(--gold));} .nav-link.active{color:var(--cat,var(--gold));border-bottom-color:var(--cat,var(--gold));} .hdr-right{display:flex;align-items:center;gap:14px;} /* ── Social icons — glass app-icon style ──────────────────────────────────── */ .soc-icon{ width:30px;height:30px;border-radius:8px; display:flex;align-items:center;justify-content:center; text-decoration:none;flex-shrink:0;color:#fff; position:relative;overflow:hidden; background:linear-gradient(155deg,rgba(64,61,74,0.80),rgba(22,20,28,0.74)); border:0.5px solid rgba(255,255,255,0.10); box-shadow:0 2px 8px rgba(0,0,0,0.45),0 1px 0 rgba(255,255,255,0.10) inset; backdrop-filter:blur(8px) saturate(140%);-webkit-backdrop-filter:blur(8px) saturate(140%); transition:transform 0.18s,box-shadow 0.22s; opacity:0.90; } .soc-icon::after{ content:"";position:absolute; bottom:-4px;left:10%;width:80%;height:55%; border-radius:50%;filter:blur(7px); opacity:0.75;z-index:0;transition:opacity 0.2s,transform 0.2s; } .soc-icon::before{ content:"";position:absolute; top:0;left:10%;width:80%;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent); z-index:2;pointer-events:none; } .soc-icon svg{position:relative;z-index:1;width:14px;height:14px;} .soc-icon:hover{ opacity:1;transform:scale(1.12) translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,0.55),0 1px 0 rgba(255,255,255,0.10) inset; } .soc-icon:hover::after{opacity:1;transform:scaleX(1.2);} .soc-ig::after,.soc-fb::after,.soc-wa::after,.soc-li::after,.soc-yt::after,.soc-tt::after{background:#ff4c4c;} :root.day .soc-icon{ background:linear-gradient(155deg,rgba(255,255,255,0.78),rgba(255,255,255,0.45)); border:0.5px solid rgba(0,0,0,0.08); box-shadow:0 1px 4px rgba(60,50,35,0.07),0 1px 0 rgba(255,255,255,1) inset; color:#1a1a1a; } :root.day .soc-icon::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,0.7),transparent);} :root.day .soc-icon::after{opacity:0.16;} :root.day .soc-icon:hover{box-shadow:0 3px 10px rgba(60,50,35,0.10),0 1px 0 rgba(255,255,255,1) inset;} :root.day .soc-icon:hover::after{opacity:0.80;} :root.day .soc-ig svg,:root.day .soc-fb svg,:root.day .soc-wa svg, :root.day .soc-li svg,:root.day .soc-yt svg,:root.day .soc-tt svg{color:#1a1a1a;} /* ── Neumorphic day/night toggle ──────────────────────────────────────────── */ .theme-float{ position:fixed;top:58px;right:22px;z-index:110; width:34px;height:34px;border-radius:50%; background:transparent;border:none;cursor:pointer;padding:0; display:flex;align-items:center;justify-content:center; color:var(--text-muted); transition:color .3s,transform .35s cubic-bezier(.34,1.4,.5,1); } .theme-float:hover{color:var(--text);transform:scale(1.14) rotate(10deg);} :root.day .theme-float{color:#d99a1f;} :root.day .theme-float:hover{color:#e8a820;} .theme-float svg{display:block;} /* ── Custom cursor — dot + ring + glow, white on dark / black on light ─────── */ #cursor{position:fixed;pointer-events:none;z-index:9999;top:0;left:0;} #cursor .dot{width:5px;height:5px;border-radius:50%;background:var(--cursor-col,var(--text));position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 8px var(--cursor-col,var(--text)),0 0 16px color-mix(in srgb,var(--cursor-col,var(--text)) 45%,transparent);transition:transform 0.15s,background 0.6s,box-shadow 0.6s;} #cursor .ring{width:28px;height:28px;border-radius:50%;border:0.5px solid color-mix(in srgb,var(--cursor-col,var(--text)) 40%,transparent);position:absolute;transform:translate(-50%,-50%);transition:width 0.3s,height 0.3s,border-color 0.3s;} #cursor.hover .dot{transform:translate(-50%,-50%) scale(2.5);} #cursor.hover .ring{width:48px;height:48px;border-color:color-mix(in srgb,var(--cursor-col,var(--text)) 70%,transparent);} #cursor-glow{position:fixed;pointer-events:none;z-index:8999;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--cursor-col,var(--text)) 11%,transparent) 0%,color-mix(in srgb,var(--cursor-col,var(--text)) 4%,transparent) 40%,transparent 70%);transform:translate(-50%,-50%);opacity:0;transition:opacity 0.4s;top:0;left:0;} /* Hide the native pointer only on real mouse devices; leave touch untouched */ @media (hover:hover) and (pointer:fine){ *{cursor:none !important;} } @media (hover:none),(pointer:coarse){ #cursor,#cursor-glow{display:none !important;} } /* Plain pages (Home / About / Contact): no cursor glow in either mode — clean dot + ring. Category pages keep their accent glow (set via JS at line ~36, untouched here). */ :root.plain-cursor #cursor-glow{display:none;} :root.plain-cursor #cursor .dot{box-shadow:none;} /* ── Generic scanline ─────────────────────────────────────────────────────── */ /* Reads --accent-eff so each page's category colour applies automatically. Home and Architecture override this locally (see their own