@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #1a1a1a; /* dark grey */ --fg: #f5f0eb; /* warm off-white text */ --accent: #f90000; --accent-aa: #ff5a5a; /* brighter red for text links on dark */ --hover: #f13100; /* bettencourt-studios "rorange" — menu hover */ --muted: #9a9a9a; /* AA grey on dark bg */ --border: rgba(255,255,255,0.12); --font: 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --nav-h: 52px; } /* ───────────────────────────────────────── LIGHT THEME — screenprint on warm paper. Dark is the default (:root above); these values only apply when , set by the toggle / saved preference. ───────────────────────────────────────── */ [data-theme="light"] { --bg: #f7f6f3; /* near-white, faint warmth */ --fg: #1a1a1a; /* ink */ --accent: #d40000; /* screenprint red on cream */ --accent-aa: #b00000; /* AA red for text links on cream */ --muted: #5e564c; /* warm grey — AA on cream */ --border: rgba(26,26,26,0.18); } /* White wordmark SVGs flip to black ink on the light ground */ [data-theme="light"] .nav-item--logo img, [data-theme="light"] .landing-logo img { filter: invert(1); } /* Skull splash art is already near-black line art — drop the dark-mode invert */ [data-theme="light"] .landing-skulls img { filter: none; } /* Bottom skullberry mark renders black instead of white */ [data-theme="light"] .page-cmyk { filter: brightness(0); } [data-theme="light"] .landing-enter { border-color: rgba(26,26,26,0.35); } [data-theme="light"] .form-group input, [data-theme="light"] .form-group select, [data-theme="light"] .form-group textarea { border-color: rgba(26,26,26,0.22); } [data-theme="light"] .form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23111111'/%3E%3C/svg%3E"); } [data-theme="light"] .lightbox { background: rgba(233,227,216,0.96); } [data-theme="light"] .a11y-section code { background: rgba(26,26,26,0.07); } /* ───────────────────────────────────────── SKIP NAVIGATION (keyboard / screen reader) ───────────────────────────────────────── */ .skip-link { position: absolute; top: -100%; left: 0; background: var(--fg); color: var(--bg); font-family: var(--font); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.75rem 1.5rem; z-index: 200; transition: top 0.1s; } .skip-link:focus { top: 0; } /* ───────────────────────────────────────── FOCUS STYLES — visible for keyboard nav ───────────────────────────────────────── */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } html { font-size: 16px; background: var(--bg); color: var(--fg); overflow-x: hidden; } body { font-family: var(--font); background: var(--bg); color: var(--fg); min-height: 100vh; } /* ───────────────────────────────────────── DOT CURSOR — a dot replaces the pointer site-wide (off-white on dark, ink black on light — see the [data-theme="light"] overrides below). cursor inherits, so setting it on html cascades to everything; interactive elements get a bigger dot so they still feel clickable. Hotspot is centered on the dot (the two numbers after the url). ───────────────────────────────────────── */ html { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23f5f0eb'/%3E%3C/svg%3E") 8 8, auto; } a, button, summary, label, input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"]) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='7' fill='%23f5f0eb'/%3E%3C/svg%3E") 14 14, auto; } /* Light theme — ink-black dot on the warm paper ground */ [data-theme="light"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%231a1a1a'/%3E%3C/svg%3E") 8 8, auto; } [data-theme="light"] :is(a, button, summary, label, input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"])) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='7' fill='%231a1a1a'/%3E%3C/svg%3E") 14 14, auto; } /* Film grain overlay — from bettencourt-studios (desaturated fractalNoise, non-interactive). Dark opacity 0.18. High z-index so the grain covers the whole page including nav and footer, matching the bettencourt-studios HTML version. */ body::before { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.18; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23grain)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 140px 140px; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* ───────────────────────────────────────── NAV — 5-column symmetric (desktop) STORE | INDEX | LOGO | CONTACT | INSTAGRAM ───────────────────────────────────────── */ body.page-inner { padding-top: var(--nav-h); display: flex; flex-direction: column; min-height: 100vh; } body.page-inner main { flex: 1; } .site-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 100; display: flex; align-items: center; background: transparent; border-bottom: none; mix-blend-mode: difference; } /* Force all nav content white so difference mode inverts against light sections */ .site-nav .nav-item a, .site-nav .nav-item a:hover { color: #fff; } .site-nav .nav-item--logo img { filter: brightness(0) invert(1); } @media (max-width: 768px) { .site-nav { background: var(--bg); border-bottom: 1px solid var(--border); mix-blend-mode: normal; } .site-nav .nav-item a, .site-nav .nav-item a:hover { color: var(--fg); } .site-nav .nav-item--logo img { filter: none; } } .nav-item { flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; } .nav-item a { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg); transition: color 0.15s; } /* ↳ arrow prefix on each nav link (matches reference). Skip the logo item. */ .nav-item:not(.nav-item--logo) a::before { content: "↳"; opacity: 0.5; margin-right: 0.45em; } .nav-item a:hover { color: var(--hover); } /* Label text shares the nav's JetBrains Mono */ .contact-eyebrow, .form-group label, .a11y-section h2, .footer-links a, .footer-bottom small { font-family: var(--font-mono); } .nav-item--logo img { height: 22px; width: auto; display: block; } /* Mobile nav toggle — replaces full 5-item bar */ .nav-toggle { display: none; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 0.25rem; z-index: 10; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--fg); transition: transform 0.2s, opacity 0.2s; } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Theme toggle — fixed top-left, circular */ .theme-toggle { position: fixed; top: 12px; left: 1rem; z-index: 101; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: 1px solid var(--border); color: var(--muted); cursor: pointer; transition: border-color 0.2s, color 0.2s; } .theme-toggle:hover { border-color: var(--accent); color: var(--fg); } .theme-toggle svg { display: block; } /* Default/dark shows the sun (→ go light); light shows the moon (→ go dark) */ .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: block; } [data-theme="light"] .theme-toggle .icon-sun { display: none; } /* Mobile full-screen nav */ .nav-mobile { display: none; position: fixed; inset: var(--nav-h) 0 0 0; background: var(--bg); z-index: 99; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; } .nav-mobile.is-open { display: flex; } /* Hidden — the hamburger toggle animates into an X and closes the menu, so this separate close button would be a redundant second X. */ .nav-close { display: none; } .nav-mobile a { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .nav-mobile a::before { content: "↳"; opacity: 0.5; margin-right: 0.35em; } .nav-mobile a:hover { color: var(--hover); } @media (max-width: 768px) { .nav-item:not(.nav-item--logo) { display: none; } .nav-item--logo { flex: 1; justify-content: center; padding-left: 0; } .nav-toggle { display: flex; } } /* footer responsive */ @media (max-width: 480px) { .site-footer { padding: 0.5rem 1rem; } .footer-links { flex-wrap: wrap; gap: 0.5rem 1.25rem; justify-content: center; padding-bottom: 0.4rem; margin-bottom: 0.4rem; } .footer-links a::before { display: none; } .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 0.2rem; } } /* ───────────────────────────────────────── LANDING / SPLASH (index.html) ───────────────────────────────────────── */ body.page-landing { overflow: hidden; } .landing-wrap { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; background: transparent; } .landing-skulls { width: min(700px, 90vw); } .landing-logo { width: min(320px, 60vw); } .landing-logo img, .landing-skulls img, .landing-skulls svg { width: 100%; height: auto; display: block; } /* Skull splash art is near-black (#161616) line art — invert so it reads on the dark bg */ .landing-skulls img { filter: invert(1); opacity: 0.9; } .landing-enter { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: var(--fg); border: 1px solid rgba(255,255,255,0.3); padding: 0.6rem 2.2rem; transition: background 0.15s, color 0.15s; } .landing-enter:hover { background: var(--fg); color: var(--bg); } /* ───────────────────────────────────────── EDITORIAL LAYOUT (welcome.html + work.html) ───────────────────────────────────────── */ /* Full-width banner image */ .editorial-banner { width: 91%; margin: 0 auto; } .editorial-banner img { display: block; width: 100%; height: auto; } /* Justified editorial row — JS sets flex-basis per image aspect ratio */ .editorial-three { width: 91%; margin: 4px auto 0; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 4px; opacity: 0; transition: opacity 0.15s; } /* work.html featured row has 3 items (green tomatoes moved to the vase row) */ .editorial-three--3col { grid-template-columns: 2fr 1fr 1fr; } .editorial-three img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: smooth; image-rendering: high-quality; } @media (max-width: 768px) { .editorial-three { height: 200px; } } @media (max-width: 480px) { .editorial-three { flex-wrap: wrap; height: auto; } .editorial-three-cell { flex: 1 1 calc(50% - 2px) !important; height: 160px; } } /* ───────────────────────────────────────── LIGHTBOX ───────────────────────────────────────── */ .lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.93); z-index: 999; cursor: zoom-out; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.18s; } .lightbox.is-open { display: flex; opacity: 1; } .lightbox img { max-width: 90vw; max-height: 90vh; width: auto; height: auto; object-fit: contain; cursor: default; display: block; } /* Make all clickable images show a zoom cursor */ .image-gallery a, .editorial-three-cell, .editorial-banner { cursor: zoom-in; } /* ───────────────────────────────────────── CMYK mark at bottom — shared by welcome + work */ /* Bottom-of-site mark — rendered as a CSS background (no element), so it can't be dragged off the page or saved via right-click. Baked into the layout. */ .page-cmyk { width: min(120px, 20%); aspect-ratio: 1; margin: 2.5rem auto 1.5rem; background: url("../images/GhostGrown-Logo-Skullberry-3.svg") center / contain no-repeat; /* black line-art skullberry forced to a white mark on the dark ground */ filter: brightness(0) invert(1); pointer-events: none; user-select: none; -webkit-user-drag: none; } /* ───────────────────────────────────────── GALLERY — masonry (welcome.html) ───────────────────────────────────────── */ .image-gallery { width: 91%; margin: 4px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px; } .image-gallery--masonry { column-count: 4; column-gap: 8px; width: 100%; margin: 0; } .image-gallery--masonry a { display: block; break-inside: avoid; margin-bottom: 8px; } .image-gallery--masonry img { display: block; width: 100%; height: auto; } @media (max-width: 1100px) { .image-gallery--masonry { column-count: 3; } } @media (max-width: 768px) { .image-gallery--masonry { column-count: 2; } } @media (max-width: 480px) { .image-gallery--masonry { column-count: 1; } } /* Flat aligned row — equal cells, natural ratio, no crop (vases + green tomatoes, all 4:5) */ .image-gallery--row4 { grid-template-columns: repeat(4, 1fr); } .image-gallery--row4 a { aspect-ratio: unset; overflow: visible; } .image-gallery--row4 img { width: 100%; height: auto; object-fit: unset; } .image-gallery a { display: block; aspect-ratio: 1; overflow: hidden; } .image-gallery img, .image-gallery svg { display: block; width: 100%; height: 100%; object-fit: contain; } /* CMYK face footer accent */ .welcome-cmyk { width: 91%; max-width: 180px; margin: 1rem auto 3rem; display: block; } .welcome-cmyk img { display: block; width: 100%; height: auto; opacity: 0.85; } /* ───────────────────────────────────────── CONTACT PAGE ───────────────────────────────────────── */ .contact-page { display: flex; align-items: center; justify-content: center; padding: 5rem 1.5rem 6rem; } .contact-form-wrap { width: 100%; max-width: 560px; min-width: 0; } .contact-header { margin-bottom: 3rem; text-align: center; } .contact-eyebrow { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem; } .contact-header h2 { font-size: clamp(1.4rem, 3.5vw, 3rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 0.75rem; white-space: nowrap; width: max-content; position: relative; left: 50%; transform: translateX(-50%); } @media (max-width: 480px) { .contact-header h2 { position: static; left: auto; transform: none; width: auto; white-space: normal; } } .contact-sub { font-size: 0.85rem; color: var(--muted); line-height: 1.5; } .contact-form { display: flex; flex-direction: column; gap: 1.25rem; } .bot-field { display: none; } .form-row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 480px) { .form-row--two { grid-template-columns: 1fr; } } .form-group { display: flex; flex-direction: column; gap: 0.4rem; } .form-group label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .form-group input, .form-group select, .form-group textarea { font-family: var(--font); font-size: 0.95rem; color: var(--fg); background: transparent; border: 1px solid rgba(255,255,255,0.25); padding: 0.7rem 0.85rem; width: 100%; appearance: none; border-radius: 0; outline: none; transition: border-color 0.15s; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--muted); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); } .form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23f5f0eb'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; padding-right: 2.5rem; cursor: pointer; } .form-group textarea { resize: vertical; min-height: 140px; } .form-submit { font-family: var(--font); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.25em; text-transform: uppercase; color: var(--bg); background: var(--fg); border: none; padding: 1rem 2.5rem; cursor: pointer; align-self: flex-start; transition: background 0.15s; } @media (max-width: 480px) { .form-submit { align-self: stretch; width: 100%; } } .form-submit:hover { background: var(--accent); color: #fff; } .contact-direct { margin-top: 2.5rem; font-size: 0.75rem; color: var(--muted); } .contact-direct a { color: var(--accent-aa); } .contact-direct a:hover { text-decoration: underline; } /* ───────────────────────────────────────── STORE / COMING SOON ───────────────────────────────────────── */ .comingsoon-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - var(--nav-h) - 80px); text-align: center; padding: 4rem 1.5rem; gap: 1rem; } .comingsoon-page p { font-size: 1rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.4; } .comingsoon-page .exclaim { font-size: 2rem; color: var(--accent); letter-spacing: 0.2em; } /* ───────────────────────────────────────── ACCESSIBILITY PAGE ───────────────────────────────────────── */ .a11y-page { width: min(680px, 91%); margin: 0 auto; padding: 5rem 0 6rem; } .a11y-header { margin-bottom: 3.5rem; } .a11y-header h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 0.75rem; } .a11y-body { display: flex; flex-direction: column; gap: 2.5rem; } .a11y-section h2 { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem; } .a11y-section p, .a11y-section li { font-size: 0.95rem; line-height: 1.7; } .a11y-section ul { padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; } .a11y-section code { font-family: monospace; font-size: 0.85em; background: rgba(255,255,255,0.1); padding: 0.1em 0.35em; border-radius: 2px; } .a11y-contact { margin-top: 1rem; font-size: 0.95rem; } .a11y-contact a { color: var(--accent-aa); text-decoration: underline; } .a11y-contact-sub { margin-top: 0.5rem; font-size: 0.82rem; color: var(--muted); line-height: 1.6; } /* ───────────────────────────────────────── FOOTER ───────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border); padding: 0.75rem 1.5rem; } .footer-links { display: flex; justify-content: center; gap: 2rem; padding-bottom: 0.6rem; margin: 0 -1.5rem 0.6rem; padding-left: 1.5rem; padding-right: 1.5rem; border-bottom: 1px solid var(--border); } .footer-links a { font-size: 0.6rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg); transition: color 0.15s; } .footer-links a::before { content: "↳"; opacity: 0.5; margin-right: 0.45em; } .footer-links a:hover { color: var(--hover); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .footer-bottom small { font-size: 0.6rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg); }