/* ===================================================== * Fritill — main stylesheet * Theme variables come from config.js (applied via JS). * ===================================================== */ :root { --primary: #2D1B4E; --accent: #8B3A62; --highlight: #D4A574; --support: #6B7B5A; --ground: #F0E6D2; --ink: #1a1410; } html { scroll-behavior: smooth; } body { font-family: var(--font-body, 'Inter Tight'), system-ui, sans-serif; background: var(--ground); color: var(--ink); transition: background-color 400ms ease, color 400ms ease; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Color transitions only during a theme swap, scoped via .theme-transition on */ html.theme-transition, html.theme-transition body, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition-property: background-color, color, border-color, fill, stroke, box-shadow; transition-duration: 500ms; transition-timing-function: cubic-bezier(.4,0,.2,1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0.001ms !important; } } .font-display { font-family: var(--font-display, 'Fraunces'), 'Times New Roman', serif; font-optical-sizing: auto; } .font-body { font-family: var(--font-body, 'Inter Tight'), system-ui, sans-serif; } .font-mono { font-family: var(--font-mono, 'JetBrains Mono'), ui-monospace, monospace; } .accent { color: var(--accent); } .bg-primary { background-color: var(--primary); } .bg-ground { background-color: var(--ground); } .text-ground { color: var(--ground); } /* Italic accent words inside Fraunces display headlines */ .display em, .display i { font-style: italic; color: var(--accent); font-weight: 400; } /* Grain overlay */ .grain { position: fixed; inset: 0; pointer-events: none; z-index: 30; mix-blend-mode: multiply; opacity: 0.06; background-image: url("data:image/svg+xml;utf8,"); } /* Petal drift animations */ @keyframes drift-a { 0% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(18px,-22px) rotate(8deg); } 100% { transform: translate(0,0) rotate(0deg); } } @keyframes drift-b { 0% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-22px,16px) rotate(-10deg); } 100% { transform: translate(0,0) rotate(0deg); } } .drift-a { animation: drift-a 14s ease-in-out infinite; transform-origin: center; } .drift-b { animation: drift-b 18s ease-in-out infinite; transform-origin: center; } /* Subtle bloom pulse on the i-dot */ @keyframes petal-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .petal-pulse { animation: petal-pulse 6s ease-in-out infinite; transform-origin: center; } /* Bloom sway — gentle breeze on the hovered i-mark */ @keyframes bloom-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } /* Service entry hover reveal */ .service-row .reveal { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 500ms cubic-bezier(.4,0,.2,1), opacity 350ms ease, margin-top 400ms ease; } .service-row:hover .reveal, .service-row:focus-within .reveal { max-height: 120px; opacity: 1; margin-top: 18px; } .service-row { cursor: pointer; } .service-row .num { transition: color 400ms ease, transform 500ms ease; } .service-row:hover .num { color: var(--accent); transform: translateX(-4px); } .service-row:hover .arrow { transform: translateX(8px); color: var(--accent); } .arrow { transition: transform 400ms ease, color 400ms ease; } /* Selection */ ::selection { background: var(--accent); color: var(--ground); } /* Hide scrollbars on overflow rows */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { scrollbar-width: none; } /* Hairlines that respect theme */ .hair { border-color: color-mix(in oklab, var(--ink) 18%, transparent); } .hair-lt { border-color: color-mix(in oklab, var(--ground) 35%, transparent); } /* Work card hover */ .work-card { transition: transform 500ms cubic-bezier(.2,.7,.2,1); } .work-card:hover { transform: translateY(-4px); } .work-card .swatch { transition: transform 700ms cubic-bezier(.2,.7,.2,1); } .work-card:hover .swatch { transform: scale(1.03); } /* Approach card */ .quote-rule { border-left: 2px solid var(--accent); } /* Capabilities grid — kill left border on first card of each row at every breakpoint */ .capabilities-grid { align-items: stretch; } .capabilities-grid > * { border-left: none !important; height: 100%; display: flex; } .capabilities-grid > * > * { width: 100%; } @media (min-width: 640px) and (max-width: 1023.98px) { .capabilities-grid > *:nth-child(2n+2) { border-left: 1px solid color-mix(in oklab, var(--ink) 12%, transparent) !important; } } @media (min-width: 1024px) { .capabilities-grid > *:not(:nth-child(5n+1)) { border-left: 1px solid color-mix(in oklab, var(--ink) 12%, transparent) !important; } }