/* Ryddat Studio system — new visual identity for the company/studio landing page (index.html), the Documents product page (documents.html), and the site-wide legal pages (terms.html, privacy.html). World: "Key counter" — a wall of ready-cut stock keys beside a counter where one key is shown mid-cut to an exact bitting. Scoped entirely under body.studio, which all of the above opt into via their class. Loaded AFTER styles.css; every shared component (header, nav, buttons, footer, legal pages, forms) re-themes automatically because it already reads these same custom-property names. */ body.studio { --color-primary: #1E2420; --color-on-primary: #FAF7EF; --color-secondary: #4B5952; --color-accent: #9C6B1F; --color-accent-dark: #7A5417; --color-accent-tint: #F1E4C4; --color-background: #EFEAE0; --color-foreground: #1B211E; --color-muted: #E6E0D1; --color-border: #D9D0BC; --color-white: #FAF7EF; --color-destructive: #9C2B1B; --color-destructive-tint: #F3DCD2; --color-warning: #8A6D1B; --color-warning-tint: #EFE7C9; --color-success: #3F6B3A; --color-success-tint: #DEE8DA; --color-signal: #B23A20; --color-signal-dark: #8E2E19; --color-signal-tint: #F3DCD2; --color-on-primary-muted: #C9BCA0; --color-ghost-num: #D9D0BC; --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Big Shoulders", "Archivo", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --radius-full: 4px; --shadow-sm: 2px 2px 0 0 rgba(30, 36, 32, 0.16); --shadow-md: 3px 3px 0 0 rgba(30, 36, 32, 0.26); --shadow-lg: 5px 5px 0 0 rgba(30, 36, 32, 0.30); background: var(--color-background); } /* ---------- Type ---------- */ body.studio h1, body.studio h2, body.studio h3 { letter-spacing: -0.01em; } body.studio .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; } body.studio .eyebrow, body.studio .section-label { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.06em; } body.studio .kicker, body.studio .tag-label { font-family: var(--font-mono); } /* ---------- Header ---------- */ body.studio .site-header { background: var(--color-background); border-bottom: 1px solid var(--color-border); } body.studio .nav a { font-weight: 600; position: relative; } body.studio .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-out); } body.studio .nav a:hover::after { transform: scaleX(1); } body.studio .lang-trigger, body.studio .lang-menu { border-radius: var(--radius-sm); } /* ---------- Buttons ---------- */ body.studio .btn { font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.03em; border-radius: var(--radius-full); } body.studio .btn-primary { box-shadow: var(--shadow-sm); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); } body.studio .btn-primary:hover { box-shadow: var(--shadow-md); transform: translate(-1px, -1px); } body.studio .btn-ghost { border: 1.5px solid var(--color-primary); color: var(--color-primary); } body.studio .btn-ghost:hover { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); } body.studio .btn-invert { box-shadow: var(--shadow-sm); } /* .btn-ghost's ink-on-transparent styling is illegible on the dark CTA section (same ink as its own background) — give it light colors there. */ body.studio .cta-section .btn-ghost, body.studio .mobile-cta-bar .btn-ghost { border-color: var(--color-on-primary); color: var(--color-on-primary); } body.studio .cta-section .btn-ghost:hover { background: var(--color-on-primary); color: var(--color-primary); border-color: var(--color-on-primary); } body.studio .btn-signal { background: var(--color-signal); color: #FAF7EF; box-shadow: var(--shadow-sm); } body.studio .btn-signal:hover { background: var(--color-signal-dark); box-shadow: var(--shadow-md); transform: translate(-1px, -1px); } /* ---------- Footer ---------- */ body.studio .cta-section .site-footer, body.studio .site-footer.legal-footer { background: var(--color-primary); } body.studio .footer-links button { font-family: var(--font-sans); } /* ================================================================ HERO — the key wall ================================================================ */ body.studio .key-hero { position: relative; padding-top: 64px; overflow: hidden; } body.studio .key-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: center; } body.studio .key-hero-copy .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--color-accent); font-size: 0.78rem; margin-bottom: 18px; } body.studio .key-hero-copy .eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--color-signal); flex-shrink: 0; } body.studio .key-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.1rem); line-height: 1.02; text-transform: uppercase; } body.studio .key-hero h1 .text-accent { color: var(--color-accent); } body.studio .text-signal { color: var(--color-signal); } body.studio .key-hero-sub { font-size: 1.1rem; max-width: 46ch; margin-top: 20px; color: var(--color-secondary); } body.studio .key-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; } body.studio .key-hero-facts { display: flex; gap: 28px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--color-border); flex-wrap: wrap; } body.studio .key-fact { display: flex; flex-direction: column; gap: 2px; } body.studio .key-fact-num { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--color-primary); line-height: 1; } body.studio .key-fact-label { font-size: 0.82rem; color: var(--color-secondary); max-width: 20ch; } /* --- The wall itself --- */ body.studio .key-wall { position: relative; background: repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(30,36,32,0.05) 27px, rgba(30,36,32,0.05) 28px), repeating-linear-gradient(90deg, transparent, transparent 27px, rgba(30,36,32,0.05) 27px, rgba(30,36,32,0.05) 28px), var(--color-muted); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-lg); } body.studio .key-wall-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 10px; } body.studio .key-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } body.studio .key-glyph-wrap { width: 100%; aspect-ratio: 1.4 / 1; display: flex; align-items: center; justify-content: center; } body.studio .key-glyph { width: 78%; height: 78%; } body.studio .key-tile-empty .key-glyph { color: var(--color-secondary); opacity: 0.22; } body.studio .key-tile-filled .key-glyph { color: var(--color-primary); opacity: 1; } body.studio .key-tile-accent .key-glyph { color: var(--color-accent); opacity: 0.75; } body.studio .key-tile-cutting .key-glyph { color: var(--color-signal); opacity: 1; } body.studio .key-tile-label { font-size: 0.66rem; font-family: var(--font-mono); color: var(--color-secondary); line-height: 1.3; } body.studio .key-tile-filled .key-tile-label, body.studio .key-tile-accent .key-tile-label { color: var(--color-primary); font-weight: 600; } body.studio .key-tile-cutting { position: relative; } body.studio .key-tile-cutting .key-glyph-wrap { position: relative; } body.studio .key-cut-spark { position: absolute; top: 50%; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, transparent, var(--color-signal) 45%, #fff 50%, var(--color-signal) 55%, transparent); transform: translateY(-50%) scaleX(0); transform-origin: left; animation: keyCutSweep 3.6s var(--ease-out) infinite; } @keyframes keyCutSweep { 0% { transform: translateY(-50%) scaleX(0); opacity: 0; } 8% { opacity: 1; } 45% { transform: translateY(-50%) scaleX(1); opacity: 1; } 60% { transform: translateY(-50%) scaleX(1); opacity: 0; } 100% { transform: translateY(-50%) scaleX(1); opacity: 0; } } body.studio .key-wall-note { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--color-border); font-size: 0.76rem; color: var(--color-secondary); text-align: center; } @media (prefers-reduced-motion: reduce) { body.studio .key-cut-spark { animation: none; opacity: 0.8; transform: translateY(-50%) scaleX(1); } } /* ================================================================ TWO-TRACK "how it works" ================================================================ */ body.studio .track-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } body.studio .track { background: var(--color-white); padding: 40px; display: flex; flex-direction: column; min-width: 0; } body.studio .track-kicker { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--color-secondary); text-transform: uppercase; margin-bottom: 10px; } body.studio .track[data-track="signal"] .track-kicker { color: var(--color-signal); } body.studio .track[data-track="accent"] .track-kicker { color: var(--color-accent); } body.studio .track h3 { font-family: var(--font-display); font-size: 1.7rem; text-transform: uppercase; margin-bottom: 10px; } body.studio .track-desc { color: var(--color-secondary); margin-bottom: 24px; } body.studio .track-steps { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 14px; flex-grow: 1; } body.studio .track-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: baseline; } body.studio .track-step-num { font-family: var(--font-mono); font-weight: 700; color: var(--color-border); font-size: 1rem; } body.studio .track[data-track="signal"] .track-step-num { color: var(--color-signal); opacity: 0.55; } body.studio .track[data-track="accent"] .track-step-num { color: var(--color-accent); opacity: 0.55; } body.studio .track-steps strong { color: var(--color-primary); display: block; font-weight: 600; } body.studio .track-steps span.step-desc { color: var(--color-secondary); font-size: 0.92rem; } @media (max-width: 720px) { body.studio .track-grid { grid-template-columns: 1fr; } } /* ================================================================ CATALOG ================================================================ */ /* The catalog is a horizontal "shelf" you scroll along, not a fixed grid — so it takes a 4th, 6th, Nth product without either squashing the tiles or dropping an orphan onto a second row. Snap-scroll rail, thin on-brand scrollbar, edge fades + optional arrow controls driven from script.js (data-scroll = none | start | mid | end). */ body.studio .catalog-rail-wrap { position: relative; } body.studio .catalog-grid { display: flex; gap: 24px; overflow-x: auto; overflow-y: hidden; /* top padding keeps the cards' hover lift from being clipped by overflow-y:hidden; bottom padding leaves room for the scrollbar */ padding: 4px 4px 16px; scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; } body.studio .catalog-grid::-webkit-scrollbar { height: 8px; } body.studio .catalog-grid::-webkit-scrollbar-track { background: transparent; } body.studio .catalog-grid::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; } body.studio .catalog-grid::-webkit-scrollbar-thumb:hover { background: var(--color-secondary); } /* Fade the shelf edges toward the section background so a mid-scroll rail reads as "more this way", not "content got cut off". */ body.studio .catalog-rail-wrap::before, body.studio .catalog-rail-wrap::after { content: ""; position: absolute; top: 0; bottom: 16px; width: 52px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity var(--duration-base) var(--ease-out); } body.studio .catalog-rail-wrap::before { left: 0; background: linear-gradient(90deg, var(--color-white), rgba(250, 247, 239, 0)); } body.studio .catalog-rail-wrap::after { right: 0; background: linear-gradient(270deg, var(--color-white), rgba(250, 247, 239, 0)); } body.studio .catalog-rail-wrap[data-scroll="mid"]::before, body.studio .catalog-rail-wrap[data-scroll="end"]::before { opacity: 1; } body.studio .catalog-rail-wrap[data-scroll="start"]::after, body.studio .catalog-rail-wrap[data-scroll="mid"]::after { opacity: 1; } /* Arrow controls — hover-capable pointers on wider screens only; hidden entirely when the whole shelf already fits (data-scroll="none"). */ body.studio .catalog-nav { display: none; } @media (hover: hover) and (pointer: fine) and (min-width: 900px) { body.studio .catalog-rail-wrap:not([data-scroll="none"]) .catalog-nav { display: flex; gap: 8px; position: absolute; top: -52px; right: 0; } } body.studio .catalog-nav button { width: 38px; height: 38px; display: grid; place-items: center; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); color: var(--color-primary); cursor: pointer; transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } body.studio .catalog-nav button:hover { box-shadow: var(--shadow-md); transform: translate(-1px, -1px); } body.studio .catalog-nav button:disabled { opacity: 0.35; box-shadow: none; transform: none; cursor: default; } body.studio .catalog-nav svg { width: 18px; height: 18px; } body.studio .catalog-card { flex: 0 0 clamp(258px, 80vw, 312px); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; min-width: 0; transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } body.studio .catalog-card:hover { box-shadow: var(--shadow-md); transform: translate(-2px, -2px); } /* ── Pinned horizontal shelf ─────────────────────────────────────────────────── On wide screens with motion allowed, script.js adds .catalog-pinned to #products, grows it tall, and sticks .catalog-pin to the viewport. Page scroll through the extra height is mapped onto the rail's scrollLeft, so scrolling down walks the shelf leftward past the viewport before the page moves on — and onto --reveal (0 → 1) as the section rises into view, which places each card on the shelf: it lifts, its tilt straightens and it settles to full size, staggered left-to-right, logo clicking in a beat later. Without the class it's a normal section with a natively-scrollable rail; static under reduced motion or no JS (--reveal defaults to 1). */ body.studio #products { --reveal: 1; } body.studio #products.catalog-pinned { padding: 0; /* height is set inline by script.js: 100vh + horizontal travel */ } body.studio #products.catalog-pinned .catalog-pin { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 72px 0; } /* While pinned the rail is scroll-driven, not dragged: hide its arrows and scrollbar, but keep the edge fades as "more this way" cues. */ body.studio #products.catalog-pinned .catalog-nav { display: none; } body.studio #products.catalog-pinned .catalog-grid { overflow: hidden; scrollbar-width: none; } body.studio #products.catalog-pinned .catalog-grid::-webkit-scrollbar { display: none; } body.studio .catalog-card { --stagger: 0; --lean: -1.7deg; /* how far this card is through its own slice of the reveal */ --p: clamp(0, calc((var(--reveal, 1) - var(--stagger)) / 0.6), 1); opacity: var(--p); translate: 0 calc((1 - var(--p)) * 42px); scale: calc(0.93 + var(--p) * 0.07); rotate: calc((1 - var(--p)) * var(--lean)); } body.studio .catalog-card:nth-child(1) { --stagger: 0; --lean: -1.7deg; } body.studio .catalog-card:nth-child(2) { --stagger: 0.08; --lean: 1.7deg; } body.studio .catalog-card:nth-child(3) { --stagger: 0.16; --lean: -1.7deg; } body.studio .catalog-card:nth-child(4) { --stagger: 0.24; --lean: 1.7deg; } /* Each product's own logo — a Ryddat "key badge" tinted to that product's accent (Documents blue, Build moss, Renewals plum, open slot dim rust). */ body.studio .catalog-card-icon { display: block; width: 52px; height: 52px; margin-bottom: 18px; /* lands just after its card, from small + turned */ --ip: clamp(0, calc((var(--reveal, 1) - var(--stagger) - 0.06) / 0.5), 1); transform-origin: 28% 72%; scale: calc(0.5 + var(--ip) * 0.5); rotate: calc((1 - var(--ip)) * -16deg); opacity: calc(0.2 + var(--ip) * 0.8); } @media (prefers-reduced-motion: reduce) { body.studio .catalog-card, body.studio .catalog-card-icon { opacity: 1; translate: none; scale: none; rotate: none; } } body.studio .catalog-card-status { display: inline-flex; align-self: flex-start; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-sm); margin-bottom: 12px; } body.studio .status-live { background: var(--color-accent-tint); color: var(--color-accent-dark); } body.studio .status-concept { background: var(--color-muted); color: var(--color-secondary); } body.studio .status-open { background: var(--color-signal-tint); color: var(--color-signal-dark); } body.studio .catalog-card h3 { font-family: var(--font-display); font-size: 1.35rem; text-transform: uppercase; margin-bottom: 8px; } body.studio .catalog-card p { flex-grow: 1; margin-bottom: 18px; } body.studio .catalog-card-link { font-weight: 700; color: var(--color-primary); display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; } body.studio .catalog-card-link .icon { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-out); } body.studio .catalog-card-link:hover .icon { transform: translateX(3px); } body.studio .catalog-card-open .catalog-card-link { color: var(--color-signal); } /* ================================================================ CUSTOM BUILD SHOWCASE ================================================================ */ body.studio .build-showcase { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 48px; align-items: center; } body.studio .build-ticket { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 0; overflow: hidden; } body.studio .build-ticket-head { background: var(--color-primary); color: var(--color-on-primary); padding: 16px 22px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; } body.studio .build-ticket-head span:last-child { color: var(--color-signal); opacity: 0.9; } body.studio .build-ticket-body { padding: 26px 22px; } body.studio .build-ticket-illustrative { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-signal); border: 1px dashed var(--color-signal); padding: 5px 9px; display: inline-block; margin-bottom: 14px; } body.studio .build-ticket-body h3 { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; margin-bottom: 10px; } body.studio .build-ticket-specs { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px dashed var(--color-border); display: flex; flex-direction: column; gap: 8px; } body.studio .build-ticket-specs > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; font-size: 0.85rem; margin: 0; } body.studio .build-ticket-specs dt, body.studio .build-ticket-specs .spec-key { font-family: var(--font-mono); color: var(--color-secondary); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.03em; margin: 0; } body.studio .build-ticket-specs dd, body.studio .build-ticket-specs .spec-val { color: var(--color-primary); font-weight: 600; margin: 0; } body.studio .build-copy .section-label { color: var(--color-signal); } body.studio .build-copy h2 { margin-bottom: 16px; } body.studio .build-copy > p { margin-bottom: 24px; max-width: 52ch; } @media (max-width: 980px) { body.studio .build-showcase { grid-template-columns: 1fr; } } /* ================================================================ Section rhythm + misc ================================================================ */ body.studio .section-alt { background: var(--color-white); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } body.studio .section-label { color: var(--color-accent); } /* styles.css gives .eyebrow an accent-tint pill (a leftover from the navy system); in the studio world the hero eyebrow is a plain mono label with a signal square, so drop the pill background/padding here. */ body.studio .key-hero-copy .eyebrow { background: none; padding: 0; } body.studio .cta-dual { display: flex; gap: 16px; flex-wrap: wrap; } body.studio .studio-crumb { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-secondary); text-transform: uppercase; letter-spacing: 0.04em; } /* ---------- Legal pages under the studio system ---------- */ body.studio .legal-note { background: var(--color-muted); border: 1px dashed var(--color-border); border-radius: var(--radius-sm); } body.studio .legal-toc { background: var(--color-white); } body.studio .legal-content h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.4rem; border-bottom: 1px solid var(--color-border); padding-bottom: 10px; } @media (max-width: 980px) { body.studio .key-hero-grid { grid-template-columns: 1fr; } body.studio .key-wall { max-width: 460px; margin: 0 auto; } } /* ================================================================ PHONE LAYOUT — a mobile-specific pass, not a squeezed desktop one. Kicks in at 720px, the same point the header collapses to a burger. Key moves: the decorative "key wall" shrinks from a ~2-screen pegboard to a slim 4-key shelf strip; the hero facts become an editorial ledger of stacked rows; every in-flow CTA goes full-width and thumb-sized; the catalog rail bleeds to the screen edges with scroll-snap; the two-track and build blocks lose their desktop padding. ================================================================ */ @media (max-width: 720px) { /* ---- Hero ---- */ body.studio .key-hero { padding-top: 26px; } body.studio .key-hero-grid { gap: 4px; } body.studio .key-hero-copy .eyebrow { font-size: 0.68rem; margin-bottom: 14px; letter-spacing: 0.04em; } body.studio .key-hero h1 { font-size: clamp(2.05rem, 8.7vw, 2.7rem); line-height: 1.06; } body.studio .key-hero-sub { font-size: 1rem; max-width: none; margin-top: 16px; line-height: 1.55; } body.studio .key-hero-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; } body.studio .key-hero-actions .btn { width: 100%; padding: 15px 22px; } /* Hero facts — a stacked ledger: big numeral, label beside it, hairline rules between. Replaces the desktop flex row that wrapped 2 + 1. */ body.studio .key-hero-facts { flex-direction: column; gap: 0; margin-top: 26px; padding-top: 4px; border-top: 0; } body.studio .key-fact { flex-direction: row; align-items: baseline; gap: 14px; padding: 13px 0; border-top: 1px solid var(--color-border); } body.studio .key-fact-num { font-size: 1.5rem; min-width: 1.5em; flex-shrink: 0; } body.studio .key-fact-label { font-size: 0.82rem; max-width: none; } /* Key wall — from full pegboard to a compact "shelf of 4 keys". Hide the blank stock tiles, lay the meaningful ones in one row, kill the height. */ body.studio .key-wall { max-width: none; margin: 6px 0 0; padding: 14px; box-shadow: var(--shadow-md); } body.studio .key-wall-grid { display: flex; grid-template-columns: none; gap: 8px; } body.studio .key-tile-empty { display: none; } body.studio .key-tile { flex: 1; min-width: 0; } body.studio .key-glyph-wrap { aspect-ratio: 1.5 / 1; } body.studio .key-tile-label { font-size: 0.6rem; } body.studio .key-wall-note { margin-top: 12px; padding-top: 10px; font-size: 0.68rem; } /* ---- Two-track "how it works" ---- */ body.studio .track-grid { grid-template-columns: 1fr; } body.studio .track { padding: 24px 20px; } body.studio .track h3 { font-size: 1.4rem; } body.studio .track-desc { margin-bottom: 20px; } body.studio .track-steps { gap: 12px; margin-bottom: 22px; } body.studio .track .btn { width: 100%; } /* ---- Catalog rail — full-bleed carousel with scroll-snap ---- */ /* contain the negative-margin bleed so it can't add page-wide h-scroll (the rail's own overflow-x:auto still scrolls normally) */ body.studio #products { overflow-x: hidden; overflow-x: clip; } body.studio .catalog-rail-wrap { margin: 0 -24px; } body.studio .catalog-grid { padding-left: 24px; padding-right: 24px; scroll-snap-type: x proximity; scroll-padding-left: 24px; } body.studio .catalog-card { flex-basis: 76vw; padding: 22px; scroll-snap-align: start; } body.studio .catalog-card h3 { font-size: 1.25rem; } body.studio .catalog-card p { margin-bottom: 16px; } /* ---- Custom build showcase ---- */ body.studio .build-showcase { gap: 28px; } body.studio .build-copy .btn { width: 100%; } body.studio .build-ticket-head { padding: 13px 18px; } body.studio .build-ticket-body { padding: 20px 18px; } body.studio .build-ticket-body h3 { font-size: 1.3rem; } body.studio .build-ticket-specs { gap: 12px; } body.studio .build-ticket-specs > div { grid-template-columns: 1fr; gap: 3px; } /* ---- Final CTA ---- */ body.studio .cta-dual { flex-direction: column; } body.studio .cta-dual .btn { width: 100%; } body.studio .cta-form-wrap { width: 100%; } /* ---- Fixed bottom action bar — warm it to the paper palette ---- */ body.studio .mobile-cta-bar { background: rgba(239, 234, 224, 0.94); border-top-color: var(--color-border); } } /* ================================================================ Shared-component color fixes — styles.css hardcodes several cool slate-blue tones (#64748b/#94a3b8/#7dd3fc/#cbd5e1 etc.) tuned for the Enterprise Trust navy system. Every body.studio page reuses these same components (footer, cta-section, legal pages, feature cards, hero product-card, step list), so they need warm equivalents here rather than clashing cool grays on a warm ink/paper page. ================================================================ */ body.studio .section-label-inverse { color: #D9B871; } body.studio .problem-num { color: var(--color-ghost-num); } body.studio .suite-crumb { color: var(--color-secondary); } body.studio .trust-strip { color: var(--color-secondary); } body.studio .product-card-note { color: var(--color-secondary); } body.studio .step-num { color: var(--color-secondary); } body.studio .feature-card:hover { border-color: var(--color-secondary); } body.studio .footer-links a, body.studio .footer-links button, body.studio .footer-email { color: var(--color-on-primary-muted); } body.studio .footer-meta { color: var(--color-on-primary-muted); } body.studio .footer-divider { color: #5A5044; } body.studio .legal-toc-title { color: var(--color-secondary); } body.studio .legal-updated { color: var(--color-secondary); } body.studio .form-section-title { color: var(--color-secondary); } body.studio .form-note { color: var(--color-secondary); } body.studio .cta-sub { color: var(--color-on-primary-muted); } body.studio .input-group input::placeholder { color: var(--color-secondary); } body.studio .input-icon { color: var(--color-accent-tint); } body.studio .form-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5952' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E"); } /* ================================================================ Per-product accent — same shared system (type, shape, shadow, ink/paper neutrals), different accent hue per product, the way Google's own products share Material but not a color. Ryddat Documents keeps a blue lineage from its original accent, just deepened to sit in the warm paper world instead of a cool one. ================================================================ */ body.studio.product-documents { --color-accent: #2C5E73; --color-accent-dark: #1F4553; --color-accent-tint: #DCE8EA; } /* Ryddat Build: a warm olive/moss lineage — distinct from Documents' blue, still warm enough to sit in the ink/paper world rather than fight it. */ body.studio.product-build { --color-accent: #5C6B2E; --color-accent-dark: #454F22; --color-accent-tint: #E3E6CE; } body.studio.product-documents .section-label-inverse { color: #8FC3D6; } /* Ryddat Renewals: a plum / mauve lineage — its own hue away from Documents' blue and Build's moss, still warm enough for the ink/paper world. */ body.studio.product-renewals { --color-accent: #7A4E6D; --color-accent-dark: #5E3B54; --color-accent-tint: #EBDFE8; } body.studio.product-renewals .section-label-inverse { color: #CFA8C6; } /* ---------- Renewals: the "look ahead" demo ---------- */ body.studio .renewal-demo { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 26px 26px 20px; max-width: 760px; } body.studio .renewal-demo-controls { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px dashed var(--color-border); } body.studio .renewal-demo-controls label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-secondary); flex-shrink: 0; } body.studio .renewal-demo-controls output { font-family: var(--font-mono); font-weight: 700; font-size: 0.82rem; color: var(--color-accent-dark); min-width: 4.5em; text-align: right; flex-shrink: 0; } body.studio .renewal-demo input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; height: 4px; border-radius: 2px; background: var(--color-border); outline-offset: 4px; } body.studio .renewal-demo input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 22px; border-radius: var(--radius-sm); background: var(--color-accent); border: 1px solid var(--color-accent-dark); box-shadow: var(--shadow-sm); cursor: pointer; } body.studio .renewal-demo input[type="range"]::-moz-range-thumb { width: 16px; height: 22px; border-radius: var(--radius-sm); background: var(--color-accent); border: 1px solid var(--color-accent-dark); box-shadow: var(--shadow-sm); cursor: pointer; } body.studio .renewal-demo-summary { margin: 14px 0 4px; font-weight: 600; color: var(--color-primary); font-size: 0.95rem; } body.studio .renewal-row-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; } body.studio .renewal-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 4px; border-top: 1px solid var(--color-border); } body.studio .renewal-row:first-child { border-top: 0; } body.studio .renewal-mark { width: 8px; height: 8px; background: var(--color-border); } body.studio .renewal-row[data-state="overdue"] .renewal-mark { background: var(--color-destructive); } body.studio .renewal-row[data-state="soon"] .renewal-mark { background: var(--color-warning); } body.studio .renewal-row[data-state="current"] .renewal-mark { background: var(--color-success); } body.studio .renewal-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } body.studio .renewal-name { font-weight: 700; font-size: 0.9rem; color: var(--color-primary); } body.studio .renewal-cat { font-size: 0.78rem; color: var(--color-secondary); } body.studio .renewal-due { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-secondary); text-align: right; white-space: nowrap; } @media (max-width: 620px) { body.studio .renewal-demo { padding: 18px 16px 14px; } body.studio .renewal-demo-controls { flex-wrap: wrap; } body.studio .renewal-demo-controls input[type="range"] { order: 3; flex-basis: 100%; } body.studio .renewal-row { grid-template-columns: 8px minmax(0, 1fr) auto; } body.studio .renewal-due { display: none; } }