/* ============================================================ v5 - COLOR ATLAS A curatorial, museum-style site for Annie Dotzauer's fused-glass work. Six chromatic "rooms" make up the atlas. Cream base, deep ink type, one accent per room. ============================================================ */ /* ---------- Tokens ---------- */ :root { /* base palette */ --cream: #fbf8f1; --cream-2: #f4eee2; --cream-3: #ede4d2; --ink: #1a1614; --ink-soft: #3b352f; --ink-mute: #6b635a; --rule: #d9cfbb; --rule-soft: #e7dfca; /* room accents */ --cobalt: #1f4ea8; --cobalt-deep: #112c66; --fire: #d6531a; --fire-deep: #8a2b08; --forest: #3d6a3a; --forest-deep: #1f3f1d; --snow: #5a85b0; --snow-deep: #2c4a6a; --bloom: #c64a78; --bloom-deep: #7a1f44; --studio: #8a6a3c; --studio-deep: #4f3a1d; /* default room accent (overridden per page/room) */ --accent: var(--ink); --accent-deep: var(--ink); /* type */ --serif: "Fraunces", "Cormorant Garamond", Georgia, serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* motion */ --ease: cubic-bezier(.2,.7,.2,1); } /* per-room accent classes (apply to ) */ body.room-cobalt { --accent: var(--cobalt); --accent-deep: var(--cobalt-deep); } body.room-fire { --accent: var(--fire); --accent-deep: var(--fire-deep); } body.room-forest { --accent: var(--forest); --accent-deep: var(--forest-deep); } body.room-snow { --accent: var(--snow); --accent-deep: var(--snow-deep); } body.room-bloom { --accent: var(--bloom); --accent-deep: var(--bloom-deep); } body.room-studio { --accent: var(--studio); --accent-deep: var(--studio-deep); } /* ---------- Reset-ish ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: var(--ink); text-decoration: none; transition: color .18s var(--ease); } a:hover { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 .4em; } h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: 1.05; font-weight: 400; } h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.15; } h3 { font-size: 1.3rem; line-height: 1.25; } p { margin: 0 0 1em; } .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; } /* ---------- Header / Nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 248, 241, .92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--rule-soft); } .site-header::after { content: ""; display: block; height: 2px; background: var(--accent); opacity: .9; } .header-inner { max-width: 1240px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { display: flex; flex-direction: column; line-height: 1; } .brand .signature { font-family: var(--serif); font-size: 1.5rem; letter-spacing: -0.01em; font-weight: 500; } .brand .tagline { font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; } .nav { display: flex; gap: 26px; align-items: center; } .nav a { font-size: .94rem; font-weight: 500; color: var(--ink-soft); position: relative; padding: 6px 2px; } .nav a:hover { color: var(--ink); } .nav a.active { color: var(--ink); } .nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent); } .nav-toggle { display: none; background: transparent; border: 1px solid var(--rule); font-family: var(--sans); font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; cursor: pointer; color: var(--ink); } .nav-toggle:hover { border-color: var(--accent); color: var(--accent); } @media (max-width: 820px) { .nav-toggle { display: inline-block; } .nav { position: absolute; top: 100%; right: 16px; left: 16px; background: var(--cream); border: 1px solid var(--rule); border-radius: 12px; flex-direction: column; align-items: flex-start; padding: 14px 18px; gap: 6px; box-shadow: 0 14px 30px -18px rgba(0,0,0,.25); display: none; } .nav.is-open { display: flex; } .nav a { padding: 10px 0; width: 100%; border-bottom: 1px solid var(--rule-soft); } .nav a:last-child { border-bottom: none; } } /* ---------- Buttons ---------- */ .btn { display: inline-block; font-family: var(--sans); font-size: .9rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 13px 22px; border-radius: 999px; border: 1px solid var(--ink); transition: all .18s var(--ease); cursor: pointer; } .btn-primary { background: var(--ink); color: var(--cream); } .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--cream); } .btn-secondary { background: transparent; color: var(--ink); } .btn-secondary:hover { background: var(--ink); color: var(--cream); } .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); } /* ---------- Eyebrows / labels ---------- */ .eyebrow { font-family: var(--sans); font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); display: inline-block; margin-bottom: 14px; } .eyebrow-accent { color: var(--accent); } .rule { border: 0; border-top: 1px solid var(--rule); margin: 60px 0; } /* ---------- Hero (home) ---------- */ .hero { padding: 64px 0 28px; } .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; } .hero-text h1 em { font-style: italic; color: var(--ink-soft); } .hero-lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 50ch; margin-bottom: 28px; } .hero-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; font-family: var(--sans); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); } .hero-meta span { display: inline-flex; align-items: center; gap: 8px; } .hero-meta .dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; } .hero-art { position: relative; margin: 0; } .hero-art img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; box-shadow: 0 30px 60px -30px rgba(20, 16, 14, .35), 0 6px 18px -10px rgba(20, 16, 14, .25); } .hero-art .frame-tag { position: absolute; left: -12px; top: 24px; background: var(--cream); border: 1px solid var(--rule); font-family: var(--sans); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); padding: 8px 12px; border-radius: 4px; box-shadow: 0 6px 14px -10px rgba(0,0,0,.2); } .hero-art figcaption { position: absolute; right: 18px; bottom: 18px; background: rgba(251, 248, 241, .92); font-family: var(--serif); font-style: italic; font-size: .92rem; padding: 8px 14px; border-radius: 2px; color: var(--ink-soft); } @media (max-width: 820px) { .hero { padding: 36px 0 12px; } .hero-grid { grid-template-columns: 1fr; gap: 32px; } .hero-art .frame-tag { left: 10px; } } /* ---------- ATLAS GRID (home) ---------- */ .atlas-section { padding: 70px 0 80px; } .atlas-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 38px; flex-wrap: wrap; } .atlas-head h2 { margin-bottom: 0; max-width: 22ch; } .atlas-head p { max-width: 44ch; color: var(--ink-soft); margin: 0; } .atlas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .room-card { --card-accent: var(--ink); --card-accent-deep: var(--ink); position: relative; display: flex; flex-direction: column; background: var(--cream-2); border-radius: 6px; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .35s var(--ease), box-shadow .35s var(--ease); border: 1px solid var(--rule-soft); } .room-card:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(20,16,14,.35); color: var(--ink); } .room-card .swatch { height: 6px; background: var(--card-accent); } .room-card .room-img { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; } .room-card .room-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .room-card:hover .room-img img { transform: scale(1.04); } .room-card .room-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(20,16,14,.18) 100%); } .room-card .room-num { position: absolute; top: 14px; left: 16px; z-index: 2; font-family: var(--serif); font-style: italic; font-size: .82rem; letter-spacing: .04em; background: rgba(251, 248, 241, .92); padding: 4px 10px; border-radius: 999px; color: var(--card-accent-deep); } .room-card .room-body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 6px; } .room-card .room-name { font-family: var(--serif); font-size: 2.2rem; font-weight: 400; line-height: 1; letter-spacing: -0.01em; } .room-card .room-tag { font-family: var(--sans); font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; color: var(--card-accent-deep); } .room-card .room-desc { font-family: var(--sans); font-size: .94rem; color: var(--ink-soft); margin-top: 2px; } .room-card .room-cta { margin-top: 14px; font-family: var(--sans); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--card-accent-deep); display: inline-flex; align-items: center; gap: 8px; } .room-card .room-cta::after { content: "→"; transition: transform .25s var(--ease); } .room-card:hover .room-cta::after { transform: translateX(4px); } /* per-card accent overrides */ .room-card.cobalt { --card-accent: var(--cobalt); --card-accent-deep: var(--cobalt-deep); } .room-card.fire { --card-accent: var(--fire); --card-accent-deep: var(--fire-deep); } .room-card.forest { --card-accent: var(--forest); --card-accent-deep: var(--forest-deep); } .room-card.snow { --card-accent: var(--snow); --card-accent-deep: var(--snow-deep); } .room-card.bloom { --card-accent: var(--bloom); --card-accent-deep: var(--bloom-deep); } .room-card.studio { --card-accent: var(--studio); --card-accent-deep: var(--studio-deep); } @media (max-width: 980px) { .atlas { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .atlas { grid-template-columns: 1fr; } } /* ---------- Studio strip / Next show ---------- */ .studio-strip { background: var(--cream-2); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); padding: 50px 0; } .studio-strip .container { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; } .studio-strip .pull { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 1.95rem); line-height: 1.3; color: var(--ink); margin: 0 0 14px; border-left: 2px solid var(--accent); padding-left: 22px; } .studio-strip .pull-attr { font-family: var(--sans); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); padding-left: 24px; } .next-show { background: var(--cream); border: 1px solid var(--rule); border-radius: 6px; padding: 26px 28px; position: relative; } .next-show::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 3px; background: var(--accent); border-radius: 0 3px 3px 0; } .next-show .label { font-family: var(--sans); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 10px; display: block; } .next-show h3 { font-size: 1.3rem; margin-bottom: 6px; } .next-show p { margin: 0 0 14px; color: var(--ink-soft); font-size: .96rem; } .next-show .small-link { font-family: var(--sans); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-deep); border-bottom: 1px solid var(--accent); padding-bottom: 1px; } @media (max-width: 820px) { .studio-strip .container { grid-template-columns: 1fr; gap: 28px; } } /* ---------- Page header (interior pages) ---------- */ .page-head { padding: 60px 0 30px; border-bottom: 1px solid var(--rule-soft); } .page-head .crumbs { font-family: var(--sans); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 18px; } .page-head .crumbs a:hover { color: var(--accent); } .page-head .crumbs .sep { margin: 0 8px; color: var(--rule); } .page-head h1 { margin-bottom: 14px; } .page-head .lede { font-size: 1.08rem; color: var(--ink-soft); max-width: 60ch; } /* ---------- Filter pills (gallery) ---------- */ .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; padding: 26px 0 8px; align-items: center; } .filter-bar .filter-label { font-family: var(--sans); font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); margin-right: 6px; } .pill { font-family: var(--sans); font-size: .85rem; font-weight: 500; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--rule); background: var(--cream); color: var(--ink-soft); cursor: pointer; transition: all .15s var(--ease); letter-spacing: .04em; } .pill:hover { color: var(--ink); border-color: var(--ink-mute); } .pill .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--ink-mute); } .pill.cobalt .dot { background: var(--cobalt); } .pill.fire .dot { background: var(--fire); } .pill.forest .dot { background: var(--forest); } .pill.snow .dot { background: var(--snow); } .pill.bloom .dot { background: var(--bloom); } .pill.studio .dot { background: var(--studio); } .pill.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); } .pill.is-active .dot { background: var(--cream); } /* ---------- Gallery grid ---------- */ .gallery-section { padding: 30px 0 80px; } .room-section { padding: 56px 0 16px; border-top: 1px solid var(--rule-soft); } .room-section:first-of-type { border-top: 0; } .room-section .room-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; } .room-section .room-head .left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .room-section .room-head .room-swatch { width: 44px; height: 44px; border-radius: 6px; } .room-section .room-head h2 { margin: 0; font-size: clamp(1.7rem, 2.6vw, 2.2rem); } .room-section .room-head .room-eyebrow { font-family: var(--sans); font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); display: block; margin-bottom: 4px; } .room-section .room-head .room-blurb { max-width: 38ch; color: var(--ink-soft); margin: 0; font-size: .96rem; } /* per-room swatch colors via parent class */ .room-section.cobalt .room-swatch { background: var(--cobalt); } .room-section.fire .room-swatch { background: var(--fire); } .room-section.forest .room-swatch { background: var(--forest); } .room-section.snow .room-swatch { background: var(--snow); } .room-section.bloom .room-swatch { background: var(--bloom); } .room-section.studio .room-swatch { background: var(--studio); } .room-section.cobalt .room-eyebrow { color: var(--cobalt-deep); } .room-section.fire .room-eyebrow { color: var(--fire-deep); } .room-section.forest .room-eyebrow { color: var(--forest-deep); } .room-section.snow .room-eyebrow { color: var(--snow-deep); } .room-section.bloom .room-eyebrow { color: var(--bloom-deep); } .room-section.studio .room-eyebrow { color: var(--studio-deep); } .piece-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 900px) { .piece-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .piece-grid { grid-template-columns: 1fr; } } .piece { display: flex; flex-direction: column; background: var(--cream); border: 1px solid var(--rule-soft); border-radius: 4px; overflow: hidden; transition: border-color .18s var(--ease), transform .25s var(--ease); } .piece:hover { transform: translateY(-2px); border-color: var(--ink-mute); } .piece .img-wrap { aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-2); } .piece .img-wrap img { width: 100%; height: 100%; object-fit: contain; transition: transform .8s var(--ease); } .piece:hover .img-wrap img { transform: scale(1.03); } .piece .body { padding: 18px 20px 20px; } .piece h3 { font-size: 1.18rem; margin-bottom: 4px; } .piece .medium { font-size: .86rem; color: var(--ink-mute); margin-bottom: 12px; } .piece .room-tag { font-family: var(--sans); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-mute); margin-bottom: 10px; } .piece .room-tag .swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-mute); } .piece[data-room="cobalt"] .room-tag .swatch { background: var(--cobalt); } .piece[data-room="fire"] .room-tag .swatch { background: var(--fire); } .piece[data-room="forest"] .room-tag .swatch { background: var(--forest); } .piece[data-room="snow"] .room-tag .swatch { background: var(--snow); } .piece[data-room="bloom"] .room-tag .swatch { background: var(--bloom); } .piece[data-room="studio"] .room-tag .swatch { background: var(--studio); } .piece .inquire { font-family: var(--sans); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px; align-self: flex-start; } .piece .inquire:hover { color: var(--accent-deep); border-color: var(--accent); } .piece.hidden { display: none; } .piece.portrait .img-wrap { aspect-ratio: 3 / 4; } .piece.square .img-wrap { aspect-ratio: 1 / 1; } /* ---------- About page ---------- */ .about-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; padding: 60px 0; align-items: start; } .about-portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 4px; box-shadow: 0 30px 60px -36px rgba(20,16,14,.35); } .about-portrait figcaption { margin-top: 10px; font-family: var(--serif); font-style: italic; color: var(--ink-mute); font-size: .92rem; } .about-body p { font-size: 1.08rem; color: var(--ink-soft); max-width: 60ch; } .about-body .pull { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.3; color: var(--ink); border-left: 2px solid var(--accent); padding: 6px 0 6px 22px; margin: 36px 0; } .teaching, .awards { padding: 50px 0; border-top: 1px solid var(--rule-soft); } .teaching h2, .awards h2 { margin-bottom: 20px; } .teach-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 22px; } .teach-card { border: 1px solid var(--rule-soft); background: var(--cream); padding: 24px 26px; border-radius: 4px; position: relative; } .teach-card::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; background: var(--accent); } .teach-card .where { font-family: var(--sans); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 8px; display: block; } .teach-card h3 { font-size: 1.2rem; margin-bottom: 6px; } .teach-card p { font-size: .95rem; color: var(--ink-soft); margin: 0 0 .6em; } .teach-card ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: .94rem; } .placeholder-note { background: var(--cream-2); border: 1px dashed var(--rule); border-radius: 4px; padding: 22px 26px; color: var(--ink-mute); font-style: italic; font-family: var(--serif); } @media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; gap: 36px; padding: 40px 0; } .teach-grid { grid-template-columns: 1fr; } } /* ---------- Kilns page ---------- */ .kiln-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: start; padding: 30px 0 40px; } .kiln-portrait { margin: 0; border: 1px solid var(--rule-soft); background: var(--cream); border-radius: 4px; overflow: hidden; } .kiln-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; } .kiln-portrait figcaption { padding: 12px 16px; font-family: var(--serif); font-style: italic; color: var(--ink-mute); font-size: .92rem; border-top: 1px solid var(--rule-soft); } .kiln-promo { background: var(--cream); border: 1px solid var(--rule-soft); border-left: 3px solid var(--accent); padding: 28px 30px; border-radius: 4px; } .kiln-promo h2 { margin: 8px 0 12px; font-size: clamp(1.4rem, 2vw, 1.7rem); } .kiln-promo p { color: var(--ink-soft); font-size: 1rem; margin: 0 0 14px; } .kiln-code-row { display: flex; align-items: center; gap: 12px; margin: 18px 0 20px !important; } .kiln-code-label { font-family: var(--sans); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-deep); } .kiln-code { font-family: var(--sans); font-weight: 600; font-size: 1.1rem; letter-spacing: .12em; background: var(--ink); color: var(--cream); padding: 6px 14px; border-radius: 3px; } .kiln-promo .btn { margin-bottom: 16px; } .kiln-promo-note { font-size: .92rem !important; color: var(--ink-mute) !important; border-top: 1px dashed var(--rule-soft); padding-top: 14px; margin: 18px 0 0 !important; } .kilns-list { padding: 40px 0 20px; border-top: 1px solid var(--rule-soft); } .kilns-list h2 { margin-bottom: 24px; } .kiln-card { border: 1px solid var(--rule-soft); background: var(--cream); padding: 24px 28px; border-radius: 4px; margin-bottom: 16px; position: relative; } .kiln-card::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; background: var(--accent); } .kiln-tag { font-family: var(--sans); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-deep); display: block; margin-bottom: 6px; } .kiln-card h3 { margin: 0 0 8px; font-size: 1.25rem; } .kiln-card p { color: var(--ink-soft); font-size: 1rem; max-width: 65ch; margin: 0; } .kiln-videos { padding: 40px 0; border-top: 1px solid var(--rule-soft); } .kiln-videos h2 { margin-bottom: 8px; } .kiln-videos-lede { color: var(--ink-soft); margin-bottom: 24px; max-width: 60ch; } .kiln-video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .kiln-video { margin: 0; border: 1px solid var(--rule-soft); background: var(--cream); border-radius: 4px; overflow: hidden; } .kiln-video video { display: block; width: 100%; height: auto; background: #000; } .kiln-video figcaption { padding: 10px 16px; font-family: var(--serif); font-style: italic; color: var(--ink-mute); font-size: .92rem; border-top: 1px solid var(--rule-soft); } .kiln-cta { padding: 50px 0 80px; } .kiln-cta-inner { background: var(--cream); border: 1px solid var(--rule-soft); border-radius: 4px; padding: 36px 40px; text-align: center; } .kiln-cta-inner h2 { margin: 0 0 12px; } .kiln-cta-inner p { color: var(--ink-soft); max-width: 60ch; margin: 0 auto 20px; } .kiln-cta-inner .kiln-code { font-size: .95rem; padding: 3px 10px; } @media (max-width: 820px) { .kiln-hero { grid-template-columns: 1fr; gap: 28px; } .kiln-video-grid { grid-template-columns: 1fr; } .kiln-cta-inner { padding: 28px 22px; } } /* ---------- Shop page ---------- */ .shop-section { padding: 50px 0 80px; } .shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .shop-card { display: flex; flex-direction: column; background: var(--cream); border: 1px solid var(--rule-soft); border-radius: 4px; overflow: hidden; transition: border-color .15s var(--ease), transform .25s var(--ease); } .shop-card:hover { border-color: var(--ink-mute); transform: translateY(-2px); } .shop-card .img-wrap { aspect-ratio: 1/1; overflow: hidden; background: var(--cream-2); } .shop-card .img-wrap img { width: 100%; height: 100%; object-fit: contain; background: var(--cream-2); } .shop-card .body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .shop-card .label { font-family: var(--sans); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); } .shop-card h3 { font-size: 1.16rem; margin: 0; } .shop-card .blurb { font-size: .9rem; color: var(--ink-soft); margin: 0; flex: 1; } .shop-card .row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; } .shop-card .price { font-family: var(--serif); font-size: 1.1rem; } .shop-card .buy { font-family: var(--sans); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--ink); padding: 8px 14px; border-radius: 999px; } .shop-card .buy:hover { background: var(--ink); color: var(--cream); } .shop-card.bundle { grid-column: span 2; background: var(--cream-2); } .shop-card.bundle .img-wrap { aspect-ratio: 16/9; } @media (max-width: 980px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } .shop-card.bundle { grid-column: span 2; } } @media (max-width: 540px) { .shop-grid { grid-template-columns: 1fr; } .shop-card.bundle { grid-column: span 1; } } /* ---------- Events page ---------- */ .events-section { padding: 50px 0 80px; } .event-list { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; } .event { display: grid; grid-template-columns: 180px 1fr auto; gap: 28px; align-items: center; padding: 24px 28px; border: 1px solid var(--rule-soft); background: var(--cream); border-radius: 4px; position: relative; overflow: hidden; } .event::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); } .event[data-room="cobalt"]::before { background: var(--cobalt); } .event[data-room="fire"]::before { background: var(--fire); } .event[data-room="forest"]::before { background: var(--forest); } .event[data-room="snow"]::before { background: var(--snow); } .event[data-room="bloom"]::before { background: var(--bloom); } .event[data-room="studio"]::before { background: var(--studio); } .event .when { font-family: var(--serif); font-size: 1.05rem; font-style: italic; color: var(--ink); } .event .when .year { display: block; font-family: var(--sans); font-style: normal; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); } .event .info h3 { margin: 0 0 4px; font-size: 1.18rem; } .event .info .where { font-family: var(--sans); font-size: .85rem; color: var(--ink-mute); } .event .info .type { display: inline-block; font-family: var(--sans); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); background: var(--cream-2); border: 1px solid var(--rule-soft); padding: 3px 8px; border-radius: 999px; margin-bottom: 6px; } .event .info p { font-size: .92rem; color: var(--ink-soft); margin: 6px 0 0; } .event .cta { font-family: var(--sans); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--ink); padding: 10px 18px; border-radius: 999px; white-space: nowrap; } .event .cta:hover { background: var(--ink); color: var(--cream); } .event-sample { margin: 14px 0 0; max-width: 240px; } .event-sample img { display: block; width: 100%; height: auto; border: 1px solid var(--rule-soft); border-radius: 3px; } @media (max-width: 720px) { .event { grid-template-columns: 1fr; gap: 12px; padding: 22px 22px 22px 26px; } .event .cta { justify-self: start; } } /* ---------- Footer ---------- */ .site-footer { background: var(--ink); color: var(--cream); padding: 64px 0 28px; margin-top: 30px; position: relative; } .site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--cobalt) 0% 16.6%, var(--fire) 16.6% 33.3%, var(--forest) 33.3% 50%, var(--snow) 50% 66.6%, var(--bloom) 66.6% 83.3%, var(--studio) 83.3% 100%); } .site-footer .signature { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; display: block; margin-bottom: 8px; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; } .footer-grid p { color: rgba(251, 248, 241, .72); font-size: .94rem; max-width: 40ch; } .footer-grid h4 { font-family: var(--sans); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(251, 248, 241, .55); margin: 0 0 14px; font-weight: 500; } .footer-grid ul { list-style: none; padding: 0; margin: 0; } .footer-grid li { margin-bottom: 8px; } .footer-grid a { color: var(--cream); } .footer-grid a:hover { color: var(--accent); } .socials { display: flex; gap: 12px; margin-top: 14px; } .socials a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgba(251, 248, 241, .25); border-radius: 50%; font-size: .78rem; letter-spacing: .04em; } .socials a:hover { border-color: var(--cream); } .footer-base { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(251, 248, 241, .14); font-size: .82rem; color: rgba(251, 248, 241, .55); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } @media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } } /* ---------- Misc ---------- */ .skip-link { position: absolute; left: -9999px; } .skip-link:focus { position: fixed; top: 12px; left: 12px; background: var(--ink); color: var(--cream); padding: 10px 14px; border-radius: 4px; z-index: 100; } /* ============================================================ Additions: Tutorials feature, Awards list, Press list ============================================================ */ /* ---------- Hero tertiary CTA ---------- */ .btn-tertiary { background: transparent; color: var(--ink-soft); padding: 12px 22px; border: 1px solid var(--rule); border-radius: 999px; font-weight: 500; font-size: 0.95rem; display: inline-flex; align-items: center; transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease); } .btn-tertiary:hover { border-color: var(--accent); color: var(--accent); background: var(--cream); } /* ---------- Tutorials feature section ---------- */ .tutorials-feature { padding: clamp(56px, 8vw, 96px) 0; background: var(--cream-2); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); } .tutorials-head { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: end; margin-bottom: 40px; } .tutorials-head h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin: 0; } .tutorials-head p { color: var(--ink-soft); font-size: 1.05rem; max-width: 56ch; margin: 0; } @media (max-width: 760px) { .tutorials-head { grid-template-columns: 1fr; gap: 16px; } } .tutorials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; } .tutorial-card { display: flex; flex-direction: column; background: var(--cream); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); color: var(--ink); position: relative; } .tutorial-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(26, 22, 20, 0.10); border-color: var(--ink-soft); } .tutorial-card.featured { border-color: var(--fire); box-shadow: 0 0 0 1px var(--fire) inset; } .tutorial-card.featured:hover { border-color: var(--fire-deep); box-shadow: 0 14px 32px rgba(214, 83, 26, 0.18), 0 0 0 1px var(--fire-deep) inset; } .tutorial-cover { aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-3); } .tutorial-cover img { width: 100%; height: 100%; object-fit: contain; background: var(--cream-2); transition: transform .35s var(--ease); } .tutorial-card:hover .tutorial-cover img { transform: scale(1.04); } .tutorial-body { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .tutorial-body .tag { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; } .tutorial-body .tag-fire { color: var(--fire-deep); } .tutorial-body .tag-new { color: var(--cobalt-deep); } .tutorial-card[href$="controlled-stringer"] { border-color: var(--cobalt); box-shadow: 0 0 0 1px var(--cobalt) inset; } .tutorial-card[href$="controlled-stringer"]:hover { border-color: var(--cobalt-deep); box-shadow: 0 14px 32px rgba(31, 78, 168, 0.16), 0 0 0 1px var(--cobalt-deep) inset; } /* Tutorials shop page: "new" card accent */ .shop-card.new { border: 1px solid var(--cobalt); box-shadow: 0 0 0 1px var(--cobalt) inset; position: relative; } .shop-card.new::before { content: "New"; position: absolute; top: 14px; right: 14px; background: var(--cobalt); color: #fff; font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; z-index: 1; } .tutorial-body h3 { font-size: 1.32rem; margin: 0; line-height: 1.2; } .tutorial-body p { color: var(--ink-soft); font-size: 0.94rem; margin: 0; } .tutorials-foot { margin-top: 40px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .tutorials-meta { font-family: var(--sans); color: var(--ink-mute); font-size: 0.88rem; letter-spacing: 0.02em; } /* ---------- Awards list ---------- */ .awards-list, .press-list { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 14px; } .awards-list li, .press-list li { display: grid; grid-template-columns: 92px 1fr; align-items: start; gap: 18px; padding: 18px 20px; background: var(--cream-2); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; } .award-year, .press-year { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--accent-deep); font-weight: 500; } .award-body, .press-body { display: flex; flex-direction: column; gap: 4px; font-size: 1.02rem; color: var(--ink); } .award-where, .press-detail { color: var(--ink-mute); font-size: 0.92rem; } .press-body a { color: var(--accent-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .press-body a:hover { color: var(--accent); } @media (max-width: 540px) { .awards-list li, .press-list li { grid-template-columns: 1fr; gap: 4px; } } .press, .awards { margin-top: 56px; padding-bottom: 24px; } /* ---------- Purchase / sharing notice ---------- */ .purchase-note { background: var(--cream-3); border-left: 3px solid var(--accent); padding: 18px 22px; margin: 0 auto 32px; border-radius: 0 6px 6px 0; max-width: 760px; } .purchase-note__title { display: block; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--accent-deep); margin-bottom: 6px; } .purchase-note p { margin: 0; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.55; } /* ---------- Tutorials fine print on home ---------- */ .tutorials-foot .tutorials-fineprint { width: 100%; margin: 4px 0 0; font-size: 0.85rem; color: var(--ink-mute); font-style: italic; } /* ============================================================ AnnaRhonda room (Annie + Rhonda Waters collaborations) Slate accent, evokes the metal armatures Rhonda contributes ============================================================ */ :root { --annarhonda: #5a6f80; --annarhonda-deep: #2c3e50; } body.room-annarhonda { --accent: var(--annarhonda); --accent-deep: var(--annarhonda-deep); } .room-card.annarhonda { --card-accent: var(--annarhonda); --card-accent-deep: var(--annarhonda-deep); } .pill.annarhonda .dot { background: var(--annarhonda); } .room-section.annarhonda .room-swatch { background: var(--annarhonda); } .room-section.annarhonda .room-eyebrow { color: var(--annarhonda-deep); } .piece[data-room="annarhonda"] .room-tag .swatch { background: var(--annarhonda); } .event[data-room="annarhonda"]::before { background: var(--annarhonda); } /* AnnaRhonda piece body shows dimensions + price (more info than other rooms) */ .piece .dimensions { color: var(--ink-mute); font-size: 0.86rem; margin: 2px 0 0; letter-spacing: 0.01em; } .piece .price { color: var(--ink); font-weight: 600; font-size: 0.95rem; margin: 4px 0 0; } /* Gallery commissions callout, sits at top of gallery */ .commissions-note { background: var(--cream-2); border-left: 3px solid var(--accent); padding: 18px 22px; margin: 0 auto 32px; border-radius: 0 6px 6px 0; max-width: 760px; } .commissions-note__title { display: block; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--accent-deep); margin-bottom: 6px; } .commissions-note p { margin: 0; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.55; } /* "One of a kind" note on certain gallery pieces */ .piece .one-of-a-kind { color: var(--accent-deep); font-size: 0.85rem; margin: 4px 0 0; font-family: var(--serif); } /* ============================================================ PHASE 2: auth pages (login / forgot / reset / account) ============================================================ */ .auth-page { max-width: 540px; margin: 0 auto; padding: 64px 22px 96px; } .auth-card { background: #fff; border: 1px solid var(--cream-3); border-radius: 8px; padding: 40px 36px; box-shadow: 0 6px 24px rgba(26, 22, 20, 0.04); } .auth-card-wide { max-width: 760px; } .auth-page .auth-card-wide { /* widen the page wrapper for the library view */ } .auth-card h1 { font-family: var(--serif); font-weight: 500; font-size: 1.85rem; letter-spacing: 0.01em; margin: 0 0 6px; color: var(--ink); } .auth-lede { color: var(--ink-soft); font-size: 0.97rem; line-height: 1.55; margin: 0 0 22px; } .auth-form { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; } .auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--ink-mute); letter-spacing: 0.04em; text-transform: uppercase; } .auth-form input { font: inherit; font-size: 1rem; color: var(--ink); background: var(--cream); border: 1px solid var(--cream-3); border-radius: 5px; padding: 11px 13px; text-transform: none; letter-spacing: normal; } .auth-form input:focus { outline: 2px solid var(--accent, var(--ink)); outline-offset: 1px; background: #fff; } .auth-form .btn { margin-top: 6px; } .auth-meta { font-size: 0.9rem; color: var(--ink-mute); text-align: center; margin: 6px 0 0; } .auth-meta a { color: var(--ink); text-decoration: underline; } .auth-error, .auth-success { border-radius: 5px; padding: 11px 14px; font-size: 0.92rem; line-height: 1.45; margin: 4px 0 18px; } .auth-error { background: #fbeae8; color: #8a2a1f; border: 1px solid #f1c1b9; } .auth-success { background: #eaf3ea; color: #2a5a2a; border: 1px solid #c1dcc1; } .auth-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .auth-header-row > div { flex: 1 1 auto; min-width: 220px; } .auth-header-row .btn { flex: 0 0 auto; } .library-empty { background: var(--cream-2); border-radius: 6px; padding: 28px 26px; text-align: center; color: var(--ink-soft); } .library-empty p:first-child { margin-top: 0; } .library-empty p:last-child { margin-bottom: 0; } .library-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .library-list li { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; background: var(--cream); border: 1px solid var(--cream-3); border-radius: 6px; } .library-list .title { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); } /* Auth-aware nav link injected by account.js — sits at the end of the primary nav. Slightly de-emphasized so it doesn't compete with the main sections. */ .nav-auth { color: var(--ink-mute) !important; } .nav-auth.active { color: var(--ink) !important; } @media (max-width: 540px) { .auth-page { padding: 32px 16px 64px; } .auth-card { padding: 28px 22px; } .auth-card h1 { font-size: 1.55rem; } }