/* ============================================================ Logo Presentation — Minimal / Dark Editorial ============================================================ */ :root{ --ink: #0f0f0e; --ink-2: #161615; --bone: #edeae3; --bone-dim: #a8a49a; --brass: #c9a15a; --sage: #8a9a8b; --line: rgba(237,234,227,0.14); --line-soft: rgba(237,234,227,0.08); --surface: rgba(22,22,21,0.55); --hint-border: rgba(237,234,227,0.3); --ease: cubic-bezier(.65,0,.35,1); --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', monospace; } /* Light theme override — toggled via data-theme="light" on , set from content.js (admin.html has a Dark/Light switch under "Site Theme"). */ :root[data-theme="light"]{ --ink: #faf9f6; --ink-2: #f0ede4; --bone: #1b1a17; --bone-dim: #6b6860; --brass: #a97a34; --sage: #5f7a60; --line: rgba(27,26,23,0.14); --line-soft: rgba(27,26,23,0.07); --surface: rgba(255,255,255,0.65); --hint-border: rgba(27,26,23,0.3); } *{ margin:0; padding:0; box-sizing:border-box; } html,body{ height:100%; background:var(--ink); color:var(--bone); font-family:var(--font-body); overflow:hidden; -webkit-font-smoothing:antialiased; transition:background .35s var(--ease), color .35s var(--ease); } body{ position:relative; } /* ---------------- Slides ---------------- */ .slide{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:8vh 8vw; opacity:0; visibility:hidden; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease), visibility 0s linear .7s; background: radial-gradient(circle at 15% 15%, rgba(201,161,90,0.06), transparent 45%), radial-gradient(circle at 85% 85%, rgba(138,154,139,0.05), transparent 45%), var(--ink); } .slide.active{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .7s var(--ease), transform .7s var(--ease), visibility 0s; } .slide.prev{ transform:translateY(-24px); } .bg-texture{ position:absolute; inset:0; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse at center, black 0%, transparent 75%); pointer-events:none; } .slide-content{ position:relative; z-index:2; width:100%; max-width:900px; } .slide-content.wide{ max-width:1100px; } /* ---------------- Reveal animation ---------------- */ .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); } .slide.active .reveal{ opacity:1; transform:translateY(0); } .slide.active .reveal:nth-child(1){ transition-delay:.05s; } .slide.active .reveal:nth-child(2){ transition-delay:.12s; } .slide.active .reveal:nth-child(3){ transition-delay:.19s; } .slide.active .reveal:nth-child(4){ transition-delay:.26s; } .slide.active .reveal:nth-child(5){ transition-delay:.33s; } /* ---------------- Cover / Closing ---------------- */ .cover-content{ text-align:center; margin:0 auto; } .eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.25em; text-transform:uppercase; color:var(--brass); margin-bottom:24px; } .cover-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(3rem, 8vw, 6.5rem); line-height:1.05; letter-spacing:-.01em; } .cover-title.small{ font-size:clamp(2.2rem, 5vw, 4rem); } .cover-sub{ margin-top:22px; font-size:16px; color:var(--bone-dim); letter-spacing:.02em; } .cover-line{ width:64px; height:1px; background:var(--brass); margin:40px auto; } .scroll-cue{ font-family:var(--font-mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--bone-dim); opacity:.7; } .edit-hint{ position:relative; border-bottom:1px dashed var(--hint-border); cursor:help; } .edit-hint:hover{ color:var(--brass); } /* ---------------- Slide headers ---------------- */ .slide-kicker{ font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin-bottom:10px; } .slide-title{ font-family:var(--font-display); font-weight:600; font-size:clamp(2rem, 4.5vw, 3.2rem); margin-bottom:48px; } /* ---------------- Concept title keywords ---------------- */ .concept-title-content{ display:flex; align-items:center; gap:6%; width:100%; } .concept-title-slide.has-keywords .slide-content{ max-width:1300px; } .concept-title-main{ flex:1; min-width:0; } .concept-title-slide.has-keywords .slide-title{ margin-bottom:24px; } .concept-title-keywords{ flex:0 0 36%; max-width:36%; display:flex; flex-direction:column; align-items:flex-end; gap:8px; text-align:right; } .concept-title-keyword{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem, 3.2vw, 2.9rem); line-height:1.08; color:var(--kw-color, var(--brass)); letter-spacing:-0.01em; word-break:break-word; } /* ---------------- Logo showcase ---------------- */ .logo-split{ display:flex; align-items:center; gap:5%; margin-bottom:0; width:100%; } .logo-split-primary{ flex:0 0 65%; max-width:65%; display:flex; align-items:center; justify-content:center; } .logo-split-variants{ flex:1; min-width:0; } .logo-placeholder-lg{ display:flex; flex-direction:column; align-items:center; gap:18px; padding:2% 4%; width:100%; /* A real (not max-) height, so the flexed .logo-slot below has an actual bound to size itself against instead of being free to grow taller than its parent and spill out the bottom once nothing (border/background) was there to visually contain it. */ height:78vh; box-sizing:border-box; /* Deliberately no border/background here — the mark sits directly on the slide rather than inside a boxed frame. */ } .placeholder-mark{ width:120px; height:120px; color:var(--bone); } .placeholder-mark.small{ width:64px; height:64px; } /* The primary mark's slot now fills roughly half the slide's width, so its placeholder (shown before anything's uploaded) should scale with it rather than stay pinned at the generic 120px default above. 100%/100% rather than auto/max — this SVG has no intrinsic width/height of its own (only a viewBox), so "auto" can't resolve against it; percentage sizing against the already correctly bounded .logo-slot-layer is what actually fills the space without overflowing it. */ .logo-placeholder-lg .logo-slot .placeholder-mark{ width:100%; height:100%; } .placeholder-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-dim); } /* Header pulled up (less reserved space above it, and the split row itself top-aligned instead of vertically centered) so the enlarged logo window and variant thumbnails below get more of the slide's height to work with. */ .logo-variants-slide{ align-items:flex-start; padding-top:3vh; padding-bottom:5vh; } .logo-variants-slide .slide-title{ margin-bottom:14px; } .logo-variants-slide .slide-kicker{ margin-bottom:6px; } .variant-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; } .variant-card{ display:flex; flex-direction:column; align-items:center; gap:12px; cursor:pointer; border-radius:6px; padding:6px; transition:transform .2s var(--ease), box-shadow .2s var(--ease); } .variant-card:hover{ transform:translateY(-3px); } .variant-card:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; } /* The selected thumbnail (shown large in the window on the left) gets a visible ring so it's clear which variant is currently on display. */ .variant-card.is-active .variant-box{ box-shadow:0 0 0 2px var(--brass); } .variant-card.is-active .variant-label{ color:var(--brass); } .variant-box{ width:100%; aspect-ratio:1; max-height:13vh; max-width:100px; display:flex; align-items:center; justify-content:center; border-radius:4px; border:1px solid var(--line); margin:0 auto; } /* These swatches demonstrate the logo against fixed light/dark contexts — intentionally NOT tied to the --ink/--bone theme variables, so they look the same regardless of whether the presentation itself is set to dark or light. */ .variant-box.primary{ background:linear-gradient(180deg, var(--ink-2), var(--ink)); color:var(--bone); } .variant-box.light{ background:#f1efe8; color:#0f0f0e; } .variant-box.dark{ background:#1c1c1a; color:#edeae3; } .variant-box.mono{ background:#1c1c1a; color:#a8a49a; } .variant-box.icon{ background:linear-gradient(135deg, #c9a15a, #8a9a8b); color:#0f0f0e; } .variant-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); transition:color .2s var(--ease); } /* ---------------- Color palette ---------------- */ .palette-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; } .swatch{ border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--ink-2); transition:transform .3s var(--ease); } .swatch:hover{ transform:translateY(-6px); } .swatch-fill{ aspect-ratio:1; background:var(--sw); } .swatch-meta{ padding:14px 12px; display:flex; flex-direction:column; gap:4px; } .swatch-name{ font-size:13px; font-weight:500; } .swatch-hex{ font-family:var(--font-mono); font-size:11px; color:var(--bone-dim); letter-spacing:.03em; } .palette-note{ margin-top:28px; font-size:12px; color:var(--bone-dim); max-width:520px; } .palette-note code{ font-family:var(--font-mono); background:var(--ink-2); padding:2px 6px; border-radius:3px; color:var(--brass); } /* ---------------- Concept title & description ---------------- */ .concept-desc{ margin-top:22px; font-size:17px; line-height:1.75; color:var(--bone-dim); max-width:640px; } /* ---------------- Primary mark hero slide ---------------- */ .primary-hero-kicker{ position:absolute; top:40px; left:40px; z-index:2; font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); } .primary-hero-slide .slide-content{ display:flex; align-items:center; justify-content:center; height:100%; max-width:none; } .hero-mark{ width:min(58vw, 560px); height:min(58vw, 560px); display:flex; align-items:center; justify-content:center; color:var(--bone); } .hero-mark svg.placeholder-mark{ width:100%; height:100%; } .hero-mark .injected-svg.hero-fill{ width:100%; height:100%; } .hero-mark .injected-svg.hero-fill svg{ width:100%; height:100%; } .hero-mark img.hero-fill{ width:100%; height:100%; object-fit:contain; } /* Primary Mark hero slide — mark is recolored to the concept's primary palette color via a mask fill (see renderRecoloredMarkInto), rather than the plain /injected-svg used elsewhere, so it needs its own sizing rule here alongside the ones above. */ .hero-mark .recolor-fill.hero-fill{ width:100%; height:100%; } /* Concept title slide: a blurred, low-opacity echo of the concept's primary mark sits behind the title text, positioned/scaled the same as the mark on the Primary Mark hero slide (reuses .hero-mark's own sizing rules so the two stay in sync automatically if that sizing ever changes). */ .concept-title-bgmark{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; overflow:hidden; z-index:0; } .concept-title-bgmark .hero-mark{ opacity:.22; filter:blur(16px); } /* ---------------- Color & Type slide — big type, cycling palette ---------------- */ .color-type-slide{ /* Deliberately not setting position here — .slide already provides position:absolute, which is both what stacks every slide correctly in the deck and a valid containing block for the absolutely-positioned children below. Overriding it to "relative" pulled this slide out of the stack and into normal document flow, so a second (or third...) Color & Type slide would render stacked below the first one's full height instead of overlapping it — pushed off-screen at the bottom. */ overflow:hidden; padding:0; --ctw-swatch-w:clamp(84px, 9vw, 140px); --ctw-fg:#ffffff; --ctw-display-scale:1; --ctw-body-scale:1; } .ctw-bg{ position:absolute; inset:0; z-index:0; background-color:var(--ink-2); transition:background-color 1.4s ease; } .ctw-layout{ position:relative; z-index:1; height:100%; width:100%; display:flex; align-items:stretch; } .ctw-swatches{ flex:0 0 var(--ctw-swatch-w); width:var(--ctw-swatch-w); display:flex; flex-direction:column; box-shadow:6px 0 30px rgba(0,0,0,.28); z-index:1; } .ctw-logo-col{ flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; padding:6vh 2vw; box-sizing:border-box; } .ctw-logo-mark{ width:min(60%, 56vh); height:min(60%, 56vh); background-color:var(--ctw-fg); transition:background-color .6s ease; pointer-events:none; filter:drop-shadow(0 16px 40px rgba(0,0,0,.3)); } .ctw-swatch{ position:relative; flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:6px; padding:10px 8px; cursor:pointer; outline:none; box-sizing:border-box; transition:flex-grow .35s ease; } .ctw-swatch:hover{ flex-grow:1.6; } .ctw-swatch:focus-visible{ box-shadow:inset 0 0 0 3px rgba(255,255,255,.7); } .ctw-swatch.is-bg{ box-shadow:inset 0 0 0 3px currentColor; flex-grow:1.6; } .ctw-swatch.is-bg::after{ content:'BG'; position:absolute; top:8px; left:8px; font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; padding:2px 6px; border-radius:3px; background:rgba(0,0,0,.4); color:#fff; } .ctw-swatch.is-fg::before{ content:'TEXT'; position:absolute; top:8px; right:8px; font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; padding:2px 6px; border-radius:3px; background:rgba(0,0,0,.4); color:#fff; } .ctw-swatch-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; opacity:.9; } .ctw-swatch-fg{ appearance:none; font-family:var(--font-display); font-size:12px; font-weight:700; background:transparent; border:1.5px solid currentColor; border-radius:50%; width:26px; height:26px; line-height:1; cursor:pointer; } .ctw-swatch.is-fg .ctw-swatch-fg{ background:currentColor; color:inherit; } /* ---------------- Front-end palette editor ---------------- */ /* "Edit" and "Add Color" as their own circular buttons — same 44px round shape and placement family as the prev/next nav arrows (.nav-btn), stacked just above them so every round icon button on the slide reads as one connected control cluster instead of two unrelated UI patterns. */ .ctw-fab-group{ position:fixed; bottom:92px; right:40px; display:flex; gap:10px; z-index:55; } .ctw-fab{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--surface); backdrop-filter:blur(8px); color:var(--bone); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease); } .ctw-fab:hover{ background:var(--ink-2); border-color:var(--brass); color:var(--brass); } .ctw-fab:active{ transform:scale(.92); } .ctw-fab-edit.is-active{ background:var(--brass); border-color:var(--brass); color:#161615; } /* Per-swatch edit panel — an overlay covering that one swatch, hidden until the strip's "Edit" toggle is on. */ .ctw-swatch-edit{ display:none; position:absolute; inset:0; z-index:2; background:rgba(0,0,0,.6); padding:8px; flex-direction:column; gap:6px; align-items:stretch; justify-content:center; box-sizing:border-box; cursor:default; } .ctw-swatches.is-editing .ctw-swatch .ctw-swatch-edit{ display:flex; } /* While editing, freeze the hover-grow effect that normally makes browsing the strip more tactile (.ctw-swatch:hover / .is-bg above). With it left on, moving the mouse toward the small remove ("×") button kept growing/ shrinking neighboring swatches out from under the cursor mid-click — the strip was still animating (flex-grow's .35s transition) when the click landed, so it frequently missed the 20px target it was aimed at a moment earlier. Locking flex-grow to 1 during editing keeps the layout still so clicks on the small controls inside each swatch land reliably. */ .ctw-swatches.is-editing .ctw-swatch, .ctw-swatches.is-editing .ctw-swatch:hover, .ctw-swatches.is-editing .ctw-swatch.is-bg{ flex-grow:1; } .ctw-swatches.is-editing .ctw-swatch-fg, .ctw-swatches.is-editing .ctw-swatch > .ctw-swatch-label{ opacity:0; pointer-events:none; } .ctw-swatch-colorinput{ width:100%; height:26px; padding:0; border:none; border-radius:4px; cursor:pointer; background:none; } .ctw-swatch-hexinput, .ctw-swatch-nameinput{ width:100%; font-family:var(--font-mono); font-size:10px; padding:4px 6px; border-radius:3px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1); color:#fff; box-sizing:border-box; } .ctw-swatch-hexinput::placeholder, .ctw-swatch-nameinput::placeholder{ color:rgba(255,255,255,.5); } .ctw-swatch-remove{ align-self:flex-end; background:transparent; border:1px solid rgba(255,255,255,.45); color:#fff; border-radius:50%; width:20px; height:20px; line-height:1; cursor:pointer; font-size:12px; } .ctw-swatch-remove:disabled{ opacity:.3; cursor:default; } .ctw-palette-save-row{ display:none; flex-direction:column; gap:6px; padding:10px 8px; background:rgba(0,0,0,.35); } .ctw-swatches.is-editing .ctw-palette-save-row{ display:flex; } .ctw-palette-save-row .btn-small{ font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; padding:7px 10px; border-radius:4px; border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff; cursor:pointer; } .ctw-palette-save-row .btn-small:hover{ background:rgba(255,255,255,.15); } .ctw-palette-save-status{ font-family:var(--font-mono); font-size:9px; letter-spacing:.03em; color:rgba(255,255,255,.6); line-height:1.4; } .ctw-content{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; /* Top-aligned (was vertically centered) so the kicker/title sit higher on the slide, leaving more breathing room below for the type samples. */ justify-content:flex-start; gap:34px; padding:7vh 6vw 8vh 2vw; box-sizing:border-box; overflow:visible; } .ctw-text{ color:var(--ctw-fg); transition:color .6s ease; } .ctw-sample-row{ display:flex; flex-direction:column; gap:6px; } .ctw-role-label{ font-family:var(--font-mono); font-size:12px; letter-spacing:.15em; text-transform:uppercase; opacity:.85; } .ctw-display-sample{ font-family:var(--font-display); font-size:calc(clamp(4.5rem, 12vw, 11rem) * var(--ctw-display-scale, 1)); font-weight:700; line-height:.95; white-space:nowrap; width:max-content; letter-spacing:-.01em; transition:font-size .15s ease; } .ctw-body-sample{ font-family:var(--font-body); font-size:calc(clamp(1.6rem, 3.4vw, 2.75rem) * var(--ctw-body-scale, 1)); font-weight:400; line-height:1.25; white-space:normal; width:auto; max-width:44ch; overflow-wrap:break-word; transition:font-size .15s ease; } /* ---------------- Type size sliders (front-end Color & Type editor) ---------------- */ .ctw-size-controls{ display:flex; flex-direction:column; gap:10px; margin-top:6px; max-width:320px; } .ctw-size-row{ display:flex; align-items:center; gap:10px; } .ctw-size-row label{ flex:0 0 auto; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.75; width:56px; } .ctw-size-row input[type="range"]{ flex:1; min-width:0; accent-color:currentColor; cursor:pointer; height:3px; } /* ---------------- Mockup slide ---------------- */ /* Full-bleed: each mockup image spans the whole browser viewport with no frame/border/background box around it — sized by object-fit:contain, so it fills either the full width or full height (whichever is the tighter fit) without ever being cropped or boxed in. With more than one mockup, a thumbnail column on the right lets you jump between them, and the display auto-cycles through all of them — same sliding-layer pattern as the Primary Mark & Variants slide's display window. */ .slide.full-bleed{ padding:0; } .mockup-display{ position:absolute; inset:0; overflow:hidden; } .mockup-layer{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transition:transform .6s var(--ease), opacity .6s var(--ease); } .mockup-layer.is-incoming{ transform:translateX(100%); opacity:0; } .mockup-layer.is-current{ transform:translateX(0); opacity:1; } .mockup-layer.is-outgoing{ transform:translateX(-100%); opacity:0; } .mockup-layer img{ width:100%; height:100%; object-fit:contain; } .mockup-placeholder{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:var(--bone-dim); z-index:0; } .mockup-placeholder svg{ opacity:.6; } .mockup-placeholder span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; } .mockup-caption{ position:absolute; bottom:48px; left:52px; z-index:2; display:flex; flex-direction:column; gap:6px; } .mockup-kicker{ font-family:var(--font-mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--brass); } .mockup-label{ font-family:var(--font-display); font-size:30px; font-weight:600; /* --bone is the theme's text-contrast color (dark in the light theme this presentation uses); --ink is the background tone, not text. */ color:var(--bone); } /* Thumbnail column — far right, vertically centered, one entry per uploaded mockup. Only rendered at all when there's more than one. */ .mockup-thumbs{ position:absolute; top:50%; right:32px; transform:translateY(-50%); z-index:3; display:flex; flex-direction:column; gap:12px; } .mockup-thumb{ width:76px; height:76px; padding:0; border-radius:6px; border:2px solid transparent; overflow:hidden; cursor:pointer; background:var(--ink-2); box-shadow:0 6px 18px rgba(0,0,0,.28); transition:border-color .2s var(--ease), transform .2s var(--ease); } .mockup-thumb:hover{ transform:translateY(-2px); } .mockup-thumb:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; } .mockup-thumb.is-active{ border-color:var(--brass); } .mockup-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } /* ---------------- Inspiration slide ---------------- */ /* Wider than the standard "wide" content column, and its own flex column so the grid below can be vertically centered and given room to spread out evenly rather than being cramped into the top-left of the slide. */ .insp-content{ max-width:1400px; height:84vh; display:flex; flex-direction:column; } /* Flexbox rather than grid, so a trailing partial row (e.g. 5 items) centers itself instead of clustering into the grid's fixed left-hand tracks. */ .insp-grid{ display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:32px; flex:1; min-height:0; margin-top:16px; } .insp-card{ flex:1 1 280px; max-width:340px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--ink-2); display:flex; flex-direction:column; } .insp-image{ aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, var(--ink-2), var(--ink)); color:var(--bone-dim); overflow:hidden; padding:9%; box-sizing:border-box; } .insp-placeholder{ opacity:.5; } .insp-image .injected-svg.insp-fill, .insp-image img.insp-fill{ width:100%; height:100%; } /* Uncropped: the whole image always shows, letterboxed within the evenly sized card rather than cover-cropped and losing content at the edges. */ .insp-image img.insp-fill{ object-fit:contain; } .insp-image .injected-svg.insp-fill svg{ width:100%; height:100%; } .insp-meta{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:4px; } .insp-name{ font-size:13px; font-weight:600; } .insp-note{ font-size:12px; line-height:1.5; color:var(--bone-dim); } /* ---------------- All logos overview slide ---------------- */ .overview-content{ height:84vh; display:flex; flex-direction:column; } .all-logos-grid{ display:grid; grid-template-columns:repeat(3, 1fr); grid-auto-rows:1fr; gap:22px; flex:1; min-height:0; margin-top:12px; } .all-logo-card{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:24px; border:1px solid var(--line); border-radius:8px; background-color:var(--all-logo-bg, var(--ink-2)); transition:background-color 1.2s ease; cursor:pointer; outline:none; box-sizing:border-box; min-height:0; } .all-logo-card:focus-visible{ box-shadow:inset 0 0 0 3px rgba(255,255,255,.6); } .all-logo-card.is-paused::after{ content:'PAUSED — CLICK TO RESUME'; position:absolute; top:12px; right:12px; font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; padding:4px 8px; border-radius:3px; background:rgba(0,0,0,.45); color:#fff; } .all-logo-mark{ width:min(46%, 34vh); height:min(46%, 34vh); background-color:var(--all-logo-fg, var(--bone)); transition:background-color .6s ease; pointer-events:none; } .all-logo-title{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--all-logo-fg, var(--bone-dim)); text-align:center; transition:color .6s ease; pointer-events:none; } /* ---------------- Typography ---------------- */ .type-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-bottom:36px; } .type-card{ border:1px solid var(--line); border-radius:6px; padding:28px 24px; background:var(--ink-2); display:flex; flex-direction:column; gap:10px; } .type-role{ font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--brass); } .type-sample{ font-size:56px; line-height:1; margin:6px 0; } .type-name{ font-size:13px; color:var(--bone-dim); } .type-line{ font-size:14px; color:var(--bone); opacity:.85; margin-top:6px; } .display-font{ font-family:var(--font-display); } .body-font{ font-family:var(--font-body); } .mono-font{ font-family:var(--font-mono); } .weight-strip{ display:flex; gap:28px; flex-wrap:wrap; font-size:20px; color:var(--bone-dim); border-top:1px solid var(--line); padding-top:24px; } /* ---------------- Before / After Slider ---------------- */ .compare-wrap{ display:flex; flex-direction:column; align-items:center; gap:20px; } .compare-slider{ position:relative; width:100%; max-width:820px; aspect-ratio:16/9; border-radius:8px; overflow:hidden; border:1px solid var(--line); user-select:none; -webkit-user-select:none; cursor:ew-resize; box-shadow:0 30px 60px -20px rgba(0,0,0,.5); } .compare-pane{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } .compare-fill{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } .old-fill{ background:linear-gradient(160deg, var(--ink-2), var(--ink)); color:var(--bone-dim); } .new-fill{ background:linear-gradient(160deg, var(--ink-2), var(--ink)); color:var(--brass); } .compare-before{ z-index:1; } .compare-after{ z-index:2; clip-path:inset(0 0 0 50%); } .compare-mark{ width:96px; height:96px; } .compare-tag{ position:absolute; bottom:16px; font-family:var(--font-mono); font-size:11px; letter-spacing:.15em; padding:5px 10px; border-radius:3px; background:rgba(0,0,0,.4); backdrop-filter:blur(4px); } .tag-old{ left:16px; color:#a8a49a; } .tag-new{ right:16px; color:var(--brass); } .compare-handle{ position:absolute; top:0; bottom:0; left:50%; z-index:3; width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:translateX(-50%); pointer-events:none; } .handle-line{ width:1.5px; flex:1; background:var(--bone); opacity:.85; } .handle-grip{ width:38px; height:38px; min-height:38px; border-radius:50%; background:var(--bone); color:var(--ink); display:flex; align-items:center; justify-content:center; margin:8px 0; box-shadow:0 4px 14px rgba(0,0,0,.4); } .compare-hint{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); opacity:.7; } /* ---------------- Admin link ---------------- */ .admin-link{ position:fixed; top:18px; right:24px; z-index:60; display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-dim); text-decoration:none; padding:8px 14px; border:1px solid var(--line); border-radius:20px; background:var(--surface); backdrop-filter:blur(8px); transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .admin-link:hover{ color:var(--brass); border-color:var(--brass); background:var(--ink-2); } /* ---------------- Dynamic media slots ---------------- */ .logo-slot, .variant-box, .compare-fill{ display:flex; align-items:center; justify-content:center; } /* The large display slot fills whatever vertical space its fixed-height parent (.logo-placeholder-lg) leaves after the label — flex:1 rather than a forced aspect-ratio, so it can never demand more height than its parent actually has and spill past the bottom. It's also the animation viewport for the auto-cycling variant marks, so its overflow is clipped. */ .logo-placeholder-lg .logo-slot{ width:100%; flex:1 1 auto; min-height:0; position:relative; overflow:hidden; border-radius:8px; transition:background-color .5s var(--ease); } .logo-slot img, .variant-box img, .compare-fill img{ max-width:100%; max-height:100%; object-fit:contain; } .logo-placeholder-lg .logo-slot img{ width:100%; height:100%; } .variant-box img{ width:46px; height:46px; } /* Each variant mark shown in the large window is its own absolutely positioned layer, so the incoming one can slide in from the right while the outgoing one slides out to the left. The layer itself is already correctly bounded (it fills .logo-slot, which is flexed to never exceed its fixed-height parent), so filling it at 100%/100% is safe — an SVG's default preserveAspectRatio (and object-fit:contain for raster images) letterboxes the artwork inside that box rather than stretching or cropping it. Using percentage sizing here (not auto) also matters because some uploaded SVGs have no intrinsic width/height of their own to size "auto" against. */ .logo-slot-layer{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transition:transform .6s var(--ease), opacity .6s var(--ease); /* Breathing room between the mark and the box's edge. inset:0 above fills the containing block's padding box exactly (absolutely positioned elements are offset from the padding edge, not the content edge — so padding on .logo-slot itself, tried previously, has no effect here). Padding has to live on this layer instead; the mark inside is sized to 100%/100% (see rules below), which resolves against this layer's own content box once its padding is subtracted. */ padding:6%; box-sizing:border-box; } .logo-slot-layer.is-incoming{ transform:translateX(100%); opacity:0; } .logo-slot-layer.is-current{ transform:translateX(0); opacity:1; } .logo-slot-layer.is-outgoing{ transform:translateX(-100%); opacity:0; } .logo-placeholder-lg .logo-slot-layer img{ width:100%; height:100%; object-fit:contain; } .logo-placeholder-lg .logo-slot-layer .injected-svg.icon-lg{ width:100%; height:100%; } /* Mask-based recolored fills (Primary Mark & Variants: Primary uses the concept's palette color, On Light/On Dark are generated from the same artwork) — see applyRecolorableMark / renderRecoloredMarkInto in script.js. */ .recolor-fill{ display:block; } .recolor-fill.icon-sm{ width:46px; height:46px; } .recolor-fill.icon-lg{ width:100%; height:100%; } .injected-svg{ display:flex; } .injected-svg svg{ width:100%; height:100%; display:block; color:inherit; } /* icon-lg now fills its slot (the primary logo takes ~48% of the slide width) instead of staying fixed at 120px */ .injected-svg.icon-lg{ width:100%; height:100%; } .injected-svg.icon-sm{ width:46px; height:46px; } .injected-svg.icon-compare{ width:55%; height:55%; } img.icon-lg{ width:100%; height:100%; } img.icon-sm{ width:46px; height:46px; } img.icon-compare{ width:55%; height:55%; } .palette-grid.dynamic{ grid-template-columns:repeat(var(--swatch-count, 5), 1fr); } /* ---------------- Nav UI ---------------- */ .progress-bar{ position:fixed; top:0; left:0; right:0; height:2px; background:var(--line-soft); z-index:50; } .progress-fill{ height:100%; width:16.66%; background:var(--brass); transition:width .6s var(--ease); } .nav-arrows{ position:fixed; bottom:36px; right:40px; display:flex; gap:10px; z-index:50; } .nav-btn{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--surface); backdrop-filter:blur(8px); color:var(--bone); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease); } .nav-btn:hover{ background:var(--ink-2); border-color:var(--brass); color:var(--brass); } .nav-btn:active{ transform:scale(.92); } .nav-btn:disabled{ opacity:.25; cursor:default; } .nav-btn:disabled:hover{ border-color:var(--line); color:var(--bone); } .dots{ position:fixed; bottom:44px; left:50%; transform:translateX(-50%); display:flex; gap:12px; z-index:50; } .dot{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--line); border:none; cursor:pointer; transition:background .25s var(--ease), transform .25s var(--ease); } .dot.active{ background:var(--brass); transform:scale(1.3); } .dot:hover{ background:var(--bone-dim); } /* Dot navigation tooltip — a small custom label rather than the browser's native title="" tooltip, so it matches the site's own look (and shows up immediately on hover instead of the OS's usual delay). Colors are hardcoded rather than themed (--ink/--bone flip in the light theme) so it stays a readable dark chip regardless of which theme the site is in. */ .dot[data-tooltip]::after{ content:attr(data-tooltip); position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px); white-space:nowrap; font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; padding:6px 10px; border-radius:5px; background:rgba(15,15,14,.94); color:#f5f3ee; border:1px solid rgba(255,255,255,.12); opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:5; } .dot[data-tooltip]:hover::after, .dot[data-tooltip]:focus-visible::after{ opacity:1; transform:translateX(-50%) translateY(0); } /* A concept's title-slide dot is outlined (not filled) in that concept's own accent color — hollow so it visibly stands apart from the plain filled dots, while the dot row still doubles as a quick-jump index between concepts. */ .dot-concept{ width:10px; height:10px; background:transparent; border:2px solid var(--dot-accent, var(--line)); transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); } .dot-concept.active{ background:var(--dot-accent, var(--brass)); border-color:var(--dot-accent, var(--brass)); box-shadow:0 0 0 3px color-mix(in srgb, var(--dot-accent, var(--brass)) 35%, transparent); transform:scale(1.35); } .dot-concept:hover{ background:color-mix(in srgb, var(--dot-accent, var(--bone-dim)) 30%, transparent); } .slide-counter{ position:fixed; bottom:40px; left:40px; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; color:var(--bone-dim); z-index:50; } .slide-counter #counterCurrent{ color:var(--brass); } /* ---------------- Access gate (client / admin password) ---------------- */ .access-gate{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--ink); background-image:radial-gradient(circle at 20% 20%, rgba(201,161,90,0.08), transparent 45%); } .access-gate-form{ width:100%; max-width:360px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; } .access-gate-eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--brass); } .access-gate-title{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem, 4vw, 2.2rem); color:var(--bone); margin-bottom:6px; } .access-gate-input{ width:100%; font-family:var(--font-body); font-size:15px; padding:13px 16px; border-radius:6px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--bone); outline:none; text-align:center; transition:border-color .2s var(--ease); } .access-gate-input:focus{ border-color:var(--brass); } .access-gate-submit{ width:100%; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:13px 16px; border-radius:6px; border:1px solid var(--brass); background:var(--brass); color:#161615; font-weight:600; cursor:pointer; transition:opacity .2s var(--ease); } .access-gate-submit:hover{ opacity:.88; } .access-gate-error{ min-height:16px; font-family:var(--font-mono); font-size:12px; color:#d9704f; } /* ---------------- Responsive ---------------- */ @media (max-width: 860px){ .type-row{ grid-template-columns:1fr; } .palette-grid{ grid-template-columns:repeat(3, 1fr); } .nav-arrows{ right:20px; bottom:90px; } .slide-counter{ left:20px; bottom:20px; } .primary-hero-kicker{ left:20px; top:20px; } /* The dot strip is one dot per slide — with 20-30+ slides that's wider than a phone screen. Rather than hide it, shrink the dots and let the strip scroll horizontally within a bounded width so it never collides with the fixed slide-counter (bottom-left) or nav arrows (bottom-right) on either side. */ .dots{ bottom:20px; max-width:calc(100vw - 150px); overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; padding:6px 2px; gap:7px; } .dots::-webkit-scrollbar{ display:none; } .dot{ width:6px; height:6px; flex:0 0 auto; } .dot-concept{ width:8px; height:8px; } /* ---- Primary Mark & Variants: stack the display box above the variant row instead of squeezing thumbnails side by side, which was cropping the Monochrome/Icon thumbnails off the right edge of the screen. On top of that, the thumbnails themselves become plain dot navigation here (same idea as the slide dots at the bottom of the page) rather than small images — with only ~88px of width to work with per thumbnail, the actual artwork was too small to read anyway, so a dot that just indicates "here's a variant, tap to view it" reads better than a blurry-small copy of something already shown large in the window above it. Each variant card keeps its full click target and an aria-label (set in script.js) for accessibility — only the visible thumbnail image and text label are hidden. ---- */ .logo-split{ flex-direction:column; gap:24px; } .logo-split-primary{ flex:0 0 auto; max-width:100%; width:100%; } .logo-split-variants{ width:100%; } .logo-placeholder-lg{ height:44vh; } .logo-variants-slide .variant-row{ display:flex; grid-template-columns:none; justify-content:center; align-items:center; gap:14px; } .logo-variants-slide .variant-card{ gap:0; padding:10px; } .logo-variants-slide .variant-box, .logo-variants-slide .variant-label{ display:none; } .logo-variants-slide .variant-card::after{ content:''; display:block; width:9px; height:9px; border-radius:50%; background:var(--line); transition:background .25s var(--ease), transform .25s var(--ease); } .logo-variants-slide .variant-card.is-active::after{ background:var(--brass); transform:scale(1.35); } .logo-variants-slide .variant-card:hover::after{ background:var(--bone-dim); } .logo-variants-slide .variant-card.is-active:hover::after{ background:var(--brass); } /* ---- Color & Type: the swatch column, logo, and type samples were three-way squeezed into slivers. Stack them instead, with the palette as a short strip on top and the (now-wrappable, smaller) type samples below. ---- */ .ctw-layout{ flex-direction:column; } /* Stacked full-width, the swatch strip now sits at the very top of the slide — right under the fixed "Edit Content" pill (top:18px, z-index:60) — so it needs its own top padding to clear that, rather than the plain 72px it uses as a side column on desktop. */ .ctw-swatches{ flex:0 0 118px; width:100%; flex-direction:row; box-sizing:border-box; padding-top:46px; box-shadow:0 6px 20px rgba(0,0,0,.28); /* On desktop this is a vertical sidebar so overflow never comes up, but stacked into a horizontal strip here it can easily hold more content than the viewport is wide (edit controls, add tile, save row) — make it scroll instead of silently clipping the tail off-screen. */ overflow-x:auto; -webkit-overflow-scrolling:touch; } .ctw-swatch{ align-items:center; justify-content:flex-end; flex:0 0 72px; } .ctw-palette-save-row{ flex:0 0 128px; box-sizing:border-box; } /* Stack above the (also-repositioned-on-mobile) nav arrows, which sit at right:20px;bottom:90px here — same right edge, cleared above them. */ .ctw-fab-group{ right:20px; bottom:144px; } .ctw-logo-col{ flex:0 0 auto; padding:3vh 6vw 1vh; } .ctw-logo-mark{ width:min(40vw, 190px); height:min(40vw, 190px); } .ctw-content{ padding:2vh 6vw 11vh; gap:18px; } .ctw-display-sample{ font-size:calc(clamp(2.1rem, 11vw, 3.4rem) * var(--ctw-display-scale, 1)); white-space:normal; width:auto; overflow-wrap:break-word; } .ctw-body-sample{ font-size:calc(clamp(1rem, 4.6vw, 1.35rem) * var(--ctw-body-scale, 1)); white-space:normal; width:auto; overflow-wrap:break-word; } .ctw-size-controls{ max-width:none; } /* ---- Concept title keywords: right-hand column becomes its own row below the title/description instead of squeezing to a sliver. ---- */ .concept-title-content{ flex-direction:column; gap:22px; } .concept-title-slide.has-keywords .slide-content{ max-width:none; } .concept-title-keywords{ flex:0 0 auto; max-width:100%; width:100%; align-items:flex-start; text-align:left; } .concept-title-keyword{ font-size:clamp(1.3rem, 7vw, 2rem); } /* ---- Inspiration / All Marks Together: both use a fixed-height column with a card grid inside — on a tall stack of cards that no longer fits a phone screen, let just that inner grid scroll rather than clipping cards off the bottom (the page itself still doesn't scroll). ---- */ .insp-grid{ overflow-y:auto; -webkit-overflow-scrolling:touch; } .all-logos-grid{ grid-template-columns:repeat(2, 1fr); overflow-y:auto; -webkit-overflow-scrolling:touch; } /* ---- Mockup captions/thumbs: pull in from the desktop's wide-slide margins so they don't crowd the edges of a narrow screen. ---- */ /* bottom:64px (not the desktop 48px) clears the fixed dot-nav/slide-counter strip that sits at bottom:20px on mobile — otherwise the caption text and the dots render on top of each other. */ .mockup-caption{ left:24px; bottom:64px; right:90px; } .mockup-label{ font-size:20px; } .mockup-thumbs{ right:14px; gap:8px; } .mockup-thumb{ width:58px; height:58px; } } @media (max-width: 540px){ .palette-grid{ grid-template-columns:repeat(2, 1fr); } .variant-box{ max-width:76px; } .all-logos-grid{ grid-template-columns:1fr; } }