/* lubbee.net — the prototype's stylesheet, verbatim, plus the hover rules its runtime used to generate at load time, plus the light-theme layer. The design keeps its styling inline on each element (that is how the prototype was delivered and we did not touch it). Consequently every hover declaration below MUST carry !important to win over the inline style — the design tool's runtime did exactly the same thing. */ * { box-sizing: border-box; margin: 0; padding: 0 } html { scroll-behavior: smooth } body { background: #070707 } /* staggered reveal for expand items */ [data-expand-item] { opacity: 0; transform: translateY(16px); transition: opacity .35s ease, transform .35s ease } [data-expand-item].reveal { opacity: 1; transform: translateY(0) } ::selection { background: #2f4bff; color: #fff } a { color: inherit; text-decoration: none } button { font: inherit } .project-modal { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:40px; animation:ovIn .2s ease } .project-modal__backdrop { position:absolute; inset:0; background:rgba(6,6,8,.72); backdrop-filter:blur(6px) } .project-modal__panel { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; width:min(860px,100%); max-height:88vh; overflow:auto; border-radius:10px; background:#f6f4ef; color:#17171a; box-shadow:0 40px 100px rgba(0,0,0,.6); animation:mdIn .32s cubic-bezier(.2,.8,.2,1) } .project-modal__copy { padding:44px 40px 40px } .project-modal__copy h2 { font-family:'Newsreader',serif; font-weight:500; font-size:44px; letter-spacing:-.02em; line-height:1; margin:14px 0 0 } .project-modal__copy h3 { font-family:'Newsreader',serif; font-size:18px; margin:26px 0 10px } .project-modal__copy p { font-size:15.5px; line-height:1.65; color:#3d3d42 } .project-modal__copy ul { list-style:none; display:flex; flex-direction:column; gap:9px; margin-top:20px } .project-modal__copy li { display:flex; gap:10px; font-size:14.5px; line-height:1.5; color:#3d3d42 } .project-modal__copy li::before { content:'▪'; color:#2f6bff } .project-modal__tag { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.22em; color:#2f6bff } .project-modal__rule { width:44px; height:2px; background:#17171a; margin:22px 0 } .project-modal__rule canvas { display:none } .rough-modal-canvas { display:none } .project-modal__preview { background:#e9e5dd; border-left:1px solid rgba(0,0,0,.08); padding:32px; display:flex; flex-direction:column; align-items:center } .project-modal__tabs { display:flex; gap:4px; background:rgba(0,0,0,.06); padding:4px; border-radius:20px; margin-bottom:24px } .project-modal__tabs button { border:0; background:transparent; cursor:pointer; padding:7px 15px; border-radius:16px; font-size:12.5px } .project-modal__tabs button[aria-pressed="true"] { background:#17171a; color:#fff } .rough-tab-bg { display:none } .rough-expand { font-family:'Gaegu',cursive; font-weight:700; font-size:18px } .rough-expand-bg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none } .project-modal__device { width:min(340px,100%); aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; background:#fff; border:10px solid #1c1c20; border-radius:10px; color:#77736c; font-size:13px } .project-modal__device[data-mobile="true"] { width:186px; aspect-ratio:9/19.5; border-radius:30px } .project-modal__device img { width:100%; height:100%; object-fit:cover; display:block } .project-modal__close { position:absolute; z-index:2; right:18px; top:18px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(0,0,0,.15); background:rgba(255,255,255,.6); cursor:pointer; font-size:22px } #rough-modal-close { display:none } .project-modal__link { display:inline-flex; margin-top:28px; background:#17171a; color:#fff; border-radius:6px; padding:11px 16px; font-size:13.5px } .project-modal[data-variant="rough"] .project-modal__panel { background:#fdfbf4; color:#182103; transform:rotate(-.5deg); border:0; border-radius:6px; overflow:hidden } .project-modal[data-variant="rough"] .project-modal__copy { padding:38px 34px 34px } .project-modal[data-variant="rough"] .project-modal__copy h2 { font-family:'Gaegu','Newsreader',cursive; font-size:52px } .project-modal[data-variant="rough"] .project-modal__copy h3, .project-modal[data-variant="rough"] .project-modal__copy p, .project-modal[data-variant="rough"] .project-modal__copy li { font-family:'Gaegu',cursive; color:#2c3a12 } .project-modal[data-variant="rough"] .project-modal__copy p { font-size:20px; line-height:1.35 } .project-modal[data-variant="rough"] .project-modal__copy h3 { font-size:22px; margin:20px 0 6px } .project-modal[data-variant="rough"] .project-modal__preview { background:#fdfbf4; border-left:0; padding:34px 30px } .project-modal[data-variant="rough"] .project-modal__tabs { background:transparent; border-radius:0; padding:0; margin-bottom:22px } .project-modal[data-variant="rough"] .project-modal__tabs button { position:relative; padding:6px 16px; border-radius:0; background:transparent; color:#8a9668; font-family:'Gaegu',cursive; font-weight:700; font-size:16px } .project-modal[data-variant="rough"] .project-modal__tabs button[aria-pressed="true"] { background:transparent; color:#182103 } .project-modal[data-variant="rough"] .project-modal__tabs button span { position:relative; z-index:1 } .project-modal[data-variant="rough"] .rough-tab-bg { display:block; position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none } .project-modal[data-variant="rough"] .project-modal__tag { color:#e0447f } .project-modal[data-variant="rough"] .project-modal__rule { width:150px; height:16px; background:transparent; margin:16px 0 18px } .project-modal[data-variant="rough"] .project-modal__rule canvas, .project-modal[data-variant="rough"] .rough-modal-canvas { display:block; position:absolute; pointer-events:none } .project-modal[data-variant="rough"] #rough-modal-underline { position:static; width:150px; height:16px } .project-modal[data-variant="rough"] #modal-highlights { margin:0 } .project-modal[data-variant="rough"] #modal-highlights li { display:flex; gap:10px; font-size:18px } .project-modal[data-variant="rough"] #modal-highlights li::before { content:'✦'; color:#e0447f } .project-modal[data-variant="rough"] .project-modal__close { border:0; background:transparent; width:40px; height:40px; padding:0; color:transparent } .project-modal[data-variant="rough"] .project-modal__close canvas { position:absolute; inset:0; display:block } @media (max-width:760px) { .project-modal { padding:16px } .project-modal__panel { grid-template-columns:1fr; max-height:94vh } .project-modal__preview { border-left:0; border-top:1px solid rgba(0,0,0,.08); min-height:300px } } @keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(6px) } } @keyframes ovIn { from { opacity:0 } to { opacity:1 } } @keyframes mdIn { from { opacity:0; transform:translateY(24px) scale(.97) } to { opacity:1; transform:none } } /* ---- hover states (were style-hover="…" in the prototype) ---- */ /* nav links, "View all projects", "Browse all articles", footer links */ .hv-white:hover { color: #fff !important } /* theme toggle button */ .hv-ring:hover { border-color: rgba(255, 255, 255, 0.4) !important } /* header "Lab Notes" button */ .hv-labnotes:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.45) !important } /* FR/EN stays text-only; the selected language receives the emphasis. */ [data-lang="fr"] #lang-fr, [data-lang="en"] #lang-en { color: #f2f0ec !important; font-weight: 700 } [data-lang="fr"] #lang-en, [data-lang="en"] #lang-fr { opacity: 0.45 } [data-theme="light"][data-lang="fr"] #lang-fr, [data-theme="light"][data-lang="en"] #lang-en { color: #1b1a16 !important } /* hero primary CTA */ .hv-cta:hover { background: #4358ff !important } /* hero secondary CTA */ .hv-ghost:hover { background: rgba(255, 255, 255, 0.06) !important } /* project cards and article cards */ .hv-card { transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, border-color .3s ease } .hv-card:hover { border-color: rgba(255, 255, 255, 0.35) !important; transform: translateY(-10px) scale(1.02) !important; box-shadow: 0 24px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.12) !important } /* experiment scrapbook cards */ button[data-open-modal="rough"] { transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, filter .3s ease } button[data-open-modal="rough"]:hover { transform: translateY(-8px) scale(1.05) rotate(0deg) !important; box-shadow: 0 32px 60px rgba(0,0,0,0.4) !important; filter: brightness(1.08) } /* article cards */ .hv-article { transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, border-color .3s ease } .hv-article:hover { transform: translateY(-8px) scale(1.02) !important; box-shadow: 0 20px 44px rgba(0,0,0,0.40) !important } /* nav links — subtle underline slide */ .hv-white { transition: color .2s ease } /* "See all experiments" pill */ .hv-black:hover { background: #000 !important } [hidden] { display: none !important } /* ---- theme toggle icons ------------------------------------------------- Driven by CSS rather than the `hidden` attribute so the head script can set the theme before first paint without touching the DOM below . Dark shows the sun, light shows the moon — the same pairing the prototype had. */ #icon-moon { display: none } [data-theme="light"] #icon-sun { display: none } [data-theme="light"] #icon-moon { display: block } /* ========================================================================= LIGHT THEME ========================================================================= Strictly an override layer: every rule below is scoped to [data-theme="light"], so in dark mode NOTHING here applies and the page renders byte-for-byte as the prototype did. The markup carries `lt-*` hook classes purely so this layer has something to grab — they are inert on their own. `!important` is required throughout for the same reason the hover rules need it: the design's colours live in inline `style` attributes. Palette, derived from the dark one by inverting the surface ramp and keeping every accent hue identical: page #070707 -> #faf8f3 paper white card #131313 -> #ffffff footer #0b0b0b -> #e7e1d5 ink #f2f0ec -> #1b1a16 accents #2f45ff / #3b5bff / #4a63ff / #c6f24e unchanged The "Personal Experiments" band (#efeae1) is deliberately NOT themed: it was already the light band of the design, it is the one constant between the two themes, and leaving it alone keeps every rough.js doodle drawn on it legible without a second colour set. */ [data-theme="light"] body { background: #faf8f3 } /* page shell: background + default ink */ [data-theme="light"] .lt-page { background: #faf8f3 !important; color: #1b1a16 !important } /* card / panel surfaces */ [data-theme="light"] .lt-surface { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.10) !important } /* section separators (were rgba(255,255,255,0.07 / 0.08)) */ [data-theme="light"] .lt-hr { border-bottom-color: rgba(0, 0, 0, 0.10) !important } [data-theme="light"] .lt-hrt { border-top-color: rgba(0, 0, 0, 0.10) !important } /* text ramp */ [data-theme="light"] .lt-ink { color: #2b2925 !important } /* was #d6d4cf / #f2f0ec */ [data-theme="light"] .lt-mute { color: #55524b !important } /* was #c3c1bc / #b9b7b2 */ [data-theme="light"] .lt-mute2 { color: #6d6a63 !important } /* was #9a9893 / #94928d */ [data-theme="light"] .lt-faint { color: #8a867c !important } /* was #8b8984 / #7d7b76 / … */ /* outlined controls (were rgba(255,255,255,0.14 / 0.2 / 0.24)) */ [data-theme="light"] .lt-ring { border-color: rgba(0, 0, 0, 0.16) !important; color: #1b1a16 !important } [data-theme="light"] .lt-border { border-color: rgba(0, 0, 0, 0.22) !important } [data-theme="light"] .lt-ghost { border-color: rgba(0, 0, 0, 0.22) !important; color: #1b1a16 !important } /* footer slab */ [data-theme="light"] .lt-footer { background: #e7e1d5 !important; color: #1b1a16 !important } /* the little 52px rule under the hero H1 (was #f2f0ec) */ [data-theme="light"] .lt-rule { background: #1b1a16 !important } /* the dashed left rail of the hero (was #5a5852) */ [data-theme="light"] .lt-rail { background: repeating-linear-gradient(#b3aea3 0 2px, transparent 2px 9px) !important } /* scroll chevron + the dimmed arrow inside article cards: both are children with a hard-coded stroke attribute, so reach the path directly */ [data-theme="light"] .lt-chev path { stroke: #8a867c !important } [data-theme="light"] .lt-cardmeta svg path { stroke: #74716a !important } /* hero: the gradient that fades the photo into the page background. The light version fades further across (58% vs 55%) and adds a vertical wash, because a near-black photo needs more help to sit on paper white. */ [data-theme="light"] .lt-heroveil { background: linear-gradient(90deg, #faf8f3 0%, rgba(250, 248, 243, 0.86) 26%, rgba(250, 248, 243, 0.06) 62%) !important } [data-theme="light"] .lt-heroveil::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(250, 248, 243, 0.55) 0%, rgba(250, 248, 243, 0) 22%, rgba(250, 248, 243, 0) 74%, rgba(250, 248, 243, 0.6) 100%) } /* and lift the photo itself so it reads as a dark object, not a black hole */ [data-theme="light"] .lt-heroimg img { filter: brightness(1.1) contrast(0.94) !important } /* the blue bloom behind the articles grid — same hue, a fifth of the strength */ [data-theme="light"] .lt-glow { background: radial-gradient(circle at center, rgba(74, 72, 180, 0.16), rgba(47, 75, 255, 0.05) 45%, transparent 70%) !important } /* the experiments band keeps its colour; in light mode it needs edges, since it no longer contrasts with the page on its own */ [data-theme="light"] .lt-band { border-top: 1px solid rgba(0, 0, 0, 0.08) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important } /* ---- light-mode hover states ---- */ [data-theme="light"] .hv-white:hover { color: #000 !important } [data-theme="light"] .hv-ring:hover { border-color: rgba(0, 0, 0, 0.4) !important } [data-theme="light"] .hv-labnotes:hover { background: rgba(0, 0, 0, 0.05) !important; border-color: rgba(0, 0, 0, 0.45) !important } [data-theme="light"] .hv-ghost:hover { background: rgba(0, 0, 0, 0.05) !important } [data-theme="light"] .hv-card:hover { border-color: rgba(0, 0, 0, 0.28) !important; transform: translateY(-10px) scale(1.02) !important; box-shadow: 0 24px 48px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.08) !important } /* ========================================================================= RESPONSIVE LAYER ========================================================================= Same contract as the light-theme layer above: the design's geometry lives in inline `style` attributes, so every override here needs !important, and the markup carries inert `rs-*` hook classes for this layer to grab. Above 1080px nothing here applies and the page renders as the prototype. Breakpoints: 1080px loosen the fixed-width shell, 2-col grids 900px header nav drops to its own row 760px single column, hero goes full-bleed, stamp/rail off */ @media (max-width: 1080px) { .lt-page { min-width: 0 !important } .lt-page > header { padding: 22px 28px !important } .lt-page > section { padding-left: 28px !important; padding-right: 28px !important } .lt-footer { padding-left: 28px !important; padding-right: 28px !important } .rs-herocopy { padding: 74px 28px 0 88px !important } .rs-herocopy h1 { font-size: clamp(76px, 12vw, 132px) !important } .rs-rail { left: 28px !important } .rs-stamp { right: 28px !important } .rs-chev { left: 24px !important } .rs-grid4 { grid-template-columns: repeat(2, 1fr) !important } .rs-grid3 { grid-template-columns: repeat(2, 1fr) !important } .rs-about { gap: 40px !important } } @media (max-width: 980px) { /* numbered section heads: the blurb drops below the title row instead of squeezing into a narrow right-hand column */ .rs-sechead { flex-wrap: wrap !important; gap: 12px 18px !important } .rs-sechead > p { flex-basis: 100%; max-width: none !important; padding-top: 0 !important } } @media (max-width: 900px) { .lt-page > header { flex-wrap: wrap !important; row-gap: 14px !important } .lt-page > header nav { order: 3; flex-basis: 100%; gap: 26px !important; overflow-x: auto } } @media (max-width: 760px) { .lt-page > header { padding: 16px 20px !important } .lt-page > section { padding-left: 20px !important; padding-right: 20px !important } .lt-footer { padding: 44px 20px 26px !important } /* hero: photo goes full-bleed behind the copy, under a vertical veil */ .rs-hero { height: auto !important; min-height: 540px } .lt-heroimg { inset: 0 !important } .lt-heroveil { background: linear-gradient(180deg, #070707 4%, rgba(7,7,7,0.82) 52%, rgba(7,7,7,0.5) 100%) !important } [data-theme="light"] .lt-heroveil { background: linear-gradient(180deg, #faf8f3 4%, rgba(250,248,243,0.85) 52%, rgba(250,248,243,0.5) 100%) !important } .rs-herocopy { padding: 48px 20px 96px !important; max-width: none !important } .rs-herocopy h1 { font-size: clamp(56px, 17vw, 92px) !important } .rs-herocopy p { max-width: 420px !important } .rs-ctas { flex-wrap: wrap !important } .rs-rail, .rs-stamp { display: none !important } .rs-chev { left: 20px !important; bottom: 28px !important } /* numbered section heads: number + title on one line, everything else below */ .rs-sechead h2 { font-size: 30px !important; flex-shrink: 1 !important; min-width: 0 } .rs-sechead h1 { font-size: 40px !important } .rs-sechead > a, .rs-sechead > button { margin-left: 0 !important; flex-basis: 100%; padding-top: 0 !important } #experiments .rs-sechead h2 { font-size: 34px !important } .rs-grid4, .rs-grid3 { grid-template-columns: 1fr !important } .rs-about { grid-template-columns: 1fr !important; gap: 36px !important } .rs-footgrid { grid-template-columns: 1fr !important; gap: 30px !important } .rs-footbar { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important } /* the mid-band doodles sit at fixed pixel offsets sized for the desktop canvas — on a phone they collide with the copy, so keep only the corners */ #dood-squiggle, #dood-circle, #dood-face, #dood-pupils { display: none } }