/* Theme Name: Colab Theme URI: https://colab.org Author: Colab Studio Description: Custom dark editorial portfolio theme for Colab architecture studio. Version: 1.1.0 Requires at least: 6.0 Requires PHP: 7.4 License: Private Text Domain: colab */ /* ───────────────────────────────────────── TOKEN SYSTEM (default = dark) ───────────────────────────────────────── */ :root { --bg: transparent; --bg-2: rgba(30,27,24,0.55); --bg-3: rgba(46,46,46,0.6); --line: #444444; --line-2: #333333; --text: #f0ede6; --text-muted: #888888; --text-dim: #555555; --accent: #85D6B6; --accent-dark: #2C6F6F; --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-body: 'Inter', sans-serif; --ease: cubic-bezier(.19,1,.22,1); --pad-x: clamp(24px, 5vw, 80px); --pad-y: clamp(40px, 6vw, 80px); --max-w: 1400px; --radius-sm: 2px; --radius-md: 4px; } /* ── Light — segue il sistema ── */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: transparent; --bg-2: rgba(222,222,222,0.55); --bg-3: rgba(212,212,212,0.6); --line: #c0c0c0; --line-2: #b0b0b0; --text: #161412; --text-muted: #444444; --text-dim: #888888; --accent: #2C6F6F; --accent-dark: #85D6B6; } } /* ── Dark forzato ── */ [data-theme="dark"] { --bg: transparent; --bg-2: rgba(30,27,24,0.55); --bg-3: rgba(46,46,46,0.6); --line: #444444; --line-2: #333333; --text: #f0ede6; --text-muted: #888888; --text-dim: #555555; --accent: #85D6B6; --accent-dark: #2C6F6F; } /* ── Light forzato ── */ [data-theme="light"] { --bg: transparent; --bg-2: rgba(222,222,222,0.55); --bg-3: rgba(212,212,212,0.6); --line: #c0c0c0; --line-2: #b0b0b0; --text: #161412; --text-muted: #444444; --text-dim: #888888; --accent: #2C6F6F; --accent-dark: #85D6B6; } /* ── Logo cerchi ── */ [data-theme="light"] .site-logo circle, [data-theme="light"] #colab-logo circle { fill: #161412; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .site-logo circle, :root:not([data-theme]) #colab-logo circle { fill: #161412; } } /* ── Transizioni ── */ html { transition: color .35s; } *, *::before, *::after { transition: background-color .35s, border-color .35s, color .3s; } /* ───────────────────────────────────────── WEBGL CANVAS BACKGROUND ───────────────────────────────────────── */ #gl-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; } /* ───────────────────────────────────────── RESET + BASE ───────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { background: transparent; color: var(--text); font-family: var(--font-body); font-weight: 300; line-height: 1.6; overflow-x: hidden; cursor: none; } img, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: none; background: none; border: none; } ul, ol { list-style: none; } /* ───────────────────────────────────────── CUSTOM CURSOR ───────────────────────────────────────── */ .cursor { position: fixed; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--text); pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); transition: width .3s var(--ease), height .3s var(--ease), background .3s, border .3s; will-change: transform; } .cursor.is-hovering { width: 44px; height: 44px; background: transparent; border: 1px solid var(--text); mix-blend-mode: difference; } .cursor.is-link { width: 52px; height: 52px; background: transparent; border: 1px solid var(--text); } /* ───────────────────────────────────────── TYPOGRAPHY HELPERS ───────────────────────────────────────── */ .t-eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); } .t-display { font-family: var(--font-display); font-weight: 800; line-height: .92; letter-spacing: -.03em; color: var(--text); } .t-display--xl { font-size: clamp(52px, 9vw, 120px); } .t-display--lg { font-size: clamp(36px, 6vw, 72px); } .t-display--md { font-size: clamp(24px, 4vw, 48px); } .t-body-lg { font-size: 16px; color: var(--text-muted); line-height: 1.8; } .t-body { font-size: 14px; color: var(--text-muted); line-height: 1.8; } .t-label { font-size: 11px; color: var(--text-dim); letter-spacing: .1em; text-transform: uppercase; } .border-top { border-top: 1px solid var(--line); } .border-bottom { border-bottom: 1px solid var(--line); } /* ───────────────────────────────────────── HEADER ───────────────────────────────────────── */ .site-header { position: relative; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 24px var(--pad-x); border-bottom: 1px solid transparent; transition: border-color .4s, background .4s; } .site-header.is-scrolled { border-color: var(--line); background: rgba(22,20,18,.72); backdrop-filter: blur(16px); } [data-theme="light"] .site-header.is-scrolled { background: rgba(234,234,234,.72); } .site-logo { display: flex; align-items: center; width: 40px; height: 40px; } .site-logo svg { overflow: visible; } /* ───────────────────────────────────────── NAV PRIMARY ───────────────────────────────────────── */ .nav-primary { display: flex; gap: 36px; align-items: center; } .nav-primary a { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); position: relative; transition: color .25s; } .nav-primary a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--accent); transition: width .3s var(--ease); } .nav-primary a:hover, .nav-primary a.current-menu-item { color: var(--text); } .nav-primary a:hover::after, .nav-primary a.current-menu-item::after { width: 100%; } /* WordPress wraps menu items in