/* ============================================================================= SELF-CONTAINED VIEW LAYOUTS Each view mode manages its own layout completely. No global grid coordination or CSS variable inheritance. Views: - .view-calc: 3-col grid (num | input | result), 2-col on mobile - .view-present: Flex column with full-width sections - .view-text: Block layout with TextEditView managing its own grid Context: - .ctx-compact: Forces compact/embed mode (no row numbers, smaller spacing) - data-responsive="true": Enables responsive row number hiding on mobile ============================================================================= */ /* BASE WRAPPER - Minimal, view-agnostic */ calc[data-calc-wrapper] { display: block; font-size: var(--font-size, var(--calc-font-size, 16px)); width: 100%; max-width: 100%; /* Shared spacing variables */ --calc-grid-gap-x: var(--gap-x, var(--calc-gap-x, 0.5rem)); --calc-grid-gap-y: var(--gap-y, var(--calc-gap-y, 0.5rem)); --calc-padding-x: var(--padding-x, 0); --calc-padding-y: var(--padding-y, 0); /* Use the variables */ padding: var(--calc-padding-y) var(--calc-padding-x); border-radius: var(--calc-radius, 0); background-color: var(--calc-bg-color, transparent); overflow: var(--calc-card-overflow, hidden); /* Ensure rounded corners clip content */ } /* ============================================================================= LAYOUT CONTEXTS (Home, Single, Embed) State managed via data-view-context attribute on ============================================================================= */ /* Global Body Background Sync - ensure theme colors apply everywhere */ body[data-view-context] { background-color: var(--bg) !important; } /* Main Workspace Padding */ [data-id-center-workspace] { transition: padding var(--duration-medium); } body[data-view-context="home"] #live-calc { background-color: transparent; border: none; box-shadow: none; padding: 0; backdrop-filter: none; } body[data-view-context="home"] #live-calc { display: contents; } @media (min-width: 1200px) { body[data-view-context="home"] calc[data-calc-wrapper], body[data-view-context="single"] calc[data-calc-wrapper] { background-color: var(--calc-card-bg, var(--calc-bg-color)); border: 1px solid var(--calc-card-border); border-radius: var(--calc-card-radius, var(--radius-sidebar)); box-shadow: var(--calc-card-shadow); backdrop-filter: var(--calc-card-backdrop, none); -webkit-backdrop-filter: var(--calc-card-backdrop, none); --calc-card-overflow: visible; } } /* Shared/Embed Layouts: Flush, no extra card padding */ body[data-view-context="single"] [data-id-center-workspace], body[data-view-context="embed"] [data-id-center-workspace] { min-height: 100dvh; /* Ensure full viewport height for centering */ } /* Embed view: single source of truth for card styling + padding */ body[data-view-context="embed"] { --embed-card-bg: var(--bg); /* Use a visible border that's theme-driven but not dependent on calc-card-border (which can be transparent) */ --embed-card-border: color-mix(in srgb, var(--border-color) 40%, transparent); --embed-card-radius: var(--calc-card-radius, var(--radius-sidebar)); --embed-card-shadow: var(--calc-card-shadow); --embed-card-backdrop: var(--calc-card-backdrop, none); --embed-card-overflow: visible; --embed-font-size: 16px; --embed-title-font-size: 1.875rem; --embed-title-line-height: 2.25rem; } /* Embed card styling for iframe context */ body[data-view-context="embed"] calc[data-calc-wrapper] { background-color: var(--embed-card-bg); border: 1px solid var(--embed-card-border); border-radius: var(--embed-card-radius); /* No box-shadow for embeds - subtle border only */ backdrop-filter: var(--embed-card-backdrop); -webkit-backdrop-filter: var(--embed-card-backdrop); --calc-card-overflow: var(--embed-card-overflow); --calc-padding-x-responsive: calc(var(--layout-gutter) * 0.25) !important; --calc-padding-y-responsive: calc(var(--layout-gutter) * 0.25) !important; --font-size: var(--embed-font-size); } body[data-view-context="embed"] calc[data-calc-wrapper].view-calc>[data-calc-header] { padding-top: 0; padding-bottom: var(--calc-grid-gap-y); } body[data-view-context="embed"] calc[data-calc-wrapper].view-calc>[data-calc-header] h2 { margin-top: 0; font-size: var(--embed-title-font-size); line-height: var(--embed-title-line-height); } body[data-view-context="embed"] calc[data-calc-wrapper] [data-calc-input] input { background-color: var(--bg); } /* Force centering in embed mode */ body[data-view-context="embed"] { display: flex !important; flex-direction: column !important; } body[data-view-context="single"] #live-calc, body[data-view-context="embed"] #live-calc { background-color: transparent; border: none !important; box-shadow: none !important; padding: 0 !important; backdrop-filter: none !important; } @media (min-width: 1024px) { body[data-view-context="single"] #live-calc { /* Standard card sizing on desktop shared view */ border: none !important; box-shadow: none !important; padding: 0 !important; /* Padding is handled by AdaptiveLayout wrapper class */ } } /* calc-wrap adjustments */ body[data-view-context="single"] [data-id="calc-wrap"], body[data-view-context="embed"] [data-id="calc-wrap"] { margin-bottom: 0px; padding: 0; } /* ============================================================================= PRESENTATION HINTS (Themed) ============================================================================= */ /* Present mode section tint - use subtle accent overlay */ [data-present-stack-style="tint"] .present-section-tint { background: var(--present-section-bg, color-mix(in srgb, var(--accent) 5%, transparent)); border-radius: var(--calc-radius, 1rem); padding: var(--section-padding, 1.25rem); width: 100%; box-sizing: border-box; } /* Keep stacked rows aligned and themed */ [data-view-mode="present"] row[data-stacked="true"] { display: block; width: 100%; margin-bottom: 0px; } /* Card Container for @card */ .present-card { background: var(--calc-card-bg, rgba(255, 255, 255, 0.05)); border: 1px solid var(--calc-card-border, rgba(255, 255, 255, 0.1)); border-radius: var(--calc-radius, 1rem); padding: var(--section-padding, 1.25rem); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); backdrop-filter: blur(8px); transition: transform var(--duration-normal), box-shadow var(--duration-normal); } .present-card:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } /* Dense Layout Modifier */ .dense-layout { --col-gap: 0.75rem; --row-gap: 0.75rem; --section-padding: 0.75rem; } .dense-layout [data-calc-input] input { font-size: 0.875rem !important; padding: 0.25rem 0.5rem !important; } .dense-layout [data-calc-result] { font-size: 1.125rem !important; font-weight: 700; } .dense-layout [data-row-label] { font-size: 0.75rem !important; text-transform: uppercase; letter-spacing: 0.025em; font-weight: 600; color: var(--text-dim); } /* Custom Slider for @slider(..., dense) */ .dense-slider-track { height: 4px; background: var(--border-color, rgba(255, 255, 255, 0.1)); border-radius: 2px; } .dense-slider-thumb { width: 12px; height: 12px; background: var(--accent); border: 2px solid var(--bg); border-radius: 50%; margin-top: -4px; box-shadow: 0 0 5px var(--accent-strong); } calc[data-calc-wrapper][data-radius="xl"] { --calc-radius: 1.5rem; } calc[data-calc-wrapper][data-radius="lg"] { --calc-radius: 1rem; } calc[data-calc-wrapper][data-radius="md"] { --calc-radius: 0.75rem; } calc[data-calc-wrapper][data-radius="sm"] { --calc-radius: 0.5rem; } /* ============================================================================= CALC VIEW - 3-column grid layout Desktop: [row-num | input | result] Mobile/Compact: [input | result] ============================================================================= */ calc[data-calc-wrapper].view-calc { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; align-items: start; row-gap: var(--calc-grid-gap-y); } /* Calc View: Internal Grid Definition (shared by header and main) */ calc[data-calc-wrapper].view-calc>main, calc[data-calc-wrapper].view-calc>[data-calc-content], calc[data-calc-wrapper].view-calc>footer, calc[data-calc-wrapper].view-calc>[data-calc-footer] { display: grid; grid-template-columns: minmax(20px, 28px) 1fr 1fr; column-gap: var(--calc-grid-gap-x); row-gap: var(--calc-grid-gap-y); align-items: center; /* Center row numbers and inputs/results */ width: 100%; min-width: 0; } /* Header needs to align top for breadcrumbs/share-bar if they get multiline, but usually center is fine for the title. */ calc[data-calc-wrapper].view-calc>header, calc[data-calc-wrapper].view-calc>[data-calc-header] { display: grid; grid-template-columns: minmax(20px, 28px) 1fr 1fr; column-gap: var(--calc-grid-gap-x); width: 100%; min-width: 0; align-items: baseline; padding-top: 0.125rem; /* padding-bottom controlled via Tailwind: pb-2 lg:pb-5 */ } /* Ensure they span the full 1fr column of the parent wrapper */ calc[data-calc-wrapper].view-calc>* { grid-column: 1 / -1; } /* Calc View: Row uses display:contents to flow into parent grid */ calc[data-calc-wrapper].view-calc row { display: contents; } /* High-visibility selection indicator for rows */ calc[data-calc-wrapper].view-calc row.selected number { color: var(--accent) !important; font-weight: 700; } calc[data-calc-wrapper].view-calc row.selected [data-calc-input] input { box-shadow: var(--calc-row-selected-ring); border-color: var(--accent) !important; background-color: var(--calc-row-selected-input-bg-color, color-mix(in srgb, var(--accent) 5%, transparent)) !important; } /* Add a subtle left accent for the selected row when in non-contents layout */ calc[data-calc-wrapper] row.selected:not(.contents) { border-left: 3px solid var(--accent); padding-left: calc(var(--calc-grid-gap-x) - 3px); } /* Calc View: Column mapping for row children */ calc[data-calc-wrapper].view-calc number { grid-column: 1; } calc[data-calc-wrapper].view-calc c1, calc[data-calc-wrapper].view-calc [data-calc-input] { grid-column: 2; } calc[data-calc-wrapper].view-calc c2, calc[data-calc-wrapper].view-calc [data-calc-result] { grid-column: 3; } /* Calc View: Compact mode (embed or explicit) - 2 columns, no row numbers */ calc[data-calc-wrapper].view-calc.ctx-compact>main, calc[data-calc-wrapper].view-calc.ctx-compact>[data-calc-content] { grid-template-columns: 1fr 1fr; } calc[data-calc-wrapper].view-calc.ctx-compact number { display: none; } calc[data-calc-wrapper].view-calc.ctx-compact c1, calc[data-calc-wrapper].view-calc.ctx-compact [data-calc-input] { grid-column: 1; } calc[data-calc-wrapper].view-calc.ctx-compact c2, calc[data-calc-wrapper].view-calc.ctx-compact [data-calc-result] { grid-column: 2; } /* Calc View: Responsive - auto-compact on mobile (matches lg breakpoint at 1024px) */ @media (max-width: 1023px) { calc[data-calc-wrapper].view-calc[data-responsive="true"]>main, calc[data-calc-wrapper].view-calc[data-responsive="true"]>[data-calc-content] { grid-template-columns: 1fr 1fr; } calc[data-calc-wrapper].view-calc[data-responsive="true"] number { display: none; } calc[data-calc-wrapper].view-calc[data-responsive="true"] c1, calc[data-calc-wrapper].view-calc[data-responsive="true"] [data-calc-input] { grid-column: 1; } calc[data-calc-wrapper].view-calc[data-responsive="true"] c2, calc[data-calc-wrapper].view-calc[data-responsive="true"] [data-calc-result] { grid-column: 2; } } /* ============================================================================= TEXT VIEW - Block layout, TextEditView manages its own grid internally ============================================================================= */ calc[data-calc-wrapper].view-text { display: block; border-left: 3px solid transparent; } /* Removed mobile padding override - now handled by Tailwind classes in GridTemplates.jsx */ calc[data-calc-wrapper].view-text>header, calc[data-calc-wrapper].view-text>[data-calc-header], calc[data-calc-wrapper].view-text>main, calc[data-calc-wrapper].view-text>[data-calc-content], calc[data-calc-wrapper].view-text>footer, calc[data-calc-wrapper].view-text>[data-calc-footer] { display: block; width: 100%; } calc[data-calc-wrapper].view-text [data-calc-input] { border: none; background: transparent; font-family: 'JetBrains Mono', 'Courier New', Courier, monospace; padding-left: 0; } calc[data-calc-wrapper].view-text number { background: transparent; color: var(--text-dim); font-family: 'JetBrains Mono', 'Courier New', Courier, monospace; justify-content: flex-end; padding-right: 8px; } /* ============================================================================= PRESENT VIEW - Flex column, PresentModeRows manages section layouts ============================================================================= */ calc[data-calc-wrapper].view-present { display: block; } calc[data-calc-wrapper].view-present>header, calc[data-calc-wrapper].view-present>[data-calc-header], calc[data-calc-wrapper].view-present>footer, calc[data-calc-wrapper].view-present>[data-calc-footer] { display: block; width: 100%; } calc[data-calc-wrapper].view-present>main, calc[data-calc-wrapper].view-present>[data-calc-content] { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--col-gap, 1.5rem); width: 100%; } /* Sections span full width by default */ calc[data-calc-wrapper].view-present .col-span-full { grid-column: span 12 / span 12; } /* Section grid span classes for @col(n/m) */ calc[data-calc-wrapper].view-present .col-span-3 { grid-column: span 3 / span 3; } calc[data-calc-wrapper].view-present .col-span-4 { grid-column: span 4 / span 4; } calc[data-calc-wrapper].view-present .col-span-6 { grid-column: span 6 / span 6; } calc[data-calc-wrapper].view-present .col-span-8 { grid-column: span 8 / span 8; } calc[data-calc-wrapper].view-present .col-span-12 { grid-column: span 12 / span 12; } body:has(calc[data-view-mode="present"]) main>div.w-full:has(#app-container) { max-width: 100% !important; } /* Horizontal result rows - 6-column grid */ calc[data-calc-wrapper].view-present row.grid { display: grid !important; grid-template-columns: repeat(6, 1fr); align-items: center; } /* Stacked rows - explicit display block */ calc[data-calc-wrapper].view-present row[data-stacked="true"] { display: block !important; } calc[data-calc-wrapper].view-present number { display: none !important; } calc[data-calc-wrapper].view-present [data-calc-input] { border: none; background: transparent; height: auto; /* Removed padding: 0 and font-size: 0.75rem to allow React component styles to apply */ /* Input field styling now controlled by ParameterField.jsx (px-3 py-2, text-base) */ } calc[data-calc-wrapper].view-present [data-calc-result] { justify-content: flex-start; padding: 0; height: auto; font-size: 1.5rem; color: var(--text); } /* ============================================================================= COMPACT CONTEXT - Shared constraints for embed mode ============================================================================= */ calc[data-calc-wrapper].ctx-compact { /* Tighter spacing for embeds */ --calc-grid-gap-x: 0.375rem; --calc-grid-gap-y: 0.25rem; } /* Layout Dimensions */ :root { --sidebar-width: 20rem; --rail-width-collapsed: 4rem; --rail-width-expanded: 30rem; --glass-border-color: rgba(255, 255, 255, 0.3); --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Animation speed */ --animation-duration: 250ms; /* Layout spacing */ --layout-gutter: 2rem; --calc-padding-x-mobile: calc(var(--layout-gutter) * 0.5); --calc-padding-y-mobile: calc(var(--layout-gutter) * 0.5); --calc-padding-x-desktop: var(--layout-gutter); --calc-padding-y-desktop: var(--layout-gutter); --space-lg: 2rem; --dock-clearance: 6rem; --nav-btn-gap: 0rem; /* Layout mode variables */ --layout-nav-width: 18rem; --layout-action-height: 4rem; } /* Single layout adjustments */ [data-layout="single"] { --layout-nav-width: 0; } /* Note: Navigation visibility is controlled by Alpine x-show in mobile-nav.html */ /* for alpinejs */ [x-cloak] { display: none !important; } /* Hide scrollbar for Chrome, Safari and Opera */ .no-scrollbar::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .no-scrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } /* Workspace Mask (Desktop Only) */ @media (min-width: 1024px) { [data-id-center-workspace] { mask-image: linear-gradient(to bottom, transparent, black 24px, black 100%); -webkit-mask-image: linear-gradient(to bottom, transparent, black 24px, black 100%); } body[data-view-context="home"] [data-id-center-workspace] { mask-image: none; -webkit-mask-image: none; } } /* Disable iOS double-tap zoom on buttons */ input[type="button"], button { touch-action: manipulation; } .calcy-icon { position: relative; display: block; } .calcy-icon__image { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) brightness(1.05) contrast(1.1); } .calcy-icon-overlay { position: absolute; inset: 0; pointer-events: none; background-color: var(--text); mix-blend-mode: multiply; opacity: 0.75; transition: opacity var(--duration-fast) ease, background-color var(--duration-fast) ease, mix-blend-mode var(--duration-fast) ease; -webkit-mask-image: url('/img/calcy/calcy.webp'); mask-image: url('/img/calcy/calcy.webp'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .calcy-icon--accent .calcy-icon-overlay { background-color: var(--theme-accent, var(--text)); } body.theme-light .calcy-icon--accent .calcy-icon-overlay { mix-blend-mode: multiply; opacity: 0.35; } body.theme-light .calcy-icon-overlay { mix-blend-mode: darken; opacity: 0.15; } @keyframes panelBounce { 0% { transform: translateY(0); } 30% { transform: translateY(-4px); } 60% { transform: translateY(2px); } 100% { transform: translateY(0); } } .panel-bounce-anim { animation: panelBounce 0.45s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes navIconHoverBounce { 0% { transform: translateY(0); } 50% { transform: translateY(-2px); } 100% { transform: translateY(0); } } .nav-button svg, .nav-button .calcy-icon { transition: transform var(--duration-normal) cubic-bezier(0.4, 0, 0.2, 1); } .nav-button:hover svg, .nav-button:hover .calcy-icon, .nav-button-custom:hover svg, .nav-button-custom:hover .calcy-icon, [data-id="new-calc-button"]:hover /* Apply to the entire button */ { animation: navIconHoverBounce 0.55s cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { .nav-button svg, .nav-button .calcy-icon { transition: none; } .nav-button:hover svg, .nav-button:hover .calcy-icon { animation: none; } } /* Theme-driven new layout variables - these extend the existing theme system */ :root { --new-layout-gradient-start: var(--theme-bg, #050014); --new-layout-gradient-mid: var(--theme-bg-alt, #130326); /* Subtle border for layout dividers */ --subtle-border: color-mix(in srgb, var(--calc-card-border) 20%, transparent); --subtle-border-header: color-mix(in srgb, var(--calc-card-border) 30%, transparent); --new-layout-gradient-end: var(--bg-secondary, #1c0834); --new-layout-text: var(--text, #fce7f3); --new-layout-text-muted: var(--text-secondary, rgba(252, 231, 243, 0.7)); --new-layout-accent: var(--theme-accent, #ec4899); --new-layout-card-bg: var(--calc-bg-color, rgba(255, 255, 255, 0.05)); --new-layout-border: var(--calc-card-border, rgba(255, 255, 255, 0.1)); } /* New layout card shadow */ .nl-card-shadow { box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.03); } .nl-pill { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08); } /* Left sidebar styles for new layout */ .nl-sidebar { background: var(--new-layout-card-bg); } /* Ensure calc inputs inherit theme styling in new layout */ .new-layout-mode .calc-row input { background: var(--new-layout-card-bg) !important; border: 1px solid var(--new-layout-border) !important; color: var(--new-layout-text) !important; } .new-layout-mode .calc-row input:focus { border-color: var(--new-layout-accent) !important; } .nav-button-custom { background: none; color: var(--text-dim); border: 1px solid transparent; border-radius: 1rem; box-shadow: none; backdrop-filter: none; cursor: pointer; /* Specific properties instead of 'all' for better performance */ transition: background-color var(--animation-duration) ease, color var(--animation-duration) ease, border-color var(--animation-duration) ease, box-shadow var(--animation-duration) ease, transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .nav-button-custom:hover { background: var(--bg-alt); color: var(--text); } .nav-button-custom:active { transform: scale(0.95); } .nav-button-custom.active { background: var(--accent); color: var(--bg); box-shadow: 0 4px 12px var(--accent-strong); } /* Single bounce up on click */ @keyframes dock-bounce { 0% { transform: translateY(0); } 50% { transform: translateY(-5px); } 100% { transform: translateY(0); } } .nav-button-custom.bounce { animation: dock-bounce 0.25s ease-out; } /* Toast notification animation */ @keyframes toast-fade-in { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: toast-fade-in 0.2s ease-out; } /* Button styles - controlled via data-dock-button-style attribute */ /* Standard style */ [data-dock-button-style="standard"] .nav-button-custom { background: var(--bg-secondary-mix-40); color: var(--text); border: 1px solid transparent; border-radius: 1rem; box-shadow: none; } [data-dock-button-style="standard"] .nav-button-custom:hover { background: var(--bg); color: var(--text); } [data-dock-button-style="standard"] .nav-button-custom.active { background: rgba(0, 0, 0, 0.2); color: var(--accent); border: 1px solid var(--accent-medium); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); } /* Glassy style (default) */ [data-dock-button-style="glassy"] .nav-button-custom { background: rgba(255, 255, 255, 0.1); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); backdrop-filter: blur(4px); } [data-dock-button-style="glassy"] .nav-button-custom:hover { background: rgba(255, 255, 255, 0.2); color: var(--text); } [data-dock-button-style="glassy"] .nav-button-custom.active { background: rgba(255, 255, 255, 0.25); color: var(--accent); border: 1px solid var(--accent); box-shadow: 0 0 10px var(--accent-medium); } /* Soft style */ [data-dock-button-style="soft"] .nav-button-custom { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); border: 1px solid transparent; border-radius: 1rem; box-shadow: none; } [data-dock-button-style="soft"] .nav-button-custom:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--text); } [data-dock-button-style="soft"] .nav-button-custom.active { background: var(--accent); color: var(--bg); border: 1px solid transparent; box-shadow: 0 4px 12px var(--accent-strong); } /* Solid style */ [data-dock-button-style="solid"] .nav-button-custom { background: var(--bg); color: var(--text); border: 1px solid var(--border-color); border-radius: 0.75rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } [data-dock-button-style="solid"] .nav-button-custom:hover { background: var(--bg-secondary-mix-40); color: var(--text); } [data-dock-button-style="solid"] .nav-button-custom.active { background: var(--text); color: var(--bg); border: 1px solid transparent; box-shadow: none; } /* Minimal style - solid background for visibility over waves/backgrounds */ [data-dock-button-style="minimal"] .nav-button-custom { background: var(--bg-secondary-mix-60, rgba(255, 255, 255, 0.6)); color: var(--text-dim); border: 1px solid var(--border-color); border-radius: 0.5rem; box-shadow: none; } [data-dock-button-style="minimal"] .nav-button-custom:hover { background: var(--bg-secondary-mix-80, rgba(255, 255, 255, 0.8)); color: var(--text); } [data-dock-button-style="minimal"] .nav-button-custom.active { background: var(--bg-secondary-mix-80, rgba(255, 255, 255, 0.8)); color: var(--accent); border: 1px solid var(--accent); box-shadow: none; } /* Button spacing - controlled via data-dock-button-spacing attribute */ [data-dock-button-spacing="compact"] .nav-button-custom { gap: 0.25rem; } [data-dock-button-spacing="normal"] .nav-button-custom { gap: 0.75rem; } [data-dock-button-spacing="wide"] .nav-button-custom { gap: 1.25rem; } /* Design 11 Aesthetic Variables (Gemini) */ :root { /* Colors */ --d11-paper: #FDFCF8; --d11-surface: #FFFFFF; --d11-subtle: #F5F4F0; --d11-ink: #2D2926; --d11-result: #D946EF; --d11-accent: #18181B; --d11-panel-bg: #FAF9F6; /* Shadows */ --d11-shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.04); --d11-shadow-float: 0 20px 40px rgba(0, 0, 0, 0.08); --d11-shadow-genius: 0 12px 36px -4px rgba(0, 0, 0, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.08); --d11-shadow-glow: 0 0 15px rgba(217, 70, 239, 0.3); /* Fonts */ --font-serif: 'Crimson Pro', serif; --font-sans: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; } /* Sidebar Accordion - hide CalcList content when collapsed, but keep header visible */ /* Structure: .calclist-collapsed > CalcList > div.root > .calclist-header + content */ .calclist-collapsed [data-portal="CalcList"]>*>*:not(.calclist-header), .calclist-collapsed CalcList>*>*:not(.calclist-header) { display: none !important; } .calclist-collapsed .calclist-header { display: flex !important; } /* ============================================================================= SEMANTIC ACCENT UTILITIES These utility classes work with CSS variables, unlike Tailwind's /XX syntax which doesn't support opacity modifiers on arbitrary CSS var values. ============================================================================= */ .bg-accent-soft { background: color-mix(in srgb, var(--accent, var(--accent)) 10%, transparent); } .bg-accent-hover { background: color-mix(in srgb, var(--accent, var(--accent)) 15%, transparent); } .border-accent-soft { border-color: color-mix(in srgb, var(--accent, var(--accent)) 20%, transparent); }