/* 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 ================================================================ */ body.studio .catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } body.studio .catalog-card { 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); } body.studio .catalog-card-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--color-muted); border-radius: var(--radius-md); margin-bottom: 18px; } body.studio .catalog-card-icon .key-glyph { width: 60%; height: 60%; color: var(--color-primary); } body.studio .catalog-card-live .catalog-card-icon { background: var(--color-accent-tint); } body.studio .catalog-card-live .catalog-card-icon .key-glyph { color: var(--color-accent); } body.studio .catalog-card-open .catalog-card-icon .key-glyph { color: var(--color-signal); opacity: 0.55; } 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); } @media (max-width: 980px) { body.studio .catalog-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { body.studio .catalog-grid { grid-template-columns: 1fr; } } /* ================================================================ 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); } 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; } } @media (max-width: 640px) { body.studio .key-wall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.studio .key-hero-facts { gap: 20px; } } /* ================================================================ 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; } body.studio.product-documents .section-label-inverse { color: #8FC3D6; }