/* ============================================================ LaB MEDIA — DESIGN SYSTEM One stylesheet. One token set. One nav. One footer. Replaces 11 divergent :root blocks and 9 nav markups. Direction: Editorial Display Instrument Serif Body Inter Labels Space Mono ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root{ /* Surface */ --paper: #0B0B0C; /* page */ --paper-2: #111112; /* raised / hover */ --paper-3: #17171A; /* input / well */ /* Ink */ --ink: #F4F1EC; /* primary text */ --dim: #A29D95; /* secondary text (AA on --paper) */ --faint: #857F76; /* tertiary / meta — 4.69:1 on paper, 4.50:1 on raised (AA) */ /* Line */ --line: rgba(244,241,236,.13); --line-2: rgba(244,241,236,.26); /* Accent */ --accent: #E07A47; /* warm ember (AA on --paper) */ --accent-dim: rgba(224,122,71,.32); --accent-bg: rgba(224,122,71,.09); /* SkyBound's own colour — pale sky, AA in every theme */ --sky: #A9CDE4; /* Affirmative green — free, verified, would-buy-again. Per-theme because a single value cannot clear AA on both a near-black and a near-white page. */ --good: #7FC8A0; --good-dim: rgba(127,200,160,.34); --good-bg: rgba(127,200,160,.09); /* Type */ --f-display: 'Instrument Serif', Georgia, 'Times New Roman', serif; --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --f-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace; --t-xs: 11px; --t-sm: 13.5px; --t-base: 15.5px; --t-lg: 18px; --t-xl: clamp(26px, 3.4vw, 38px); --t-2xl: clamp(34px, 5vw, 56px); --t-3xl: clamp(44px, 8vw, 104px); /* Space */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 80px; --s-10: 112px; --s-11: 160px; --gutter: clamp(22px, 4vw, 44px); --maxw: 1400px; /* Motion */ --ease: cubic-bezier(.4, 0, .2, 1); --fast: 200ms; --mid: 350ms; --slow: 600ms; --radius: 2px; /* ---- Compatibility aliases ---- Older pages (Story Generator, SkyBound, archive, 404) were written against these names. Mapping them here means those pages inherit the new palette without touching their internals. Delete once every page has been fully rebuilt. */ --black: #0B0B0C; --white: #F4F1EC; --gray-100: #F4F1EC; --gray-200: #C9C4BC; --gray-300: #B4AFA7; --gray-400: #A29D95; --gray-600: #857F76; --gray-800: #17171A; --gray-900: #111112; --gray-500: #918B82; --accent-blue: #E07A47; --lab-orange: #E07A47; --lab-green: #7FC8A0; --lab-purple: #B08BD4; /* SkyBound's own names */ --near-black: #0B0B0C; --dark-gray: #111112; --gray: #A29D95; --light-gray: #C9C4BC; --accent-strong:#E07A47; --accent-text: #0B0B0C; /* Story Generator's proto accents, re-tuned to the editorial palette */ --proto-orange: #E07A47; --proto-cyan: #7FC8A0; --proto-green: #7FC8A0; } /* ---------- 1b. THEMES ---------- Dark is the default and is defined above — these only override. Every value below is checked to WCAG AA against both surfaces. Set via data-theme on . */ :root[data-theme="light"]{ --paper: #FBFAF7; --paper-2: #F3F1EC; --paper-3: #EAE7E0; --ink: #171614; --dim: #57534B; /* 6.78:1 */ --faint: #6C675E; --line: rgba(23,22,20,.14); --line-2: rgba(23,22,20,.28); --accent: #A64E1D; /* darkened ember, same hue family */ --accent-dim: rgba(166,78,29,.34); --accent-bg: rgba(166,78,29,.07); --sky: #2F6285; --good: #2C6E49; /* 5.86:1 on paper, 4.95:1 on the well */ --good-dim: rgba(44,110,73,.36); --good-bg: rgba(44,110,73,.07); --shade: rgba(251,250,247,.55); color-scheme: light; } /* Sepia — muted autumn. Weathered wood ground, bone ink, ochre accent. Dark like the default but warm rather than red: lifted from 6% to 12% lightness with chroma cut from 59% to 27%. */ :root[data-theme="sepia"]{ --paper: #211D18; /* weathered wood */ --paper-2: #2A251F; /* raised */ --paper-3: #342E26; /* well */ --ink: #EDE5D8; /* 10.74:1 — bone */ --dim: #B9AC99; /* 6.02:1 */ --faint: #9F9585; /* 4.54:1 */ --line: rgba(237,229,216,.15); --line-2: rgba(237,229,216,.28); --accent: #C98F55; /* 4.82:1 — ochre, not orange */ --accent-dim: rgba(201,143,85,.36); --accent-bg: rgba(201,143,85,.10); --sky: #A9C6DC; --good: #8FCBA6; /* 8.9:1 on the sepia ground */ --good-dim: rgba(143,203,166,.34); --good-bg: rgba(143,203,166,.09); --shade: rgba(33,29,24,.55); color-scheme: dark; } :root{ --shade: rgba(11,11,12,.55); } /* overlay tint used on media */ /* Media reads differently per theme: warm the stills in sepia, and don't fully desaturate on light where the page has no darkness to hide in. */ :root[data-theme="sepia"] .card-thumb img, :root[data-theme="sepia"] .vid-btn img, :root[data-theme="sepia"] .reel-btn img, :root[data-theme="sepia"] .still img, :root[data-theme="sepia"] .rv-btn img{filter:sepia(.42) saturate(.92) contrast(1.02)} :root[data-theme="sepia"] .card:hover .card-thumb img, :root[data-theme="sepia"] .vid-btn:hover img, :root[data-theme="sepia"] .reel-btn:hover img, :root[data-theme="sepia"] .still:hover img, :root[data-theme="sepia"] .rv-btn:hover img{filter:sepia(0) contrast(1)} :root[data-theme="light"] .card-thumb img, :root[data-theme="light"] .vid-btn img, :root[data-theme="light"] .reel-btn img, :root[data-theme="light"] .still img, :root[data-theme="light"] .rv-btn img{filter:grayscale(.72) contrast(1.02)} /* Anything sitting ON TOP of a photo keeps a dark scrim and light text in every theme — otherwise light/sepia would put dark text on a dark image. */ .card-play,.vid-play,.reel-play,.rv-play{background:rgba(11,11,12,.55);border-color:rgba(244,241,236,.55)} .card-play svg,.vid-play svg,.reel-play svg,.rv-play svg{fill:#F4F1EC} .vid-label,.reel-tag{background:rgba(11,11,12,.65);color:#CFC9C0} /* on hover the accent fills the button, so the glyph flips to the page colour */ .card:hover .card-play svg, .vid-btn:hover .vid-play svg,.vid-btn:focus-visible .vid-play svg, .reel-btn:hover .reel-play svg,.reel-btn:focus-visible .reel-play svg, .rv-btn:hover .rv-play svg,.rv-btn:focus-visible .rv-play svg{fill:var(--paper)} /* ---------- 1c. THEME SWITCH ---------- */ .theme{display:flex;align-items:center;gap:2px;border:1px solid var(--line);padding:2px;flex:none} .theme button{ width:30px;height:26px;display:grid;place-items:center; transition:background var(--fast) var(--ease); } .theme button:hover{background:var(--paper-2)} .theme button[aria-pressed="true"]{background:var(--paper-3)} .theme .sw{width:13px;height:13px;border-radius:50%;border:1px solid var(--line-2);display:block} .theme button[aria-pressed="true"] .sw{border-color:var(--accent)} .sw-dark{background:#0B0B0C} .sw-light{background:#FBFAF7} .sw-sepia{background:#3A342B} /* Colour changes shouldn't strobe when switching */ body,.nav,.foot,.card,.tool,.item,.grp-d summary,.ev,.d-links a,.contact-card,.spec > div,.d-info > div{ transition:background-color var(--mid) var(--ease),border-color var(--mid) var(--ease),color var(--mid) var(--ease); } /* ---------- 2. RESET ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px} body{ background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:var(--t-base); font-weight:300; line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input,textarea,select{font:inherit;color:inherit} ::selection{background:var(--accent);color:var(--paper)} /* Focus — visible, never suppressed */ :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px} /* visually hidden, still read aloud */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip-link{ position:absolute;left:-9999px;top:0;z-index:9999; background:var(--accent);color:var(--paper); padding:12px 20px;font-family:var(--f-mono);font-size:var(--t-xs); letter-spacing:.12em;text-transform:uppercase; } .skip-link:focus{left:0} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- 3. PRIMITIVES ---------- */ .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .mono{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; font-weight:400; } .serif{font-family:var(--f-display);font-weight:400;letter-spacing:-.02em;line-height:1.04} /* Rule with flanking labels — the editorial signature */ .rule{display:flex;align-items:center;gap:var(--s-4)} .rule i{flex:1;height:1px;background:var(--line);border:0} .rule .mono{color:var(--dim);white-space:nowrap} /* Section heading */ .sec{padding-block:clamp(56px,8vw,var(--s-10));border-bottom:1px solid var(--line)} .sec-head{display:flex;align-items:baseline;gap:var(--s-4);margin-bottom:var(--s-8);flex-wrap:wrap} .sec-head h2{font-family:var(--f-display);font-size:var(--t-xl);font-weight:400;letter-spacing:-.015em} .sec-head i{flex:1;height:1px;background:var(--line);min-width:30px} .sec-head .more{ font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em; text-transform:uppercase;color:var(--accent);white-space:nowrap; border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color var(--fast) var(--ease); } .sec-head .more:hover{border-bottom-color:var(--accent)} /* Buttons */ .btn{ display:inline-flex;align-items:center;gap:10px; font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.15em;text-transform:uppercase; padding:14px 24px;border:1px solid var(--line-2);border-radius:var(--radius); transition:background var(--fast) var(--ease),color var(--fast) var(--ease),border-color var(--fast) var(--ease); } .btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)} .btn-accent{border-color:var(--accent-dim);color:var(--accent)} .btn-accent:hover{background:var(--accent);color:var(--paper);border-color:var(--accent)} .btn .arw{transition:transform var(--fast) var(--ease)} .btn:hover .arw{transform:translateX(4px)} /* Inline text link */ .tlink{ font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.15em;text-transform:uppercase; color:var(--accent);display:inline-flex;gap:10px;align-items:center; border-bottom:1px solid var(--accent-dim);padding-bottom:4px; transition:border-color var(--fast) var(--ease); } .tlink:hover{border-bottom-color:var(--accent)} .tlink .arw{transition:transform var(--fast) var(--ease)} .tlink:hover .arw{transform:translateX(4px)} /* Pill / tag */ .pill{ display:inline-block;font-family:var(--f-mono);font-size:10px;letter-spacing:.13em; text-transform:uppercase;color:var(--dim); border:1px solid var(--line);border-radius:100px;padding:5px 12px; } .pill-accent{color:var(--accent);border-color:var(--accent-dim)} /* ---------- 4. NAV (shared, every page) ---------- */ .nav{ position:sticky;top:0;z-index:600; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--line); } .nav-in{ max-width:var(--maxw);margin-inline:auto;padding:var(--s-4) var(--gutter);min-height:58px; display:flex;align-items:center;gap:var(--s-5); } .nav-links{margin-left:auto} /* pushes links + switch to the right edge */ .nav-logo{height:26px;width:auto;opacity:.94;transition:opacity var(--fast) var(--ease)} .nav-logo.is-mark{height:30px} /* The LaB mark reads smaller, so give it more */ .nav-brand:hover .nav-logo{opacity:1} .nav-links{display:flex;align-items:center;gap:var(--s-6);list-style:none} .nav-links > li{position:relative} .nav-links a,.nav-drop-btn{ font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase; color:var(--dim);transition:color var(--fast) var(--ease); display:inline-flex;align-items:center;gap:6px;padding-block:6px; } .nav-links a:hover,.nav-drop-btn:hover,.nav-links a[aria-current="page"]{color:var(--ink)} .nav-links a[aria-current="page"]{color:var(--accent)} .nav-drop-btn svg{width:9px;height:9px;transition:transform var(--fast) var(--ease)} .nav-drop[data-open="true"] .nav-drop-btn svg{transform:rotate(180deg)} .nav-drop-menu{ position:absolute;top:calc(100% + 12px);left:-14px;min-width:190px; background:var(--paper-2);border:1px solid var(--line); padding:var(--s-2);display:none;flex-direction:column; } /* Invisible bridge across the 12px gap. Without it the pointer leaves .nav-drop on the way to the menu and mouseleave slams it shut. */ .nav-drop-menu::before{ content:'';position:absolute;left:0;right:0;top:-13px;height:13px; } .nav-drop[data-open="true"] .nav-drop-menu{display:flex} /* keyboard users can tab straight into the items */ .nav-drop:focus-within .nav-drop-menu{display:flex} .nav-drop-menu a{padding:11px 14px;letter-spacing:.11em} .nav-drop-menu a:hover{background:var(--paper-3);color:var(--ink)} .nav-toggle{display:none;width:40px;height:40px;position:relative;flex:none} .nav-toggle span{ position:absolute;left:9px;right:9px;height:1px;background:var(--ink); transition:transform var(--fast) var(--ease),opacity var(--fast) var(--ease); } .nav-toggle span:nth-child(1){top:14px} .nav-toggle span:nth-child(2){top:20px} .nav-toggle span:nth-child(3){top:26px} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ---------- 5. FOOTER (shared, every page) ---------- */ .foot{border-top:1px solid var(--line);padding-block:var(--s-8) var(--s-6);margin-top:0} .foot-in{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-7);padding-bottom:var(--s-7)} .foot-mark{height:52px;width:auto;opacity:.9;margin-bottom:var(--s-4)} .foot-blurb{color:var(--dim);font-size:var(--t-sm);max-width:34ch;line-height:1.7} .foot-col h3{ font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--faint);font-weight:400;margin-bottom:var(--s-4); } .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:11px} .foot-col a{font-size:var(--t-sm);color:var(--dim);transition:color var(--fast) var(--ease)} .foot-col a:hover{color:var(--accent)} .foot-bot{ border-top:1px solid var(--line);padding-top:var(--s-5); display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap; font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint); } /* ---------- 6. WORK CARD ---------- */ .grid-work{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)} .card{background:var(--paper);display:block;position:relative;transition:background var(--mid) var(--ease)} .card:hover{background:var(--paper-2)} .card-thumb{aspect-ratio:16/10;overflow:hidden;background:var(--paper-3);position:relative} .card-thumb img{ width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.05); transition:filter var(--slow) var(--ease),transform var(--slow) var(--ease); } .card:hover .card-thumb img{filter:grayscale(0) contrast(1);transform:scale(1.04)} /* play affordance — signals "this is a film, not a photo" */ .card-play{ position:absolute;left:var(--s-4);bottom:var(--s-4); width:38px;height:38px;border-radius:50%; border:1px solid rgba(244,241,236,.5);background:rgba(11,11,12,.55); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); display:grid;place-items:center; transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),transform var(--fast) var(--ease); } .card-play svg{width:11px;height:11px;fill:var(--ink);margin-left:2px;transition:fill var(--fast) var(--ease)} .card:hover .card-play{background:var(--accent);border-color:var(--accent);transform:scale(1.08)} .card:hover .card-play svg{fill:var(--paper)} .card-body{padding:var(--s-5) var(--s-5) var(--s-6)} .card-idx{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)} .card h3{font-family:var(--f-display);font-size:26px;font-weight:400;letter-spacing:-.012em;margin:10px 0 9px;line-height:1.1} .card p{font-size:var(--t-sm);color:var(--dim);line-height:1.65} .card-award{ margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line); font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint); } /* ---------- 7. TOOL PANEL ---------- */ .grid-tools{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)} .tool{background:var(--paper);padding:clamp(30px,4vw,var(--s-7));display:block;transition:background var(--mid) var(--ease)} .tool:hover{background:var(--paper-2)} .tool-idx{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)} .tool h3{font-family:var(--f-display);font-size:var(--t-2xl);font-weight:400;letter-spacing:-.02em;margin:var(--s-3) 0 var(--s-3);line-height:1.02} .tool h3 em{font-style:italic} .tool p{color:var(--dim);font-size:var(--t-base);line-height:1.72;max-width:42ch} .tool .tlink{margin-top:var(--s-5)} /* ---------- 8. LINK ROW (resources / events lists) ---------- */ .rows{border-top:1px solid var(--line)} .row{ display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-5);align-items:baseline; padding:var(--s-5) 0;border-bottom:1px solid var(--line); transition:padding-left var(--mid) var(--ease); } .row:hover{padding-left:var(--s-3)} .row-idx{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--faint);min-width:26px} .row h3{font-family:var(--f-display);font-size:22px;font-weight:400;letter-spacing:-.01em;margin-bottom:5px} .row:hover h3{color:var(--accent)} .row p{font-size:var(--t-sm);color:var(--dim);max-width:60ch;line-height:1.6} .row-meta{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);white-space:nowrap} /* ---------- 9. MOTION ---------- */ .reveal{opacity:0;transform:translateY(18px)} .reveal.in{opacity:1;transform:none;transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)} /* ---------- 10. RESPONSIVE ---------- */ @media (max-width:1000px){ .grid-work{grid-template-columns:repeat(2,1fr)} .foot-top{grid-template-columns:1fr 1fr} } @media (max-width:760px){ .nav-toggle{display:block} /* fingers need more than a mouse pointer does */ .theme button{width:40px;height:40px} .theme .sw{width:15px;height:15px} .nav-links{ position:fixed;inset:57px 0 auto 0;background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column;align-items:stretch;gap:0; padding:var(--s-3) var(--gutter) var(--s-6); max-height:calc(100dvh - 57px);overflow-y:auto; transform:translateY(-8px);opacity:0;pointer-events:none; transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease); } .nav-links[data-open="true"]{transform:none;opacity:1;pointer-events:auto} .nav-links a,.nav-drop-btn{padding:15px 0;font-size:12px;width:100%;justify-content:space-between} .nav-drop-menu{position:static;border:0;border-left:1px solid var(--line);background:none;padding:0 0 0 var(--s-4);margin-bottom:var(--s-3)} .nav-drop-menu a{padding:12px 0} .grid-work,.grid-tools{grid-template-columns:1fr} .foot-top{grid-template-columns:1fr;gap:var(--s-6)} .row{grid-template-columns:1fr;gap:var(--s-2)} .row-meta{grid-column:1} } /* ---------- 11. REDUCED MOTION (global — every page inherits) ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } .reveal{opacity:1;transform:none} } /* ============================================================ 10. TOUCH A finger cannot hover. Every grayscale-until-hover photo on this site — 106 of them — stays grey forever on a phone, so the reveal that carries the whole visual idea never fires. On touch, the photos simply arrive in colour. Selectors mirror the per-theme specificity above so they win. ============================================================ */ @media (hover:none){ .card-thumb img,.vid-btn img,.reel-btn img,.still img,.rv-btn img, .shot img,.bts-peek img{filter:none} /* sepia keeps its warmth, just lighter than the desktop hover state */ :root[data-theme="sepia"] .card-thumb img, :root[data-theme="sepia"] .vid-btn img, :root[data-theme="sepia"] .reel-btn img, :root[data-theme="sepia"] .still img, :root[data-theme="sepia"] .rv-btn img{filter:sepia(.26) saturate(.96)} /* light theme has no darkness to hide in — full colour reads better */ :root[data-theme="light"] .card-thumb img, :root[data-theme="light"] .vid-btn img, :root[data-theme="light"] .reel-btn img, :root[data-theme="light"] .still img, :root[data-theme="light"] .rv-btn img{filter:none} /* press feedback replaces the hover state */ .card:active .card-thumb img,.vid-btn:active img,.reel-btn:active img{transform:scale(1.03)} .btn:active,.tlink:active{opacity:.7} /* nothing should depend on hover to be reachable */ .el-acts{opacity:1} }