From 074a66627ab3259e3821146127dc0aa19b953334 Mon Sep 17 00:00:00 2001 From: "L.B." Date: Sat, 27 Sep 2025 10:13:44 -0400 Subject: [PATCH 1/7] start --- exampleSite/hugo_stats.json | 611 +++++++++++------------------------- 1 file changed, 180 insertions(+), 431 deletions(-) diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index 5820702..89442f7 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -215,26 +215,19 @@ "dark", "dark:bg-gray-800", "dark:bg-yellow-900/20", - "dark:bg-zinc-800", "dark:border-gray-600", "dark:border-gray-700", "dark:border-yellow-800", "dark:border-zinc-800", - "dark:divide-zinc-800", "dark:hover:bg-gray-700", "dark:text-gray-200", "dark:text-gray-400", "dark:text-yellow-200", "dark:text-yellow-300", - "dark:text-zinc-100", - "dark:text-zinc-200", - "dark:text-zinc-300", "desc", "disabled", "disabled:cursor-not-allowed", "disabled:opacity-50", - "divide-y", - "divide-zinc-200", "document", "docutils", "duration-200", @@ -310,7 +303,6 @@ "http-method-badge--get", "icon", "ident", - "inline-block", "inset-0", "items-center", "items-end", @@ -406,9 +398,6 @@ "notebook__actions", "notebook__cell-counter", "notebook__cells", - "notebook__density-btn", - "notebook__density-btn--active", - "notebook__density-toggle", "notebook__launch", "notebook__launch-arrow", "notebook__launch-dropdown", @@ -489,7 +478,6 @@ "p-5", "page-container", "page-content", - "pb-3", "pending", "pending-indicator", "pl-0", @@ -513,15 +501,12 @@ "prose", "pt-2", "pt-4", - "px-2", "px-3", "px-3.5", "px-4", - "px-6", "py-1", "py-2", "py-2.5", - "py-3", "py-4", "py-8", "quicklinks", @@ -651,11 +636,6 @@ "text-xs", "text-yellow-700", "text-yellow-800", - "text-zinc-300", - "text-zinc-400", - "text-zinc-700", - "text-zinc-800", - "text-zinc-900", "time-estimate", "tip", "title", @@ -1142,415 +1122,184 @@ "classify-python-entity", "clearAll", "closed-question-pipeline", - "code-1755130845060377000", - "code-1755130845060857000", - "code-1755130845061391000", - "code-1755130845061754000", - "code-1755130845061924000", - "code-1755130845062077000", - "code-1755130845062178000", - "code-1755130845062496000", - "code-1755130845062590000", - "code-1755130845066386000", - "code-1755130845066491000", - "code-1755130845066568000", - "code-1755130845066640000", - "code-1755130845066763000", - "code-1755130845066922000", - "code-1755130845066996000", - "code-1755130845067070000", - "code-1755130845067216000", - "code-1755130845067378000", - "code-1755130845067918000", - "code-1755130845119340000", - "code-1755130845119629000", - "code-1755130845120275000", - "code-1755130845120631000", - "code-1755130845120884000", - "code-1755130845121022000", - "code-1755130845121135000", - "code-1755130845121237000", - "code-1755130845121373000", - "code-1755130845121498000", - "code-1755130845121631000", - "code-1755130845121763000", - "code-1755130845122141000", - "code-1755130845122487000", - "code-1755130845122727000", - "code-1755130845123040000", - "code-1755130845123117000", - "code-1755130845123216000", - "code-1755130845123288000", - "code-1755130845123377000", - "code-1755130845123523000", - "code-1755130845126790000", - "code-1755130845127279000", - "code-1755130845135048000", - "code-1755130845137055000", - "code-1755130845140401000", - "code-1755130845140815000", - "code-1755130845141100000", - "code-1755130845142811000", - "code-1755130845144215000", - "code-1755130845145336000", - "code-1755130845150139000", - "code-1755130845151252000", - "code-1755130845152298000", - "code-1755130845152632000", - "code-1755130845152697000", - "code-1755130845153184000", - "code-1755130845153232000", - "code-1755130845153933000", - "code-1755130845155276000", - "code-1755130845155399000", - "code-1755130845155524000", - "code-1755130845162231000", - "code-1755130845163583000", - "code-1755130845164055000", - "code-1755130845179239000", - "code-1755130845179447000", - "code-1755130845179675000", - "code-1755130845179792000", - "code-1755130845180020000", - "code-1755130845196518000", - "code-1755130845196712000", - "code-1755130845197060000", - "code-1755130845197251000", - "code-1755130845197524000", - "code-1755130845197832000", - "code-1755130845198005000", - "code-1755130845198176000", - "code-1755130845204513000", - "code-1755130845204712000", - "code-1755130845205312000", - "code-1755130845206424000", - "code-1755130845207127000", - "code-1755130845207822000", - "code-1755130845207946000", - "code-1755130845208145000", - "code-1755130845208440000", - "code-1755130845208574000", - "code-1755130845208772000", - "code-1755130845208935000", - "code-1755130845209239000", - "code-1755130845209444000", - "code-1755130845209576000", - "code-1755130845217776000", - "code-1755130845217967000", - "code-1755130845218235000", - "code-1755130845218934000", - "code-1755130845219467000", - "code-1755130845219700000", - "code-1755130845220119000", - "code-1755130845220284000", - "code-1755130845220553000", - "code-1755130845220740000", - "code-1755130845220974000", - "code-1755130845221231000", - "code-1755130845221448000", - "code-1755130845221709000", - "code-1755130845222029000", - "code-1755130845222206000", - "code-1755130845222371000", - "code-1755130845235783000", - "code-1755130845235955000", - "code-1755130845236072000", - "code-1755130845236175000", - "code-1755130845239313000", - "code-1755130845239365000", - "code-1755130845241862000", - "code-1755130845242389000", - "code-1755130845242508000", - "code-1755130845242646000", - "code-1755130845242751000", - "code-1755130845242879000", - "code-1755130845242965000", - "code-1755130845280401000", - "code-1755130845280403000", - "code-1755130845280511000", - "code-1755130845280517000", - "code-1755130845280585000", - "code-1755130845280598000", - "code-1755130845280681000", - "code-1755130845280844000", - "code-1755130845280845000", - "code-1755130845281288000", - "code-1755130845281645000", - "code-1755130845282626000", - "code-1755130845282742000", - "code-1755130845284820000", - "code-1755130845285060000", - "code-1755130845285170000", - "code-1755130845285374000", - "code-1755130845285890000", - "code-1755130845285990000", - "code-1755130845286077000", - "code-1755130845286175000", - "code-1755130845286266000", - "code-1755130845286306000", - "code-1755130845286484000", - "code-1755130845286505000", - "code-1755130845286927000", - "code-1755130845287044000", - "code-1755130845287530000", - "code-1755130845287640000", - "code-1755130845287728000", - "code-1755130845287846000", - "code-1755130845287867000", - "code-1755130845287961000", - "code-1755130845288022000", - "code-1755130845288327000", - "code-1755130845288465000", - "code-1755130845288814000", - "code-1755130845289018000", - "code-1755130845297145000", - "code-1755130845297363000", - "code-1755130845297563000", - "code-1755130845297666000", - "code-1755130845307958000", - "code-1755130845308076000", - "code-1755130845308589000", - "code-1755130845326066000", - "code-1755130845326653000", - "code-1755130845326679000", - "code-1755130845341624000", - "code-1755177601120077000", - "code-1755177601123348000", - "code-1755177601125337000", - "code-1755177601126846000", - "code-1755177601132600000", - "code-1755177601134735000", - "code-1755177601135403000", - "code-1755177968052331000", - "code-1755177968053729000", - "code-1755177968055003000", - "code-1755177968056224000", - "code-1755177968061106000", - "code-1755177968062928000", - "code-1755177968063514000", - "code-1755178061531606000", - "code-1755178061533057000", - "code-1755178061534302000", - "code-1755178061535473000", - "code-1755178061542051000", - "code-1755178061543943000", - "code-1755178061544560000", - "code-1755178087041656000", - "code-1755178087042954000", - "code-1755178087044142000", - "code-1755178087045221000", - "code-1755178087049466000", - "code-1755178087051150000", - "code-1755178087051715000", - "code-1755178114034574000", - "code-1755178114035848000", - "code-1755178114037002000", - "code-1755178114037988000", - "code-1755178114042385000", - "code-1755178114044151000", - "code-1755178114044855000", - "code-1755178141542675000", - "code-1755178141544282000", - "code-1755178141545767000", - "code-1755178141546992000", - "code-1755178141552221000", - "code-1755178141554311000", - "code-1755178141554986000", - "code-1755178164110225000", - "code-1755178164113126000", - "code-1755178164114363000", - "code-1755178164115395000", - "code-1755178164123132000", - "code-1755178164125056000", - "code-1755178164125631000", - "code-1755179018603260000", - "code-1755179018604601000", - "code-1755179018605821000", - "code-1755179018607327000", - "code-1755179018612237000", - "code-1755179018614079000", - "code-1755179018614763000", - "code-1755179036655575000", - "code-1755179036656903000", - "code-1755179036658181000", - "code-1755179036659232000", - "code-1755179036665362000", - "code-1755179036668004000", - "code-1755179036668643000", - "code-1755179167096368000", - "code-1755179167098110000", - "code-1755179167099682000", - "code-1755179167101000000", - "code-1755179167106520000", - "code-1755179167108707000", - "code-1755179167109386000", - "code-1755179170105343000", - "code-1755179170107335000", - "code-1755179170108994000", - "code-1755179170110427000", - "code-1755179170116382000", - "code-1755179170118747000", - "code-1755179170119447000", - "code-1755179294581297000", - "code-1755179294582477000", - "code-1755179294583615000", - "code-1755179294584514000", - "code-1755179294588668000", - "code-1755179294590792000", - "code-1755179294591328000", - "code-1755179297568700000", - "code-1755179297570009000", - "code-1755179297571238000", - "code-1755179297572262000", - "code-1755179297577204000", - "code-1755179297579065000", - "code-1755179297579725000", - "code-1755179300598094000", - "code-1755179300599484000", - "code-1755179300600837000", - "code-1755179300601871000", - "code-1755179300606553000", - "code-1755179300608405000", - "code-1755179300608986000", - "code-1755179307581436000", - "code-1755179307582828000", - "code-1755179307584171000", - "code-1755179307585318000", - "code-1755179307589879000", - "code-1755179307591684000", - "code-1755179307592238000", - "code-1755179674567963000", - "code-1755179674569137000", - "code-1755179674570211000", - "code-1755179674571221000", - "code-1755179674575525000", - "code-1755179674577277000", - "code-1755179674577830000", - "code-1755179736575713000", - "code-1755179736577430000", - "code-1755179736578956000", - "code-1755179736580173000", - "code-1755179736585446000", - "code-1755179736587481000", - "code-1755179736588251000", - "code-1755179926747235000", - "code-1755179926748542000", - "code-1755179926749721000", - "code-1755179926750791000", - "code-1755179926755282000", - "code-1755179926757302000", - "code-1755179926757940000", - "code-1755179934652064000", - "code-1755179934655368000", - "code-1755179934658417000", - "code-1755179934660294000", - "code-1755179934667071000", - "code-1755179934668880000", - "code-1755179934669451000", - "code-1755179968158701000", - "code-1755179968159969000", - "code-1755179968161135000", - "code-1755179968162357000", - "code-1755179968167010000", - "code-1755179968168779000", - "code-1755179968169475000", - "code-1755180009146065000", - "code-1755180009147348000", - "code-1755180009148542000", - "code-1755180009149636000", - "code-1755180009154326000", - "code-1755180009156142000", - "code-1755180009156723000", - "code-1755180047140634000", - "code-1755180047142056000", - "code-1755180047143395000", - "code-1755180047144640000", - "code-1755180047149816000", - "code-1755180047151958000", - "code-1755180047152619000", - "code-1755180087759788000", - "code-1755180087763913000", - "code-1755180087765752000", - "code-1755180087766900000", - "code-1755180087776191000", - "code-1755180087781849000", - "code-1755180087783417000", - "code-1755180261139748000", - "code-1755180261141038000", - "code-1755180261142384000", - "code-1755180261143548000", - "code-1755180261148460000", - "code-1755180261150782000", - "code-1755180261151360000", - "code-1755180326642902000", - "code-1755180326644186000", - "code-1755180326645298000", - "code-1755180326646230000", - "code-1755180326650388000", - "code-1755180326652242000", - "code-1755180326652847000", - "code-1755180408130516000", - "code-1755180408132264000", - "code-1755180408133577000", - "code-1755180408136289000", - "code-1755180408143214000", - "code-1755180408145043000", - "code-1755180408145689000", - "code-1755180416140554000", - "code-1755180416141818000", - "code-1755180416142998000", - "code-1755180416143979000", - "code-1755180416148470000", - "code-1755180416150128000", - "code-1755180416150709000", - "code-1755180463663537000", - "code-1755180463665997000", - "code-1755180463667878000", - "code-1755180463670034000", - "code-1755180463675784000", - "code-1755180463679763000", - "code-1755180463680587000", - "code-1755180479162774000", - "code-1755180479164430000", - "code-1755180479165721000", - "code-1755180479166761000", - "code-1755180479172607000", - "code-1755180479174954000", - "code-1755180479175914000", - "code-1755180485634844000", - "code-1755180485636126000", - "code-1755180485637325000", - "code-1755180485638338000", - "code-1755180485642685000", - "code-1755180485644450000", - "code-1755180485645039000", - "code-1755180501636718000", - "code-1755180501638455000", - "code-1755180501639982000", - "code-1755180501641285000", - "code-1755180501646711000", - "code-1755180501648817000", - "code-1755180501649501000", - "code-1755180506720766000", - "code-1755180506722070000", - "code-1755180506723296000", - "code-1755180506724361000", - "code-1755180506728887000", - "code-1755180506730864000", - "code-1755180506731570000", - "code-1755182722237387000", - "code-1755182722238644000", - "code-1755182722239867000", - "code-1755182722240919000", - "code-1755182722245813000", - "code-1755182722247748000", - "code-1755182722248333000", - "collapse-0d0cece9160ef824a01d2821d406048f-1755130845288439000", - "collapse-0d0cece9160ef824a01d2821d406048f-1755130845288439000-body", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1755130845139160000", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1755130845139160000-body", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1755130845139198000", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1755130845139198000-body", + "code-1758982405990843000", + "code-1758982405991092000", + "code-1758982405991745000", + "code-1758982405992006000", + "code-1758982405992210000", + "code-1758982405992403000", + "code-1758982405992575000", + "code-1758982405992973000", + "code-1758982405993276000", + "code-1758982405994228000", + "code-1758982405994544000", + "code-1758982405994842000", + "code-1758982405995064000", + "code-1758982405995261000", + "code-1758982405995493000", + "code-1758982405995599000", + "code-1758982405995688000", + "code-1758982405995823000", + "code-1758982405995997000", + "code-1758982405996272000", + "code-1758982406002374000", + "code-1758982406002526000", + "code-1758982406002756000", + "code-1758982406002927000", + "code-1758982406003123000", + "code-1758982406003271000", + "code-1758982406003370000", + "code-1758982406003490000", + "code-1758982406003643000", + "code-1758982406003820000", + "code-1758982406003972000", + "code-1758982406004129000", + "code-1758982406004292000", + "code-1758982406004402000", + "code-1758982406004499000", + "code-1758982406004701000", + "code-1758982406004822000", + "code-1758982406005225000", + "code-1758982406005443000", + "code-1758982406005780000", + "code-1758982406006503000", + "code-1758982406012747000", + "code-1758982406013031000", + "code-1758982406016970000", + "code-1758982406018074000", + "code-1758982406030393000", + "code-1758982406032345000", + "code-1758982406032733000", + "code-1758982406033450000", + "code-1758982406033563000", + "code-1758982406033937000", + "code-1758982406033987000", + "code-1758982406035022000", + "code-1758982406036881000", + "code-1758982406044165000", + "code-1758982406044862000", + "code-1758982406046327000", + "code-1758982406048455000", + "code-1758982406049170000", + "code-1758982406062223000", + "code-1758982406063207000", + "code-1758982406063425000", + "code-1758982406077875000", + "code-1758982406078442000", + "code-1758982406194974000", + "code-1758982406198675000", + "code-1758982406199050000", + "code-1758982406199198000", + "code-1758982406199360000", + "code-1758982406199407000", + "code-1758982406199540000", + "code-1758982406199870000", + "code-1758982406200125000", + "code-1758982406200134000", + "code-1758982406200300000", + "code-1758982406200666000", + "code-1758982406200734000", + "code-1758982406200912000", + "code-1758982406200994000", + "code-1758982406201314000", + "code-1758982406201429000", + "code-1758982406201981000", + "code-1758982406202653000", + "code-1758982406203285000", + "code-1758982406203331000", + "code-1758982406203541000", + "code-1758982406203670000", + "code-1758982406203786000", + "code-1758982406204000000", + "code-1758982406204259000", + "code-1758982406204475000", + "code-1758982406204568000", + "code-1758982406204617000", + "code-1758982406204705000", + "code-1758982406204906000", + "code-1758982406205045000", + "code-1758982406205048000", + "code-1758982406205171000", + "code-1758982406205387000", + "code-1758982406205553000", + "code-1758982406205572000", + "code-1758982406206355000", + "code-1758982406206571000", + "code-1758982406206799000", + "code-1758982406206953000", + "code-1758982406207079000", + "code-1758982406207198000", + "code-1758982406207204000", + "code-1758982406207245000", + "code-1758982406207348000", + "code-1758982406207447000", + "code-1758982406207555000", + "code-1758982406207728000", + "code-1758982406208033000", + "code-1758982406208127000", + "code-1758982406208467000", + "code-1758982406208570000", + "code-1758982406208688000", + "code-1758982406208886000", + "code-1758982406209215000", + "code-1758982406209998000", + "code-1758982406210520000", + "code-1758982406210855000", + "code-1758982406218121000", + "code-1758982406218259000", + "code-1758982406218432000", + "code-1758982406219818000", + "code-1758982406220061000", + "code-1758982406220553000", + "code-1758982406221116000", + "code-1758982406221409000", + "code-1758982406223945000", + "code-1758982406224060000", + "code-1758982406224145000", + "code-1758982406224415000", + "code-1758982406224718000", + "code-1758982406226288000", + "code-1758982406226791000", + "code-1758982406226934000", + "code-1758982406227190000", + "code-1758982406227421000", + "code-1758982406227666000", + "code-1758982406227859000", + "code-1758982406227860000", + "code-1758982406227969000", + "code-1758982406228080000", + "code-1758982406228194000", + "code-1758982406228306000", + "code-1758982406228414000", + "code-1758982406229516000", + "code-1758982406229747000", + "code-1758982406230788000", + "code-1758982406231133000", + "code-1758982406233369000", + "code-1758982406233693000", + "code-1758982406234634000", + "code-1758982406234781000", + "code-1758982406234889000", + "code-1758982406235025000", + "code-1758982406235189000", + "code-1758982406235470000", + "code-1758982406235635000", + "code-1758982406237405000", + "code-1758982406237779000", + "code-1758982406237948000", + "code-1758982406238479000", + "code-1758982406238871000", + "code-1758982406239097000", + "code-1758982406248066000", + "code-1758982406278531000", + "code-1758982406281052000", + "code-1758982406281265000", + "collapse-0d0cece9160ef824a01d2821d406048f-1758982406235597000", + "collapse-0d0cece9160ef824a01d2821d406048f-1758982406235597000-body", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758982406028507000", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758982406028507000-body", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758982406028576000", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758982406028576000-body", "collapsehtml-examples", "collapsehtml-how-it-works", "collapsehtml-source-code", @@ -1897,7 +1646,7 @@ "milo-theme-docs-using-alternative-prompts", "milo-theme-docs-using-the-nemo-curator-openai-client", "milo-theme-docs-using-the-nemotrongenerator", - "milo-theme-docs-welcome-to-nvidia-developer-docs-theme", + "milo-theme-docs-welcome-to-example-product-theme", "milo-theme-docs-writing-task-generation-pipeline", "model-selection-and-configs", "modifying-the-prompts", @@ -2105,7 +1854,7 @@ "vs-code-integration", "vs-code-links-not-working", "w", - "welcome-to-nvidia-developer-docs-theme", + "welcome-to-example-product-theme", "what-it-provides", "whats-next", "where-tokens-live", From 786e6cd454b7e10341dbab62df316c0dadbbf8f5 Mon Sep 17 00:00:00 2001 From: "L.B." Date: Sat, 27 Sep 2025 10:14:04 -0400 Subject: [PATCH 2/7] next --- exampleSite/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exampleSite/package.json b/exampleSite/package.json index f38fda7..10296e1 100644 --- a/exampleSite/package.json +++ b/exampleSite/package.json @@ -13,6 +13,6 @@ "author": "", "license": "ISC", "devDependencies": { - "tailwindcss": "^3.3.5" + "tailwindcss": "^4.1.13" } } From 6c3287031cfd0caa557effadd63f03e48e78b3b2 Mon Sep 17 00:00:00 2001 From: "L.B." Date: Sat, 27 Sep 2025 10:22:10 -0400 Subject: [PATCH 3/7] update --- assets/css/components/cards.css | 39 +- assets/css/components/navigation.css | 2 +- assets/css/components/navigation/index.css | 14 +- assets/css/components/navigation/sidebar.css | 3 +- assets/css/components/navigation/toc.css | 4 +- assets/css/components/notebook.css | 40 +- assets/css/main.css | 9763 +++++++---------- assets/css/src/input.css | 66 +- assets/js/utils/NotificationManager.js | 2 +- .../content/guides/themes/search/algolia.md | 2 +- .../content/guides/theming-and-tokens.md | 2 +- exampleSite/hugo_stats.json | 356 +- package.json | 3 +- postcss.config.js | 2 +- 14 files changed, 4101 insertions(+), 6197 deletions(-) diff --git a/assets/css/components/cards.css b/assets/css/components/cards.css index 2ea873f..180ac30 100644 --- a/assets/css/components/cards.css +++ b/assets/css/components/cards.css @@ -1,7 +1,7 @@ /* Cards Component - Resource cards, content metadata, and generic card styles */ /* Base Card Styles */ -.card { +html:not(.no-transitions) .card { position: relative; /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); @@ -15,7 +15,24 @@ transition: transform var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); + box-shadow var(--timing-medium) var(--easing-standard), + background-color var(--timing-medium) var(--easing-standard), + color var(--timing-medium) var(--easing-standard); + overflow: hidden; + /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + box-shadow: var(--glass-shadow); +} + +.card { + position: relative; + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ + background: var(--glass-bg); + border-radius: var(--radius-card); + /* border: 1px solid var(--color-border-primary); */ + border: 1px solid var(--glass-border-color); + /* backdrop-filter: blur(10px); */ + -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); overflow: hidden; /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); @@ -50,7 +67,14 @@ /* Resource Card Styles */ .card--resource { - @apply card; + position: relative; + background: var(--glass-bg); + border-radius: var(--radius-card); + border: 1px solid var(--glass-border-color); + -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + overflow: hidden; + box-shadow: var(--glass-shadow); /* padding: 1.5rem; */ padding: 1rem; margin-bottom: 1rem; @@ -173,7 +197,14 @@ /* Article Card Styles */ .article-card { - @apply card; + position: relative; + background: var(--glass-bg); + border-radius: var(--radius-card); + border: 1px solid var(--glass-border-color); + -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + overflow: hidden; + box-shadow: var(--glass-shadow); padding: 1.5rem; margin-bottom: 1.5rem; display: flex; diff --git a/assets/css/components/navigation.css b/assets/css/components/navigation.css index d67af28..cc4e906 100644 --- a/assets/css/components/navigation.css +++ b/assets/css/components/navigation.css @@ -1,4 +1,4 @@ /* Navigation Component - Modular navigation system with NVIDIA styling */ /* Import modular navigation components */ -@import 'navigation/index.css'; \ No newline at end of file +@import './navigation/index.css'; \ No newline at end of file diff --git a/assets/css/components/navigation/index.css b/assets/css/components/navigation/index.css index b7ae3c9..082a274 100644 --- a/assets/css/components/navigation/index.css +++ b/assets/css/components/navigation/index.css @@ -1,10 +1,10 @@ /* Navigation Module - Main import file for all navigation components */ /* Import all navigation modules in proper order */ -@import 'base.css'; -@import 'chat-toc-toggle.css'; -@import 'sidebar.css'; -@import 'topbar.css'; -@import 'toc.css'; -@import 'dropdown.css'; -@import 'language-switcher.css'; \ No newline at end of file +@import './base.css'; +@import './chat-toc-toggle.css'; +@import './sidebar.css'; +@import './topbar.css'; +@import './toc.css'; +@import './dropdown.css'; +@import './language-switcher.css'; \ No newline at end of file diff --git a/assets/css/components/navigation/sidebar.css b/assets/css/components/navigation/sidebar.css index b494cec..18edd99 100644 --- a/assets/css/components/navigation/sidebar.css +++ b/assets/css/components/navigation/sidebar.css @@ -259,7 +259,8 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested .sidebar__item--level-1 .sidebar__text { /* Step down one size from text-lg and slightly reduce weight */ /* @apply text-lg font-brand font-bold; */ - @apply text-base font-brand font-semibold; + @apply text-base font-semibold; + font-family: "NVIDIA", "Arial", "Helvetica", sans-serif; } .sidebar__item--level-1 { diff --git a/assets/css/components/navigation/toc.css b/assets/css/components/navigation/toc.css index 479430d..b5c3825 100644 --- a/assets/css/components/navigation/toc.css +++ b/assets/css/components/navigation/toc.css @@ -60,8 +60,8 @@ } .toc ul ul { - @apply pl-4 mt-2 border-l border-opacity-20; - border-color: var(--color-border-primary); + @apply pl-4 mt-2 border-l; + border-color: color-mix(in srgb, var(--color-border-primary) 20%, transparent); } /* TOC Link Styling */ diff --git a/assets/css/components/notebook.css b/assets/css/components/notebook.css index 2e68420..f3c5fd9 100644 --- a/assets/css/components/notebook.css +++ b/assets/css/components/notebook.css @@ -251,7 +251,7 @@ .notebook-cell--markdown .notebook-cell__number { background: color-mix(in srgb, rgb(134, 239, 172) 10%, transparent); - color: theme('colors.green.600'); + color: #059669; border-color: color-mix(in srgb, rgb(134, 239, 172) 20%, transparent); } @@ -266,19 +266,19 @@ .notebook-cell__status--executed { background: color-mix(in srgb, rgb(34, 197, 94) 10%, transparent); - color: theme('colors.green.600'); + color: #059669; border: 1px solid color-mix(in srgb, rgb(34, 197, 94) 20%, transparent); } .notebook-cell__status--pending { background: color-mix(in srgb, rgb(251, 191, 36) 10%, transparent); - color: theme('colors.amber.600'); + color: #d97706; border: 1px solid color-mix(in srgb, rgb(251, 191, 36) 20%, transparent); } .notebook-cell__status--error { background: color-mix(in srgb, rgb(239, 68, 68) 10%, transparent); - color: theme('colors.red.600'); + color: #dc2626; border: 1px solid color-mix(in srgb, rgb(239, 68, 68) 20%, transparent); } @@ -339,7 +339,7 @@ ======================================== */ .notebook-cell--markdown .notebook-cell__type-icon { - color: theme('colors.green.600'); + color: #059669; } .notebook-cell__markdown-content { @@ -473,7 +473,7 @@ /* Stream Output */ .notebook-cell__output--stream { background: var(--color-bg-secondary); - color: theme('colors.green.400'); + color: #4ade80; padding: 1rem; font-family: theme('fontFamily.mono'); font-size: 0.875rem; @@ -537,9 +537,9 @@ /* Error Output */ .notebook-cell__output--error { - background: theme('colors.red.900'); - color: theme('colors.red.100'); - border-color: theme('colors.red.700'); + background: #7f1d1d; + color: #fee2e2; + border-color: #b91c1c; padding: 1rem; } @@ -547,7 +547,7 @@ font-weight: 700; font-size: 1rem; margin-bottom: 0.5rem; - color: theme('colors.red.300'); + color: #fca5a5; } .notebook-cell__error-value { @@ -565,7 +565,7 @@ .notebook-cell__traceback-line { padding: 0.125rem 0; - border-inline-start: 2px solid theme('colors.red.500'); + border-inline-start: 2px solid #ef4444; padding-inline-start: 0.75rem; margin: 0.25rem 0; } @@ -642,7 +642,7 @@ ======================================== */ .notebook-cell--raw .notebook-cell__type-icon { - color: theme('colors.purple.600'); + color: #9333ea; } .notebook-cell__raw-content { @@ -1085,17 +1085,17 @@ @media (prefers-contrast: high) { .notebook__cells { - --notebook-border: theme('colors.gray.900'); - --cell-border: theme('colors.gray.800'); - --cell-hover-border: theme('colors.blue.700'); - --cell-active-border: theme('colors.blue.600'); + --notebook-border: #111827; + --cell-border: #1f2937; + --cell-hover-border: #1d4ed8; + --cell-active-border: #2563eb; } .dark .notebook__cells { - --notebook-border: theme('colors.gray.100'); - --cell-border: theme('colors.gray.300'); - --cell-hover-border: theme('colors.blue.300'); - --cell-active-border: theme('colors.blue.400'); + --notebook-border: #f3f4f6; + --cell-border: #d1d5db; + --cell-hover-border: #93c5fd; + --cell-active-border: #60a5fa; } } diff --git a/assets/css/main.css b/assets/css/main.css index 654296f..89e608c 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,91 +1,52 @@ -/* This file is used to compile the main.css file. */ -/* Import component CSS files - MUST be first! */ -/* đŸŽ¯ Architecture System - Complete Import - * ========================================= - * - * This file imports all architectural foundation files in the correct order - * to ensure proper CSS cascade and prevent conflicts. - * - * Import this single file to get the complete architectural system. - */ -/* ✅ STEP 1: ANIMATION FOUNDATION - * ================================ - * Must be first - provides timing tokens, easing curves, and base animation patterns - * that other systems depend on. - */ -/* đŸŽ¯ Universal Animation System - Single Source of Truth - * ===================================================== - * - * This file establishes consistent timing, easing, and animation patterns - * across the entire theme to eliminate timing chaos and performance issues. - */ +/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */ +@layer properties; +@layer theme, base, components, utilities; :root { - /* ✨ TIMING TOKENS - Only these 4 speeds allowed site-wide */ - --timing-instant: 0.1s; /* Micro-interactions (hover, focus) */ - --timing-fast: 0.2s; /* Standard interactions (buttons, links) */ - --timing-medium: 0.3s; /* Complex interactions (collapse, expand) */ - --timing-slow: 0.5s; /* Dramatic reveals (page transitions) */ - - /* ✨ EASING TOKENS - Only these 3 curves allowed site-wide */ - --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Default - smooth start/end */ - --easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); /* Dramatic - bouncy feel */ - --easing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Gentle - soft motion */ - - /* đŸŽ¯ COLLAPSE TOKENS - Universal collapse/expand behavior */ + --timing-instant: 0.1s; + --timing-fast: 0.2s; + --timing-medium: 0.3s; + --timing-slow: 0.5s; + --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); + --easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); + --easing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); --collapse-timing: var(--timing-medium); --collapse-easing: var(--easing-standard); --collapse-height-collapsed: 0; - --collapse-height-expanded: 2000px; /* Never use 'none' or 'auto' - breaks animation */ + --collapse-height-expanded: 2000px; --collapse-opacity-collapsed: 0; --collapse-opacity-expanded: 1; - - /* 🎨 TRANSFORM TOKENS - 3D acceleration friendly */ --transform-scale-down: scale(0.95); --transform-scale-up: scale(1.05); --transform-scale-normal: scale(1); --transform-translate-up: translateY(-4px); --transform-translate-down: translateY(4px); --transform-translate-none: translateY(0); - - /* 🌟 OPACITY TOKENS - Visibility states */ --opacity-hidden: 0; --opacity-faded: 0.6; --opacity-visible: 1; - - /* 🎨 COMPONENT-SPECIFIC TOKENS - From design-tokens.css merge */ - - /* Card & Tile Tokens */ --card-shadow-rest: 0 1px 3px rgba(0,0,0,0.1); --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.15); --card-shadow-active: 0 8px 25px rgba(0,0,0,0.15); --card-transform-hover: translateY(-2px); --card-transform-active: translateY(-1px) scale(0.98); --card-border-radius: 0.5rem; - - /* ✨ ADDITIONAL TRANSFORM PATTERNS - From component analysis */ - --transform-lift-subtle: translateY(-1px); /* Buttons, small elements */ - --transform-lift-medium: translateY(-2px); /* Cards, medium elements */ - --transform-lift-dramatic: translateY(-4px); /* Hero elements */ - --transform-slide-in-up: translateY(20px); /* Entry animations */ - --transform-slide-in-down: translateY(-20px); /* Dropdown animations */ - --transform-scale-hover: scale(1.02); /* Hover scale up */ - --transform-scale-active: scale(0.98); /* Active scale down */ - --transform-scale-entrance: scale(0.95); /* Entry scale */ - - /* ✨ COMBINED TRANSFORMS - Common combinations */ + --transform-lift-subtle: translateY(-1px); + --transform-lift-medium: translateY(-2px); + --transform-lift-dramatic: translateY(-4px); + --transform-slide-in-up: translateY(20px); + --transform-slide-in-down: translateY(-20px); + --transform-scale-hover: scale(1.02); + --transform-scale-active: scale(0.98); + --transform-scale-entrance: scale(0.95); --transform-lift-and-scale: translateY(-2px) scale(1.02); --transform-press-down: translateY(1px) scale(0.98); --transform-bounce-in: translateY(10px) scale(0.95); --transform-slide-up-fade: translateY(15px); - - /* Interaction Tokens */ --hover-scale: 1.02; --active-scale: 0.98; --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring-color: rgba(var(--color-brand-rgb), 0.2); - - /* Loading State Tokens */ --loading-opacity: 0.6; --loading-blur: blur(1px); --loading-skeleton-bg: linear-gradient(90deg, @@ -93,36 +54,26 @@ rgba(var(--color-brand-rgb), 0.2) 50%, rgba(var(--color-brand-rgb), 0.1) 75%); --loading-skeleton-size: 200% 100%; - - /* Feedback Tokens */ --feedback-success: #10b981; --feedback-warning: #f59e0b; --feedback-error: #ef4444; --feedback-info: #3b82f6; --feedback-slide-in: translateY(-10px); --feedback-slide-out: translateY(-20px); - - /* Progressive Reveal Tokens */ --reveal-stagger-delay: 0.05s; --reveal-batch-delay: 0.15s; --reveal-slide-distance: 20px; } -/* 🌙 DARK MODE ENHANCEMENTS */ .dark { --focus-ring-color: rgba(var(--color-brand-rgb), 0.3); - - /* Enhanced loading states for dark mode */ --loading-skeleton-bg: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%); - - /* Enhanced shadows for dark mode */ --card-shadow-rest: 0 1px 3px rgba(0,0,0,0.3); --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.4); --card-shadow-active: 0 8px 25px rgba(0,0,0,0.5); } -/* 🚨 ACCESSIBILITY - Respect user preferences */ @media (prefers-reduced-motion: reduce) { :root { --timing-instant: 0.01s; @@ -130,45 +81,29 @@ --timing-medium: 0.01s; --timing-slow: 0.01s; } - * { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; transition-duration: 0.01s !important; } } -/* ✅ UNIVERSAL COLLAPSE COMPONENT - * ================================ - * Use these classes on any collapsible content for consistent behavior - */ -/* Base collapsible container */ .collapse-container { position: relative; overflow: hidden; } -/* Collapsible content body */ .collapse-body { max-height: var(--collapse-height-collapsed); opacity: var(--collapse-opacity-collapsed); overflow: hidden; - transition: - max-height var(--collapse-timing) var(--collapse-easing), + transition: max-height var(--collapse-timing) var(--collapse-easing), opacity var(--collapse-timing) var(--collapse-easing); } -/* Expanded state */ .collapse-body.expanded { max-height: var(--collapse-height-expanded); opacity: var(--collapse-opacity-expanded); } -/* Duplicated component/data state rules moved to architecture/component-states.css */ -/* Keeping this section intentionally empty to avoid divergence. */ -/* ✅ PERFORMANCE-OPTIMIZED HOVER STATES - * ====================================== - * Use specific property transitions instead of "transition: all" - */ .interactive-element { - transition: - transform var(--timing-fast) var(--easing-standard), + transition: transform var(--timing-fast) var(--easing-standard), opacity var(--timing-fast) var(--easing-standard), box-shadow var(--timing-fast) var(--easing-standard); } @@ -178,47 +113,32 @@ } .interactive-element:active { transform: var(--transform-scale-down); - transition-duration: var(--timing-instant); /* Instant feedback */ + transition-duration: var(--timing-instant); } -/* ✅ COMPONENT-SPECIFIC CUSTOMIZATION - * ==================================== - * Override tokens for specific component needs - */ -/* OpenAPI components need larger heights for complex content */ .openapi-response { --collapse-height-expanded: 3000px; --collapse-timing: var(--timing-medium); } -/* Notebook cells should be snappier */ .notebook-cell { --collapse-height-expanded: 2000px; --collapse-timing: var(--timing-fast); } -/* Tutorial sections can be more dramatic */ .tutorial-section { --collapse-height-expanded: 2500px; --collapse-timing: var(--timing-slow); --collapse-easing: var(--easing-emphasized); } -/* Tabs need instant switching for good UX */ .tab-content { --collapse-height-expanded: 1500px; --collapse-timing: var(--timing-fast); } -/* ✅ SIDEBAR NAVIGATION TREE - Optimized for hierarchical content */ .nested-content { --collapse-height-expanded: 2000px; --collapse-timing: var(--timing-medium); --collapse-easing: var(--easing-standard); - - /* Performance optimization for tree navigation */ will-change: max-height, opacity; - transform: translateZ(0); /* Force hardware acceleration */ + transform: translateZ(0); } -/* ✅ UTILITY CLASSES - * =================== - * Common animation patterns as reusable classes - */ .fade-in { opacity: var(--opacity-hidden); animation: fadeIn var(--timing-medium) var(--easing-standard) forwards; @@ -257,10 +177,6 @@ .lift-on-hover:hover { transform: var(--transform-lift-medium); } -/* ✅ KEYFRAME ANIMATIONS - * ======================= - * Standard animations used across components - */ @keyframes fadeIn { to { opacity: var(--opacity-visible); @@ -308,10 +224,6 @@ opacity: var(--opacity-visible); } } -/* ✅ STAGGER ANIMATIONS - * ====================== - * For animating groups of elements with delays - */ .stagger-children > * { animation-delay: calc(var(--reveal-stagger-delay) * var(--stagger-index, 0)); } @@ -324,209 +236,120 @@ opacity: var(--opacity-hidden); animation: slideInUp var(--timing-medium) var(--easing-standard) forwards; } -/* ✅ DEBUG MODE - * ============== - * Uncomment to visualize animation timing (development only) - */ -/* -.collapse-body { - border: 2px dashed red !important; -} - -.collapse-body.expanded { - border-color: green !important; -} - -[data-collapse-state] { - outline: 2px solid blue !important; -} -*/ -/* ✅ STEP 2: COMPONENT STATE MANAGEMENT - * ====================================== - * Depends on animation tokens. Provides state management patterns that - * interaction and loading systems build upon. - */ -/* đŸŽ¯ Universal Component State Management System - * ============================================== - * - * This file establishes consistent state management patterns across all - * interactive components, replacing inconsistent class-based approaches - * with data-attribute driven state management. - */ -/* ✅ COLLAPSE STATE MANAGEMENT - * ============================= - * Universal collapse/expand states using data attributes - */ -/* Base collapsed state - applies to any element with data-collapse-state */ [data-collapse-state="collapsed"] { max-height: var(--collapse-height-collapsed, 0); opacity: var(--collapse-opacity-collapsed, 0); overflow: hidden; - transition: - max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), + transition: max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); } -/* Transitioning state - shows element is mid-animation */ [data-collapse-state="transitioning"] { - overflow: hidden; /* Ensure no content spillage during animation */ - pointer-events: none; /* Prevent interaction during transition */ + overflow: hidden; + pointer-events: none; } -/* Expanded state - fully visible and interactive */ [data-collapse-state="expanded"] { max-height: var(--collapse-height-expanded, 2000px); opacity: var(--collapse-opacity-expanded, 1); - overflow: visible; /* Allow content to be fully visible when expanded */ - transition: - max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), + overflow: visible; + transition: max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); } -/* ✅ COMPONENT LIFECYCLE STATES - * ============================== - * Standard states for component initialization and interaction - */ -/* Loading state - component is being initialized */ [data-component-state="loading"] { opacity: var(--opacity-faded, 0.6); pointer-events: none; cursor: wait; transition: opacity var(--timing-fast) var(--easing-standard); } -/* Ready state - component is initialized and interactive */ [data-component-state="ready"] { opacity: var(--opacity-visible, 1); pointer-events: auto; transition: opacity var(--timing-fast) var(--easing-standard); } -/* Disabled state - component is non-interactive */ [data-component-state="disabled"] { opacity: var(--opacity-faded, 0.6); pointer-events: none; cursor: not-allowed; filter: grayscale(50%); - transition: - opacity var(--timing-fast) var(--easing-standard), + transition: opacity var(--timing-fast) var(--easing-standard), filter var(--timing-fast) var(--easing-standard); } -/* Error state - component has encountered an error */ [data-component-state="error"] { opacity: var(--opacity-visible, 1); border-color: var(--color-danger, #ef4444); background-color: rgba(239, 68, 68, 0.05); - transition: - border-color var(--timing-fast) var(--easing-standard), + transition: border-color var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard); } -/* ✅ LEGACY CLASS SUPPORT (Backward Compatibility) - * ================================================= - * Bridge classes for existing components that use class-based states - */ -/* Support for existing .expanded classes */ .expanded { max-height: var(--collapse-height-expanded, 2000px) !important; opacity: var(--collapse-opacity-expanded, 1) !important; overflow: visible !important; - transition: - max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), + transition: max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); } -/* Support for existing .collapsed classes */ .collapsed { max-height: var(--collapse-height-collapsed, 0) !important; opacity: var(--collapse-opacity-collapsed, 0) !important; overflow: hidden !important; - transition: - max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), + transition: max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); } -/* ✅ INTERACTIVE STATES - * ===================== - * Consistent hover, focus, and active states - */ -/* Interactive elements with hover states */ [data-interactive="true"]:hover, .interactive:hover { transform: var(--transform-translate-up, translateY(-2px)); transition: transform var(--timing-fast) var(--easing-standard); } -/* Interactive elements with focus states */ [data-interactive="true"]:focus-visible, .interactive:focus-visible { outline: 2px solid var(--color-brand, #3b82f6); outline-offset: 2px; border-radius: 0.25rem; } -/* Interactive elements with active states */ [data-interactive="true"]:active, .interactive:active { transform: var(--transform-scale-down, scale(0.98)); transition: transform var(--timing-instant) var(--easing-standard); } -/* ✅ COMPONENT-SPECIFIC STATE OVERRIDES - * ====================================== - * Customization for specific component types - */ -/* OpenAPI Components */ .openapi-response[data-collapse-state], .openapi-endpoint[data-collapse-state], .openapi-parameter[data-collapse-state] { - --collapse-height-expanded: 3000px; /* Complex API content needs more space */ + --collapse-height-expanded: 3000px; --collapse-timing: var(--timing-medium); --collapse-easing: var(--easing-standard); } -/* Notebook Components */ .notebook-cell[data-collapse-state], .notebook-output[data-collapse-state] { - --collapse-height-expanded: 2000px; /* Code and output content */ - --collapse-timing: var(--timing-fast); /* Snappier interaction */ + --collapse-height-expanded: 2000px; + --collapse-timing: var(--timing-fast); --collapse-easing: var(--easing-standard); } -/* Tutorial Components */ .tutorial-section[data-collapse-state], .section-content[data-collapse-state] { - --collapse-height-expanded: 2500px; /* Text-heavy content */ - --collapse-timing: var(--timing-slow); /* More dramatic for educational content */ + --collapse-height-expanded: 2500px; + --collapse-timing: var(--timing-slow); --collapse-easing: var(--easing-emphasized); } -/* Tab Components */ .tab-content[data-collapse-state], [data-tabcontent][data-collapse-state] { - --collapse-height-expanded: 1500px; /* Tab content usually more compact */ - --collapse-timing: var(--timing-fast); /* Quick switching expected */ + --collapse-height-expanded: 1500px; + --collapse-timing: var(--timing-fast); --collapse-easing: var(--easing-standard); } -/* ✅ UTILITY CLASSES - * =================== - * Quick state application classes - */ -/* Force immediate state without animation */ .state-immediate { transition: none !important; } -/* Force slow animation timing */ .state-slow { --collapse-timing: var(--timing-slow); --collapse-easing: var(--easing-smooth); } -/* Force fast animation timing */ .state-fast { --collapse-timing: var(--timing-fast); --collapse-easing: var(--easing-standard); } -/* Emphasized dramatic animation */ .state-dramatic { --collapse-timing: var(--timing-slow); --collapse-easing: var(--easing-emphasized); } -/* ✅ ACCESSIBILITY ENHANCEMENTS - * ============================== - * Enhanced states for screen readers and assistive technology - */ -/* ✅ REMOVED: Enhanced focus indicators causing ancestry tree echoing - * The :focus-within pseudo-class was applying styling to ALL ancestor elements - * with data-collapse-state attributes, creating the visual "echo" effect. - * Focus should be handled by individual interactive elements instead. - */ -/* Screen reader friendly state announcements */ [data-collapse-state="collapsed"][aria-label]::before { content: "Collapsed: "; position: absolute; @@ -543,10 +366,6 @@ height: 1px; overflow: hidden; } -/* ✅ MOTION REDUCTION SUPPORT - * ============================ - * Respect user motion preferences - */ @media (prefers-reduced-motion: reduce) { [data-collapse-state], [data-component-state], @@ -558,149 +377,80 @@ transform: none !important; } } -/* ✅ HIGH CONTRAST MODE SUPPORT - * ============================== - * Enhanced visibility for high contrast users - */ @media (prefers-contrast: high) { [data-component-state="error"] { border-width: 2px; border-style: solid; } - - /* ✅ REMOVED: focus-within outline for high contrast mode - * This was also contributing to the ancestry tree echo effect - */ } [data-interactive="true"]:focus-visible { outline-width: 3px; outline-style: solid; } -/* ✅ DEBUG MODE (Development Only) - * ================================= - * Uncomment to visualize state management in development - */ -/* -[data-collapse-state] { - position: relative; -} - -[data-collapse-state]::before { - content: "State: " attr(data-collapse-state); - position: absolute; - top: -1.5rem; - left: 0; - background: #000; - color: #fff; - padding: 0.25rem 0.5rem; - font-size: 0.75rem; - border-radius: 0.25rem; - z-index: 1000; - pointer-events: none; -} - -[data-component-state]::after { - content: "Component: " attr(data-component-state); - position: absolute; - top: -3rem; - left: 0; - background: #3b82f6; - color: #fff; - padding: 0.25rem 0.5rem; - font-size: 0.75rem; - border-radius: 0.25rem; - z-index: 1000; - pointer-events: none; -} -*/ -/* ✅ STEP 3: LAYOUT FOUNDATIONS - * ============================== - * Independent system that provides spacing, positioning, and layout tokens. - * Can be loaded in parallel with other systems. - */ -/* đŸŽ¯ Universal Layout Foundations System - * ======================================= - * - * This file centralizes common spacing, positioning, and layout patterns - * to ensure consistent spatial relationships across all components. - */ :root { - /* ✨ SPACING SCALE (based on 0.25rem = 4px base) */ --space-0: 0; --space-px: 1px; - --space-0-5: 0.125rem; /* 2px */ - --space-1: 0.25rem; /* 4px */ - --space-1-5: 0.375rem; /* 6px */ - --space-2: 0.5rem; /* 8px */ - --space-2-5: 0.625rem; /* 10px */ - --space-3: 0.75rem; /* 12px */ - --space-3-5: 0.875rem; /* 14px */ - --space-4: 1rem; /* 16px */ - --space-5: 1.25rem; /* 20px */ - --space-6: 1.5rem; /* 24px */ - --space-7: 1.75rem; /* 28px */ - --space-8: 2rem; /* 32px */ - --space-9: 2.25rem; /* 36px */ - --space-10: 2.5rem; /* 40px */ - --space-11: 2.75rem; /* 44px */ - --space-12: 3rem; /* 48px */ - --space-14: 3.5rem; /* 56px */ - --space-16: 4rem; /* 64px */ - --space-20: 5rem; /* 80px */ - --space-24: 6rem; /* 96px */ - --space-28: 7rem; /* 112px */ - --space-32: 8rem; /* 128px */ - --space-36: 9rem; /* 144px */ - --space-40: 10rem; /* 160px */ - --space-44: 11rem; /* 176px */ - --space-48: 12rem; /* 192px */ - --space-52: 13rem; /* 208px */ - --space-56: 14rem; /* 224px */ - --space-60: 15rem; /* 240px */ - --space-64: 16rem; /* 256px */ - --space-72: 18rem; /* 288px */ - --space-80: 20rem; /* 320px */ - --space-96: 24rem; /* 384px */ - - /* ✨ SEMANTIC SPACING TOKENS */ - --space-xs: var(--space-1); /* 4px - Minimal spacing */ - --space-sm: var(--space-2); /* 8px - Small spacing */ - --space-md: var(--space-4); /* 16px - Medium spacing */ - --space-lg: var(--space-6); /* 24px - Large spacing */ - --space-xl: var(--space-8); /* 32px - Extra large spacing */ - --space-2xl: var(--space-12); /* 48px - Double extra large */ - --space-3xl: var(--space-16); /* 64px - Triple extra large */ - - /* ✨ CONTENT SPACING TOKENS */ - --content-gap-tight: var(--space-2); /* 8px - Tight content */ - --content-gap-normal: var(--space-4); /* 16px - Normal content */ - --content-gap-relaxed: var(--space-6); /* 24px - Relaxed content */ - --content-gap-loose: var(--space-8); /* 32px - Loose content */ - - /* ✨ COMPONENT SPACING TOKENS */ - --component-padding-sm: var(--space-3); /* 12px - Small components */ - --component-padding-md: var(--space-4); /* 16px - Medium components */ - --component-padding-lg: var(--space-6); /* 24px - Large components */ - --component-padding-xl: var(--space-8); /* 32px - Extra large components */ - - /* ✨ BORDER RADIUS SCALE */ + --space-0-5: 0.125rem; + --space-1: 0.25rem; + --space-1-5: 0.375rem; + --space-2: 0.5rem; + --space-2-5: 0.625rem; + --space-3: 0.75rem; + --space-3-5: 0.875rem; + --space-4: 1rem; + --space-5: 1.25rem; + --space-6: 1.5rem; + --space-7: 1.75rem; + --space-8: 2rem; + --space-9: 2.25rem; + --space-10: 2.5rem; + --space-11: 2.75rem; + --space-12: 3rem; + --space-14: 3.5rem; + --space-16: 4rem; + --space-20: 5rem; + --space-24: 6rem; + --space-28: 7rem; + --space-32: 8rem; + --space-36: 9rem; + --space-40: 10rem; + --space-44: 11rem; + --space-48: 12rem; + --space-52: 13rem; + --space-56: 14rem; + --space-60: 15rem; + --space-64: 16rem; + --space-72: 18rem; + --space-80: 20rem; + --space-96: 24rem; + --space-xs: var(--space-1); + --space-sm: var(--space-2); + --space-md: var(--space-4); + --space-lg: var(--space-6); + --space-xl: var(--space-8); + --space-2xl: var(--space-12); + --space-3xl: var(--space-16); + --content-gap-tight: var(--space-2); + --content-gap-normal: var(--space-4); + --content-gap-relaxed: var(--space-6); + --content-gap-loose: var(--space-8); + --component-padding-sm: var(--space-3); + --component-padding-md: var(--space-4); + --component-padding-lg: var(--space-6); + --component-padding-xl: var(--space-8); --radius-none: 0; - --radius-sm: 0.125rem; /* 2px */ - --radius-base: 0.25rem; /* 4px */ - --radius-md: 0.375rem; /* 6px */ - --radius-lg: 0.5rem; /* 8px */ - --radius-xl: 0.75rem; /* 12px */ - --radius-2xl: 1rem; /* 16px */ - --radius-3xl: 1.5rem; /* 24px */ - --radius-full: 9999px; /* Full radius */ - - /* ✨ SEMANTIC BORDER RADIUS TOKENS */ - --radius-button: var(--radius-md); /* Button border radius */ - --radius-card: var(--radius-lg); /* Card border radius */ - --radius-modal: var(--radius-xl); /* Modal border radius */ - --radius-input: var(--radius-base); /* Input border radius */ - - /* ✨ Z-INDEX SCALE */ + --radius-sm: 0.125rem; + --radius-base: 0.25rem; + --radius-md: 0.375rem; + --radius-lg: 0.5rem; + --radius-xl: 0.75rem; + --radius-2xl: 1rem; + --radius-3xl: 1.5rem; + --radius-full: 9999px; + --radius-button: var(--radius-md); + --radius-card: var(--radius-lg); + --radius-modal: var(--radius-xl); + --radius-input: var(--radius-base); --z-behind: -1; --z-base: 0; --z-low: 10; @@ -711,78 +461,61 @@ --z-popover: 1000000; --z-tooltip: 10000000; --z-top: 999999999; - - /* ✨ SEMANTIC Z-INDEX TOKENS */ --z-dropdown: var(--z-overlay); --z-sticky-header: var(--z-high); --z-sidebar: var(--z-medium); --z-loading-overlay: var(--z-modal); --z-toast: var(--z-overlay); - - /* ✨ MAX WIDTH SCALE */ - --max-width-xs: 20rem; /* 320px */ - --max-width-sm: 24rem; /* 384px */ - --max-width-md: 28rem; /* 448px */ - --max-width-lg: 32rem; /* 512px */ - --max-width-xl: 36rem; /* 576px */ - --max-width-2xl: 42rem; /* 672px */ - --max-width-3xl: 48rem; /* 768px */ - --max-width-4xl: 56rem; /* 896px */ - --max-width-5xl: 64rem; /* 1024px */ - --max-width-6xl: 72rem; /* 1152px */ - --max-width-7xl: 80rem; /* 1280px */ + --max-width-xs: 20rem; + --max-width-sm: 24rem; + --max-width-md: 28rem; + --max-width-lg: 32rem; + --max-width-xl: 36rem; + --max-width-2xl: 42rem; + --max-width-3xl: 48rem; + --max-width-4xl: 56rem; + --max-width-5xl: 64rem; + --max-width-6xl: 72rem; + --max-width-7xl: 80rem; --max-width-full: 100%; - --max-width-prose: 65ch; /* Optimal reading width */ + --max-width-prose: 65ch; --max-width-screen-sm: 640px; --max-width-screen-md: 768px; --max-width-screen-lg: 1024px; --max-width-screen-xl: 1280px; --max-width-screen-2xl: 1536px; - - /* ✨ SEMANTIC MAX WIDTH TOKENS */ - --max-width-content: var(--max-width-4xl); /* Main content area */ - --max-width-sidebar: var(--max-width-xs); /* Sidebar width */ - --max-width-modal: var(--max-width-2xl); /* Modal dialogs */ - --max-width-form: var(--max-width-lg); /* Form containers */ - - /* ✨ LAYOUT SHELL TOKENS (moved from input.css) */ - --left-rail-width: 18rem; /* xl left rail */ - --right-rail-width: 22rem; /* xl right rail */ - --layout-gap-xl: var(--space-8);/* xl gap */ - --left-rail-width-2xl: 20rem; /* 2xl left rail */ - --right-rail-width-2xl: 28rem; /* 2xl right rail */ - --layout-gap-2xl: var(--space-16); /* 2xl gap */ - - /* ✨ GRID/TILE TOKENS (moved from input.css) */ - --grid-card-min: 280px; /* minimum card width for auto-fit grids */ - --tile-glass-blur: 12px; /* tile glass blur amount */ - --tile-glass-saturate: 140%; /* tile glass saturation */ - - /* ✨ GLASSMORPHISM TOKENS (unified) */ + --max-width-content: var(--max-width-4xl); + --max-width-sidebar: var(--max-width-xs); + --max-width-modal: var(--max-width-2xl); + --max-width-form: var(--max-width-lg); + --left-rail-width: 18rem; + --right-rail-width: 22rem; + --layout-gap-xl: var(--space-8); + --left-rail-width-2xl: 20rem; + --right-rail-width-2xl: 28rem; + --layout-gap-2xl: var(--space-16); + --grid-card-min: 280px; + --tile-glass-blur: 12px; + --tile-glass-saturate: 140%; --glass-blur: 8px; --glass-saturate: 1.15; --glass-bg: rgba(255, 255, 255, 0.45); --glass-border-color: rgba(255, 255, 255, 0.22); --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } -/* Dark mode glass adjustments */ .dark { --glass-bg: rgba(17, 17, 17, 0.5); --glass-border-color: rgba(255, 255, 255, 0.10); --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } -/* Right-rail presence attribute hook */ main.layout-shell[data-has-right-rail="false"] { - /* Slightly increase center column breathing room when right rail is hidden */ --layout-gap-xl: var(--space-8); --layout-gap-2xl: var(--space-12); --max-width-content: var(--max-width-5xl); } -/* Density presets - Apply by adding a class on or
, or via future param-driven mapping */ .layout-density--compact { - --grid-card-min: 320px; /* wider cards to reduce row count */ - --layout-gap-xl: var(--space-6); /* slightly tighter gap */ + --grid-card-min: 320px; + --layout-gap-xl: var(--space-6); --layout-gap-2xl: var(--space-10); } .layout-density--comfortable { @@ -790,37 +523,62 @@ main.layout-shell[data-has-right-rail="false"] { --layout-gap-xl: var(--space-8); --layout-gap-2xl: var(--space-16); } -/* ✅ SPACING UTILITY CLASSES - * =========================== - * Consistent spacing patterns for common use cases - */ -/* Margin utilities */ -.m-auto { margin: auto; } -.mx-auto { margin-left: auto; margin-right: auto; } -.my-auto { margin-top: auto; margin-bottom: auto; } -/* Padding utilities */ -.p-0 { padding: var(--space-0); } -.p-1 { padding: var(--space-1); } -.p-2 { padding: var(--space-2); } -.p-3 { padding: var(--space-3); } -.p-4 { padding: var(--space-4); } -.p-6 { padding: var(--space-6); } -.p-8 { padding: var(--space-8); } -/* Semantic spacing classes */ -.gap-tight { gap: var(--content-gap-tight); } -.gap-normal { gap: var(--content-gap-normal); } -.gap-relaxed { gap: var(--content-gap-relaxed); } -.gap-loose { gap: var(--content-gap-loose); } -/* Component padding classes */ -.padding-sm { padding: var(--component-padding-sm); } -.padding-md { padding: var(--component-padding-md); } -.padding-lg { padding: var(--component-padding-lg); } -.padding-xl { padding: var(--component-padding-xl); } -/* ✅ LAYOUT PATTERN CLASSES - * ========================== - * Common layout patterns as reusable classes - */ -/* Container patterns */ +.m-auto { + margin: auto; +} +.mx-auto { + margin-left: auto; + margin-right: auto; +} +.my-auto { + margin-top: auto; + margin-bottom: auto; +} +.p-0 { + padding: var(--space-0); +} +.p-1 { + padding: var(--space-1); +} +.p-2 { + padding: var(--space-2); +} +.p-3 { + padding: var(--space-3); +} +.p-4 { + padding: var(--space-4); +} +.p-6 { + padding: var(--space-6); +} +.p-8 { + padding: var(--space-8); +} +.gap-tight { + gap: var(--content-gap-tight); +} +.gap-normal { + gap: var(--content-gap-normal); +} +.gap-relaxed { + gap: var(--content-gap-relaxed); +} +.gap-loose { + gap: var(--content-gap-loose); +} +.padding-sm { + padding: var(--component-padding-sm); +} +.padding-md { + padding: var(--component-padding-md); +} +.padding-lg { + padding: var(--component-padding-lg); +} +.padding-xl { + padding: var(--component-padding-xl); +} .container { width: 100%; max-width: var(--max-width-content); @@ -840,7 +598,6 @@ main.layout-shell[data-has-right-rail="false"] { padding-left: 0; padding-right: 0; } -/* Content sections */ .section { padding-top: var(--space-12); padding-bottom: var(--space-12); @@ -853,7 +610,6 @@ main.layout-shell[data-has-right-rail="false"] { padding-top: var(--space-16); padding-bottom: var(--space-16); } -/* Stack layouts (vertical spacing) */ .stack > * + * { margin-top: var(--content-gap-normal); } @@ -866,7 +622,6 @@ main.layout-shell[data-has-right-rail="false"] { .stack-loose > * + * { margin-top: var(--content-gap-loose); } -/* Cluster layouts (horizontal spacing) */ .cluster { display: flex; flex-wrap: wrap; @@ -879,7 +634,6 @@ main.layout-shell[data-has-right-rail="false"] { .cluster-relaxed { gap: var(--content-gap-relaxed); } -/* Grid patterns */ .grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); @@ -891,7 +645,6 @@ main.layout-shell[data-has-right-rail="false"] { .grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } -/* Flexbox patterns */ .flex-between { display: flex; justify-content: space-between; @@ -912,15 +665,18 @@ main.layout-shell[data-has-right-rail="false"] { justify-content: flex-end; align-items: center; } -/* ✅ POSITIONING UTILITIES - * ========================= - * Common positioning patterns - */ -.relative { position: relative; } -.absolute { position: absolute; } -.fixed { position: fixed; } -.sticky { position: sticky; } -/* Absolute positioning helpers */ +.relative { + position: relative; +} +.absolute { + position: absolute; +} +.fixed { + position: fixed; +} +.sticky { + position: sticky; +} .absolute-center { position: absolute; top: 50%; @@ -947,124 +703,172 @@ main.layout-shell[data-has-right-rail="false"] { bottom: var(--space-2); right: var(--space-2); } -/* Z-index utilities */ -.z-behind { z-index: var(--z-behind); } -.z-base { z-index: var(--z-base); } -.z-low { z-index: var(--z-low); } -.z-medium { z-index: var(--z-medium); } -.z-high { z-index: var(--z-high); } -.z-overlay { z-index: var(--z-overlay); } -.z-modal { z-index: var(--z-modal); } -.z-top { z-index: var(--z-top); } -/* ✅ BORDER RADIUS UTILITIES - * =========================== - * Consistent border radius patterns - */ -.rounded-none { border-radius: var(--radius-none); } -.rounded-sm { border-radius: var(--radius-sm); } -.rounded { border-radius: var(--radius-base); } -.rounded-md { border-radius: var(--radius-md); } -.rounded-lg { border-radius: var(--radius-lg); } -.rounded-xl { border-radius: var(--radius-xl); } -.rounded-2xl { border-radius: var(--radius-2xl); } -.rounded-3xl { border-radius: var(--radius-3xl); } -.rounded-full { border-radius: var(--radius-full); } -/* Semantic border radius */ -.rounded-button { border-radius: var(--radius-button); } -.rounded-card { border-radius: var(--radius-card); } -.rounded-modal { border-radius: var(--radius-modal); } -.rounded-input { border-radius: var(--radius-input); } -/* ✅ MAX WIDTH UTILITIES - * ======================= - * Consistent content width constraints - */ -.max-w-xs { max-width: var(--max-width-xs); } -.max-w-sm { max-width: var(--max-width-sm); } -.max-w-md { max-width: var(--max-width-md); } -.max-w-lg { max-width: var(--max-width-lg); } -.max-w-xl { max-width: var(--max-width-xl); } -.max-w-2xl { max-width: var(--max-width-2xl); } -.max-w-3xl { max-width: var(--max-width-3xl); } -.max-w-4xl { max-width: var(--max-width-4xl); } -.max-w-5xl { max-width: var(--max-width-5xl); } -.max-w-6xl { max-width: var(--max-width-6xl); } -.max-w-7xl { max-width: var(--max-width-7xl); } -.max-w-full { max-width: var(--max-width-full); } -.max-w-prose { max-width: var(--max-width-prose); } -/* Semantic max width */ -.max-w-content { max-width: var(--max-width-content); } -.max-w-sidebar { max-width: var(--max-width-sidebar); } -.max-w-modal { max-width: var(--max-width-modal); } -.max-w-form { max-width: var(--max-width-form); } -/* ✅ RESPONSIVE PATTERNS - * ======================= - * Mobile-first responsive design patterns - */ +.z-behind { + z-index: var(--z-behind); +} +.z-base { + z-index: var(--z-base); +} +.z-low { + z-index: var(--z-low); +} +.z-medium { + z-index: var(--z-medium); +} +.z-high { + z-index: var(--z-high); +} +.z-overlay { + z-index: var(--z-overlay); +} +.z-modal { + z-index: var(--z-modal); +} +.z-top { + z-index: var(--z-top); +} +.rounded-none { + border-radius: var(--radius-none); +} +.rounded-sm { + border-radius: var(--radius-sm); +} +.rounded { + border-radius: var(--radius-base); +} +.rounded-md { + border-radius: var(--radius-md); +} +.rounded-lg { + border-radius: var(--radius-lg); +} +.rounded-xl { + border-radius: var(--radius-xl); +} +.rounded-2xl { + border-radius: var(--radius-2xl); +} +.rounded-3xl { + border-radius: var(--radius-3xl); +} +.rounded-full { + border-radius: var(--radius-full); +} +.rounded-button { + border-radius: var(--radius-button); +} +.rounded-card { + border-radius: var(--radius-card); +} +.rounded-modal { + border-radius: var(--radius-modal); +} +.rounded-input { + border-radius: var(--radius-input); +} +.max-w-xs { + max-width: var(--max-width-xs); +} +.max-w-sm { + max-width: var(--max-width-sm); +} +.max-w-md { + max-width: var(--max-width-md); +} +.max-w-lg { + max-width: var(--max-width-lg); +} +.max-w-xl { + max-width: var(--max-width-xl); +} +.max-w-2xl { + max-width: var(--max-width-2xl); +} +.max-w-3xl { + max-width: var(--max-width-3xl); +} +.max-w-4xl { + max-width: var(--max-width-4xl); +} +.max-w-5xl { + max-width: var(--max-width-5xl); +} +.max-w-6xl { + max-width: var(--max-width-6xl); +} +.max-w-7xl { + max-width: var(--max-width-7xl); +} +.max-w-full { + max-width: var(--max-width-full); +} +.max-w-prose { + max-width: var(--max-width-prose); +} +.max-w-content { + max-width: var(--max-width-content); +} +.max-w-sidebar { + max-width: var(--max-width-sidebar); +} +.max-w-modal { + max-width: var(--max-width-modal); +} +.max-w-form { + max-width: var(--max-width-form); +} @media (min-width: 640px) { - .sm\:container { - max-width: var(--max-width-screen-sm); + .sm\:container { + max-width: var(--max-width-screen-sm); } - .sm\:section { padding-top: var(--space-16); padding-bottom: var(--space-16); } - .sm\:padding-lg { padding: var(--component-padding-lg); } } @media (min-width: 768px) { - .md\:container { - max-width: var(--max-width-screen-md); + .md\:container { + max-width: var(--max-width-screen-md); } - .md\:section { padding-top: var(--space-20); padding-bottom: var(--space-20); } - .md\:padding-xl { padding: var(--component-padding-xl); } - .md\:grid-2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { - .lg\:container { - max-width: var(--max-width-screen-lg); + .lg\:container { + max-width: var(--max-width-screen-lg); } - .lg\:section { padding-top: var(--space-24); padding-bottom: var(--space-24); } - .lg\:grid-3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1280px) { - .xl\:container { - max-width: var(--max-width-screen-xl); + .xl\:container { + max-width: var(--max-width-screen-xl); } - .xl\:grid-4 { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1536px) { - .\32xl\:container { - max-width: var(--max-width-screen-2xl); + .\32xl\:container { + max-width: var(--max-width-screen-2xl); } } -/* ✅ CONTENT FLOW PATTERNS - * ========================= - * Typography and content spacing patterns - */ -/* Prose content */ .prose { max-width: var(--max-width-prose); line-height: 1.7; @@ -1099,7 +903,6 @@ main.layout-shell[data-has-right-rail="false"] { .prose p + h6 { margin-top: var(--space-8); } -/* List spacing */ .prose ul, .prose ol { padding-left: var(--space-6); @@ -1107,21 +910,14 @@ main.layout-shell[data-has-right-rail="false"] { .prose li + li { margin-top: var(--space-2); } -/* ✅ ACCESSIBILITY ENHANCEMENTS - * ============================== - * Spacing and layout for accessibility - */ -/* Focus spacing */ .focus-spacing:focus-visible { outline-offset: var(--space-1); } -/* Touch target sizing */ .touch-target { min-height: 44px; min-width: 44px; padding: var(--space-2); } -/* Screen reader spacing */ .sr-only { position: absolute; width: 1px; @@ -1133,240 +929,194 @@ main.layout-shell[data-has-right-rail="false"] { white-space: nowrap; border: 0; } -/* ✅ PRINT OPTIMIZATIONS - * ======================= - * Layout adjustments for print media - */ @media print { .section { padding-top: var(--space-6); padding-bottom: var(--space-6); } - .container { padding-left: 0; padding-right: 0; } - .stack > * + * { margin-top: var(--space-3); } } -/* ✅ STEP 3.5: TYPOGRAPHY SYSTEM - * =============================== - * Global type rules and article typography. - */ -/* Typography System - Base type scales and article text - Centralizes type sizing tokens and base rules. */ -/* Global Headings */ h1 { - font-size: clamp(1.5rem, 3.5vw, 1.75rem); /* 24px–28px */ + font-size: clamp(1.5rem, 3.5vw, 1.75rem); line-height: 1.2; font-weight: 900; letter-spacing: -0.025em; word-wrap: break-word; } h2 { - font-size: clamp(1.25rem, 3vw, 1.375rem); /* 20px–22px */ + font-size: clamp(1.25rem, 3vw, 1.375rem); line-height: 1.33; font-weight: 700; letter-spacing: -0.025em; word-wrap: break-word; } h3 { - font-size: clamp(1.0625rem, 2.5vw, 1.1875rem); /* 17px–19px */ + font-size: clamp(1.0625rem, 2.5vw, 1.1875rem); line-height: 1.4; font-weight: 700; letter-spacing: -0.015em; word-wrap: break-word; } -h4 { letter-spacing: -0.01em; } -/* Body */ +h4 { + letter-spacing: -0.01em; +} body { - font-size: clamp(1rem, 2vw, 1.0625rem); /* 16px–17px */ + font-size: clamp(1rem, 2vw, 1.0625rem); line-height: 1.6; letter-spacing: 0.01em; } -/* Brand font on main */ -main { font-family: var(--font-family-brand, inherit); } -/* Article Content Typography */ +main { + font-family: var(--font-family-brand, inherit); +} .article-content { color: var(--color-text-primary); - font-size: 1rem; /* mobile-first */ - line-height: 1.65; /* mobile-first */ + font-size: 1rem; + line-height: 1.65; letter-spacing: 0.01em; } @media (min-width: 768px) { .article-content { - font-size: 1.0625rem; /* 17px */ + font-size: 1.0625rem; line-height: 1.6; } } -/* ✅ STEP 4: ELEVATION SYSTEM - * ============================ - * Independent shadow system. Provides elevation tokens that interaction - * patterns will reference. - */ -/* đŸŽ¯ Universal Elevation System - * ============================== - * - * This file centralizes all box-shadow patterns to create a consistent - * elevation system across the theme. Based on Material Design principles - * but adapted for our brand aesthetic. - */ :root { - /* ✨ ELEVATION LEVELS (0-24dp equivalent) */ --elevation-0: none; - /* --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.1); */ --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.06); - /* --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1); */ --elevation-2: 0 1px 3px rgba(0, 0, 0, 0.08); - /* --elevation-3: 0 2px 6px rgba(0, 0, 0, 0.1); */ --elevation-3: 0 2px 5px rgba(0, 0, 0, 0.08); - /* --elevation-4: 0 2px 8px rgba(0, 0, 0, 0.1); */ --elevation-4: 0 2px 6px rgba(0, 0, 0, 0.1); - /* --elevation-6: 0 4px 12px rgba(0, 0, 0, 0.1); */ --elevation-6: 0 3px 10px rgba(0, 0, 0, 0.12); - /* --elevation-8: 0 4px 16px rgba(0, 0, 0, 0.1); */ --elevation-8: 0 4px 14px rgba(0, 0, 0, 0.12); - /* --elevation-12: 0 8px 24px rgba(0, 0, 0, 0.1); */ --elevation-12: 0 6px 20px rgba(0, 0, 0, 0.14); - /* --elevation-16: 0 12px 28px rgba(0, 0, 0, 0.1); */ --elevation-16: 0 8px 24px rgba(0, 0, 0, 0.14); - /* --elevation-24: 0 16px 32px rgba(0, 0, 0, 0.15); */ --elevation-24: 0 12px 28px rgba(0, 0, 0, 0.16); - - /* ✨ INTERACTIVE ELEVATION (hover states) */ - /* --elevation-hover-1: 0 4px 8px rgba(0, 0, 0, 0.15); */ --elevation-hover-1: 0 3px 8px rgba(0, 0, 0, 0.12); - /* --elevation-hover-2: 0 4px 12px rgba(0, 0, 0, 0.15); */ --elevation-hover-2: 0 4px 10px rgba(0, 0, 0, 0.14); - /* --elevation-hover-3: 0 6px 16px rgba(0, 0, 0, 0.15); */ --elevation-hover-3: 0 5px 14px rgba(0, 0, 0, 0.14); - /* --elevation-hover-4: 0 8px 20px rgba(0, 0, 0, 0.15); */ --elevation-hover-4: 0 6px 18px rgba(0, 0, 0, 0.16); - /* --elevation-hover-6: 0 12px 28px rgba(0, 0, 0, 0.15); */ --elevation-hover-6: 0 8px 22px rgba(0, 0, 0, 0.18); - /* --elevation-hover-8: 0 16px 32px rgba(0, 0, 0, 0.2); */ --elevation-hover-8: 0 10px 28px rgba(0, 0, 0, 0.2); - - /* ✨ BRAND-COLORED ELEVATIONS */ --elevation-brand-subtle: 0 2px 8px rgba(var(--color-brand-rgb), 0.1); --elevation-brand-medium: 0 4px 16px rgba(var(--color-brand-rgb), 0.15); --elevation-brand-strong: 0 8px 24px rgba(var(--color-brand-rgb), 0.2); --elevation-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.15); --elevation-brand-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.2); - - /* ✨ SPECIALIZED ELEVATIONS */ --elevation-inset: inset 0 1px 3px rgba(0, 0, 0, 0.1); --elevation-inset-deep: inset 0 2px 6px rgba(0, 0, 0, 0.15); --elevation-outline: 0 0 0 1px rgba(0, 0, 0, 0.1); --elevation-outline-brand: 0 0 0 1px var(--color-brand); - - /* ✨ ERROR/WARNING/SUCCESS ELEVATIONS */ --elevation-error: 0 4px 12px rgba(239, 68, 68, 0.2); --elevation-warning: 0 4px 12px rgba(245, 158, 11, 0.2); --elevation-success: 0 4px 12px rgba(16, 185, 129, 0.2); --elevation-info: 0 4px 12px rgba(59, 130, 246, 0.2); - - /* ✨ OVERLAYS AND MODALS */ --elevation-overlay: 0 24px 48px rgba(0, 0, 0, 0.3); --elevation-modal: 0 32px 64px rgba(0, 0, 0, 0.4); --elevation-dropdown: 0 8px 24px rgba(0, 0, 0, 0.15); --elevation-tooltip: 0 4px 12px rgba(0, 0, 0, 0.2); } -/* 🌙 DARK MODE ELEVATION ADJUSTMENTS */ .dark { - /* Stronger shadows for dark mode */ - /* --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.3); */ --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.25); - /* --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.3); */ --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.28); - /* --elevation-3: 0 2px 6px rgba(0, 0, 0, 0.4); */ --elevation-3: 0 2px 5px rgba(0, 0, 0, 0.34); - /* --elevation-4: 0 2px 8px rgba(0, 0, 0, 0.4); */ --elevation-4: 0 2px 6px rgba(0, 0, 0, 0.36); - /* --elevation-6: 0 4px 12px rgba(0, 0, 0, 0.4); */ --elevation-6: 0 3px 10px rgba(0, 0, 0, 0.4); - /* --elevation-8: 0 4px 16px rgba(0, 0, 0, 0.5); */ --elevation-8: 0 4px 14px rgba(0, 0, 0, 0.48); - /* --elevation-12: 0 8px 24px rgba(0, 0, 0, 0.5); */ --elevation-12: 0 6px 20px rgba(0, 0, 0, 0.5); - /* --elevation-16: 0 12px 28px rgba(0, 0, 0, 0.6); */ --elevation-16: 0 8px 24px rgba(0, 0, 0, 0.56); - /* --elevation-24: 0 16px 32px rgba(0, 0, 0, 0.7); */ --elevation-24: 0 12px 28px rgba(0, 0, 0, 0.6); - - /* Enhanced hover states for dark mode */ - /* --elevation-hover-1: 0 4px 8px rgba(0, 0, 0, 0.5); */ --elevation-hover-1: 0 3px 8px rgba(0, 0, 0, 0.44); - /* --elevation-hover-2: 0 4px 12px rgba(0, 0, 0, 0.5); */ --elevation-hover-2: 0 4px 10px rgba(0, 0, 0, 0.48); - /* --elevation-hover-3: 0 6px 16px rgba(0, 0, 0, 0.6); */ --elevation-hover-3: 0 5px 14px rgba(0, 0, 0, 0.5); - /* --elevation-hover-4: 0 8px 20px rgba(0, 0, 0, 0.6); */ --elevation-hover-4: 0 6px 18px rgba(0, 0, 0, 0.54); - /* --elevation-hover-6: 0 12px 28px rgba(0, 0, 0, 0.7); */ --elevation-hover-6: 0 8px 22px rgba(0, 0, 0, 0.58); - /* --elevation-hover-8: 0 16px 32px rgba(0, 0, 0, 0.8); */ --elevation-hover-8: 0 10px 28px rgba(0, 0, 0, 0.62); - - /* Enhanced brand elevations for dark mode */ --elevation-brand-subtle: 0 2px 8px rgba(var(--color-brand-rgb), 0.15); --elevation-brand-medium: 0 4px 16px rgba(var(--color-brand-rgb), 0.2); --elevation-brand-strong: 0 8px 24px rgba(var(--color-brand-rgb), 0.25); --elevation-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.25); --elevation-brand-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.3); - - /* Enhanced overlay elevations for dark mode */ --elevation-overlay: 0 24px 48px rgba(0, 0, 0, 0.8); --elevation-modal: 0 32px 64px rgba(0, 0, 0, 0.9); --elevation-dropdown: 0 8px 24px rgba(0, 0, 0, 0.6); --elevation-tooltip: 0 4px 12px rgba(0, 0, 0, 0.7); } -/* ✅ ELEVATION UTILITY CLASSES - * ============================= - * Apply these classes for consistent elevation - */ -.elevation-0 { box-shadow: var(--elevation-0); } -.elevation-1 { box-shadow: var(--elevation-1); } -.elevation-2 { box-shadow: var(--elevation-2); } -.elevation-3 { box-shadow: var(--elevation-3); } -.elevation-4 { box-shadow: var(--elevation-4); } -.elevation-6 { box-shadow: var(--elevation-6); } -.elevation-8 { box-shadow: var(--elevation-8); } -.elevation-12 { box-shadow: var(--elevation-12); } -.elevation-16 { box-shadow: var(--elevation-16); } -.elevation-24 { box-shadow: var(--elevation-24); } -/* Hover elevation classes */ -.elevation-hover-1:hover { box-shadow: var(--elevation-hover-1); } -.elevation-hover-2:hover { box-shadow: var(--elevation-hover-2); } -.elevation-hover-3:hover { box-shadow: var(--elevation-hover-3); } -.elevation-hover-4:hover { box-shadow: var(--elevation-hover-4); } -.elevation-hover-6:hover { box-shadow: var(--elevation-hover-6); } -.elevation-hover-8:hover { box-shadow: var(--elevation-hover-8); } -/* Brand elevation classes */ -.elevation-brand-subtle { box-shadow: var(--elevation-brand-subtle); } -.elevation-brand-medium { box-shadow: var(--elevation-brand-medium); } -.elevation-brand-strong { box-shadow: var(--elevation-brand-strong); } -.elevation-brand-glow { box-shadow: var(--elevation-brand-glow); } -/* Focus elevation */ -.elevation-focus:focus-visible { +.elevation-0 { + box-shadow: var(--elevation-0); +} +.elevation-1 { + box-shadow: var(--elevation-1); +} +.elevation-2 { + box-shadow: var(--elevation-2); +} +.elevation-3 { + box-shadow: var(--elevation-3); +} +.elevation-4 { + box-shadow: var(--elevation-4); +} +.elevation-6 { + box-shadow: var(--elevation-6); +} +.elevation-8 { + box-shadow: var(--elevation-8); +} +.elevation-12 { + box-shadow: var(--elevation-12); +} +.elevation-16 { + box-shadow: var(--elevation-16); +} +.elevation-24 { + box-shadow: var(--elevation-24); +} +.elevation-hover-1:hover { + box-shadow: var(--elevation-hover-1); +} +.elevation-hover-2:hover { + box-shadow: var(--elevation-hover-2); +} +.elevation-hover-3:hover { + box-shadow: var(--elevation-hover-3); +} +.elevation-hover-4:hover { + box-shadow: var(--elevation-hover-4); +} +.elevation-hover-6:hover { + box-shadow: var(--elevation-hover-6); +} +.elevation-hover-8:hover { + box-shadow: var(--elevation-hover-8); +} +.elevation-brand-subtle { + box-shadow: var(--elevation-brand-subtle); +} +.elevation-brand-medium { + box-shadow: var(--elevation-brand-medium); +} +.elevation-brand-strong { + box-shadow: var(--elevation-brand-strong); +} +.elevation-brand-glow { + box-shadow: var(--elevation-brand-glow); +} +.elevation-focus:focus-visible { box-shadow: var(--elevation-brand-focus); outline: none; } -/* ✅ COMPONENT-SPECIFIC ELEVATION MAPPINGS - * ========================================= - * Semantic elevation assignments for common components - */ -/* Surface elements */ .surface { box-shadow: var(--elevation-0); } .surface-raised { box-shadow: var(--elevation-1); } -/* Cards */ .card-flat { box-shadow: var(--elevation-1); } @@ -1379,7 +1129,6 @@ main { font-family: var(--font-family-brand, inherit); } .card-floating { box-shadow: var(--elevation-8); } -/* Interactive cards with hover */ .card-interactive { box-shadow: var(--elevation-2); transition: box-shadow var(--timing-medium) var(--easing-standard); @@ -1387,7 +1136,6 @@ main { font-family: var(--font-family-brand, inherit); } .card-interactive:hover { box-shadow: var(--elevation-hover-4); } -/* Buttons */ .btn-flat { box-shadow: var(--elevation-0); } @@ -1401,7 +1149,6 @@ main { font-family: var(--font-family-brand, inherit); } .btn-floating:hover { box-shadow: var(--elevation-hover-2); } -/* Navigation */ .nav-bar { box-shadow: var(--elevation-2); } @@ -1411,7 +1158,6 @@ main { font-family: var(--font-family-brand, inherit); } .nav-tabs { box-shadow: var(--elevation-1); } -/* Overlays */ .dropdown-menu { box-shadow: var(--elevation-dropdown); } @@ -1424,7 +1170,6 @@ main { font-family: var(--font-family-brand, inherit); } .popover { box-shadow: var(--elevation-8); } -/* Content sections */ .content-section { box-shadow: var(--elevation-1); } @@ -1434,56 +1179,33 @@ main { font-family: var(--font-family-brand, inherit); } .hero-section { box-shadow: var(--elevation-8); } -/* ✅ STATE-BASED ELEVATIONS - * ========================== - * Elevation changes based on component state - */ -/* Loading states get reduced elevation */ [data-component-state="loading"] { box-shadow: var(--elevation-1) !important; opacity: var(--opacity-faded); } -/* Error states get error elevation */ [data-component-state="error"] { box-shadow: var(--elevation-error) !important; } -/* Focus states for accessibility */ [data-component-state="focused"] { box-shadow: var(--elevation-brand-focus) !important; } -/* ✅ COMBINED ELEVATIONS - * ======================= - * Multiple shadows for complex effects - */ .elevation-layered { - box-shadow: - var(--elevation-2), + box-shadow: var(--elevation-2), var(--elevation-brand-glow); } .elevation-outlined { - box-shadow: - var(--elevation-4), + box-shadow: var(--elevation-4), var(--elevation-outline); } .elevation-brand-outlined { - box-shadow: - var(--elevation-4), + box-shadow: var(--elevation-4), var(--elevation-outline-brand); } -/* ✅ PERFORMANCE OPTIMIZATIONS - * ============================= - * Enable hardware acceleration for elements with elevation changes - */ .elevation-animated { will-change: box-shadow; - transform: translateZ(0); /* Force hardware acceleration */ + transform: translateZ(0); } -/* ✅ ACCESSIBILITY ENHANCEMENTS - * ============================== - * High contrast and reduced motion support - */ @media (prefers-contrast: high) { - /* Enhance shadows for better visibility */ :root { --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.3); --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.3); @@ -1492,7 +1214,6 @@ main { font-family: var(--font-family-brand, inherit); } } } @media (prefers-reduced-motion: reduce) { - /* Remove shadow transitions for reduced motion */ .card-interactive, .btn-raised, .btn-floating, @@ -1500,65 +1221,34 @@ main { font-family: var(--font-family-brand, inherit); } transition: none !important; } } -/* ✅ PRINT STYLES - * ================ - * Remove shadows for print media - */ @media print { * { box-shadow: none !important; } } -/* ✅ STEP 5: INTERACTION PATTERNS - * ================================ - * Depends on animation tokens and elevation tokens. Provides unified - * hover, focus, and active state patterns. - */ -/* đŸŽ¯ Universal Interaction Patterns System - * ======================================== - * - * This file centralizes all hover, focus, active, and interactive patterns - * to eliminate the hundreds of scattered transform/transition definitions - * across component files. - */ :root { - /* ✨ INTERACTION TRANSFORM TOKENS */ - --hover-lift-subtle: translateY(-1px); /* Buttons, small elements */ - --hover-lift-medium: translateY(-2px); /* Cards, medium elements */ - --hover-lift-dramatic: translateY(-4px); /* Hero cards, dramatic elements */ - --hover-scale-up: scale(1.02); /* Slight growth on hover */ - --hover-scale-down: scale(0.98); /* Slight shrink on active */ - --hover-combined-lift: translateY(-2px) scale(1.02); /* Combined lift + scale */ - - /* ✨ SHADOW ELEVATION TOKENS */ + --hover-lift-subtle: translateY(-1px); + --hover-lift-medium: translateY(-2px); + --hover-lift-dramatic: translateY(-4px); + --hover-scale-up: scale(1.02); + --hover-scale-down: scale(0.98); + --hover-combined-lift: translateY(-2px) scale(1.02); --shadow-rest: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-hover-subtle: 0 4px 8px rgba(0, 0, 0, 0.1); --shadow-hover-medium: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-hover-dramatic: 0 12px 28px rgba(0, 0, 0, 0.12); --shadow-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.2); --shadow-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.15); - - /* ✨ TRANSITION SETS - Reusable combinations */ - --transition-interactive: - transform var(--timing-fast) var(--easing-standard), + --transition-interactive: transform var(--timing-fast) var(--easing-standard), box-shadow var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard); - - --transition-elevation: - transform var(--timing-medium) var(--easing-standard), + --transition-elevation: transform var(--timing-medium) var(--easing-standard), box-shadow var(--timing-medium) var(--easing-standard); - - --transition-button: - background-color var(--timing-fast) var(--easing-standard), + --transition-button: background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard), box-shadow var(--timing-fast) var(--easing-standard); } -/* ✅ INTERACTION BEHAVIOR CLASSES - * ================================ - * Apply these classes for consistent interactive behavior - */ -/* Subtle interactive elements (buttons, small cards) */ .interact-subtle { transition: var(--transition-interactive); cursor: pointer; @@ -1571,7 +1261,6 @@ main { font-family: var(--font-family-brand, inherit); } transform: var(--hover-scale-down); transition-duration: var(--timing-instant); } -/* Medium interactive elements (content cards, tiles) */ .interact-medium { transition: var(--transition-elevation); cursor: pointer; @@ -1584,7 +1273,6 @@ main { font-family: var(--font-family-brand, inherit); } transform: var(--hover-scale-down); transition-duration: var(--timing-instant); } -/* Dramatic interactive elements (hero cards, featured content) */ .interact-dramatic { transition: var(--transition-elevation); cursor: pointer; @@ -1598,10 +1286,6 @@ main { font-family: var(--font-family-brand, inherit); } transform: var(--hover-combined-lift); transition-duration: var(--timing-instant); } -/* ✅ BUTTON INTERACTION PATTERNS - * =============================== - * Specialized patterns for button-like elements - */ .btn-interact { transition: var(--transition-button); position: relative; @@ -1620,18 +1304,13 @@ main { font-family: var(--font-family-brand, inherit); } outline-offset: 2px; box-shadow: var(--shadow-focus); } -/* ✅ BRAND-FOCUSED INTERACTIONS - * ============================== - * Elements that should emphasize brand colors - */ .interact-brand { transition: var(--transition-elevation); cursor: pointer; } .interact-brand:hover { transform: var(--hover-lift-medium); - box-shadow: - var(--shadow-hover-medium), + box-shadow: var(--shadow-hover-medium), var(--shadow-brand-glow); border-color: var(--color-brand); } @@ -1644,25 +1323,16 @@ main { font-family: var(--font-family-brand, inherit); } color: var(--color-brand); transition: color var(--timing-fast) var(--easing-standard); } -/* ✅ FOCUS MANAGEMENT - * ==================== - * Consistent focus indicators across all interactive elements - */ .focusable { - border-radius: 0.25rem; /* Ensure focus outline has proper shape */ + border-radius: 0.25rem; } .focusable:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; box-shadow: var(--shadow-focus); - transition: - outline-color var(--timing-fast) var(--easing-standard), + transition: outline-color var(--timing-fast) var(--easing-standard), box-shadow var(--timing-fast) var(--easing-standard); } -/* ✅ DISABLED STATES - * =================== - * Consistent disabled behavior - */ .interact-disabled, [data-interactive="false"], .interact-subtle:disabled, @@ -1672,44 +1342,28 @@ main { font-family: var(--font-family-brand, inherit); } cursor: not-allowed; pointer-events: none; filter: grayscale(50%); - transition: - opacity var(--timing-fast) var(--easing-standard), + transition: opacity var(--timing-fast) var(--easing-standard), filter var(--timing-fast) var(--easing-standard); } -/* ✅ LOADING STATES - * ================== - * Interactive elements in loading state - */ .interact-loading { opacity: var(--loading-opacity); cursor: wait; pointer-events: none; filter: var(--loading-blur); - transition: - opacity var(--timing-fast) var(--easing-standard), + transition: opacity var(--timing-fast) var(--easing-standard), filter var(--timing-fast) var(--easing-standard); } -/* ✅ NESTED INTERACTION INHERITANCE - * ================================== - * Child elements inherit parent interaction states - */ .interact-subtle:hover .nested-text, .interact-medium:hover .nested-text, .interact-dramatic:hover .nested-text { color: var(--color-brand); transition: color var(--timing-fast) var(--easing-standard); } -/* ✅ ACCESSIBILITY ENHANCEMENTS - * ============================== - * Enhanced interaction patterns for accessibility - */ -/* High contrast mode support */ @media (prefers-contrast: high) { .focusable:focus-visible { outline-width: 3px; outline-style: solid; } - .interact-subtle:hover, .interact-medium:hover, .interact-dramatic:hover { @@ -1718,7 +1372,6 @@ main { font-family: var(--font-family-brand, inherit); } border-color: var(--color-brand); } } -/* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .interact-subtle, .interact-medium, @@ -1728,7 +1381,6 @@ main { font-family: var(--font-family-brand, inherit); } transition: none !important; transform: none !important; } - .interact-subtle:hover, .interact-medium:hover, .interact-dramatic:hover, @@ -1737,20 +1389,13 @@ main { font-family: var(--font-family-brand, inherit); } transform: none !important; } } -/* ✅ TOUCH DEVICE OPTIMIZATIONS - * ============================== - * Better interactions for touch devices - */ @media (hover: none) and (pointer: coarse) { - /* Reduce hover effects on touch devices */ .interact-subtle:hover, .interact-medium:hover, .interact-dramatic:hover { transform: none; box-shadow: var(--shadow-rest); } - - /* Enhance active states for touch feedback */ .interact-subtle:active, .interact-medium:active, .interact-dramatic:active { @@ -1758,10 +1403,6 @@ main { font-family: var(--font-family-brand, inherit); } opacity: 0.8; } } -/* ✅ DARK MODE ENHANCEMENTS - * ========================== - * Enhanced shadows and interactions for dark mode - */ .dark { --shadow-rest: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-hover-subtle: 0 4px 8px rgba(0, 0, 0, 0.3); @@ -1770,52 +1411,18 @@ main { font-family: var(--font-family-brand, inherit); } --shadow-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.3); --shadow-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.25); } -/* ✅ COMPONENT-SPECIFIC OVERRIDES - * ================================ - * Allow components to customize interaction patterns - */ -/* Cards and tiles can use larger transforms */ -.card, -.tile { - /* Use .interact-medium or .interact-dramatic class instead of custom transforms */ -} -/* Buttons get subtle interactions by default */ -.btn { - /* Use .btn-interact class instead of custom transforms */ -} -/* Navigation items get subtle interactions */ -.nav-item, -.sidebar__item { - /* Use .interact-subtle class instead of custom transforms */ -} -/* ✅ STEP 6: LOADING STATES - * ========================== - * Depends on animation tokens and layout tokens. Provides loading patterns - * and skeleton components. - */ -/* đŸŽ¯ Universal Loading States System - * =================================== - * - * This file centralizes all loading patterns, skeletons, and async state - * management to ensure consistent loading experiences across components. - */ :root { - /* ✨ LOADING TIMING TOKENS */ --loading-duration-fast: 1s; --loading-duration-normal: 1.5s; --loading-duration-slow: 2s; --loading-pulse-duration: 2s; --loading-shimmer-duration: 1.5s; - - /* ✨ LOADING VISUAL TOKENS */ --loading-opacity: 0.6; --loading-blur: blur(1px); --loading-grayscale: grayscale(30%); --loading-backdrop: rgba(255, 255, 255, 0.8); --loading-spinner-size: 2rem; --loading-spinner-border: 2px; - - /* ✨ SKELETON TOKENS */ --skeleton-bg-base: rgba(var(--color-text-primary-rgb, 0, 0, 0), 0.1); --skeleton-bg-shimmer: rgba(var(--color-text-primary-rgb, 0, 0, 0), 0.2); --skeleton-border-radius: 0.25rem; @@ -1823,16 +1430,12 @@ main { font-family: var(--font-family-brand, inherit); } --skeleton-height-title: 1.5rem; --skeleton-height-button: 2.5rem; --skeleton-height-avatar: 3rem; - - /* ✨ SHIMMER GRADIENT */ --shimmer-gradient: linear-gradient( 90deg, var(--skeleton-bg-base) 25%, var(--skeleton-bg-shimmer) 50%, var(--skeleton-bg-base) 75% ); - - /* ✨ PULSE GRADIENT */ --pulse-gradient: linear-gradient( 45deg, rgba(var(--color-brand-rgb), 0.1) 0%, @@ -1840,12 +1443,10 @@ main { font-family: var(--font-family-brand, inherit); } rgba(var(--color-brand-rgb), 0.1) 100% ); } -/* 🌙 DARK MODE LOADING ADJUSTMENTS */ .dark { --loading-backdrop: rgba(0, 0, 0, 0.8); --skeleton-bg-base: rgba(255, 255, 255, 0.1); --skeleton-bg-shimmer: rgba(255, 255, 255, 0.2); - --shimmer-gradient: linear-gradient( 90deg, var(--skeleton-bg-base) 25%, @@ -1853,38 +1454,28 @@ main { font-family: var(--font-family-brand, inherit); } var(--skeleton-bg-base) 75% ); } -/* ✅ LOADING STATE CLASSES - * ========================= - * Apply these classes to show loading states - */ -/* Basic loading state */ .loading { opacity: var(--loading-opacity); pointer-events: none; cursor: wait; transition: opacity var(--timing-fast) var(--easing-standard); } -/* Loading with blur effect */ .loading-blur { opacity: var(--loading-opacity); filter: var(--loading-blur); pointer-events: none; cursor: wait; - transition: - opacity var(--timing-fast) var(--easing-standard), + transition: opacity var(--timing-fast) var(--easing-standard), filter var(--timing-fast) var(--easing-standard); } -/* Loading with grayscale effect */ .loading-muted { opacity: var(--loading-opacity); filter: var(--loading-grayscale); pointer-events: none; cursor: wait; - transition: - opacity var(--timing-fast) var(--easing-standard), + transition: opacity var(--timing-fast) var(--easing-standard), filter var(--timing-fast) var(--easing-standard); } -/* Loading overlay */ .loading-overlay { position: relative; } @@ -1896,8 +1487,7 @@ main { font-family: var(--font-family-brand, inherit); } right: 0; bottom: 0; background: var(--loading-backdrop); - -webkit-backdrop-filter: blur(2px); - backdrop-filter: blur(2px); + backdrop-filter: blur(2px); z-index: var(--z-overlay); opacity: 0; pointer-events: none; @@ -1907,11 +1497,6 @@ main { font-family: var(--font-family-brand, inherit); } opacity: 1; pointer-events: auto; } -/* ✅ SPINNER COMPONENTS - * ====================== - * Various spinner patterns - */ -/* Basic spinner */ .spinner { width: var(--loading-spinner-size); height: var(--loading-spinner-size); @@ -1929,7 +1514,6 @@ main { font-family: var(--font-family-brand, inherit); } --loading-spinner-size: 3rem; --loading-spinner-border: 3px; } -/* Dots spinner */ .spinner-dots { display: inline-flex; gap: 0.25rem; @@ -1949,7 +1533,6 @@ main { font-family: var(--font-family-brand, inherit); } .spinner-dots::after { animation-delay: 0.5s; } -/* Pulse spinner */ .spinner-pulse { width: var(--loading-spinner-size); height: var(--loading-spinner-size); @@ -1957,11 +1540,6 @@ main { font-family: var(--font-family-brand, inherit); } border-radius: 50%; animation: pulse var(--loading-pulse-duration) ease-in-out infinite; } -/* ✅ SKELETON COMPONENTS - * ======================= - * Skeleton loading patterns for different content types - */ -/* Base skeleton */ .skeleton { background: var(--skeleton-bg-base); border-radius: var(--skeleton-border-radius); @@ -1978,7 +1556,6 @@ main { font-family: var(--font-family-brand, inherit); } background: var(--shimmer-gradient); animation: shimmer var(--loading-shimmer-duration) ease-in-out infinite; } -/* Skeleton variations */ .skeleton-text { height: var(--skeleton-height-text); width: 100%; @@ -2013,11 +1590,6 @@ main { font-family: var(--font-family-brand, inherit); } width: 100%; border-radius: var(--radius-base); } -/* ✅ SKELETON LAYOUTS - * ==================== - * Complete skeleton layouts for common components - */ -/* Article skeleton */ .skeleton-article { padding: var(--space-6); } @@ -2031,7 +1603,6 @@ main { font-family: var(--font-family-brand, inherit); } width: 65%; margin-bottom: 0; } -/* Card skeleton */ .skeleton-card-content { padding: var(--space-4); } @@ -2044,7 +1615,6 @@ main { font-family: var(--font-family-brand, inherit); } .skeleton-card-content .skeleton-text { margin-bottom: var(--space-2); } -/* List item skeleton */ .skeleton-list-item { display: flex; align-items: center; @@ -2064,27 +1634,20 @@ main { font-family: var(--font-family-brand, inherit); } width: 40%; margin-bottom: 0; } -/* ✅ PROGRESSIVE LOADING - * ======================= - * Progressive reveal patterns - */ .progressive-load { opacity: 0; transform: var(--transform-slide-in-up); - transition: - opacity var(--timing-medium) var(--easing-standard), + transition: opacity var(--timing-medium) var(--easing-standard), transform var(--timing-medium) var(--easing-standard); } .progressive-load.loaded { opacity: 1; transform: var(--transform-translate-none); } -/* Staggered progressive loading */ .progressive-load-stagger > * { opacity: 0; transform: var(--transform-slide-in-up); - transition: - opacity var(--timing-medium) var(--easing-standard), + transition: opacity var(--timing-medium) var(--easing-standard), transform var(--timing-medium) var(--easing-standard); transition-delay: calc(var(--reveal-stagger-delay) * var(--stagger-index, 0)); } @@ -2092,11 +1655,6 @@ main { font-family: var(--font-family-brand, inherit); } opacity: 1; transform: var(--transform-translate-none); } -/* ✅ ASYNC OPERATION STATES - * ========================== - * Loading states for different async operations - */ -/* Button loading states */ .btn-loading { position: relative; color: transparent !important; @@ -2116,7 +1674,6 @@ main { font-family: var(--font-family-brand, inherit); } border-radius: 50%; animation: spin var(--loading-duration-fast) linear infinite; } -/* Form loading states */ .form-loading { opacity: var(--loading-opacity); pointer-events: none; @@ -2127,17 +1684,12 @@ main { font-family: var(--font-family-brand, inherit); } cursor: wait; background-color: var(--color-surface-muted); } -/* Content loading states */ .content-loading { min-height: 200px; display: flex; align-items: center; justify-content: center; } -/* ✅ ERROR AND RETRY STATES - * ========================== - * Loading error and retry patterns - */ .loading-error { padding: var(--space-6); text-align: center; @@ -2152,10 +1704,6 @@ main { font-family: var(--font-family-brand, inherit); } .retry-button { margin-top: var(--space-4); } -/* ✅ KEYFRAME ANIMATIONS - * ======================= - * Loading-specific animations - */ @keyframes spin { from { transform: rotate(0deg); @@ -2190,11 +1738,6 @@ main { font-family: var(--font-family-brand, inherit); } opacity: 0.7; } } -/* ✅ ACCESSIBILITY ENHANCEMENTS - * ============================== - * Loading states for screen readers and reduced motion - */ -/* Screen reader announcements */ .sr-loading-text { position: absolute; left: -10000px; @@ -2202,37 +1745,28 @@ main { font-family: var(--font-family-brand, inherit); } height: 1px; overflow: hidden; } -/* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .spinner, .spinner-pulse, .skeleton::after { animation: fade-pulse var(--loading-duration-slow) ease-in-out infinite; } - .progressive-load, .progressive-load-stagger > * { transition: opacity var(--timing-fast) ease; transform: none !important; } } -/* High contrast mode */ @media (prefers-contrast: high) { .skeleton { background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.3); } - .dark .skeleton { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); } } -/* ✅ COMPONENT INTEGRATION - * ========================= - * Integration with existing component systems - */ -/* Loading states for data attributes */ [data-loading="true"] { opacity: var(--loading-opacity); pointer-events: none; @@ -2254,31 +1788,30 @@ main { font-family: var(--font-family-brand, inherit); } background: var(--shimmer-gradient); animation: shimmer var(--loading-shimmer-duration) ease-in-out infinite; } -/* Loading states for component states */ [data-component-state="loading"] { opacity: var(--loading-opacity); filter: var(--loading-blur); pointer-events: none; cursor: wait; } -/* ✅ PERFORMANCE OPTIMIZATIONS - * ============================= - * Hardware acceleration for loading animations - */ .spinner, .skeleton::after, .progressive-load { will-change: transform, opacity; - transform: translateZ(0); /* Force hardware acceleration */ -} -/* ✅ UTILITY CLASSES - * =================== - * Quick loading state utilities - */ -.is-loading { opacity: var(--loading-opacity); pointer-events: none; } -.is-skeleton { background: var(--skeleton-bg-base); } -.has-shimmer { position: relative; overflow: hidden; } -.has-shimmer::after { + transform: translateZ(0); +} +.is-loading { + opacity: var(--loading-opacity); + pointer-events: none; +} +.is-skeleton { + background: var(--skeleton-bg-base); +} +.has-shimmer { + position: relative; + overflow: hidden; +} +.has-shimmer::after { content: ''; position: absolute; top: 0; @@ -2288,143 +1821,28 @@ main { font-family: var(--font-family-brand, inherit); } background: var(--shimmer-gradient); animation: shimmer var(--loading-shimmer-duration) ease-in-out infinite; } -/* đŸŽ¯ ARCHITECTURE SYSTEM SUMMARY - * =============================== - * - * This architecture system provides: - * - * 1. **Animation System** (animation-system.css) - * - Consistent timing tokens (--timing-*) - * - Easing curves (--easing-*) - * - Transform patterns (--transform-*) - * - Collapse/expand behaviors - * - Utility animation classes - * - * 2. **Component States** (component-states.css) - * - Data-attribute driven state management - * - Lifecycle states (loading, ready, disabled, error) - * - Collapse states (collapsed, transitioning, expanded) - * - Interactive states with accessibility support - * - * 3. **Layout Foundations** (layout-foundations.css) - * - Comprehensive spacing scale (--space-*) - * - Semantic spacing tokens (--space-xs, --space-md, etc.) - * - Border radius system (--radius-*) - * - Z-index scale (--z-*) - * - Max-width tokens (--max-width-*) - * - Layout pattern classes (.container, .stack, .cluster, etc.) - * - * 4. **Elevation System** (elevation-system.css) - * - Consistent shadow elevation levels (--elevation-*) - * - Interactive hover elevations (--elevation-hover-*) - * - Brand-colored elevations (--elevation-brand-*) - * - State-specific elevations (error, focus, etc.) - * - Semantic elevation classes (.card-elevated, .btn-floating, etc.) - * - * 5. **Interaction Patterns** (interaction-patterns.css) - * - Unified hover/focus/active behaviors - * - Interactive element classes (.interact-subtle, .interact-dramatic, etc.) - * - Consistent focus management - * - Disabled and loading state patterns - * - Touch device optimizations - * - * 6. **Loading States** (loading-states.css) - * - Loading state classes (.loading, .loading-blur, etc.) - * - Spinner components (.spinner, .spinner-dots, etc.) - * - Skeleton loading patterns (.skeleton, .skeleton-text, etc.) - * - Progressive loading behaviors - * - Async operation state management - * - * USAGE EXAMPLES: - * =============== - * - * // Use architectural tokens in components: - * .my-component { - * padding: var(--space-md); - * border-radius: var(--radius-card); - * box-shadow: var(--elevation-2); - * transition: var(--transition-interactive); - * } - * - * .my-component:hover { - * transform: var(--transform-lift-medium); - * box-shadow: var(--elevation-hover-4); - * } - * - * // Apply architectural classes: - *
- *
...
- *
- * - * // Use state management: - *
- *
Content
- *
- * - * BENEFITS: - * ========= - * - * ✅ **Consistency**: All components use the same timing, spacing, and interaction patterns - * ✅ **Maintainability**: Changes to timing/spacing/shadows happen in one place - * ✅ **Performance**: Optimized transitions and hardware acceleration - * ✅ **Accessibility**: Built-in support for reduced motion, high contrast, screen readers - * ✅ **Developer Experience**: Semantic tokens and utility classes speed up development - * ✅ **Brand Coherence**: Consistent elevation and interaction patterns across all components - * ✅ **Scalability**: Easy to extend with new tokens and patterns - * - * MIGRATION GUIDE: - * ================ - * - * To migrate existing components to use this architecture: - * - * 1. Replace hardcoded timing values with --timing-* tokens - * 2. Replace hardcoded shadows with --elevation-* tokens - * 3. Replace hardcoded transforms with --transform-* tokens - * 4. Use .interact-* classes instead of custom hover states - * 5. Use data-attributes for state management instead of classes - * 6. Replace loading patterns with .skeleton and .loading classes - * - * PERFORMANCE NOTES: - * ================== - * - * - All animations use transform and opacity for 60fps performance - * - Hardware acceleration is enabled on interactive elements - * - Reduced motion preferences are respected throughout - * - Z-index values are managed to prevent stacking conflicts - * - Specific property transitions prevent layout thrashing - */ -/* Buttons Component - Enhanced button system with NVIDIA styling */ -/* Enhanced Button System */ .btn { display: inline-flex; - justify-content: center; - padding-left: 1rem; - padding-right: 1rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; align-items: center; - font-weight: 500; -} -.related-content__view--compact .related-content__item .btn { - color: var(--color-text-primary); - transition: color 0.2s ease; -} -.related-content__view--compact .related-content__item:hover .btn { - color: var(--color-brand); -} -.btn:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); - --tw-ring-offset-width: 2px; -} -.btn { + justify-content: center; + padding-inline: calc(var(--spacing) * 4); + padding-block: calc(var(--spacing) * 2); + --tw-font-weight: var(--font-weight-medium); + font-weight: var(--font-weight-medium); + &:focus { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + &:focus { + --tw-ring-offset-width: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + } + &:focus { + --tw-outline-style: none; + outline-style: none; + } border-radius: var(--radius-button); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard), @@ -2437,7 +1855,7 @@ main { font-family: var(--font-family-brand, inherit); } } .btn:disabled { cursor: not-allowed; - opacity: 0.5; + opacity: 50%; } .btn--primary { background-color: var(--color-brand); @@ -2475,49 +1893,42 @@ main { font-family: var(--font-family-brand, inherit); } --tw-ring-color: var(--color-brand-7); } .btn--danger:hover:not(:disabled) { - /* background-color: #dc2626; */ background-color: var(--feedback-error); transform: var(--transform-lift-subtle); } .btn--sm { - /* @apply px-3 py-1 text-sm; */ - font-size: 0.875rem; - line-height: 1.5; + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); min-height: 2rem; min-width: 2rem; - padding: 0.375rem 0.5rem; /* tighter, more square */ + padding: 0.375rem 0.5rem; } .btn--lg { - padding-left: 1.5rem; - padding-right: 1.5rem; - padding-top: 0.75rem; - padding-bottom: 0.75rem; - font-size: 1.125rem; - line-height: 1.75; + padding-inline: calc(var(--spacing) * 6); + padding-block: calc(var(--spacing) * 3); + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); min-height: 3rem; } .btn__icon { - /* @apply w-4 h-4 mr-2; */ width: 1rem; height: 1rem; margin-right: 0.375rem; display: inline-block; vertical-align: middle; } -/* Icon-only small buttons: remove right margin for centering */ .btn--sm .btn__icon:only-child { margin-right: 0; } .btn__icon--right { - margin-left: 0.5rem; - margin-right: 0px; - height: 1rem; - width: 1rem; + margin-right: calc(var(--spacing) * 0); + margin-left: calc(var(--spacing) * 2); + height: calc(var(--spacing) * 4); + width: calc(var(--spacing) * 4); } -/* Enhanced loading state */ .btn--loading { cursor: wait; - opacity: 0.75; + opacity: 75%; } .btn--loading::before { content: ''; @@ -2532,7 +1943,6 @@ main { font-family: var(--font-family-brand, inherit); } border-radius: 50%; animation: spin 1s linear infinite; } -/* Topbar Button Component */ .topbar__button { position: relative; padding: 0.5rem; @@ -2542,9 +1952,7 @@ main { font-family: var(--font-family-brand, inherit); } background-color: var(--color-surface); border: 1px solid var(--color-border-primary); color: var(--color-text-secondary); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); @@ -2571,7 +1979,6 @@ main { font-family: var(--font-family-brand, inherit); } border-color: var(--color-brand); color: var(--color-text-primary); transform: var(--transform-lift-subtle); - /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ box-shadow: var(--elevation-hover-2); } .topbar__button:hover::before { @@ -2579,15 +1986,12 @@ main { font-family: var(--font-family-brand, inherit); } } .topbar__button:active { transform: translateY(0); - /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ box-shadow: var(--elevation-1); } .topbar__button img { width: 1.125rem; height: 1.125rem; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); @@ -2598,7 +2002,6 @@ main { font-family: var(--font-family-brand, inherit); } filter: brightness(1); transform: scale(1.1); } -/* Legacy toggle-btn support for backward compatibility */ .toggle-btn { position: relative; padding: 0.5rem; @@ -2608,9 +2011,7 @@ main { font-family: var(--font-family-brand, inherit); } background-color: var(--color-surface); border: 1px solid var(--color-border-primary); color: var(--color-text-secondary); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); @@ -2646,7 +2047,6 @@ main { font-family: var(--font-family-brand, inherit); } border-color: var(--color-brand); color: var(--color-text-primary); transform: var(--transform-lift-subtle); - /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ box-shadow: var(--elevation-hover-2); } .toggle-btn:hover::before { @@ -2654,7 +2054,6 @@ main { font-family: var(--font-family-brand, inherit); } } .toggle-btn:active { transform: translateY(0); - /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ box-shadow: var(--elevation-1); } .toggle-btn--active { @@ -2667,16 +2066,14 @@ main { font-family: var(--font-family-brand, inherit); } color: var(--color-text-inverse); } .toggle-btn img { - width: 1.125rem !important; /* Properly sized icons */ + width: 1.125rem !important; height: 1.125rem !important; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); filter: brightness(0.8); - flex-shrink: 0; /* Prevent icon compression */ + flex-shrink: 0; } .toggle-btn:hover img { filter: brightness(1); @@ -2685,17 +2082,14 @@ main { font-family: var(--font-family-brand, inherit); } .toggle-btn--active img { filter: brightness(1) invert(1); } -/* Button Ripple Effects */ .ripple { position: absolute !important; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: scale(0); - /* ✅ FIXED: Use animation tokens for ripple effect */ animation: ripple-animation var(--timing-slow) linear; pointer-events: none; z-index: 1; - /* Ensure it doesn't affect layout */ top: 0; left: 0; width: 0; @@ -2704,48 +2098,174 @@ main { font-family: var(--font-family-brand, inherit); } .dark .ripple { background: rgba(255, 255, 255, 0.2); } -/* ✅ KEYFRAME: Ripple animation using animation tokens */ @keyframes ripple-animation { to { transform: scale(4); opacity: var(--opacity-hidden); } } -/* Ensure buttons have proper positioning for ripple containment */ button, .btn { position: relative; overflow: hidden; } -/* Tables Component - BEM, dense, and glass variants aligned to design tokens */ -/* Enhanced Notice Component */ -/* Base Enhanced Notice Styles */ +@layer components { + :where(.table, .article-content table) { + width: 100%; + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + border-collapse: separate; + border-spacing: 0; + color: var(--color-text-primary); + } + .table__container { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + overflow-y: hidden; + } + .table__container--rounded { + border-radius: 0.75rem; + } + .table__container:has(> .table.table--rounded), + .table__container:has(> .table.table--glass) { + border-radius: 0.75rem; + } + :where(.table__head, .article-content table thead) th { + text-align: left; + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + --tw-tracking: var(--tracking-wide); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + background-color: var(--color-surface-active); + color: var(--color-text-primary); + } + :where(.table__row, .article-content table tbody tr) { + vertical-align: top; + } + :where(.table__cell, .article-content table th, .article-content table td) { + padding-inline: calc(var(--spacing) * 3); + padding-block: calc(var(--spacing) * 1.5); + border-top: 1px solid var(--color-border-primary); + } + .table__cell--numeric { + text-align: right; + } + .table__cell--wrap { + white-space: normal; + } + .table__cell--nowrap { + white-space: nowrap; + } + .table--dense .table__cell { + padding-block: calc(var(--spacing) * 1); + } + .table--compact .table__cell { + padding-block: calc(var(--spacing) * 0.5); + } + .table :where(.table__row:hover) { + background-color: var(--color-surface-hover); + } + :where(.article-content table tbody tr:hover) { + background-color: var(--color-surface-hover); + } + .table--zebra .table__body > .table__row:nth-child(even) { + background-color: var(--color-surface); + } + .table--zebra .table__body > .table__row:nth-child(even):hover { + background-color: var(--color-surface-hover); + } + .table--sticky thead th { + position: sticky; + top: 0; + z-index: 1; + } + .table--glass { + border-radius: var(--radius-lg); + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + backdrop-filter: saturate(150%) blur(8px); + -webkit-backdrop-filter: saturate(150%) blur(8px); + background-color: color-mix(in srgb, #fff 60%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-white) 60%, transparent); + } + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(21% 0.006 285.885) 40%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-zinc-900) 40%, transparent); + } + } + border: 1px solid var(--color-border-primary); + } + .table--header-glass .table__head, + .table--glass .table__head { + background: var(--glass-bg); + border-bottom: 1px solid var(--glass-border-color); + overflow: hidden; + } + .table--header-glass .table__head th, + .table--glass .table__head th { + padding-inline: calc(var(--spacing) * 3); + padding-block: calc(var(--spacing) * 2); + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + --tw-tracking: var(--tracking-wide); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + background: var(--glass-bg); + border-top: none; + } + .table--header-glass .table__head th + th, + .table--glass .table__head th + th { + border-left: 1px solid var(--glass-border-color); + } + @media (prefers-color-scheme: light) { + .table--header-glass .table__head, + .table--glass .table__head { + border-bottom-color: var(--color-border-primary); + } + .table--header-glass .table__head th + th, + .table--glass .table__head th + th { + border-left-color: var(--color-border-primary); + } + } + .table--rounded .table__head th:first-child, + .table--glass .table__head th:first-child { + border-top-left-radius: 0.75rem; + } + .table--rounded .table__head th:last-child, + .table--glass .table__head th:last-child { + border-top-right-radius: 0.75rem; + } + .table--rounded .table__head { + border-top-left-radius: 0.75rem; + border-top-right-radius: 0.75rem; + overflow: hidden; + } +} .notice { position: relative; margin-top: 1.5rem; margin-bottom: 1.5rem; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-medium) var(--easing-standard), + transition: transform var(--timing-medium) var(--easing-standard), opacity var(--timing-medium) var(--easing-standard), box-shadow var(--timing-medium) var(--easing-standard); border-radius: var(--radius-lg); overflow: hidden; - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* ✅ FIXED: Use animation tokens */ animation: notice-enter var(--timing-medium) var(--easing-standard); animation-fill-mode: both; } -/* Removed legacy overrides that zeroed out spacing and styles */ -/* Enhanced Notice Container */ .notice__container { display: flex; align-items: flex-start; padding: 0.875rem 1rem; position: relative; } -/* Enhanced Notice Icon */ .notice__icon-wrapper { margin-right: 1rem; flex-shrink: 0; @@ -2760,7 +2280,6 @@ button, .btn { transition-duration: 0.2s; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); } -/* Enhanced Notice Content */ .notice__content { min-width: 0; flex: 1 1 0%; @@ -2800,10 +2319,6 @@ button, .btn { background-color: rgba(0, 0, 0, 0.1); font-family: var(--font-family-mono, monospace); } -/* Notice Type Variations */ -/* Info Notice */ -/* Old hex-based colors commented in favor of tokens */ -/* .notice--info { ... } */ .notice--info { background: linear-gradient( 135deg, @@ -2811,15 +2326,15 @@ button, .btn { rgba(var(--color-info-rgb), 0.05) 100% ) !important; border: 1px solid rgba(var(--color-info-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-info-rgb), 0.1), + box-shadow: 0 4px 12px rgba(var(--color-info-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } -.notice--info .notice__title { color: var(--color-info); } +.notice--info .notice__title { + color: var(--color-info); +} .notice--info .notice__icon { filter: drop-shadow(0 1px 2px rgba(59, 130, 246, 0.3)); } -/* Note Notice */ .notice--note { background: linear-gradient( 135deg, @@ -2827,15 +2342,15 @@ button, .btn { rgba(var(--color-note-rgb), 0.05) 100% ) !important; border: 1px solid rgba(var(--color-note-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-note-rgb), 0.1), + box-shadow: 0 4px 12px rgba(var(--color-note-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } -.notice--note .notice__title { color: var(--color-note); } +.notice--note .notice__title { + color: var(--color-note); +} .notice--note .notice__icon { filter: drop-shadow(0 1px 2px rgba(99, 102, 241, 0.3)); } -/* Tip Notice */ .notice--tip { background: linear-gradient( 135deg, @@ -2843,15 +2358,15 @@ button, .btn { rgba(var(--color-tip-rgb), 0.05) 100% ) !important; border: 1px solid rgba(var(--color-tip-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-tip-rgb), 0.1), + box-shadow: 0 4px 12px rgba(var(--color-tip-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } -.notice--tip .notice__title { color: var(--color-tip); } +.notice--tip .notice__title { + color: var(--color-tip); +} .notice--tip .notice__icon { filter: drop-shadow(0 1px 2px rgba(34, 197, 94, 0.3)); } -/* Warning Notice */ .notice--warning { background: linear-gradient( 135deg, @@ -2859,15 +2374,15 @@ button, .btn { rgba(var(--color-warning-rgb), 0.05) 100% ) !important; border: 1px solid rgba(var(--color-warning-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-warning-rgb), 0.1), + box-shadow: 0 4px 12px rgba(var(--color-warning-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } -.notice--warning .notice__title { color: var(--color-warning); } +.notice--warning .notice__title { + color: var(--color-warning); +} .notice--warning .notice__icon { filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.3)); } -/* Danger Notice */ .notice--danger { background: linear-gradient( 135deg, @@ -2875,15 +2390,15 @@ button, .btn { rgba(var(--color-danger-rgb), 0.05) 100% ) !important; border: 1px solid rgba(var(--color-danger-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-danger-rgb), 0.1), + box-shadow: 0 4px 12px rgba(var(--color-danger-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } -.notice--danger .notice__title { color: var(--color-danger); } +.notice--danger .notice__title { + color: var(--color-danger); +} .notice--danger .notice__icon { filter: drop-shadow(0 1px 2px rgba(239, 68, 68, 0.3)); } -/* Security Notice */ .notice--security { background: linear-gradient( 135deg, @@ -2891,15 +2406,15 @@ button, .btn { rgba(var(--color-security-rgb), 0.05) 100% ) !important; border: 1px solid rgba(var(--color-security-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-security-rgb), 0.1), + box-shadow: 0 4px 12px rgba(var(--color-security-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } -.notice--security .notice__title { color: var(--color-security); } +.notice--security .notice__title { + color: var(--color-security); +} .notice--security .notice__icon { filter: drop-shadow(0 1px 2px rgba(168, 85, 247, 0.3)); } -/* Snack Notice */ .notice--snack { background: linear-gradient( 135deg, @@ -2907,18 +2422,18 @@ button, .btn { rgba(var(--color-snack-rgb), 0.05) 100% ) !important; border: 1px solid rgba(var(--color-snack-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-snack-rgb), 0.1), + box-shadow: 0 4px 12px rgba(var(--color-snack-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } -.notice--snack .notice__title { color: var(--color-snack); } +.notice--snack .notice__title { + color: var(--color-snack); +} .notice--snack .notice__icon { filter: drop-shadow(0 1px 2px rgba(236, 72, 153, 0.3)); } -/* Hover Effects */ -/* Subtle hover only when interactive content is inside */ -.notice:has(a:hover) .notice__icon { transform: scale(1.03); } -/* Entrance Animation */ +.notice:has(a:hover) .notice__icon { + transform: scale(1.03); +} @keyframes notice-enter { 0% { opacity: 0; @@ -2929,21 +2444,11 @@ button, .btn { transform: translateY(0) scale(1); } } -/* Dark mode code styling */ @media (prefers-color-scheme: dark) { .notice__text code { background-color: rgba(255, 255, 255, 0.1); } } -/* Remove heavy :has() spacing shifts; container layout handles alignment */ -/* Navigation Component - Modular navigation system with NVIDIA styling */ -/* Import modular navigation components */ -/* Navigation Module - Main import file for all navigation components */ -/* Import all navigation modules in proper order */ -/* Navigation Base - Container queries and shared navigation foundations */ -/* ======================================== - Container Query Context - ======================================== */ .sidebar-container, .topbar, .chat-toc-toggle { @@ -2959,7 +2464,6 @@ button, .btn { .chat-toc-toggle { container-name: toggle; } -/* Base navigation link styling */ .nav-link { position: relative; padding: 0.5rem 0.75rem; @@ -2970,23 +2474,19 @@ button, .btn { min-height: 2.25rem; color: var(--color-text-primary); text-decoration: none; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard); white-space: nowrap; - overflow: hidden; /* Essential for ripple containment */ + overflow: hidden; display: flex; align-items: center; cursor: pointer; } -/* Enhanced focus states for nav-links */ .nav-link:focus { outline: 2px solid transparent; outline-offset: 2px; - box-shadow: - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.2); /* Double focus ring */ + box-shadow: 0 0 0 2px var(--color-brand), + 0 0 0 4px rgba(var(--color-brand-rgb), 0.2); } .nav-link::before { content: ''; @@ -3008,34 +2508,27 @@ button, .btn { .nav-link:hover, .nav-link:focus { color: var(--color-brand); - /* Removed transform and background for cleaner minimal look */ } .nav-link:hover::before, .nav-link:focus::before { - opacity: 0.5; /* More subtle hover effect */ + opacity: 0.5; } -/* Base nested content styling - use new animation system */ .nested-content { - /* Use animation bridge collapse system instead of display:none */ max-height: var(--collapse-height-collapsed); opacity: var(--collapse-opacity-collapsed); overflow: hidden; - transition: - max-height var(--collapse-timing) var(--collapse-easing), + transition: max-height var(--collapse-timing) var(--collapse-easing), opacity var(--collapse-timing) var(--collapse-easing); } -/* Enhanced hover states - use animation tokens for consistency */ .nested-content a:hover { transform: translateX(4px); transition: transform var(--timing-fast) var(--easing-standard); } -/* Expand toggle button - use animation tokens */ .expand-toggle { padding: 0.25rem; border-radius: var(--radius-base); color: var(--color-text-secondary); - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard); } .expand-toggle:hover { @@ -3045,8 +2538,6 @@ button, .btn { .expand-toggle svg { transition: transform var(--timing-fast) var(--easing-standard); } -/* Chat/TOC Toggle Component - Interactive toggle between chat and table of contents */ -/* Chat/TOC Toggle Component */ .chat-toc-toggle { display: flex; background: var(--color-surface); @@ -3055,21 +2546,19 @@ button, .btn { overflow: hidden; box-shadow: var(--elevation-4); height: 2.25rem; - min-width: 72px; /* Ensure minimum visibility */ - - /* Prevent flash during initialization */ + min-width: 72px; opacity: 1; transition: opacity var(--timing-instant) var(--easing-standard); - - /* Enhance visibility */ position: relative; } .chat-toc-toggle.initialized { opacity: 1; - animation: none; /* Cancel fallback animation */ + animation: none; } @keyframes fallback-show { - to { opacity: 1; } + to { + opacity: 1; + } } .chat-toc-toggle__option { position: relative; @@ -3083,9 +2572,7 @@ button, .btn { background: transparent; color: var(--color-text-secondary); cursor: pointer; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard); overflow: hidden; } @@ -3107,9 +2594,7 @@ button, .btn { width: 1.125rem; height: 1.125rem; flex-shrink: 0; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard); filter: brightness(0.8); } @@ -3124,14 +2609,12 @@ button, .btn { filter: brightness(0) invert(1); transform: scale(1.1); } -/* Focus states for accessibility */ .chat-toc-toggle__option:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-brand); z-index: 1; } -/* Ripple effect on click */ .chat-toc-toggle__option::before { content: ''; position: absolute; @@ -3140,10 +2623,17 @@ button, .btn { right: 0; bottom: 0; background: radial-gradient( + circle at center, + var(--color-brand) 0%, + transparent 70% + ); + @supports (color: color-mix(in lab, red, red)) { + background: radial-gradient( circle at center, color-mix(in srgb, var(--color-brand) 10%, transparent) 0%, transparent 70% ); + } opacity: 0; transition: opacity var(--timing-fast) var(--easing-standard); pointer-events: none; @@ -3158,86 +2648,51 @@ button, .btn { transform: translateY(0); box-shadow: 0 2px 4px color-mix(in srgb, black 10%, transparent); } -/* Sidebar Navigation - Main navigation sidebar with responsive behavior */ -/* Sidebar Container Styling */ .sidebar, .sidebar-container { background-color: transparent; color: var(--color-text-primary); border-inline-end: none; - /* Enable named container for container queries in this file */ container-type: inline-size; container-name: sidebar; } -/* Desktop sidebar styling */ -/* -@container sidebar (min-width: 768px) { - .sidebar, - .sidebar-container { - background-color: transparent; - border-inline-end: none; - transform: translateX(0) !important; - position: sticky !important; - display: flex !important; - } -} -*/ -/* FALLBACK: Media query for desktop sidebar visibility */ -/* -@media (min-width: 768px) { - .sidebar-container { - transform: translateX(0) !important; - position: sticky !important; - display: flex !important; - } -} -*/ -/* Mobile sidebar styling */ @container sidebar (max-width: 767px) { .sidebar-container { - /* Ensure it starts hidden on mobile */ position: fixed; z-index: 40; - width: 20rem; /* w-80 equivalent */ + width: 20rem; height: 100vh; top: 0; left: 0; transform: translateX(-100%); - /* ✅ FIXED: Use animation tokens */ transition: transform var(--timing-medium) var(--easing-standard); } - .sidebar.translate-x-0, .sidebar-container.translate-x-0 { transform: translateX(0) !important; } } -/* Mobile Header Styling - Force hide on desktop */ .sidebar-header { border-bottom: none; background-color: transparent; color: var(--color-text-primary); display: flex; } -/* Force hide sidebar header on desktop */ @container sidebar (min-width: 768px) { .sidebar__header, .sidebar-header { display: none !important; } } -/* Fallback: Hide mobile navigation elements on desktop */ @media (min-width: 768px) { .sidebar__header, .sidebar-header { display: none !important; } - [data-component="navigation-mobile-toggle"] { display: none !important; } } -/* Ensure sidebar starts hidden on mobile */ @container sidebar (max-width: 767px) { .sidebar:not(.translate-x-0), .sidebar-container:not(.translate-x-0) { @@ -3247,9 +2702,7 @@ button, .btn { .sidebar__close-button, .sidebar-close-btn { color: var(--color-text-secondary); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard); border: none; background: transparent; @@ -3266,40 +2719,29 @@ button, .btn { outline: 2px solid var(--color-brand); outline-offset: 2px; } -/* LinkTree Styling */ [data-link-tree], #linkTree { background-color: transparent; color: var(--color-text-primary); width: 100%; } -/* Desktop linkTree padding adjustment */ @container sidebar (min-width: 768px) { [data-link-tree], #linkTree { - padding-inline-start: 4px; /* Add space for focus ring to prevent clipping */ + padding-inline-start: 4px; padding-inline-end: 0; } } -/* Mobile linkTree styling */ @container sidebar (max-width: 767px) { [data-link-tree], #linkTree { padding: 1rem; } } -/* Prevent layout shift during initialization */ -/* -#linkTree:not(.initialized) { - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); -} -*/ [data-link-tree].initialized, #linkTree.initialized { opacity: 1; } -/* Robust expansion using :has() based on aria-expanded (fallback if JS state desyncs) */ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="true"]) > .nested-content { max-height: var(--collapse-height-expanded); opacity: var(--collapse-opacity-expanded); @@ -3310,18 +2752,14 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested opacity: var(--collapse-opacity-collapsed); overflow: hidden; } -/* Allow interaction inside nested content while its parent is transitioning */ .nested-content[data-collapse-state="transitioning"] { - /* Override global pattern that disables all pointer events during transitions */ pointer-events: auto; } -/* ✅ NEW ANIMATION SYSTEM - Use data attributes for consistent behavior */ -/* Ensure animations only work after initialization */ [data-link-tree].initialized .nested-content[data-collapse-state="expanded"], #linkTree.initialized .nested-content[data-collapse-state="expanded"] { max-height: var(--collapse-height-expanded); opacity: var(--collapse-opacity-expanded); - overflow: visible; /* Allow content to be fully visible */ + overflow: visible; } [data-link-tree].initialized .nested-content[data-collapse-state="collapsed"], #linkTree.initialized .nested-content[data-collapse-state="collapsed"] { @@ -3331,26 +2769,17 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested } [data-link-tree].initialized .nested-content[data-collapse-state="transitioning"], #linkTree.initialized .nested-content[data-collapse-state="transitioning"] { - overflow: hidden; /* Prevent content spillage during animation */ + overflow: hidden; } -/* Sidebar Navigation Components - Cohesive Design */ .sidebar__item { - border-radius: 0.375rem; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 200ms; border-radius: var(--radius-md); display: flex; align-items: center; -} -@media (max-width: 768px) { - - .search-results-header .sidebar__item { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } -} -.sidebar__item { + border-radius: var(--radius-md); + transition-property: all; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + --tw-duration: 200ms; + transition-duration: 200ms; background-color: transparent; margin: 1px 0; } @@ -3358,36 +2787,29 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested background-color: var(--color-surface-hover); } .sidebar__link { - flex-grow: 1; - border-top-left-radius: 0.375rem; - border-bottom-left-radius: 0.375rem; - padding: 0.5rem; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 200ms; padding: var(--space-2); display: flex; + flex-grow: 1; align-items: center; -} -@media (max-width: 768px) { - - .search-results-header .sidebar__link { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; + border-top-left-radius: var(--radius-md); + border-bottom-left-radius: var(--radius-md); + padding: calc(var(--spacing) * 2); + transition-property: all; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + --tw-duration: 200ms; + transition-duration: 200ms; + &:focus { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + &:focus { + --tw-outline-style: none; + outline-style: none; } -} -.sidebar__link:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} -.sidebar__link { color: var(--color-text-primary); text-decoration: none; --tw-ring-color: var(--color-brand); - min-height: 2.5rem; /* Consistent touch target */ + min-height: 2.5rem; } .sidebar__link:hover, .sidebar__link:focus { @@ -3398,43 +2820,34 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested background-color: var(--color-hover); } .sidebar__icon { - /* Reduced icon size for tighter look */ - /* @apply w-5 h-5 mr-3 flex-shrink-0; */ - margin-right: 0.75rem; - height: 1rem; - width: 1rem; + margin-right: calc(var(--spacing) * 3); + height: calc(var(--spacing) * 4); + width: calc(var(--spacing) * 4); flex-shrink: 0; } .sidebar__text { flex-grow: 1; } .sidebar__expander { - justify-content: center; - border-top-right-radius: 0.375rem; - border-bottom-right-radius: 0.375rem; - padding: 0.5rem; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 200ms; padding: var(--space-2); display: flex; align-items: center; -} -@media (max-width: 768px) { - - .search-results-header .sidebar__expander { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; + justify-content: center; + border-top-right-radius: var(--radius-md); + border-bottom-right-radius: var(--radius-md); + padding: calc(var(--spacing) * 2); + transition-property: all; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + --tw-duration: 200ms; + transition-duration: 200ms; + &:focus { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + &:focus { + --tw-outline-style: none; + outline-style: none; } -} -.sidebar__expander:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} -.sidebar__expander { color: var(--color-text-secondary); min-width: 2.5rem; min-height: 2.5rem; @@ -3446,147 +2859,68 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested background-color: var(--color-surface-active); } .sidebar__chevron { - height: 1rem; - width: 1rem; - transition-property: transform; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + height: calc(var(--spacing) * 4); + width: calc(var(--spacing) * 4); + transition-property: transform, translate, scale, rotate; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + --tw-duration: 200ms; transition-duration: 200ms; } -/* Level-specific styling */ .sidebar__item--level-1 .sidebar__text { - /* Step down one size from text-lg and slightly reduce weight */ - /* @apply text-lg font-brand font-bold; */ - font-family: NVIDIA, Arial, Helvetica, sans-serif; - font-size: 1rem; - line-height: 1.6; - font-weight: 600; -} -.related-content__card .sidebar__item--level-1 .sidebar__text { - color: var(--color-text-primary); - transition: color 0.2s ease; -} -.related-content__card:hover .sidebar__item--level-1 .sidebar__text { - color: var(--color-brand); + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + font-family: "NVIDIA", "Arial", "Helvetica", sans-serif; } .sidebar__item--level-1 { - margin-bottom: 0.25rem; + margin-bottom: calc(var(--spacing) * 1); } .sidebar__item--level-2 { - margin-left: 1rem; + margin-left: calc(var(--spacing) * 4); } .sidebar__item--level-2 .sidebar__text { - /* Step down one size from text-base */ - /* @apply font-normal text-base; */ - font-size: 0.875rem; - line-height: 1.5; - font-weight: 400; + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + --tw-font-weight: var(--font-weight-normal); + font-weight: var(--font-weight-normal); } .sidebar__item--level-3 { - margin-left: 1.5rem; + margin-left: calc(var(--spacing) * 6); } .sidebar__item--level-3 .sidebar__text { - /* Step down one size from text-sm */ - /* @apply font-light text-sm; */ - font-size: 0.875rem; - line-height: 1.4; - font-weight: 300; -} -[data-component="article-next-prev"] .article-next-prev__link .sidebar__item--level-3 .sidebar__text { - color: var(--color-text-tertiary); - font-size: 0.75rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; - transition: color 0.2s ease; -} -[data-component="article-next-prev"] .article-next-prev__link:hover .sidebar__item--level-3 .sidebar__text { - color: var(--color-text-secondary); -} -[data-component="article-next-prev"] .article-next-prev__link--disabled .sidebar__item--level-3 .sidebar__text { - color: var(--color-text-tertiary); -} -@media (max-width: 768px) { - - [data-component="article-next-prev"] .article-next-prev__link .sidebar__item--level-3 .sidebar__text { - font-size: 0.6875rem; - } + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); + --tw-font-weight: var(--font-weight-light); + font-weight: var(--font-weight-light); } .sidebar__item--level-4 { - margin-left: 2rem; + margin-left: calc(var(--spacing) * 8); } .sidebar__item--level-4 .sidebar__text { - /* Step down one size from text-sm */ - /* @apply text-sm; */ - font-size: 0.875rem; - line-height: 1.4; -} -[data-component="article-next-prev"] .article-next-prev__link .sidebar__item--level-4 .sidebar__text { - color: var(--color-text-tertiary); - font-size: 0.75rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; - transition: color 0.2s ease; -} -[data-component="article-next-prev"] .article-next-prev__link:hover .sidebar__item--level-4 .sidebar__text { - color: var(--color-text-secondary); -} -[data-component="article-next-prev"] .article-next-prev__link--disabled .sidebar__item--level-4 .sidebar__text { - color: var(--color-text-tertiary); -} -@media (max-width: 768px) { - - [data-component="article-next-prev"] .article-next-prev__link .sidebar__item--level-4 .sidebar__text { - font-size: 0.6875rem; - } + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); } .sidebar__item--level-default { - margin-left: 2.5rem; + margin-left: calc(var(--spacing) * 10); } .sidebar__item--level-default .sidebar__text { - font-size: 0.875rem; - line-height: 1.4; + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); } -[data-component="article-next-prev"] .article-next-prev__link .sidebar__item--level-default .sidebar__text { - color: var(--color-text-tertiary); - font-size: 0.75rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; - transition: color 0.2s ease; -} -[data-component="article-next-prev"] .article-next-prev__link:hover .sidebar__item--level-default .sidebar__text { - color: var(--color-text-secondary); -} -[data-component="article-next-prev"] .article-next-prev__link--disabled .sidebar__item--level-default .sidebar__text { - color: var(--color-text-tertiary); -} -@media (max-width: 768px) { - - [data-component="article-next-prev"] .article-next-prev__link .sidebar__item--level-default .sidebar__text { - font-size: 0.6875rem; - } -} -/* Ensure text-brand utility works with sidebar items */ .sidebar__link.text-brand { color: var(--color-brand) !important; } -/* Enhanced active state for the whole item */ .sidebar__item:has(.sidebar__link--active) { background-color: var(--color-hover); - /* box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.2); */ box-shadow: var(--elevation-brand-subtle); } -/* Performance hints for hover states (localize former global rules) */ .sidebar:has(.sidebar__item:hover), .sidebar-container:has(.sidebar__item:hover) { will-change: transform; contain: layout; } -/* Right Sidebar Styling - Remove background in dark mode */ #sidebar-right { background: transparent; } @@ -3594,44 +2928,31 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested background: transparent !important; background-color: transparent !important; } -/* Remove chat controls background in dark mode */ .dark .chat-controls { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } -/* Topbar Navigation - Main horizontal navigation bar with responsive grid layout */ -/* Clean CSS Grid Topbar Layout */ .topbar { position: sticky; top: 0; z-index: 50; - /* background-color: var(--color-bg-primary); */ - /* border-bottom: 1px solid var(--color-border-primary); */ background: var(--glass-bg); border-bottom: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-medium) var(--easing-standard), + transition: background-color var(--timing-medium) var(--easing-standard), color var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard); - - /* CSS Grid Layout */ display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: "logo navigation search controls"; align-items: center; gap: 1rem; - /* padding: 0.75rem 1.5rem; */ padding: 0.5rem 0.75rem; - /* min-height: 4rem; */ min-height: 3rem; box-shadow: var(--glass-shadow); } -/* Grid Areas */ .topbar__logo { grid-area: logo; display: flex; @@ -3658,14 +2979,14 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested display: flex; align-items: center; gap: 0.75rem; - min-width: 0; /* Allow shrinking */ + min-width: 0; } .topbar__search { grid-area: search; display: flex; align-items: center; justify-content: center; - min-width: 0; /* Allow shrinking */ + min-width: 0; } .topbar__controls { grid-area: controls; @@ -3674,7 +2995,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested gap: 0.5rem; flex-shrink: 0; } -/* Responsive Grid Layout */ @container topbar (max-width: 1024px) { .topbar { grid-template-columns: auto auto 1fr auto; @@ -3691,29 +3011,24 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested padding: 0.5rem 0.5rem; min-height: 2.75rem; } - - /* Hide navigation on mobile - it should be in a hamburger menu */ .topbar__navigation { display: none; } } -/* Updated Navigation Links for Grid Layout */ .topbar__links { display: flex; align-items: center; - gap: 0.5rem; /* Tighter spacing for minimal look */ + gap: 0.5rem; font-family: var(--font-brand); font-weight: 300; font-size: 0.875rem; color: var(--color-text-primary); } -/* Hide navigation links on mobile */ @container (max-width: 768px) { .topbar__link { - display: none; /* Hidden on mobile, shown via hamburger menu */ + display: none; } } -/* Topbar links */ .topbar__link { display: inline-flex; align-items: center; @@ -3728,65 +3043,32 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested color: var(--color-brand); outline: none; } -/* Table of Contents (TOC) - Navigation within content and sidebar TOC */ -/* Enhanced TOC Styling */ .toc { - margin-bottom: 2rem; - border-radius: 0.5rem; - padding: 1.5rem; padding: var(--space-6); border-radius: var(--radius-lg); + margin-bottom: calc(var(--spacing) * 8); + border-radius: var(--radius-lg); + padding: calc(var(--spacing) * 6); background: transparent; border: none; box-shadow: none; } .toc-header { - margin-bottom: 1rem; - padding-bottom: 0.75rem; + margin-bottom: calc(var(--spacing) * 4); display: flex; align-items: center; -} -@media (max-width: 768px) { - - .search-results-header .toc-header { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } -} -.toc-header { - border: none; - color: var(--color-text-primary); + padding-bottom: calc(var(--spacing) * 3); + border: none; + color: var(--color-text-primary); } .toc-content a { display: inline-block; - border-radius: 0.5rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - padding-right: 0.75rem; + border-radius: var(--radius-lg); + padding-inline: calc(var(--spacing) * 3); + padding-block: calc(var(--spacing) * 2); transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 200ms; border-radius: var(--radius-lg); -} -.card--tile .toc-content a { - background-color: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - color: var(--color-text-secondary); - font-size: 0.75rem; - padding: 0.25rem 0.75rem; - border-radius: 9999px; - transition: - filter var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: inline-block; - text-decoration: none; -} -.card--tile .toc-content a:hover { - background-color: var(--color-brand); - border-color: var(--color-brand); - color: var(--color-text-inverse); - transform: var(--transform-lift-subtle); -} -.toc-content a { + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + --tw-duration: 200ms; + transition-duration: 200ms; color: var(--color-text-secondary); text-decoration: none; } @@ -3795,11 +3077,10 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested color: var(--color-brand); transform: translateX(4px); } -/* Enhanced Right Sidebar TOC */ .toc { - padding: 1.5rem; - font-size: 0.875rem; - line-height: 1.5; padding: var(--space-6); + padding: calc(var(--spacing) * 6); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); background: transparent; border-radius: var(--radius-xl); color: var(--color-text-primary); @@ -3824,46 +3105,41 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested } .toc ul { list-style-type: none; -} -.toc ul > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); -} -.toc ul { - padding-left: 1rem; + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); + } + padding-left: calc(var(--spacing) * 4); margin: 0; } .toc ul ul { - margin-top: 0.5rem; + margin-top: calc(var(--spacing) * 2); + border-left-style: var(--tw-border-style); border-left-width: 1px; - --tw-border-opacity: 0.2; - padding-left: 1rem; + padding-left: calc(var(--spacing) * 4); border-color: var(--color-border-primary); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in srgb, var(--color-border-primary) 20%, transparent); + } } -/* TOC Link Styling */ .toc-link { + position: relative; display: block; overflow: hidden; - border-radius: 0.5rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - padding-right: 0.75rem; + border-radius: var(--radius-lg); + padding-inline: calc(var(--spacing) * 3); + padding-block: calc(var(--spacing) * 2); transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 200ms; position: relative; border-radius: var(--radius-lg); -} -.language-switcher .toc-link { - opacity: 1; - transform: translateY(0); -} -.toc-link { + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + --tw-duration: 200ms; + transition-duration: 200ms; color: var(--color-text-secondary); text-decoration: none; line-height: 1.4; font-weight: 400; - cursor: pointer; /* Ensure ripple-ready */ + cursor: pointer; } .toc-link::before { content: ''; @@ -3895,23 +3171,15 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested outline: 2px solid transparent; outline-offset: 2px; color: var(--color-brand); - /* box-shadow: - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); */ /* Enhanced double focus ring */ - box-shadow: - var(--elevation-brand-focus), + box-shadow: var(--elevation-brand-focus), 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); } -/* Reading progress bar animation */ #progress-bar { transition: width 0.3s ease-out; } -/* Heading Level Variations */ .toc-link--h1 { font-weight: 600; - /* Slightly reduce H1 TOC size for a lighter hierarchy */ - /* font-size: 0.95em; */ font-size: 0.9em; color: var(--color-text-primary); } @@ -3921,19 +3189,15 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested opacity: 0.9; } .toc-link--h3 { - /* Slightly reduce H3 TOC size in tandem with sidebar tightening */ - /* font-size: 0.85em; */ font-size: 0.8em; color: var(--color-text-tertiary); font-weight: 400; } -/* Active state styling */ .toc-link.active { background-color: var(--color-brand); color: var(--color-text-inverse); font-weight: 500; transform: translateX(2px); - /* box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); */ box-shadow: var(--elevation-brand-subtle); } .toc-link.active::before { @@ -3944,7 +3208,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested ); opacity: 1; } -/* Smooth scrolling indicator */ .toc-progress { position: absolute; top: 0; @@ -3955,9 +3218,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transition: height var(--timing-medium) var(--easing-standard); border-radius: 1px; } -/* Enhanced animations */ .toc { - /* ✅ FIXED: Use animation tokens */ animation: toc-enter var(--timing-medium) var(--easing-standard); animation-fill-mode: both; } @@ -3971,47 +3232,20 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: translateX(0) scale(1); } } -/* Responsive adjustments */ @container (max-width: 1024px) { .toc { - padding: 1rem; - font-size: 0.875rem; - line-height: 1.4; padding: var(--space-4); - } -[data-component="article-next-prev"] .article-next-prev__link .toc { - color: var(--color-text-tertiary); - font-size: 0.75rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; - transition: color 0.2s ease; -} -[data-component="article-next-prev"] .article-next-prev__link:hover .toc { - color: var(--color-text-secondary); -} -[data-component="article-next-prev"] .article-next-prev__link--disabled .toc { - color: var(--color-text-tertiary); -} -@media (max-width: 768px) { - - [data-component="article-next-prev"] .article-next-prev__link .toc { - font-size: 0.6875rem; + padding: calc(var(--spacing) * 4); + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); } -} - .toc-link { - padding-top: 0.375rem; - padding-bottom: 0.375rem; - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-inline: calc(var(--spacing) * 2); + padding-block: calc(var(--spacing) * 1.5); } } -/* Remove TOC sidebar background in dark mode */ .dark .toc { background: transparent !important; } -/* Enhanced active state context */ .toc:has(.toc-link.active) .toc__nav::before { opacity: 1; transform: scaleY(1.1); @@ -4022,45 +3256,35 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transparent 100% ); } -/* Localized performance hint for hover state */ .toc:has(.toc-link:hover) { will-change: transform; contain: layout; } -/* Dropdown Navigation - Dropdown menus for navigation links */ .topbar__dropdown { - left: 0px; - margin-top: 0.5rem; - width: 13rem; + position: absolute; + left: calc(var(--spacing) * 0); + margin-top: calc(var(--spacing) * 2); + width: calc(var(--spacing) * 52); overflow: hidden; - border-radius: 0.75rem; - padding: 0.5rem; - --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + border-radius: var(--radius-xl); + padding: calc(var(--spacing) * 2); + --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 300ms; padding: var(--space-2); position: absolute; border-radius: var(--radius-xl); - /* background-color: var(--color-surface); */ + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + --tw-duration: 300ms; + transition-duration: 300ms; background: var(--glass-bg); - /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.95); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 20px rgba(var(--color-brand-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); } .group:hover .topbar__dropdown { display: block; -} -.language-switcher .group:hover .topbar__dropdown { - opacity: 1; - transform: translateY(0); -} -.group:hover .topbar__dropdown { opacity: 1; visibility: visible; transform: translateY(0) scale(1); @@ -4072,9 +3296,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested left: 20px; width: 12px; height: 12px; - /* background-color: var(--color-surface); */ background: var(--glass-bg); - /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); border-bottom: none; border-right: none; @@ -4082,36 +3304,28 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested z-index: -1; } .topbar__dropdown-link { - overflow: hidden; - border-radius: 0.5rem; - padding-left: 1rem; - padding-right: 1rem; - padding-top: 0.75rem; - padding-bottom: 0.75rem; - font-size: 0.875rem; - line-height: 1.5; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 200ms; position: relative; border-radius: var(--radius-lg); + position: relative; display: flex; align-items: center; -} -@media (max-width: 768px) { - - .search-results-header .topbar__dropdown-link { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; + overflow: hidden; + border-radius: var(--radius-lg); + padding-inline: calc(var(--spacing) * 4); + padding-block: calc(var(--spacing) * 3); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + transition-property: all; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + --tw-duration: 200ms; + transition-duration: 200ms; + &:focus { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + &:focus { + --tw-outline-style: none; + outline-style: none; } -} -.topbar__dropdown-link:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} -.topbar__dropdown-link { color: var(--color-text-primary); --tw-ring-color: var(--color-brand); text-decoration: none; @@ -4145,7 +3359,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested .topbar__dropdown-link:focus::before { opacity: 1; } -/* Language Switcher transitions migrated from page-enhancements.css */ .language-switcher .hidden { opacity: 0; transform: translateY(-8px); @@ -4156,22 +3369,16 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: translateY(0); } @media (max-width: 640px) { - .language-switcher { position: relative; } + .language-switcher { + position: relative; + } } -/* Navigation API Endpoint Styling */ -/* Enhanced styling for API endpoints in the main navigation sidebar */ -/* ========================================================================== - API Endpoint Items - ========================================================================== */ .api-endpoint-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; } -/* ========================================================================== - HTTP Method Badges - ========================================================================== */ .http-method-badge { display: inline-block; padding: 0.125rem 0.375rem; @@ -4184,29 +3391,31 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested letter-spacing: 0.025em; flex-shrink: 0; } -/* GET - Green */ -/* Old hex-based method colors commented out in favor of tokens per themes/milodocs/init */ -/* .http-method-badge--get { background: #10b981; color: white; } */ -.http-method-badge--get { background: var(--http-get-bg); color: var(--http-get-text); } -/* POST - Blue */ -/* .http-method-badge--post { background: #3b82f6; color: white; } */ -.http-method-badge--post { background: var(--http-post-bg); color: var(--http-post-text); } -/* PUT - Orange */ -/* .http-method-badge--put { background: #f59e0b; color: white; } */ -.http-method-badge--put { background: var(--http-put-bg); color: var(--http-put-text); } -/* PATCH - Purple */ -/* .http-method-badge--patch { background: #8b5cf6; color: white; } */ -.http-method-badge--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } -/* DELETE - Red */ -/* .http-method-badge--delete { background: #ef4444; color: white; } */ -.http-method-badge--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } -/* HEAD, OPTIONS - Gray */ -/* .http-method-badge--head, .http-method-badge--options { background: #6b7280; color: white; } */ +.http-method-badge--get { + background: var(--http-get-bg); + color: var(--http-get-text); +} +.http-method-badge--post { + background: var(--http-post-bg); + color: var(--http-post-text); +} +.http-method-badge--put { + background: var(--http-put-bg); + color: var(--http-put-text); +} +.http-method-badge--patch { + background: var(--http-patch-bg); + color: var(--http-patch-text); +} +.http-method-badge--delete { + background: var(--http-delete-bg); + color: var(--http-delete-text); +} .http-method-badge--head, -.http-method-badge--options { background: var(--http-head-bg); color: var(--http-head-text); } -/* ========================================================================== - API Endpoint Path and Summary - ========================================================================== */ +.http-method-badge--options { + background: var(--http-head-bg); + color: var(--http-head-text); +} .api-endpoint-path { font-weight: 500; color: var(--color-text-primary); @@ -4224,30 +3433,32 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested font-weight: 400; font-style: italic; } -/* ========================================================================== - Enhanced Sidebar Item Styling for API Endpoints - ========================================================================== */ -/* Make API endpoint links have more vertical space */ .sidebar__link:has(.api-endpoint-item) { padding: 0.75rem; align-items: flex-start; } -/* Ensure the text wrapper takes full width */ .sidebar__text:has(.api-endpoint-item) { width: 100%; } -/* ========================================================================== - Hover and Active States - ========================================================================== */ -/* Hover states are implicitly handled by dark-mode tokens; leaving hover overrides minimal */ -.sidebar__link:hover .http-method-badge--get { background: var(--http-get-bg); } -.sidebar__link:hover .http-method-badge--post { background: var(--http-post-bg); } -.sidebar__link:hover .http-method-badge--put { background: var(--http-put-bg); } -.sidebar__link:hover .http-method-badge--patch { background: var(--http-patch-bg); } -.sidebar__link:hover .http-method-badge--delete { background: var(--http-delete-bg); } +.sidebar__link:hover .http-method-badge--get { + background: var(--http-get-bg); +} +.sidebar__link:hover .http-method-badge--post { + background: var(--http-post-bg); +} +.sidebar__link:hover .http-method-badge--put { + background: var(--http-put-bg); +} +.sidebar__link:hover .http-method-badge--patch { + background: var(--http-patch-bg); +} +.sidebar__link:hover .http-method-badge--delete { + background: var(--http-delete-bg); +} .sidebar__link:hover .http-method-badge--head, -.sidebar__link:hover .http-method-badge--options { background: var(--http-head-bg); } -/* Active state enhancements */ +.sidebar__link:hover .http-method-badge--options { + background: var(--http-head-bg); +} .sidebar__link--active .api-endpoint-path { color: var(--color-brand-primary); font-weight: 600; @@ -4255,42 +3466,26 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested .sidebar__link--active .api-endpoint-summary { color: var(--color-text-secondary); } -/* ========================================================================== - Responsive Design - ========================================================================== */ @media (max-width: 768px) { .http-method-badge { min-width: 2.5rem; font-size: 0.625rem; padding: 0.125rem 0.25rem; } - .api-endpoint-path { font-size: 0.75rem; } - .api-endpoint-summary { font-size: 0.6875rem; } - .sidebar__link:has(.api-endpoint-item) { padding: 0.5rem; } } -/* ========================================================================== - Dark Mode Support - ========================================================================== */ -/* Dark mode handled via CSS variables in :root/.dark */ -/* ========================================================================== - Focus States for Accessibility - ========================================================================== */ .sidebar__link:focus-visible:has(.api-endpoint-item) { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; } -/* ========================================================================== - Animation and Transitions - ========================================================================== */ .http-method-badge { transition: background-color 0.15s ease; } @@ -4298,7 +3493,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested .api-endpoint-summary { transition: color 0.15s ease; } -/* Breadcrumbs Navigation Component - Pure navigation styling */ .breadcrumb { flex: 1; min-width: 0; @@ -4322,7 +3516,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested display: inline-flex; align-items: center; border-radius: var(--radius-lg); - /* padding: 0.5rem 0.75rem; */ padding: 0.25rem 0.5rem; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); background-color: transparent; @@ -4350,9 +3543,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested } .breadcrumb__link:hover { color: var(--color-brand); - /* background-color: var(--color-surface-hover); */ - /* transform: var(--transform-lift-subtle); */ - /* box-shadow: var(--elevation-4); */ } .breadcrumb__link:hover:before { opacity: 1; @@ -4362,9 +3552,8 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested outline-offset: 2px; color: var(--color-brand); background-color: var(--color-surface-hover); - box-shadow: - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); /* Enhanced double focus ring */ + box-shadow: 0 0 0 2px var(--color-brand), + 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); } .breadcrumb__separator { margin-left: 0.75rem; @@ -4372,8 +3561,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested font-size: 1.125rem; line-height: 1.75rem; color: var(--color-text-tertiary); - transition: - color var(--timing-fast) var(--easing-standard), + transition: color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); font-weight: 300; } @@ -4385,18 +3573,14 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested display: inline-flex; align-items: center; border-radius: var(--radius-lg); - /* padding: 0.5rem 0.75rem; */ padding: 0.25rem 0.5rem; font-weight: 600; - /* background-color: var(--color-brand); */ - /* color: var(--color-text-inverse); */ background: var(--glass-bg); color: var(--color-text-primary); border: 1px solid var(--glass-border-color); position: relative; overflow: hidden; } -/* Clickable current breadcrumb for metadata toggle */ .breadcrumb__current--clickable { cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; @@ -4412,8 +3596,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested .breadcrumb__current--clickable:focus { outline: 2px solid transparent; outline-offset: 2px; - box-shadow: - 0 0 0 2px var(--color-text-inverse), + box-shadow: 0 0 0 2px var(--color-text-inverse), 0 0 0 4px rgba(var(--color-brand-rgb), 0.5); } .breadcrumb__current--clickable:active { @@ -4448,7 +3631,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested ); pointer-events: none; } -/* Entrance Animation */ .breadcrumb__current, .breadcrumb__link { animation: breadcrumb-enter 0.3s ease-out; @@ -4464,50 +3646,41 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: translateX(0); } } -/* Responsive Design */ @media (max-width: 768px) { .breadcrumb__list { font-size: 0.75rem; line-height: 1rem; } - .breadcrumb__link, .breadcrumb__current { padding: 0.375rem 0.5rem; } - .breadcrumb__metadata-icon { width: 0.875rem; height: 0.875rem; } - .breadcrumb__separator { margin-left: 0.5rem; margin-right: 0.5rem; font-size: 1rem; } } -/* High contrast mode support */ @media (prefers-contrast: high) { .breadcrumb__link { border: 1px solid transparent; } - .breadcrumb__link:hover, .breadcrumb__link:focus { border-color: var(--color-brand); } - .breadcrumb__current { border: 2px solid var(--color-brand); } - .breadcrumb__current--clickable:hover, .breadcrumb__current--clickable:focus { border: 2px solid var(--color-text-inverse); } } -/* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .breadcrumb__link, .breadcrumb__separator, @@ -4515,30 +3688,22 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested .breadcrumb__metadata-icon { transition: none; } - .breadcrumb__current, .breadcrumb__link { animation: none; } - .breadcrumb__link:hover, .breadcrumb__current--clickable:hover { transform: none; } - .breadcrumb:hover .breadcrumb__separator { transform: none; } - .breadcrumb__current--clickable:hover .breadcrumb__metadata-icon, .breadcrumb__current--clickable[aria-expanded="true"] .breadcrumb__metadata-icon { transform: none; } } -/* ========================================================================== - :has() Breadcrumb Component Enhancements - ========================================================================== */ -/* Breadcrumb container awareness of metadata panel state */ .breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) { background: linear-gradient( 135deg, @@ -4550,12 +3715,10 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested padding: 0.25rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } -/* Enhanced separator styling when metadata is expanded */ .breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) .breadcrumb__separator { color: var(--color-brand); transform: scale(1.2); } -/* Interactive breadcrumb links when metadata is open */ .breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) .breadcrumb__link { background-color: rgba(var(--color-brand-rgb), 0.05); border-radius: 0.375rem; @@ -4565,7 +3728,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: var(--transform-lift-medium); box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.2); } -/* Hover context awareness */ .breadcrumb:has(.breadcrumb__link:hover) { background: rgba(var(--color-surface), 0.5); border-radius: var(--radius-lg); @@ -4575,8 +3737,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: scale(1.02); box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); } -/* Search Component - Sophisticated search interface with NVIDIA styling and complex grouping */ -/* SOPHISTICATED SEARCH INPUT - Matching design system */ .search-input { position: relative; z-index: 10; @@ -4587,27 +3747,15 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested border: 1px solid var(--color-border-primary); font-size: 0.875rem; font-weight: 500; - /* background: var(--color-surface); */ background: var(--glass-bg); font-family: var(--font-family-brand, inherit); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard), box-shadow var(--timing-fast) var(--easing-standard); - /* box-shadow: - 0 1px 3px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - /* box-shadow: var(--elevation-1), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); - - /* Search icon using brand color */ - /* Use currentColor for icon stroke; color is set via CSS variable for themeability */ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21 21-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z'/%3e%3c/svg%3e"); background-position: left 0.75rem center; background-repeat: no-repeat; @@ -4618,11 +3766,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested border-color: var(--color-brand); background-color: var(--color-surface-hover); transform: var(--transform-lift-subtle); - /* box-shadow: - 0 4px 8px rgba(0, 0, 0, 0.1), - 0 0 20px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); */ - /* box-shadow: var(--elevation-hover-2), var(--elevation-brand-subtle), inset 0 1px 0 rgba(255, 255, 255, 0.15); */ box-shadow: var(--glass-shadow); } .search-input:focus { @@ -4631,12 +3774,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested border-color: var(--color-brand); background-color: var(--glass-bg); transform: var(--transform-lift-subtle); - /* box-shadow: - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.15), - 0 4px 12px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.2); */ - /* box-shadow: 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15), var(--elevation-hover-2), inset 0 1px 0 rgba(255, 255, 255, 0.2); */ box-shadow: 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15), var(--glass-shadow); } .search-input::-moz-placeholder { @@ -4647,24 +3784,15 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested color: var(--color-text-tertiary); font-style: italic; } -/* SOPHISTICATED SEARCH CONTAINER - Matching design system */ .search-container { position: relative; border-radius: 0.875rem; padding: 0.75rem; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); - /* transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); */ - transition: - background-color var(--timing-medium) var(--easing-standard), + transition: background-color var(--timing-medium) var(--easing-standard), color var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard), transform var(--timing-medium) var(--easing-standard), @@ -4684,7 +3812,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested rgba(var(--color-brand-rgb), 0.02) 100% ); opacity: 0; - /* transition: opacity 0.3s ease; */ transition: opacity var(--timing-medium) var(--easing-standard); pointer-events: none; border-radius: 0.875rem; @@ -4692,8 +3819,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested .search-container:hover, .search-container:focus-within { border-color: var(--color-brand); - box-shadow: - 0 8px 24px rgba(0, 0, 0, 0.1), + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 0 20px rgba(var(--color-brand-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15); } @@ -4701,23 +3827,13 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested .search-container:focus-within::before { opacity: 1; } -/* SOPHISTICATED SEARCH RESULTS CONTAINER */ #searchResultsContainer { position: relative; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); border-radius: 0.875rem; - /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); - /* animation: search-container-enter 0.5s cubic-bezier(0.4, 0, 0.2, 1); */ animation: search-container-enter var(--timing-medium) var(--easing-standard); animation-fill-mode: both; overflow: hidden; @@ -4752,7 +3868,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: translateY(0) scale(1); } } -/* SOPHISTICATED SEARCH HIT STYLING - Matching tiles and navigation patterns */ .search-hit { position: relative; display: block; @@ -4763,26 +3878,16 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested } .search-hit-content { position: relative; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); border-radius: 0.875rem; - /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); padding: 1.25rem; - /* transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); */ - transition: - background-color var(--timing-medium) var(--easing-standard), + transition: background-color var(--timing-medium) var(--easing-standard), color var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard), transform var(--timing-medium) var(--easing-standard), box-shadow var(--timing-medium) var(--easing-standard); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); overflow: hidden; } @@ -4800,7 +3905,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested rgba(var(--color-brand-rgb), 0.02) 100% ); opacity: 0; - /* transition: opacity 0.3s ease; */ transition: opacity var(--timing-medium) var(--easing-standard); pointer-events: none; } @@ -4813,19 +3917,13 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested height: 3px; background: linear-gradient(90deg, var(--color-brand), var(--color-brand-2)); transform: scaleX(0); - /* transition: transform 0.3s ease; */ transition: transform var(--timing-medium) var(--easing-standard); transform-origin: left; } .search-hit:hover .search-hit-content { transform: var(--transform-lift-dramatic); border-color: var(--color-brand); - /* box-shadow: - 0 12px 28px rgba(0, 0, 0, 0.12), - 0 0 20px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); */ - box-shadow: - var(--elevation-hover-2), + box-shadow: var(--elevation-hover-2), var(--elevation-brand-subtle), inset 0 1px 0 rgba(255, 255, 255, 0.15); } @@ -4835,13 +3933,11 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested .search-hit:hover .search-hit-content::after { transform: scaleX(1); } -/* Focus states for accessibility */ .search-hit:focus-within .search-hit-content { outline: 2px solid var(--color-brand); outline-offset: 2px; transform: var(--transform-lift-medium); } -/* Search Hit Typography - Matching design system */ .search-hit-header { display: flex; align-items: flex-start; @@ -4868,7 +3964,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested color: var(--color-text-primary); font-family: var(--font-family-brand, inherit); margin: 0; - /* transition: color 0.2s ease; */ transition: color var(--timing-fast) var(--easing-standard); } .search-hit:hover .search-hit-title { @@ -4914,13 +4009,10 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested opacity: 1; background: var(--color-brand-1); } -/* SOPHISTICATED SEARCH SECTIONS */ .search-section { margin-bottom: 2rem; border-radius: 0.875rem; - /* transition: all 0.3s ease; */ - transition: - background-color var(--timing-medium) var(--easing-standard), + transition: background-color var(--timing-medium) var(--easing-standard), color var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard), transform var(--timing-medium) var(--easing-standard), @@ -4934,13 +4026,9 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested align-items: center; margin-bottom: 1.5rem; padding: 1rem; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); border-radius: 0.75rem; - /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); } .search-section-badge { @@ -4955,13 +4043,11 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested font-size: 0.875rem; font-weight: 600; margin-right: 0.75rem; - /* box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.2); */ box-shadow: var(--elevation-brand-subtle); transition: all 0.2s ease; } .search-section:hover .search-section-badge { transform: scale(1.1); - /* box-shadow: 0 4px 16px rgba(var(--color-brand-rgb), 0.3); */ box-shadow: var(--elevation-brand-medium); } .search-section-title { @@ -4971,7 +4057,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested font-family: var(--font-family-brand, inherit); margin: 0; } -/* SOPHISTICATED PARENT GROUPS */ .search-parent-group { position: relative; margin-bottom: 1.5rem; @@ -4986,28 +4071,19 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested font-family: var(--font-family-brand, inherit); margin: 0 -1rem 1rem -1rem; padding: 0.75rem 1rem; - /* background: var(--color-surface); */ background: var(--glass-bg); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border-bottom: 1px solid var(--color-border-secondary); border-radius: 0.5rem 0.5rem 0 0; } -/* SEARCH RESULTS HEADER */ .search-results-header { padding: 1.5rem; margin-bottom: 1.5rem; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); border-radius: 0.875rem; - /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); border-left: 4px solid var(--color-brand); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* animation: slideInUp 0.6s ease-out; */ animation: slideInUp var(--timing-slow) var(--easing-standard); } .search-results-header h1 { @@ -5028,7 +4104,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested font-size: 0.75rem; color: var(--color-text-tertiary); } -/* SOPHISTICATED ANIMATIONS - Matching design system */ @keyframes fadeIn { from { opacity: 0; @@ -5057,27 +4132,21 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested opacity: 0.7; } } -/* Animation Classes */ .animate-fadeIn { - /* animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1); */ animation: fadeIn var(--timing-fast) var(--easing-standard); } .animate-slideInUp { - /* animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1); */ animation: slideInUp var(--timing-fast) var(--easing-standard); } .animate-pulse { - /* animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; */ animation: pulse var(--timing-slow) var(--easing-emphasized) infinite; } -/* Search Container Enhancements */ .search-results-container { transition: all 0.3s ease; } .search-results-header { animation: slideInUp 0.6s ease-out; } -/* Search Section Styling */ .search-section { border-radius: 12px; transition: all 0.3s ease; @@ -5085,7 +4154,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested .search-section:hover { transform: var(--transform-lift-medium); } -/* Enhanced Search Hit Styling */ .search-hit { position: relative; overflow: hidden; @@ -5097,8 +4165,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested } .search-hit:hover .search-hit-content { border-color: var(--color-brand); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.1), + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--color-brand-alpha, rgba(74, 144, 226, 0.1)); } .search-hit-content::before { @@ -5116,7 +4183,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested .search-hit:hover .search-hit-content::before { transform: scaleX(1); } -/* Search Hit Typography */ .search-hit-title { transition: color 0.2s ease; } @@ -5129,7 +4195,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested .search-hit:hover .search-hit-section { transform: translateX(2px); } -/* Search Score Badge */ .search-hit-score { transition: all 0.2s ease; min-width: 45px; @@ -5139,12 +4204,9 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: scale(1.05); opacity: 1 !important; } -/* SOPHISTICATED FILTER STYLING - Matching navigation patterns */ #filterSelect { position: relative; - /* background: var(--color-surface); */ background: var(--glass-bg); - /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); border-radius: var(--radius-lg); padding: 0.5rem 0.75rem; @@ -5152,10 +4214,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested font-weight: 500; color: var(--color-text-primary); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */ box-shadow: var(--glass-shadow); cursor: pointer; } @@ -5169,8 +4228,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested outline: 2px solid transparent; outline-offset: 2px; border-color: var(--color-brand); - box-shadow: - 0 0 0 2px var(--color-brand), + box-shadow: 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); } .filter-active { @@ -5183,7 +4241,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested background: var(--color-brand-1) !important; transform: var(--transform-lift-subtle); } -/* Filter container styling */ #filterContainer { position: relative; } @@ -5194,7 +4251,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested color: var(--color-text-secondary); margin-bottom: 0.5rem; } -/* UTILITY CLASSES */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; @@ -5228,7 +4284,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested .font-medium { font-weight: 500; } -/* SOPHISTICATED LOADING STATES */ .search-loading { position: relative; padding: 2rem; @@ -5257,53 +4312,43 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested font-size: 0.875rem; margin-top: 1rem; } -/* Focus Management */ .search-hit:focus-within .search-hit-content { outline: 2px solid var(--color-brand); outline-offset: 2px; } -/* RESPONSIVE DESIGN */ @media (max-width: 768px) { .search-hit-content { padding: 1rem; } - .search-hit-metadata { flex-direction: column; align-items: flex-start; gap: 0.5rem; } - .search-results-header { padding: 1rem; } - .search-results-header .flex { flex-direction: column; align-items: flex-start; gap: 0.5rem; } - .search-section-header { padding: 0.75rem; } - .search-section-badge { width: 1.75rem; height: 1.75rem; font-size: 0.75rem; } - .search-section-title { font-size: 1.25rem; } - .search-parent-group h3 { font-size: 1rem; padding: 0.5rem 0.75rem; } } -/* PRINT STYLES */ @media print { .search-hit-content { -moz-column-break-inside: avoid; @@ -5312,19 +4357,16 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested border: 1px solid #000; background: white; } - .search-hit-score, .animate-fadeIn, .animate-slideInUp { display: none; } - .search-section-badge { background: #000; color: white; } } -/* NO RESULTS AND ERROR STATES - Matching design system */ .search-no-results, .search-error { text-align: center; @@ -5374,17 +4416,14 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: var(--transform-lift-subtle); box-shadow: 0 4px 8px rgba(var(--color-brand-rgb), 0.25); } -/* High Contrast Mode Support */ @media (prefers-contrast: high) { .search-hit-content { border-width: 2px; } - .search-hit:hover .search-hit-content { border-width: 3px; } } -/* ACCESSIBILITY AND REDUCED MOTION SUPPORT */ @media (prefers-reduced-motion: reduce) { .search-hit-content, .search-section, @@ -5395,48 +4434,35 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested animation: none; transition: none; } - .search-hit:hover .search-hit-content, .search-section:hover, .search-section:hover .search-section-badge { transform: none; } } -/* HIGH CONTRAST MODE SUPPORT */ @media (prefers-contrast: high) { .search-hit-content, .search-section-header, .search-results-header { border-width: 2px; } - .search-hit:hover .search-hit-content { border-width: 3px; } - .search-section-badge { border: 2px solid var(--color-text-primary); } } -/* DARK MODE SUPPORT - All styles automatically work via CSS custom properties */ -/* The color system in colors.css handles dark mode via .dark class */ -/* No additional dark mode styles needed as we use semantic color variables */ -/* Chat Component - Enhanced chat interface with premium styling */ -/* Chat Header */ .chat__header { - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - border-radius: 0.75rem 0.75rem 0 0; /* Top corners rounded to match design system */ + border-radius: 0.75rem 0.75rem 0 0; } -/* Chat header icon styling for proper dark mode */ .chat__header-icon { filter: brightness(0) saturate(100%) invert(42%) sepia(15%) saturate(566%) hue-rotate(202deg) brightness(96%) contrast(87%); } .dark .chat__header-icon { filter: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(593%) hue-rotate(202deg) brightness(91%) contrast(92%); } -/* Danger button variant for delete action */ .topbar__button--danger:hover { background-color: rgba(239, 68, 68, 0.1) !important; border-color: rgb(239, 68, 68) !important; @@ -5445,47 +4471,32 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested .topbar__button--danger:hover img { filter: brightness(0) saturate(100%) invert(35%) sepia(96%) saturate(2067%) hue-rotate(346deg) brightness(89%) contrast(94%) !important; } -/* Chat Container - Clean transparent design */ #chatContainer { background: transparent; border: none; box-shadow: none; - border-radius: 0.75rem; /* Add consistent border radius */ - /* margin-right: 1.5rem; Align with page container padding */ - /* Replaced: remove right margin on wide screens to avoid pinching */ - margin-top: 1rem; /* Match the pageContainer's top padding to align with content start */ + border-radius: 0.75rem; + margin-top: 1rem; } -/* On xl+, let chat use full sidebar column width */ -@media (min-width: 1280px) { +@screen xl { #chatContainer { margin-right: 0; } } -/* Enhanced Chat Interface - Clean transparent design */ .chat__controls { background: transparent; border: none; - border-radius: 0 0 0.75rem 0.75rem; /* Bottom corners rounded to match container */ + border-radius: 0 0 0.75rem 0.75rem; } .chat__form { width: 100%; } -[data-component="tabs"] .chat__form { - min-height: 200px; - position: relative; - overflow: hidden; - border-top: 1px solid var(--glass-border-color); - transition: height var(--timing-medium) var(--easing-standard); - isolation: isolate; /* prevent child blends from darkening surface */ -} -.chat__input:focus { - outline: 2px solid transparent; - outline-offset: 2px; -} .chat__input { - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - border-color var(--timing-fast) var(--easing-standard), + &:focus { + --tw-outline-style: none; + outline-style: none; + } + transition: border-color var(--timing-fast) var(--easing-standard), box-shadow var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard); font-family: var(--font-brand); @@ -5497,112 +4508,63 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested } .chat__input:focus { border-color: var(--color-brand); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.1), + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(var(--color-brand-rgb), 0.1); } -/* Old styling moved to enhanced section below */ -/* Smooth transitions for chat container */ #chatContainer { - /* ✅ FIXED: Use animation tokens for consistent timing */ - /* transition (was medium for all) */ - transition: - width var(--timing-medium) var(--easing-smooth), + transition: width var(--timing-medium) var(--easing-smooth), max-width var(--timing-medium) var(--easing-smooth), box-shadow var(--timing-slow) var(--easing-smooth), transform var(--timing-slow) var(--easing-smooth), border-radius var(--timing-slow) var(--easing-standard), - background-color var(--timing-medium) var(--easing-smooth), - border-color var(--timing-medium) var(--easing-smooth), - -webkit-backdrop-filter var(--timing-medium) var(--easing-smooth); - transition: - width var(--timing-medium) var(--easing-smooth), - max-width var(--timing-medium) var(--easing-smooth), - /* slower transform and shadow for more graceful feel */ - box-shadow var(--timing-slow) var(--easing-smooth), - transform var(--timing-slow) var(--easing-smooth), - border-radius var(--timing-slow) var(--easing-standard), - /* include background/border transitions for softer state change */ background-color var(--timing-medium) var(--easing-smooth), border-color var(--timing-medium) var(--easing-smooth), backdrop-filter var(--timing-medium) var(--easing-smooth); - transition: - width var(--timing-medium) var(--easing-smooth), - max-width var(--timing-medium) var(--easing-smooth), - - box-shadow var(--timing-slow) var(--easing-smooth), - transform var(--timing-slow) var(--easing-smooth), - border-radius var(--timing-slow) var(--easing-standard), - - background-color var(--timing-medium) var(--easing-smooth), - border-color var(--timing-medium) var(--easing-smooth), - backdrop-filter var(--timing-medium) var(--easing-smooth), - -webkit-backdrop-filter var(--timing-medium) var(--easing-smooth); transform-origin: top right; will-change: width, transform, box-shadow; } -/* Expanded Chat State - Enhanced Liquid Glass */ .chat-expanded { - /* Lighter translucent surface */ background: var(--glass-bg); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border-color); border-left-width: 3px; - /* box-shadow: 0 18px 60px rgba(0, 0, 0, 0.08), 0 8px 28px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.18); */ box-shadow: var(--glass-shadow); transform: translateY(-2px); overflow: visible; display: flex; flex-direction: column; } -/* Dark theme tuning: slightly lighter sheet */ .dark .chat-expanded { background: var(--glass-bg); border-color: var(--glass-border-color); } -/* Ensure messages area scrolls within viewport when expanded */ .chat-expanded #chat-messages { flex: 1 1 auto; - min-height: 0; /* required for flex children to allow overflow */ + min-height: 0; overflow-y: auto; - max-height: none; /* use container max-height instead */ + max-height: none; } -/* Modal overlay for expanded chat */ .chat-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.22); opacity: 0; transition: opacity var(--timing-medium) var(--easing-smooth); - z-index: 50; /* below chat container (which uses 60) */ + z-index: 50; } .chat-overlay.visible { opacity: 1; } -/* Enhanced input styling for expanded state */ -.chat-expanded .chat__input { - font-size: 1rem; - line-height: 1.6; -} -.related-content__card .chat-expanded .chat__input { - color: var(--color-text-primary); - transition: color 0.2s ease; -} -.related-content__card:hover .chat-expanded .chat__input { - color: var(--color-brand); -} .chat-expanded .chat__input { - font-size: 15px; /* Slightly larger for better UX */ + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + font-size: 15px; line-height: 1.5; } -/* Micro-interaction for expand button */ .chat__header button { - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), + transition: transform var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard); } .chat__header button:hover { @@ -5612,16 +4574,12 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested .chat__header button:active { transform: scale(0.95); } -/* Enhanced focus states */ .chat-expanded .chat__input:focus { - box-shadow: - 0 0 0 3px rgba(var(--color-brand-rgb), 0.12), + box-shadow: 0 0 0 3px rgba(var(--color-brand-rgb), 0.12), 0 4px 20px rgba(0, 0, 0, 0.1); border-color: var(--color-brand); } -/* Subtle animation for chat messages in expanded state */ .chat-expanded .chat__messages { - /* ✅ FIXED: Use animation tokens */ animation: subtle-fade-in var(--timing-medium) var(--easing-standard) var(--reveal-stagger-delay) both; } @keyframes subtle-fade-in { @@ -5634,23 +4592,17 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: translateY(0); } } -/* Liquid Glass Hover Effect */ #chatContainer:not(.chat-expanded):hover { background: var(--glass-bg); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border-color: var(--glass-border-color); - /* transform: translateX(-1px); */ box-shadow: var(--glass-shadow); } -/* Auto-resize textarea styling with liquid glass focus */ .chat-input { overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), box-shadow var(--timing-fast) var(--easing-standard); } @@ -5659,36 +4611,26 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested } .chat-input:focus { background: rgba(255, 255, 255, 0.08) !important; - /* backdrop-filter: blur(12px) !important; */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important; backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important; border-color: rgba(255, 255, 255, 0.15) !important; - box-shadow: - 0 0 0 2px rgba(var(--color-brand-rgb), 0.1), + box-shadow: 0 0 0 2px rgba(var(--color-brand-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.06); } -/* Enhanced send button styling */ #sendButton { - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), + transition: transform var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard), box-shadow var(--timing-fast) var(--easing-standard), filter var(--timing-fast) var(--easing-standard); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } -/* :has() Chat Interface Enhancements */ -/* Chat container responds to input focus (no scale to avoid clipping) */ #chatContainer:has(.chat__input:focus) { transform: translateY(-1px); - box-shadow: - 0 12px 40px rgba(0, 0, 0, 0.15), + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(var(--color-brand-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2); border-color: var(--color-brand); overflow: visible; } -/* Match header with lighter sheet while expanded */ .chat-expanded .chat__header { background: rgba(255, 255, 255, 0.08) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.14); @@ -5697,13 +4639,11 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested background: rgba(255, 255, 255, 0.05) !important; border-bottom-color: rgba(255, 255, 255, 0.12); } -/* Enhanced expanded state with input focus */ .chat-expanded:has(.chat__input:focus) { border-left-width: 4px; border-color: var(--color-brand); background: rgba(255, 255, 255, 0.15); } -/* Chat form with content gets enhanced styling */ #chatContainer:has(.chat__input:not(:-moz-placeholder)) .chat__header { background: linear-gradient(135deg, rgba(var(--color-brand-rgb), 0.1) 0%, @@ -5716,21 +4656,18 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested rgba(var(--color-brand-rgb), 0.05) 100%); border-bottom: 1px solid rgba(var(--color-brand-rgb), 0.2); } -/* Send button activation based on input content */ #chatContainer:has(.chat__input:not(:-moz-placeholder)) #sendButton { background-color: var(--color-brand) !important; color: var(--color-text-inverse) !important; transform: scale(1.05); - box-shadow: - 0 4px 12px rgba(var(--color-brand-rgb), 0.3), + box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.3), 0 2px 8px rgba(0, 0, 0, 0.1); } #chatContainer:has(.chat__input:not(:placeholder-shown)) #sendButton { background-color: var(--color-brand) !important; color: var(--color-text-inverse) !important; transform: scale(1.05); - box-shadow: - 0 4px 12px rgba(var(--color-brand-rgb), 0.3), + box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.3), 0 2px 8px rgba(0, 0, 0, 0.1); } #sendButton:not(:disabled) { @@ -5750,10 +4687,8 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested background-color: var(--color-bg-secondary) !important; color: var(--color-text-tertiary) !important; } -/* Chat input improvements */ .chat__input:focus { - box-shadow: - 0 0 0 3px rgba(var(--color-brand-rgb), 0.1), + box-shadow: 0 0 0 3px rgba(var(--color-brand-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.1); border-color: var(--color-brand) !important; } @@ -5763,43 +4698,38 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested .chat__input::placeholder { color: var(--color-text-tertiary); } -/* Header button hover effects with enhanced micro-interactions */ .chat__header button:hover svg { transform: scale(1.15) rotate(2deg); transition: transform var(--timing-fast) var(--easing-standard); } -/* Smooth state transitions for expand button icon */ .chat__header button svg { - /* ✅ FIXED: Use animation tokens and specific properties */ transition: transform var(--timing-medium) var(--easing-standard); } -/* Chat bubble improvements - tighter spacing and better hierarchy */ .chat-bubble { + position: relative; max-width: none; - border-radius: 0.75rem; - padding: 0.75rem; - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); padding: var(--space-3); position: relative; border-radius: var(--radius-xl); /* Reduced padding from p-4 to p-3 */ + border-radius: var(--radius-xl); + padding: calc(var(--spacing) * 3); + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; - -webkit-hyphens: auto; - hyphens: auto; + hyphens: auto; white-space: pre-wrap; - line-height: 1.5; /* Slightly tighter line height */ + line-height: 1.5; font-family: var(--font-brand); - border-radius: 1rem 1rem 1rem 0.25rem; /* Consistent rounded corners with tail */ + border-radius: 1rem 1rem 1rem 0.25rem; } .chat-bubble--user { - margin-left: 1.5rem; /* Reduced margin */ + margin-left: calc(var(--spacing) * 6); background-color: var(--color-brand); color: var(--color-text-inverse); - border-radius: 1rem 1rem 0.25rem 1rem; /* User tail on right */ + border-radius: 1rem 1rem 0.25rem 1rem; box-shadow: var(--elevation-4); } .chat-bubble--bot { - margin-right: 1.5rem; /* Reduced margin */ + margin-right: calc(var(--spacing) * 6); background: linear-gradient( 135deg, var(--color-surface) 0%, @@ -5807,55 +4737,24 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested ); border: 1px solid var(--color-border-primary); color: var(--color-text-primary); - border-radius: 1rem 1rem 1rem 0.25rem; /* Bot tail on left */ + border-radius: 1rem 1rem 1rem 0.25rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } -/* Enhanced Chat Messages */ #chat-messages { display: flex; flex-direction: column; -} -#chat-messages > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); -} -#chat-messages { - padding: 1rem; padding: var(--space-4); -} -#chat-messages > * + * { - margin-top: 0.75rem; -} -#chat-messages { - display: flex; -} -@media (max-width: 768px) { - - .search-results-header #chat-messages { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); } -} -.card--tile #chat-messages > * + * { - margin-top: 0.75rem; -} -.grid .tile #chat-messages { - display: flex; - flex-direction: column; - height: 100%; -} -.grid .tile #chat-messages > p { - /* Description takes only the space it needs */ - flex: 0 0 auto; -} -#chat-messages { /* Tighter spacing */ + padding: calc(var(--spacing) * 4); max-height: calc(100vh - 12rem); overflow-y: auto; scroll-behavior: smooth; } .chat-bubble--error { - margin-right: 1.5rem; /* Consistent with other bubbles */ + margin-right: calc(var(--spacing) * 6); background: linear-gradient( 135deg, rgba(239, 68, 68, 0.1) 0%, @@ -5863,51 +4762,43 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested ); border: 1px solid rgba(239, 68, 68, 0.2); color: var(--color-text-primary); - border-radius: 1rem 1rem 1rem 0.25rem; /* Consistent tail */ -} -/* Chat message formatting */ -.chat-bubble p { - margin-bottom: 0.75rem; -} -.chat-bubble p:last-child { - margin-bottom: 0px; + border-radius: 1rem 1rem 1rem 0.25rem; } .chat-bubble p { + margin-bottom: calc(var(--spacing) * 3); + &:last-child { + margin-bottom: calc(var(--spacing) * 0); + } word-wrap: break-word; overflow-wrap: break-word; } .chat-bubble code { border-radius: 0.25rem; - padding-left: 0.5rem; - padding-right: 0.5rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - font-size: 0.875rem; - line-height: 1.5; border-radius: var(--radius-base); + padding-inline: calc(var(--spacing) * 2); + padding-block: calc(var(--spacing) * 1); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); background-color: rgba(var(--color-brand-rgb), 0.1); color: var(--color-brand); font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; word-break: break-all; } .chat-bubble pre { - margin-top: 0.75rem; - margin-bottom: 0.75rem; + margin-block: calc(var(--spacing) * 3); overflow-x: auto; - border-radius: 0.5rem; - padding: 0.75rem; - font-size: 0.875rem; - line-height: 1.5; padding: var(--space-3); border-radius: var(--radius-lg); + border-radius: var(--radius-lg); + padding: calc(var(--spacing) * 3); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); background-color: var(--color-bg-tertiary); border: 1px solid var(--color-border-primary); } .chat-bubble pre code { - padding: 0px; padding: var(--space-0); + padding: calc(var(--spacing) * 0); background: none; color: var(--color-text-primary); } -/* Chat message animations */ .chat-bubble { - /* ✅ FIXED: Use animation tokens */ animation: chat-message-enter var(--timing-medium) var(--easing-standard); animation-fill-mode: both; } @@ -5921,32 +4812,17 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: translateY(0) scale(1); } } -/* Enhanced typing indicator */ -.typing-indicator { - margin-right: 2rem; - display: flex; - align-items: center; -} -.typing-indicator > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.5rem * var(--tw-space-x-reverse)); - margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); -} .typing-indicator { - border-radius: 0.75rem; - padding: 1rem; padding: var(--space-4); border-radius: var(--radius-xl); + margin-right: calc(var(--spacing) * 8); display: flex; align-items: center; -} -@media (max-width: 768px) { - - .search-results-header .typing-indicator { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))); } -} -.typing-indicator { + border-radius: var(--radius-xl); + padding: calc(var(--spacing) * 4); background: linear-gradient( 135deg, var(--color-surface) 0%, @@ -5970,7 +4846,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested height: 4px; border-radius: 50%; background-color: var(--color-text-secondary); - /* ✅ FIXED: Use animation tokens for stagger */ animation: typing-dot 1.4s infinite var(--reveal-batch-delay); margin-right: 4px; } @@ -5984,89 +4859,46 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: scale(1.2); } } -/* Chat pair container - tighter spacing */ -.chat-pair > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); -} -.chat-pair > * + * { - margin-top: 0.75rem; -} -.card--tile .chat-pair > * + * { - margin-top: 0.75rem; -} -.grid .tile .chat-pair { - display: flex; - flex-direction: column; - height: 100%; -} -.grid .tile .chat-pair > p { - /* Description takes only the space it needs */ - flex: 0 0 auto; -} -.chat-pair { /* Slightly increased for better breathing room */ +.chat-pair { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); + } position: relative; margin-bottom: 1rem; } -/* Improved delete button styling aligned with design system */ .chat-delete { - top: -0.25rem; - right: -0.25rem; - height: 1.25rem; - width: 1.25rem; - justify-content: center; - border-radius: 9999px; - font-size: 0.875rem; - line-height: 1.4; - opacity: 0; position: absolute; border-radius: var(--radius-full); + position: absolute; + top: calc(var(--spacing) * -1); + right: calc(var(--spacing) * -1); display: flex; + height: calc(var(--spacing) * 5); + width: calc(var(--spacing) * 5); align-items: center; -} -@media (max-width: 768px) { - - .search-results-header .chat-delete { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; + justify-content: center; + border-radius: calc(infinity * 1px); + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); + opacity: 0%; + &:is(:where(.group):hover *) { + @media (hover: hover) { + opacity: 100%; + } } -} -[data-component="article-next-prev"] .article-next-prev__link .chat-delete { - color: var(--color-text-tertiary); - font-size: 0.75rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; - transition: color 0.2s ease; -} -[data-component="article-next-prev"] .article-next-prev__link:hover .chat-delete { - color: var(--color-text-secondary); -} -[data-component="article-next-prev"] .article-next-prev__link--disabled .chat-delete { - color: var(--color-text-tertiary); -} -@media (max-width: 768px) { - - [data-component="article-next-prev"] .article-next-prev__link .chat-delete { - font-size: 0.6875rem; + &:focus { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } -} -.chat-delete:focus { - outline: 2px solid transparent; - outline-offset: 2px; - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); - --tw-ring-offset-width: 1px; -} -.group:hover .chat-delete { - opacity: 1; -} -.chat-delete { - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - opacity var(--timing-fast) var(--easing-standard), + &:focus { + --tw-ring-offset-width: 1px; + --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + } + &:focus { + --tw-outline-style: none; + outline-style: none; + } + transition: opacity var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard); @@ -6076,8 +4908,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested font-size: 0.75rem; line-height: 1; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - /* backdrop-filter: blur(8px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); } .chat-delete:hover { @@ -6089,48 +4919,43 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested } .chat-delete:active { transform: scale(0.95); - /* ✅ FIXED: Use animation tokens */ animation: delete-shake var(--timing-medium) var(--easing-standard); } .chat-pair:hover .chat-delete { opacity: 1; } -/* Delete shake animation */ @keyframes delete-shake { - 0%, 100% { transform: scale(0.95) rotate(0deg); } - 25% { transform: scale(0.95) rotate(-2deg); } - 75% { transform: scale(0.95) rotate(2deg); } + 0%, 100% { + transform: scale(0.95) rotate(0deg); + } + 25% { + transform: scale(0.95) rotate(-2deg); + } + 75% { + transform: scale(0.95) rotate(2deg); + } } -/* Article Header Component - Parent container managing breadcrumbs and metadata */ .article-header { position: relative; margin-bottom: 1.5rem; } -/* Navigation container - holds breadcrumbs and toggle button */ .article-header__navigation { display: flex; align-items: center; justify-content: space-between; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ border-radius: 0.75rem; - /* padding: 1rem 1.25rem; */ padding: 0.5rem 0.75rem; - /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); background: var(--glass-bg); box-shadow: var(--glass-shadow); transition: background-color var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard); } -/* Reduced hover effect intentionally disabled to keep things airy */ -/* Actions Container - holds copy page and metadata toggle */ .article-header__actions { display: flex; align-items: center; gap: 0.75rem; } -/* Copy Page Component Styles */ .article-header__copy-page { position: relative; } @@ -6162,23 +4987,17 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested outline: 2px solid rgba(var(--color-brand-rgb), 0.5); outline-offset: 2px; } -/* Copy Page Dropdown Styles */ .article-header__copy-dropdown { position: absolute; right: 0; margin-top: 0.5rem; width: 14rem; - /* background: var(--color-surface); */ background: var(--glass-bg); - /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); border-radius: 0.5rem; - /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); */ box-shadow: var(--glass-shadow); z-index: 999; overflow: hidden; - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } @@ -6190,15 +5009,12 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested } .article-header__copy-dropdown-content { padding: 0.25rem; - /* Elevate glass on inner wrapper to ensure effect covers menu content */ background: var(--glass-bg); border: 1px solid var(--glass-border-color); border-radius: 0.75rem; - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); box-shadow: var(--glass-shadow); } -/* Dropdown Menu Items */ .copy-page-menu-item { width: 100%; display: flex; @@ -6233,13 +5049,11 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested .copy-page-menu-item:hover svg { color: var(--color-brand); } -/* Menu Separator */ .copy-page-separator { margin: 0.25rem 0; border: 0; border-top: 1px solid var(--color-border-primary); } -/* Menu Section Header */ .copy-page-section-header { padding: 0.25rem 0.75rem; font-size: 0.75rem; @@ -6250,7 +5064,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested background: var(--color-bg-tertiary); margin: 0.25rem 0; } -/* Icon Styles */ .article-header__copy-icon, .article-header__copy-arrow { width: 1rem; @@ -6263,11 +5076,9 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested .article-header__copy-toggle:hover .article-header__copy-arrow { color: var(--color-brand); } -/* Dropdown arrow rotation */ .article-header__copy-toggle[aria-expanded="true"] .article-header__copy-arrow { transform: rotate(180deg); } -/* Copy feedback states */ .copy-page-menu-item.copying { background: var(--color-brand); color: var(--color-text-inverse); @@ -6307,35 +5118,25 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested top: 100%; margin-top: 0.5rem; width: 14rem; - /* background: var(--color-surface); */ background: var(--glass-bg); - /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); border-radius: 0.75rem; - /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.1); */ box-shadow: var(--glass-shadow); z-index: 50; - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); overflow: hidden; } .article-header__copy-dropdown .p-1 { padding: 0.25rem; } -/* Stronger glassmorphism for dropdown readability over underlying text */ .article-header__copy-dropdown { - /* Locally override glass tokens for this component */ --glass-blur: 14px; --glass-saturate: 1.25; --glass-bg: rgba(255, 255, 255, 0.72); --glass-border-color: rgba(255, 255, 255, 0.32); --glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); - - /* Ensure it visually floats above overlapping content */ z-index: 1000; background-clip: padding-box; - /* Let inner content own the visual surface to avoid double borders */ background: transparent; border: none; } @@ -6344,22 +5145,18 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested --glass-border-color: rgba(255, 255, 255, 0.18); --glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); } -/* Responsive adjustments */ @media (max-width: 768px) { .article-header__actions { gap: 0.5rem; } - .article-header__copy-text { display: none; } - .article-header__copy-dropdown { width: 12rem; right: -2rem; } } -/* Metadata Toggle Button */ .article-header__metadata-toggle { display: flex; align-items: center; @@ -6420,11 +5217,9 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested height: 1rem; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } -/* Rotate icon when expanded */ .article-header__metadata-toggle[aria-expanded="true"] .article-header__toggle-icon { transform: rotate(180deg); } -/* Metadata Panel */ .article-header__metadata-panel { max-height: 0; overflow: hidden; @@ -6434,21 +5229,15 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: translateY(-10px); } .article-header__metadata-panel[aria-hidden="false"] { - max-height: 200px; /* More reasonable max height for metadata */ + max-height: 200px; opacity: 1; transform: translateY(0); } -/* Enhanced UX styles for horizontal metadata flow within article header */ .article-header__metadata-panel .metadata { - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); border-radius: 0.75rem; - /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); margin-top: 0.75rem; } @@ -6500,7 +5289,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested .article-header__metadata-panel .metadata__item:hover:before { opacity: 1; } -/* Secondary metadata items (like last modified) */ .article-header__metadata-panel .metadata__item--secondary { color: var(--color-text-tertiary); font-size: 0.8125rem; @@ -6508,8 +5296,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested .article-header__metadata-panel .metadata__item--secondary:hover { color: var(--color-text-secondary); } -/* Metadata separators removed - clean horizontal flow */ -/* Override global SVG styles for metadata icons - very specific targeting */ .article-header__metadata-panel .metadata .metadata__icon, .article-header__metadata-panel .metadata__icon, .article-header__metadata-panel svg { @@ -6522,7 +5308,6 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested flex-shrink: 0 !important; display: inline-block !important; } -/* Mobile responsive styles */ @media (max-width: 768px) { .article-header__metadata-panel .metadata__flow { padding: 0.75rem 1rem; @@ -6530,15 +5315,11 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested flex-direction: column; align-items: flex-start; } - .article-header__metadata-panel .metadata__item { font-size: 0.8125rem; padding: 0.375rem 0.5rem; width: 100%; } - - /* Separators removed - no longer needed */ - .article-header__metadata-panel .metadata .metadata__icon, .article-header__metadata-panel .metadata__icon, .article-header__metadata-panel svg { @@ -6550,20 +5331,17 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested min-width: 1rem !important; } } -/* Additional responsive styles for navigation */ @media (max-width: 768px) { .article-header__navigation { flex-direction: column; gap: 1rem; align-items: stretch; } - .article-header__metadata-toggle { justify-content: center; width: 100%; } } -/* Loading State */ .article-header.loading .article-header__metadata-toggle { pointer-events: none; opacity: 0.7; @@ -6579,42 +5357,34 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: rotate(360deg); } } -/* Focus states for accessibility */ .article-header__metadata-toggle:focus-within { outline: 2px solid var(--color-brand); outline-offset: 2px; border-radius: 0.625rem; } -/* High contrast mode support */ @media (prefers-contrast: high) { .article-header__navigation { border-width: 2px; } - .article-header__metadata-toggle { border: 2px solid var(--color-brand); } } -/* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .article-header__metadata-panel, .article-header__toggle-icon { transition: none; } - .article-header__navigation:hover { transform: none; } } -/* Fix stacking context issues when dropdown is open */ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id] { position: static; } body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { display: none; } -/* :has() Article Header Enhancements */ -/* Breadcrumb navigation with interactive states */ .article-header:has(.breadcrumb__current[aria-expanded="true"]) .article-header__navigation { background: linear-gradient( 135deg, @@ -6622,22 +5392,18 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { var(--color-surface) 100% ); border-color: rgba(var(--color-brand-rgb), 0.2); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.08), + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(var(--color-brand-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.15); } -/* Enhanced metadata panel visibility */ .article-header:has(.article-header__metadata-panel[aria-hidden="false"]) { margin-bottom: 2.5rem; } -/* Related Content component styles migrated from page-enhancements.css */ .related-content { position: relative; background: var(--glass-bg); border-radius: 0.75rem; border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); padding: 1.25rem; transition: background-color var(--timing-medium) var(--easing-standard), @@ -6655,7 +5421,6 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { color: var(--color-text-primary); font-weight: 600; } -/* View Toggle Buttons */ .related-content__view-toggle { position: relative; display: inline-flex; @@ -6718,13 +5483,11 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { .related-content__container[data-collapsed="true"] { display: none; } -/* Compact View Styles */ .related-content__view--compact .related-content__item { position: relative; background: var(--glass-bg); border: 1px solid var(--glass-border-color); border-radius: 0.5rem; - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; @@ -6771,13 +5534,11 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { .related-content__view--compact .related-content__item:hover .font-medium { color: var(--color-brand); } -/* Enhanced Card View Styles */ .related-content__card { position: relative; background: var(--glass-bg); border-radius: 0.75rem; border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; @@ -6836,7 +5597,6 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { .related-content__card .text-gray-500 { color: var(--color-text-tertiary); } -/* Dark mode enhancements */ .dark .related-content { border-color: var(--color-border-secondary); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); @@ -6865,69 +5625,72 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { .dark .resource-card-compact:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(var(--color-brand-rgb), 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1); } -/* Improved responsive behavior */ @media (max-width: 768px) { .related-content { padding: 1rem; margin-top: 1.5rem; } - .related-header { flex-direction: column; gap: 0.75rem; align-items: flex-start; } - .related-content__view--compact .related-content__item { padding: 0.75rem; } - .related-content__view--compact .related-content__item time { display: none; } - .related-content__card { padding: 1rem; } - .related-content__view--cards .grid { grid-template-columns: 1fr; } - .related-content__view--compact .related-content__item:hover, .related-content__card:hover { transform: translateY(-1px); } } -/* High contrast mode support */ @media (prefers-contrast: high) { - .related-content { border-width: 2px; } - .related-content__view-toggle, .related-content__collapse-toggle { border-width: 2px; } - .related-content__view--compact .related-content__item { border-width: 2px; } - .related-content__card { border-width: 2px; } + .related-content { + border-width: 2px; + } + .related-content__view-toggle, .related-content__collapse-toggle { + border-width: 2px; + } + .related-content__view--compact .related-content__item { + border-width: 2px; + } + .related-content__card { + border-width: 2px; + } } -/* Animation for view transitions */ .related-content__view--compact, .related-content__view--cards { animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { - from { opacity: 0; transform: translateY(10px); } - to { opacity: 1; transform: translateY(0); } + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } } -/* Print styles */ @media print { - .related-content { display: none; } + .related-content { + display: none; + } } -/* Page Resources component minor rules */ -/* Hide resources block in print to reduce clutter */ @media print { - [data-component="article-page-resources"] { display: none; } + [data-component="article-page-resources"] { + display: none; + } } -/* Tiles Component - Interactive content cards with enhanced UX */ -/* Base Tile Styles */ .card--tile { position: relative; - /* Use a CSS var for the base background so JS can layer gradients on hover */ --tile-base-bg: linear-gradient( 135deg, var(--color-surface) 0%, @@ -6936,16 +5699,12 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { background: var(--tile-base-bg); border-radius: var(--radius-card); border: 1px solid var(--color-border-primary); - /* backdrop-filter: blur(var(--tile-glass-blur)) saturate(var(--tile-glass-saturate)); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - transition: - transform var(--timing-medium) var(--easing-standard), + transition: transform var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard), box-shadow var(--timing-medium) var(--easing-standard), background var(--timing-medium) var(--easing-standard); overflow: hidden; - /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); will-change: transform, filter; isolation: isolate; @@ -6967,7 +5726,6 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { transition: opacity 0.3s ease; pointer-events: none; } -/* Subtle inner highlight for glass edge */ .card--tile::after { content: ''; position: absolute; @@ -6979,20 +5737,17 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { .card--tile:hover::before { opacity: 1; } -/* Focus states for accessibility */ .card--tile:focus-within { outline: 2px solid var(--color-brand); outline-offset: 2px; transform: var(--transform-lift-medium); } -/* Tile content spacing */ .card--tile .space-y-3 > * + * { margin-top: 0.75rem; } .card--tile .space-y-2 > * + * { margin-top: 0.5rem; } -/* Tile links - ensure they take full space */ .card--tile a { display: block; color: inherit; @@ -7003,7 +5758,6 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { .card--tile a:hover { color: inherit; } -/* Tile headers */ .card--tile h3 { color: var(--color-text-primary); font-weight: 600; @@ -7014,19 +5768,16 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { .card--tile:hover h3 { color: var(--color-brand); } -/* Tile descriptions */ .card--tile p { color: var(--color-text-secondary); line-height: 1.5; font-size: 0.875rem; } -/* Tile icons */ .card--tile .icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; - transition: - filter var(--timing-fast) var(--easing-standard), + transition: filter var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); filter: brightness(0.8); } @@ -7034,7 +5785,6 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { filter: brightness(1); transform: scale(1.05); } -/* Tile tag/badge styles */ .card--tile .inline-block { background-color: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); @@ -7042,8 +5792,7 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { font-size: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 9999px; - transition: - filter var(--timing-fast) var(--easing-standard), + transition: filter var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); display: inline-block; text-decoration: none; @@ -7054,28 +5803,24 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { color: var(--color-text-inverse); transform: var(--transform-lift-subtle); } -/* Responsive adjustments */ @media (max-width: 768px) { .card--tile { margin-bottom: 1rem; } - .card--tile:hover { transform: var(--transform-lift-medium); } } -/* Grid layout enhancements - simplified for child links component */ .grid .card--tile { height: 100%; } -/* Dark mode enhancements */ .dark .card--tile { border-color: var(--color-border-secondary); - /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); */ box-shadow: var(--glass-shadow); } -.dark .card--tile:hover { box-shadow: var(--glass-shadow); } -/* Animation improvements */ +.dark .card--tile:hover { + box-shadow: var(--glass-shadow); +} .card--tile { animation: card-tile-enter 0.4s ease-out; animation-fill-mode: both; @@ -7090,16 +5835,25 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { transform: translateY(0) scale(1); } } -/* Stagger animation for grids */ -.grid .card--tile:nth-child(1) { animation-delay: 0s; } -.grid .card--tile:nth-child(2) { animation-delay: 0.1s; } -.grid .card--tile:nth-child(3) { animation-delay: 0.2s; } -.grid .card--tile:nth-child(4) { animation-delay: 0.3s; } -.grid .card--tile:nth-child(5) { animation-delay: 0.4s; } -.grid .card--tile:nth-child(6) { animation-delay: 0.5s; } -/* Child Links Component - Flexbox layout approach */ +.grid .card--tile:nth-child(1) { + animation-delay: 0s; +} +.grid .card--tile:nth-child(2) { + animation-delay: 0.1s; +} +.grid .card--tile:nth-child(3) { + animation-delay: 0.2s; +} +.grid .card--tile:nth-child(4) { + animation-delay: 0.3s; +} +.grid .card--tile:nth-child(5) { + animation-delay: 0.4s; +} +.grid .card--tile:nth-child(6) { + animation-delay: 0.5s; +} .child-links-container { - /* Position directly beneath description with consistent spacing */ margin-top: 0.75rem; padding-top: 0; } @@ -7140,18 +5894,16 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { outline: 2px solid var(--color-brand); outline-offset: 2px; } -/* Simplest approach: Main link fills most space, child links follow naturally */ .grid .tile { display: flex; flex-direction: column; position: relative; } .grid .tile > a { - /* Main link fills available space for maximum clickability */ flex: 1; display: flex; flex-direction: column; - margin-bottom: 0.75rem; /* Space for child links */ + margin-bottom: 0.75rem; } .grid .tile .space-y-3 { display: flex; @@ -7159,16 +5911,13 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { height: 100%; } .grid .tile .space-y-3 > p { - /* Description takes only the space it needs */ flex: 0 0 auto; } -/* Child links sit naturally after main content area */ .grid .tile .child-links-container { flex: 0 0 auto; margin-top: 0; padding-top: 0; } -/* Dark mode support */ .dark .child-link-pill { border-color: var(--color-border-secondary); background-color: var(--color-surface); @@ -7178,29 +5927,40 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { color: var(--color-text-inverse); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } -/* Responsive adjustments */ @media (max-width: 768px) { .child-links-container { padding-top: 0.5rem; } - .child-link-pill { font-size: 0.7rem; padding: 0.2rem 0.6rem; } } -/* Animation for child links appearance */ .child-link-item { animation: child-link-appear 0.3s ease-out; animation-fill-mode: both; } -.child-link-item:nth-child(1) { animation-delay: 0.1s; } -.child-link-item:nth-child(2) { animation-delay: 0.15s; } -.child-link-item:nth-child(3) { animation-delay: 0.2s; } -.child-link-item:nth-child(4) { animation-delay: 0.25s; } -.child-link-item:nth-child(5) { animation-delay: 0.3s; } -.child-link-item:nth-child(6) { animation-delay: 0.35s; } -.child-link-item:nth-child(7) { animation-delay: 0.4s; } +.child-link-item:nth-child(1) { + animation-delay: 0.1s; +} +.child-link-item:nth-child(2) { + animation-delay: 0.15s; +} +.child-link-item:nth-child(3) { + animation-delay: 0.2s; +} +.child-link-item:nth-child(4) { + animation-delay: 0.25s; +} +.child-link-item:nth-child(5) { + animation-delay: 0.3s; +} +.child-link-item:nth-child(6) { + animation-delay: 0.35s; +} +.child-link-item:nth-child(7) { + animation-delay: 0.4s; +} @keyframes child-link-appear { from { opacity: 0; @@ -7211,80 +5971,30 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { transform: translateY(0) scale(1); } } -/* Cards Component - Resource cards, content metadata, and generic card styles */ -/* Base Card Styles */ -.card { +html:not(.no-transitions) .card { position: relative; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); border-radius: var(--radius-card); - /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-medium) var(--easing-standard), + transition: transform var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); + box-shadow var(--timing-medium) var(--easing-standard), + background-color var(--timing-medium) var(--easing-standard), + color var(--timing-medium) var(--easing-standard); overflow: hidden; - /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); } -.card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} -/* Enhanced hover states - Use architectural classes instead */ .card { - /* Apply .interact-dramatic class to card elements in HTML instead of this CSS */ -} -.card:hover::before { - opacity: 1; -} -/* Resource Card Styles */ - - html:not(.no-transitions) .card--resource { - transition: - background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard); - } -.card--resource { - /* Use .interact-medium or .interact-dramatic class instead of custom transforms */ position: relative; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); border-radius: var(--radius-card); - /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); overflow: hidden; - /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow) + box-shadow: var(--glass-shadow); } -.card--resource::before { +.card::before { content: ''; position: absolute; top: 0; @@ -7301,79 +6011,17 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { transition: opacity 0.3s ease; pointer-events: none; } -.card--resource { - /* Apply .interact-dramatic class to card elements in HTML instead of this CSS */ -} -.card--resource:hover::before { +.card:hover::before { opacity: 1; } -.card--resource:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - transform: var(--transform-lift-medium); -} -@media (max-width: 768px) { - - .card--resource:hover { - transform: var(--transform-lift-medium); - } -} -.dark .card--resource { - border-color: var(--color-border-secondary); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} -.dark .card--resource:hover { - box-shadow: - 0 12px 28px rgba(0, 0, 0, 0.4), - 0 0 20px rgba(var(--color-brand-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} .card--resource { - animation: card-enter 0.4s ease-out; - animation-fill-mode: both; -} -.card-grid .card--resource { - height: 100%; - display: flex; - flex-direction: column; -} -.card-grid .card--resource:nth-child(1) { animation-delay: 0s; } -.card-grid .card--resource:nth-child(2) { animation-delay: 0.1s; } -.card-grid .card--resource:nth-child(3) { animation-delay: 0.2s; } -.card-grid .card--resource:nth-child(4) { animation-delay: 0.3s; } -.card--resource:has(.card__image) { - padding-top: 0; -} -.card--resource:has(.card__image) .card__content { - padding-top: 1.5rem; -} -.card--resource:has(.card__icon) .card__title { - margin-left: 3rem; position: relative; -} -.card--resource:has(.card__icon) .card__content { - padding-left: 1rem; -} -.card--resource:has(.card__actions) { - padding-bottom: 1rem; -} -.card--resource:has(.card__actions) .card__content { - padding-bottom: 2rem; -} -.card--resource:has(a:hover) { - transform: var(--transform-lift-and-scale); - /* box-shadow: - 0 12px 30px rgba(0, 0, 0, 0.12), - 0 4px 16px rgba(0, 0, 0, 0.08); */ - box-shadow: - var(--elevation-hover-2), - var(--elevation-brand-subtle); - border-color: rgba(var(--color-brand-rgb), 0.3); -} -.card--resource { - /* padding: 1.5rem; */ + background: var(--glass-bg); + border-radius: var(--radius-card); + border: 1px solid var(--glass-border-color); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + overflow: hidden; + box-shadow: var(--glass-shadow); padding: 1rem; margin-bottom: 1rem; } @@ -7398,9 +6046,7 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { color: var(--color-brand); text-decoration: none; font-weight: 500; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); position: relative; @@ -7413,7 +6059,6 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { width: 0; height: 2px; background: var(--color-brand); - /* transition: width 0.3s ease; */ transition: width var(--timing-medium) var(--easing-standard); } .card--resource a:hover::after { @@ -7424,9 +6069,7 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { height: 1.5rem; margin-bottom: 0.75rem; filter: brightness(0.8); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); } @@ -7434,26 +6077,16 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { filter: brightness(1); transform: scale(1.05); } -/* Content Metadata Styles */ .content-metadata { - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); border-radius: var(--radius-card); - /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); padding: 1rem 1.25rem; font-size: 0.875rem; color: var(--color-text-secondary); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: - 0 2px 8px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); display: flex; @@ -7479,123 +6112,14 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { .content-metadata span { white-space: nowrap; } -/* Article Card Styles */ - - html:not(.no-transitions) .article-card { - transition: - background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard); - } .article-card { - /* Use .interact-medium or .interact-dramatic class instead of custom transforms */ position: relative; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); border-radius: var(--radius-card); - /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); overflow: hidden; - /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow) -} -.article-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} -.article-card { - /* Apply .interact-dramatic class to card elements in HTML instead of this CSS */ -} -.article-card:hover::before { - opacity: 1; -} -.article-card:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - transform: var(--transform-lift-medium); -} -@media (max-width: 768px) { - - .article-card:hover { - transform: var(--transform-lift-medium); - } -} -.dark .article-card { - border-color: var(--color-border-secondary); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} -.dark .article-card:hover { - box-shadow: - 0 12px 28px rgba(0, 0, 0, 0.4), - 0 0 20px rgba(var(--color-brand-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} -.article-card { - animation: card-enter 0.4s ease-out; - animation-fill-mode: both; -} -.card-grid .article-card { - height: 100%; - display: flex; - flex-direction: column; -} -.card-grid .article-card:nth-child(1) { animation-delay: 0s; } -.card-grid .article-card:nth-child(2) { animation-delay: 0.1s; } -.card-grid .article-card:nth-child(3) { animation-delay: 0.2s; } -.card-grid .article-card:nth-child(4) { animation-delay: 0.3s; } -.article-card:has(.card__image) { - padding-top: 0; -} -.article-card:has(.card__image) .card__content { - padding-top: 1.5rem; -} -.article-card:has(.card__icon) .card__title { - margin-left: 3rem; - position: relative; -} -.article-card:has(.card__icon) .card__content { - padding-left: 1rem; -} -.article-card:has(.card__actions) { - padding-bottom: 1rem; -} -.article-card:has(.card__actions) .card__content { - padding-bottom: 2rem; -} -.article-card:has(a:hover) { - transform: var(--transform-lift-and-scale); - /* box-shadow: - 0 12px 30px rgba(0, 0, 0, 0.12), - 0 4px 16px rgba(0, 0, 0, 0.08); */ - box-shadow: - var(--elevation-hover-2), - var(--elevation-brand-subtle); - border-color: rgba(var(--color-brand-rgb), 0.3); -} -.article-card { + box-shadow: var(--glass-shadow); padding: 1.5rem; margin-bottom: 1.5rem; display: flex; @@ -7613,9 +6137,7 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { height: 2rem; flex-shrink: 0; filter: brightness(0.8); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); } @@ -7651,7 +6173,6 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { padding-top: 1rem; border-top: 1px solid var(--color-border-primary); } -/* Interactive Card States */ .card-interactive { cursor: pointer; -webkit-user-select: none; @@ -7661,7 +6182,6 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { .card-interactive:active { transform: var(--transform-press-down); } -/* Focus states for accessibility */ .card:focus-within, .resource-card:focus-within, .article-card:focus-within { @@ -7669,45 +6189,38 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { outline-offset: 2px; transform: var(--transform-lift-medium); } -/* Responsive adjustments */ @media (max-width: 768px) { .resource-card, .article-card { padding: 1rem; margin-bottom: 1rem; } - .card:hover, .resource-card:hover, .article-card:hover { transform: var(--transform-lift-medium); } - .content-metadata { flex-direction: column; align-items: flex-start; gap: 0.5rem; } } -/* Dark mode enhancements */ .dark .card, .dark .resource-card, .dark .content-metadata, .dark .article-card { border-color: var(--color-border-secondary); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.3), + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .dark .card:hover, .dark .resource-card:hover, .dark .article-card:hover { - box-shadow: - 0 12px 28px rgba(0, 0, 0, 0.4), + box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--color-brand-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } -/* Animation improvements */ .card, .resource-card, .article-card { @@ -7724,7 +6237,6 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { transform: translateY(0) scale(1); } } -/* Card grid layouts */ .card-grid { display: grid; gap: 1.5rem; @@ -7736,28 +6248,32 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { display: flex; flex-direction: column; } -/* Stagger animation for card grids */ .card-grid .card:nth-child(1), .card-grid .resource-card:nth-child(1), -.card-grid .article-card:nth-child(1) { animation-delay: 0s; } +.card-grid .article-card:nth-child(1) { + animation-delay: 0s; +} .card-grid .card:nth-child(2), .card-grid .resource-card:nth-child(2), -.card-grid .article-card:nth-child(2) { animation-delay: 0.1s; } +.card-grid .article-card:nth-child(2) { + animation-delay: 0.1s; +} .card-grid .card:nth-child(3), .card-grid .resource-card:nth-child(3), -.card-grid .article-card:nth-child(3) { animation-delay: 0.2s; } +.card-grid .article-card:nth-child(3) { + animation-delay: 0.2s; +} .card-grid .card:nth-child(4), .card-grid .resource-card:nth-child(4), -.card-grid .article-card:nth-child(4) { animation-delay: 0.3s; } -/* :has() Content-Aware Card Layouts */ -/* Cards with images get different padding */ +.card-grid .article-card:nth-child(4) { + animation-delay: 0.3s; +} .card:has(.card__image) { padding-top: 0; } .card:has(.card__image) .card__content { padding-top: 1.5rem; } -/* Cards with icons get enhanced layout */ .card:has(.card__icon) .card__title { margin-left: 3rem; position: relative; @@ -7765,7 +6281,6 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { .card:has(.card__icon) .card__content { padding-left: 1rem; } -/* Resource cards with descriptions get enhanced spacing */ .card--resource:has(.card__description) { min-height: 180px; } @@ -7774,43 +6289,28 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { border-top: 1px solid var(--color-border-primary); padding-top: 1rem; } -/* Cards with actions get enhanced bottom padding */ .card:has(.card__actions) { padding-bottom: 1rem; } .card:has(.card__actions) .card__content { padding-bottom: 2rem; } -/* Interactive card states based on content */ .card:has(a:hover) { transform: var(--transform-lift-and-scale); - /* box-shadow: - 0 12px 30px rgba(0, 0, 0, 0.12), - 0 4px 16px rgba(0, 0, 0, 0.08); */ - box-shadow: - var(--elevation-hover-2), + box-shadow: var(--elevation-hover-2), var(--elevation-brand-subtle); border-color: rgba(var(--color-brand-rgb), 0.3); } -/* Glossary Component - Enhanced UX for glossary entries and navigation */ -/* Base Glossary Entry Styles */ .glossary-entry { position: relative; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); border-radius: var(--radius-xl); - /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-medium) var(--easing-standard), + transition: transform var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard), box-shadow var(--timing-medium) var(--easing-standard); overflow: hidden; - /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); margin-bottom: 1rem; } @@ -7831,21 +6331,17 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { transition: opacity 0.3s ease; pointer-events: none; } -/* Enhanced hover states */ .glossary-entry:hover { border-color: var(--color-brand); - /* box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 0 20px rgba(var(--color-brand-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15); */ } .glossary-entry:hover::before { opacity: 1; } -/* Focus states for accessibility */ .glossary-entry:focus-within { outline: 2px solid var(--color-brand); outline-offset: 2px; transform: translateY(-2px); } -/* Glossary entry content */ .glossary-entry a { display: block; color: inherit; @@ -7883,7 +6379,6 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { .glossary-entry:hover h2::after { width: 100%; } -/* Glossary entry descriptions */ .glossary-entry p { color: var(--color-text-secondary); line-height: 1.6; @@ -7894,7 +6389,6 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { .glossary-entry:hover p { color: var(--color-text-primary); } -/* Glossary letter headers */ .glossary-entry + h1 { color: var(--color-text-primary); font-size: 2rem; @@ -7907,9 +6401,7 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { .glossary-entry + h1 a { color: inherit; text-decoration: none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); } @@ -7917,7 +6409,6 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { color: var(--color-brand); transform: translateX(4px); } -/* First letter styling for glossary headers */ h1[id] { color: var(--color-text-primary); font-size: 2rem; @@ -7931,9 +6422,7 @@ h1[id] { h1[id] a { color: inherit; text-decoration: none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); display: inline-block; @@ -7956,40 +6445,32 @@ h1[id]::before { transparent 100% ); } -/* Glossary container */ #enteries-container { padding: 1rem 0; } -/* Responsive adjustments */ @media (max-width: 768px) { .glossary-entry { margin-bottom: 1rem; padding: 1rem; } - .glossary-entry:hover { transform: translateY(-2px); } - h1[id] { font-size: 1.5rem; margin: 2rem 0 1rem 0; } } -/* Dark mode enhancements */ .dark .glossary-entry { border-color: var(--color-border-secondary); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.3), + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .dark .glossary-entry:hover { - box-shadow: - 0 12px 28px rgba(0, 0, 0, 0.4), + box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--color-brand-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } -/* Animation improvements */ .glossary-entry { animation: glossary-enter 0.4s ease-out; animation-fill-mode: both; @@ -8004,21 +6485,19 @@ h1[id]::before { transform: translateY(0) scale(1); } } -/* Stagger animation for multiple entries */ -.glossary-entry:nth-child(odd) { animation-delay: 0s; } -.glossary-entry:nth-child(even) { animation-delay: 0.1s; } -/* Glossary navigation enhancements */ +.glossary-entry:nth-child(odd) { + animation-delay: 0s; +} +.glossary-entry:nth-child(even) { + animation-delay: 0.1s; +} .glossary-nav { position: sticky; top: 2rem; - /* background: var(--color-surface); */ background: var(--glass-bg); border-radius: var(--radius-xl); padding: 1rem; - /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); margin-bottom: 2rem; } @@ -8029,9 +6508,7 @@ h1[id]::before { border-radius: var(--radius-lg); color: var(--color-text-secondary); text-decoration: none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); font-weight: 500; @@ -8041,8 +6518,6 @@ h1[id]::before { color: var(--color-text-inverse); transform: translateY(-1px); } -/* Quicklinks Component - Enhanced UX for quickstart/feature tiles */ -/* Base Quicklinks Container */ .quicklinks { margin-bottom: 1.5rem; position: relative; @@ -8050,24 +6525,19 @@ h1[id]::before { .quicklinks--home { padding-bottom: 1rem; } -/* Quicklinks Grid */ .quicklinks__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; - - /* Responsive grid */ @media (min-width: 768px) { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } - @media (min-width: 1280px) { grid-template-columns: repeat(2, 1fr); gap: 2rem; } } -/* Quicklinks Item - Compact distinctive call-to-action card design */ .quicklinks__item { position: relative; padding: 1.25rem; @@ -8075,8 +6545,6 @@ h1[id]::before { flex-direction: column; gap: 0.75rem; min-height: 160px; - - /* Distinctive card styling - not like regular tiles */ background: linear-gradient( 145deg, var(--color-surface) 0%, @@ -8085,21 +6553,12 @@ h1[id]::before { ); border: 2px solid var(--color-border-primary); border-radius: var(--radius-card); - /* box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.06), - 0 1px 4px rgba(0, 0, 0, 0.04), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: - var(--elevation-2), + box-shadow: var(--elevation-2), var(--elevation-outline), inset 0 1px 0 rgba(255, 255, 255, 0.1); - - /* Accent border - distinctive feature */ border-left: 3px solid var(--color-brand); - - /* Optimized transition for performance */ transition: var(--transition-interactive); - overflow: hidden; /* Essential for ripple effects */ + overflow: hidden; cursor: pointer; } .quicklinks__item::before { @@ -8111,7 +6570,6 @@ h1[id]::before { bottom: 0; background: rgba(var(--color-brand-rgb), 0.06); opacity: 0; - /* transition: opacity 0.2s ease; */ transition: opacity var(--timing-fast) var(--easing-standard); pointer-events: none; } @@ -8119,26 +6577,19 @@ h1[id]::before { transform: translateY(-3px); border-color: var(--color-brand); border-left-color: var(--color-brand-2); - /* box-shadow: - 0 8px 20px rgba(0, 0, 0, 0.12), - 0 4px 8px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); */ - box-shadow: - var(--elevation-hover-2), + box-shadow: var(--elevation-hover-2), var(--elevation-brand-subtle), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .quicklinks__item:hover::before { opacity: 1; } -/* Quicklinks Header */ .quicklinks__header { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.25rem; } -/* Quicklinks Icon - Compact design */ .quicklinks__icon { width: 1.5rem; height: 1.5rem; @@ -8152,9 +6603,7 @@ h1[id]::before { border-radius: var(--radius-lg); border: 1px solid rgba(var(--color-brand-rgb), 0.2); filter: brightness(0.9); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), + transition: transform var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard); margin-top: 0; @@ -8169,12 +6618,10 @@ h1[id]::before { filter: brightness(1) saturate(1.2); transform: scale(1.05); } -/* Target the actual SVG/image inside the icon container */ .quicklinks__item:hover .quicklinks__icon img, .quicklinks__item:hover .quicklinks__icon svg { filter: brightness(0) invert(1); } -/* Quicklinks Title - Compact but prominent */ .quicklinks__title { color: var(--color-text-primary); font-size: 1.125rem; @@ -8182,7 +6629,6 @@ h1[id]::before { font-family: var(--font-brand); line-height: 1.3; margin: 0; - /* transition: color 0.2s ease; */ transition: color var(--timing-fast) var(--easing-standard); position: relative; letter-spacing: -0.025em; @@ -8199,27 +6645,23 @@ h1[id]::before { height: 2px; background: var(--color-brand); border-radius: 1px; - /* transition: width 0.2s ease; */ transition: width var(--timing-fast) var(--easing-standard); } .quicklinks__item:hover .quicklinks__title::after { width: 100%; } -/* Quicklinks Description */ .quicklinks__description { color: var(--color-text-secondary); font-size: 0.8125rem; line-height: 1.5; margin: 0; flex: 1; - /* transition: color 0.2s ease; */ transition: color var(--timing-fast) var(--easing-standard); font-family: var(--font-body); } .quicklinks__item:hover .quicklinks__description { color: var(--color-text-primary); } -/* Quicklinks Actions Container */ .quicklinks__actions { display: flex; flex-wrap: wrap; @@ -8227,13 +6669,11 @@ h1[id]::before { margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--color-border-primary); - /* transition: border-color 0.2s ease; */ transition: border-color var(--timing-fast) var(--easing-standard); } .quicklinks__item:hover .quicklinks__actions { border-color: var(--color-brand); } -/* Quicklinks Action Links - Compact CTA buttons */ .quicklinks__link { position: relative; display: inline-flex; @@ -8250,57 +6690,38 @@ h1[id]::before { font-family: var(--font-brand); text-transform: uppercase; letter-spacing: 0.25px; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), + transition: transform var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard); - overflow: hidden; /* Enable ripple effects */ + overflow: hidden; cursor: pointer; - /* box-shadow: 0 2px 6px rgba(var(--color-brand-rgb), 0.25); */ box-shadow: var(--elevation-brand-subtle); } .quicklinks__link:hover { background: var(--color-brand-2); border-color: var(--color-brand-2); transform: var(--transform-lift-subtle); - /* box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.35); */ box-shadow: var(--elevation-brand-medium); } .quicklinks__link:active { transform: translateY(0); } -/* Enhanced focus states for accessibility */ .quicklinks__link:focus { outline: 2px solid transparent; outline-offset: 2px; - /* box-shadow: - 0 2px 6px rgba(var(--color-brand-rgb), 0.25), - 0 0 0 2px var(--color-surface), - 0 0 0 4px var(--color-brand); */ /* Inverted double focus ring */ - box-shadow: - var(--elevation-brand-subtle), + box-shadow: var(--elevation-brand-subtle), 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-brand); } -/* Enhanced focus for quicklinks items */ .quicklinks__item:focus { outline: 2px solid transparent; outline-offset: 2px; - /* box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.06), - 0 1px 4px rgba(0, 0, 0, 0.04), - inset 0 1px 0 rgba(255, 255, 255, 0.1), - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.2); */ /* Double focus ring */ - box-shadow: - var(--elevation-2), + box-shadow: var(--elevation-2), var(--elevation-outline), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.2); } -/* External link indicator */ .quicklinks__link[href^="http"]::after { content: '↗'; margin-left: 0.25rem; @@ -8311,42 +6732,34 @@ h1[id]::before { .quicklinks__link[href^="http"]:hover::after { opacity: 1; } -/* Responsive adjustments */ @media (max-width: 768px) { .quicklinks__grid { gap: 1.25rem; } - .quicklinks__item { padding: 1rem; min-height: 140px; } - .quicklinks__item:hover { transform: var(--transform-lift-medium); } - .quicklinks__icon { width: 1.375rem; height: 1.375rem; padding: 0.25rem; } - .quicklinks__title { font-size: 1rem; font-weight: 700; } - .quicklinks__description { font-size: 0.75rem; } - .quicklinks__actions { flex-direction: column; gap: 0.375rem; padding-top: 0.375rem; } - .quicklinks__link { justify-content: center; text-align: center; @@ -8360,23 +6773,19 @@ h1[id]::before { min-height: 120px; gap: 0.5rem; } - .quicklinks__header { gap: 0.375rem; margin-bottom: 0.125rem; } - .quicklinks__icon { width: 1.25rem; height: 1.25rem; padding: 0.1875rem; } - .quicklinks__title { font-size: 0.9375rem; } } -/* Dark mode enhancements */ .dark .quicklinks__item { background: linear-gradient( 145deg, @@ -8385,24 +6794,13 @@ h1[id]::before { rgba(var(--color-bg-secondary), 0.7) 100% ); border-color: var(--color-border-secondary); - /* box-shadow: - 0 8px 24px rgba(0, 0, 0, 0.3), - 0 2px 8px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.05); */ - box-shadow: - var(--elevation-8), + box-shadow: var(--elevation-8), var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .dark .quicklinks__item:hover { border-color: var(--color-brand); - /* box-shadow: - 0 25px 50px rgba(0, 0, 0, 0.4), - 0 8px 32px rgba(var(--color-brand-rgb), 0.3), - 0 0 40px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: - var(--elevation-hover-4), + box-shadow: var(--elevation-hover-4), var(--elevation-brand-medium), var(--elevation-brand-glow), inset 0 1px 0 rgba(255, 255, 255, 0.1); @@ -8423,12 +6821,10 @@ h1[id]::before { ); border-color: var(--color-brand); } -/* Target the actual SVG/image inside the icon container for dark mode */ .dark .quicklinks__item:hover .quicklinks__icon img, .dark .quicklinks__item:hover .quicklinks__icon svg { filter: brightness(0) invert(1); } -/* Animation improvements - simplified for performance */ .quicklinks__item { animation: quicklinks-enter 0.3s ease-out; animation-fill-mode: both; @@ -8443,12 +6839,18 @@ h1[id]::before { transform: translateY(0); } } -/* Stagger animation for multiple items */ -.quicklinks__item:nth-child(1) { animation-delay: 0s; } -.quicklinks__item:nth-child(2) { animation-delay: 0.1s; } -.quicklinks__item:nth-child(3) { animation-delay: 0.2s; } -.quicklinks__item:nth-child(4) { animation-delay: 0.3s; } -/* Loading state placeholders */ +.quicklinks__item:nth-child(1) { + animation-delay: 0s; +} +.quicklinks__item:nth-child(2) { + animation-delay: 0.1s; +} +.quicklinks__item:nth-child(3) { + animation-delay: 0.2s; +} +.quicklinks__item:nth-child(4) { + animation-delay: 0.3s; +} .quicklinks--loading .quicklinks__item { background: linear-gradient(90deg, var(--color-surface) 25%, @@ -8458,10 +6860,13 @@ h1[id]::before { animation: quicklinks-loading 2s infinite; } @keyframes quicklinks-loading { - 0% { background-position: 200% 0; } - 100% { background-position: -200% 0; } + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } } -/* Print styles */ @media print { .quicklinks__item { -moz-column-break-inside: avoid; @@ -8469,20 +6874,16 @@ h1[id]::before { border: 1px solid #ccc; margin-bottom: 1rem; } - .quicklinks__link { color: #000 !important; text-decoration: underline; } } -/* Next-Prev Navigation Component - Enhanced UX for page navigation */ -/* Base Navigation Container */ [data-component="article-next-prev"] { margin-top: 2rem; margin-bottom: 1rem; position: relative; } -/* Next-Prev Navigation Link Base Styles - Scoped to avoid topbar conflicts */ [data-component="article-next-prev"] .article-next-prev__link { position: relative; display: flex; @@ -8497,15 +6898,12 @@ h1[id]::before { border-radius: 0.75rem; color: var(--color-text-primary); text-decoration: none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), + transition: transform var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard); overflow: hidden; min-height: 4rem; - box-shadow: - 0 2px 8px rgba(0, 0, 0, 0.04), + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.1); } [data-component="article-next-prev"] .article-next-prev__link::before { @@ -8520,12 +6918,10 @@ h1[id]::before { transition: opacity 0.2s ease; pointer-events: none; } -/* Navigation Link Hover States */ [data-component="article-next-prev"] .article-next-prev__link:hover { border-color: var(--color-brand); transform: translateY(-2px); - box-shadow: - 0 8px 20px rgba(0, 0, 0, 0.1), + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(var(--color-brand-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15); } @@ -8540,11 +6936,9 @@ h1[id]::before { color: var(--color-brand); transform: translateX(2px); } -/* Previous link - align icon to left, slide left on hover */ [data-component="article-next-prev"] .article-next-prev__link:hover:has(svg[class*="mr-"]) svg { transform: translateX(-2px); } -/* Navigation Link Typography */ [data-component="article-next-prev"] .article-next-prev__link .text-xs { color: var(--color-text-tertiary); font-size: 0.75rem; @@ -8554,7 +6948,6 @@ h1[id]::before { margin-bottom: 0.25rem; transition: color 0.2s ease; } -/* Target the title content specifically, avoiding Tailwind utility classes */ [data-component="article-next-prev"] .article-next-prev__link div > div[class*="font-medium"], [data-component="article-next-prev"] .article-next-prev__title { color: var(--color-text-primary) !important; @@ -8567,17 +6960,13 @@ h1[id]::before { [data-component="article-next-prev"] .article-next-prev__link:hover .text-xs { color: var(--color-text-secondary); } -/* SVG Icons */ [data-component="article-next-prev"] .article-next-prev__link svg { color: var(--color-text-secondary); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), + transition: transform var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard); flex-shrink: 0; } -/* Disabled Navigation Links */ [data-component="article-next-prev"] .article-next-prev__link--disabled { background: linear-gradient( 135deg, @@ -8598,7 +6987,6 @@ h1[id]::before { [data-component="article-next-prev"] .article-next-prev__link--disabled div > div[class*="font-medium"] { color: var(--color-text-tertiary) !important; } -/* Focus States for Accessibility */ [data-component="article-next-prev"] .article-next-prev__link:focus { outline: 2px solid var(--color-brand); outline-offset: 2px; @@ -8607,20 +6995,15 @@ h1[id]::before { outline: 2px solid var(--color-brand); outline-offset: 2px; } -/* Enhanced Visual Hierarchy */ [data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"] { border-left: 3px solid transparent; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), + transition: transform var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard), border-left-color var(--timing-fast) var(--easing-standard); } [data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"] { border-right: 3px solid transparent; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), + transition: transform var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard), border-right-color var(--timing-fast) var(--easing-standard); } @@ -8630,26 +7013,21 @@ h1[id]::before { [data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"]:hover { border-right-color: var(--color-brand); } -/* Responsive Adjustments */ @media (max-width: 768px) { [data-component="article-next-prev"] { margin-top: 1.5rem; } - [data-component="article-next-prev"] .article-next-prev__link { padding: 1rem; min-height: 3.5rem; } - [data-component="article-next-prev"] .article-next-prev__link div > div[class*="font-medium"], [data-component="article-next-prev"] .article-next-prev__title { font-size: 0.875rem !important; } - [data-component="article-next-prev"] .article-next-prev__link .text-xs { font-size: 0.6875rem; } - [data-component="article-next-prev"] .article-next-prev__link svg { width: 1rem; height: 1rem; @@ -8660,34 +7038,28 @@ h1[id]::before { flex-direction: column; gap: 0.75rem; } - [data-component="article-next-prev"] .article-next-prev__link { padding: 0.875rem; min-height: 3rem; flex: none; } - [data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"] { border-left: none; border-top: 3px solid transparent; } - [data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"] { border-right: none; border-bottom: 3px solid transparent; } - [data-component="article-next-prev"] .nav-link[aria-label*="Previous"]:hover { border-left-color: transparent; border-top-color: var(--color-brand); } - [data-component="article-next-prev"] .nav-link[aria-label*="Next"]:hover { border-right-color: transparent; border-bottom-color: var(--color-brand); } } -/* Dark Mode Enhancements */ .dark [data-component="article-next-prev"] .article-next-prev__link { background: linear-gradient( 135deg, @@ -8695,13 +7067,11 @@ h1[id]::before { rgba(var(--color-bg-secondary), 0.6) 100% ); border-color: var(--color-border-secondary); - box-shadow: - 0 2px 8px rgba(0, 0, 0, 0.2), + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .dark [data-component="article-next-prev"] .article-next-prev__link:hover { - box-shadow: - 0 8px 20px rgba(0, 0, 0, 0.3), + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(var(--color-brand-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } @@ -8713,7 +7083,6 @@ h1[id]::before { ); border-color: rgba(var(--color-border-secondary), 0.5); } -/* Animation Enhancements */ [data-component="article-next-prev"] .article-next-prev__link { animation: nav-link-enter 0.3s ease-out; animation-fill-mode: both; @@ -8728,10 +7097,12 @@ h1[id]::before { transform: translateY(0); } } -/* Stagger animation for prev/next pair */ -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"] { animation-delay: 0s; } -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"] { animation-delay: 0.1s; } -/* Loading state placeholders */ +[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"] { + animation-delay: 0s; +} +[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"] { + animation-delay: 0.1s; +} [data-component="article-next-prev"] .article-next-prev__link--loading { background: linear-gradient(90deg, var(--color-surface) 25%, @@ -8741,25 +7112,23 @@ h1[id]::before { animation: nav-link-loading 2s infinite; } @keyframes nav-link-loading { - 0% { background-position: 200% 0; } - 100% { background-position: -200% 0; } + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } } -/* Print styles */ @media print { [data-component="article-next-prev"] .article-next-prev__link { border: 1px solid #ccc; box-shadow: none; background: white; } - [data-component="article-next-prev"] .nav-link svg { display: none; } } -/* Tutorial Component - Enhanced tutorial system with modern UX patterns */ -/* ========================================================================== - Tutorial Overview Components - ========================================================================== */ .tutorial-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); @@ -8777,14 +7146,11 @@ h1[id]::before { border-radius: 1rem; border: 1px solid var(--color-border-primary); padding: 2rem; - /* ✅ FIXED: Specific properties instead of transition: all */ - transition: - transform var(--timing-medium) var(--easing-standard), + transition: transform var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard), box-shadow var(--timing-medium) var(--easing-standard); overflow: hidden; - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.05), + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .tutorial-card::before { @@ -8807,8 +7173,7 @@ h1[id]::before { .tutorial-card:hover { transform: translateY(-8px); border-color: var(--color-brand); - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.15), + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 20px rgba(var(--color-brand-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15); } @@ -8850,7 +7215,6 @@ h1[id]::before { padding-top: 1rem; border-top: 1px solid var(--color-border-primary); } -/* Tutorial Badges */ .tutorial-badge { display: inline-flex; align-items: center; @@ -8860,9 +7224,7 @@ h1[id]::before { font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); } @@ -8880,7 +7242,6 @@ h1[id]::before { background: linear-gradient(135deg, var(--color-brand-5) 0%, var(--color-brand-6) 100%); color: var(--color-text-primary); } -/* Tutorial Progress Mini Display */ .tutorial-progress-mini { display: flex; align-items: center; @@ -8913,9 +7274,17 @@ h1[id]::before { animation: progress-shine 2s infinite; } @keyframes progress-shine { - 0% { transform: translateX(-20px); opacity: 0; } - 50% { opacity: 1; } - 100% { transform: translateX(20px); opacity: 0; } + 0% { + transform: translateX(-20px); + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + transform: translateX(20px); + opacity: 0; + } } .progress-text { font-size: 0.875rem; @@ -8923,7 +7292,6 @@ h1[id]::before { color: var(--color-text-secondary); white-space: nowrap; } -/* Tutorial Actions */ .tutorial-actions { display: flex; justify-content: space-between; @@ -8950,9 +7318,6 @@ h1[id]::before { fill: var(--color-brand); transform: scale(1.1); } -/* ========================================================================== - Compact Progress Components (Primary) - ========================================================================== */ .tutorial-progress-compact { background: var(--color-surface); border-radius: 0.75rem; @@ -9042,9 +7407,7 @@ h1[id]::before { border: 1px solid var(--color-border-primary); background: var(--color-surface); color: var(--color-text-secondary); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard); cursor: pointer; @@ -9059,7 +7422,6 @@ h1[id]::before { width: 0.875rem; height: 0.875rem; } -/* Compact Progress Bar */ .tutorial-progress-bar { position: relative; margin-bottom: 0.75rem; @@ -9105,9 +7467,7 @@ h1[id]::before { font-size: 0.6875rem; font-weight: 600; text-decoration: none; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), box-shadow var(--timing-fast) var(--easing-standard), @@ -9150,7 +7510,6 @@ h1[id]::before { width: 0.75rem; height: 0.75rem; } -/* Expandable Progress Section */ .tutorial-progress-expanded { border-top: 1px solid var(--color-border-primary); padding-top: 1rem; @@ -9231,7 +7590,6 @@ h1[id]::before { padding: 0.125rem 0.375rem; border-radius: 0.25rem; } -/* Compact Navigation */ .tutorial-compact-nav { display: flex; justify-content: space-between; @@ -9241,10 +7599,6 @@ h1[id]::before { padding-top: 0.75rem; margin-top: 0.75rem; } -/* ========================================================================== - Enhanced Progress Navigation (Legacy) - ========================================================================== */ -/* Legacy Progress Components (for backward compatibility) */ .tutorial-progress { background: var(--color-surface); border-radius: 1rem; @@ -9282,7 +7636,6 @@ h1[id]::before { border-radius: 0.5rem; border: 1px solid var(--color-border-primary); } -/* Progress Track */ .tutorial-progress__track { position: relative; margin: 3rem 0; @@ -9337,7 +7690,6 @@ h1[id]::before { .tutorial-step.disabled:hover { transform: none; } -/* Step Indicators */ .step-indicator { width: 4rem; height: 4rem; @@ -9357,7 +7709,6 @@ h1[id]::before { color: var(--color-text-inverse); box-shadow: 0 4px 15px rgba(var(--color-brand-rgb), 0.3); } -/* Checkmark handled by SVG, no need for ::before content */ .step-icon--current { background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 100%); color: var(--color-text-inverse); @@ -9375,16 +7726,15 @@ h1[id]::before { border-color: var(--color-brand); } @keyframes pulse-gentle { - 0%, 100% { - transform: scale(1); - box-shadow: 0 4px 20px rgba(var(--color-brand-rgb), 0.4), 0 0 0 0 rgba(var(--color-brand-rgb), 0.4); + 0%, 100% { + transform: scale(1); + box-shadow: 0 4px 20px rgba(var(--color-brand-rgb), 0.4), 0 0 0 0 rgba(var(--color-brand-rgb), 0.4); } - 50% { - transform: scale(1.05); - box-shadow: 0 6px 25px rgba(var(--color-brand-rgb), 0.6), 0 0 0 15px rgba(var(--color-brand-rgb), 0); + 50% { + transform: scale(1.05); + box-shadow: 0 6px 25px rgba(var(--color-brand-rgb), 0.6), 0 0 0 15px rgba(var(--color-brand-rgb), 0); } } -/* Step Content */ .step-content { min-height: 80px; display: flex; @@ -9413,7 +7763,6 @@ h1[id]::before { border-radius: 0.375rem; display: inline-block; } -/* Progress Actions */ .tutorial-progress__actions { display: flex; justify-content: space-between; @@ -9423,10 +7772,6 @@ h1[id]::before { border-top: 1px solid var(--color-border-primary); gap: 1rem; } -/* ========================================================================== - Interactive Content Components - ========================================================================== */ -/* Enhanced Code Blocks - Now used by render-codeblock.html */ .code-block-enhanced { background: var(--color-bg-tertiary); border-radius: 0.75rem; @@ -9448,7 +7793,6 @@ h1[id]::before { display: block; overflow-x: auto; } -/* Reduce default code font size; allow override via --code-font-size */ .code-content pre, .code-content code { font-size: var(--code-font-size, 0.875rem); @@ -9478,9 +7822,7 @@ h1[id]::before { } .copy-code { position: relative; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); @@ -9490,7 +7832,6 @@ h1[id]::before { border-color: var(--color-brand); color: var(--color-text-inverse); } -/* Collapsible Sections */ .tutorial-section { border: 1px solid var(--color-border-primary); border-radius: 0.75rem; @@ -9507,9 +7848,7 @@ h1[id]::before { background: none; border: none; cursor: pointer; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard); + transition: background-color var(--timing-fast) var(--easing-standard); text-align: left; } .section-header:hover { @@ -9539,12 +7878,9 @@ h1[id]::before { max-height: 0; opacity: 0; overflow: hidden; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - max-height var(--timing-medium) var(--easing-standard), + transition: max-height var(--timing-medium) var(--easing-standard), opacity var(--timing-medium) var(--easing-standard), padding var(--timing-medium) var(--easing-standard); - /* Tutorial-specific customization */ --collapse-height-expanded: 2500px; --collapse-timing: var(--timing-slow); --collapse-easing: var(--easing-emphasized); @@ -9554,7 +7890,6 @@ h1[id]::before { opacity: 1; padding: 1.5rem; } -/* Step Validation */ .step-validation { background: var(--color-surface); border: 1px solid var(--color-border-primary); @@ -9574,9 +7909,7 @@ h1[id]::before { align-items: center; padding: 0.75rem 0; cursor: pointer; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), padding var(--timing-fast) var(--easing-standard); border-radius: 0.5rem; margin-bottom: 0.5rem; @@ -9607,32 +7940,24 @@ h1[id]::before { cursor: not-allowed; transform: none; } -/* ========================================================================== - Responsive Design - ========================================================================== */ @media (max-width: 1024px) { .tutorial-overview { grid-template-columns: 1fr; gap: 1.5rem; padding: 0 0.5rem; } - .tutorial-card { padding: 1.5rem; } - .tutorial-progress { padding: 1.5rem; } - .tutorial-steps { gap: 0.75rem; } - .tutorial-step { max-width: 150px; } - .step-indicator { width: 3rem; height: 3rem; @@ -9643,90 +7968,71 @@ h1[id]::before { .tutorial-overview { padding: 0; } - .tutorial-card { border-radius: 0.75rem; margin: 0 0.5rem; } - .tutorial-card__header { flex-direction: column; align-items: flex-start; gap: 0.75rem; } - - /* Compact Progress Mobile */ .tutorial-progress-compact { margin: 0.75rem 0.5rem; padding: 0.75rem; border-radius: 0.5rem; } - .tutorial-compact-header { flex-direction: column; align-items: stretch; gap: 0.75rem; } - .tutorial-compact-meta { justify-content: space-between; } - .tutorial-compact-actions { align-self: flex-end; } - .tutorial-compact-nav { flex-direction: column; gap: 0.75rem; } - .tutorial-compact-nav .btn { width: 100%; justify-content: center; } - .step-dots { gap: 0.5rem; overflow-x: auto; padding: 0.25rem 0; } - .step-dot { width: 1.5rem; height: 1.5rem; flex-shrink: 0; } - - /* Legacy tutorial progress mobile */ .tutorial-progress { margin: 1rem 0.5rem; padding: 1rem; border-radius: 0.75rem; } - .tutorial-progress__header { flex-direction: column; align-items: flex-start; gap: 1rem; } - .tutorial-title { font-size: 1.5rem; } - .tutorial-meta { width: 100%; justify-content: space-between; } - - /* Mobile Step Layout */ .tutorial-steps { flex-direction: column; gap: 1.5rem; align-items: stretch; } - .tutorial-step { flex-direction: row; max-width: none; @@ -9737,7 +8043,6 @@ h1[id]::before { border-radius: 0.75rem; border: 1px solid var(--color-border-primary); } - .step-indicator { margin-bottom: 0; margin-right: 1rem; @@ -9745,49 +8050,37 @@ h1[id]::before { width: 3rem; height: 3rem; } - .step-content { min-height: auto; flex: 1; } - .progress-line { - display: none; /* Hide connecting line on mobile */ + display: none; } - .tutorial-progress__actions { flex-direction: column; gap: 1rem; } - .tutorial-progress__actions .btn { width: 100%; justify-content: center; } - - /* Mobile Code Blocks */ .code-header { padding: 0.75rem 1rem; flex-direction: column; align-items: flex-start; gap: 0.75rem; } - .code-actions { width: 100%; justify-content: flex-end; } - - /* Mobile Sections */ .section-header { padding: 1rem 1.25rem; } - .section-content.expanded { padding: 1rem 1.25rem 1.5rem; } - - /* Mobile Validation */ .step-validation { margin: 1.5rem 0.5rem; padding: 1.25rem; @@ -9798,45 +8091,34 @@ h1[id]::before { margin: 0 0.25rem; padding: 1.25rem; } - .tutorial-progress { margin: 1rem 0.25rem; padding: 0.75rem; } - .tutorial-title { font-size: 1.25rem; } - .tutorial-step { padding: 0.75rem; } - .step-indicator { width: 2.5rem; height: 2.5rem; font-size: 0.9rem; } - .step-title { font-size: 0.9rem; } - .step-description { font-size: 0.8rem; } } -/* ========================================================================== - Dark Mode Adjustments - ========================================================================== */ .dark .tutorial-card { - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.3), + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .dark .tutorial-card:hover { - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.4), + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--color-brand-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } @@ -9852,9 +8134,6 @@ h1[id]::before { .dark .step-validation { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } -/* ========================================================================== - Accessibility Enhancements - ========================================================================== */ .tutorial-step:focus-within { outline: 2px solid var(--color-brand); outline-offset: 2px; @@ -9869,7 +8148,6 @@ h1[id]::before { outline-offset: 2px; border-radius: 0.5rem; } -/* Reduced motion preferences */ @media (prefers-reduced-motion: reduce) { .tutorial-card, .tutorial-step, @@ -9878,46 +8156,29 @@ h1[id]::before { .progress-line::after { transition: none; } - .step-icon--current { animation: none; } - .progress-bar-mini__fill::after { animation: none; } } -/* High contrast mode support */ @media (prefers-contrast: high) { .tutorial-card { border-width: 2px; } - .tutorial-badge { border: 1px solid currentColor; } - .step-indicator { border-width: 2px; } } -/* Toast Notification Component - Dedicated CSS */ -/* Enhanced Toast Styles */ .toast-notification { - /* Enhanced backdrop blur for modern glass effect */ - /* backdrop-filter: blur(20px) saturate(180%); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - - /* Smooth shadow that matches notice components */ - /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); - - /* Ensure proper font rendering */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - - /* Base positioning and sizing */ position: fixed; top: 1.5rem; right: 1.5rem; @@ -9925,15 +8186,12 @@ h1[id]::before { max-width: 20rem; width: 100%; transform: translateX(100%); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-slow) var(--easing-emphasized), + transition: transform var(--timing-slow) var(--easing-emphasized), opacity var(--timing-slow) var(--easing-emphasized); border-radius: 0.75rem; overflow: hidden; border: 1px solid; } -/* Toast content */ .toast-notification__content { display: flex; align-items: flex-start; @@ -9969,13 +8227,9 @@ h1[id]::before { .toast-notification__close:hover { color: rgba(107, 114, 128, 1); } -/* Dark mode close button */ .dark .toast-notification__close:hover { color: rgba(209, 213, 219, 1); } -/* Type-specific styling */ -/* Old hex-based colors commented in favor of tokens */ -/* .toast-notification--success { ... } */ .toast-notification--success { background: linear-gradient( 135deg, @@ -9985,7 +8239,9 @@ h1[id]::before { border-color: rgba(var(--color-success-rgb), 0.2); color: rgb(20, 83, 45); } -.toast-notification--success .toast-notification__icon { color: var(--color-success); } +.toast-notification--success .toast-notification__icon { + color: var(--color-success); +} .dark .toast-notification--success { color: rgb(187, 247, 208); } @@ -9998,7 +8254,9 @@ h1[id]::before { border-color: rgba(var(--color-danger-rgb), 0.2); color: rgb(127, 29, 29); } -.toast-notification--error .toast-notification__icon { color: var(--color-danger); } +.toast-notification--error .toast-notification__icon { + color: var(--color-danger); +} .dark .toast-notification--error { color: rgb(254, 202, 202); } @@ -10011,7 +8269,9 @@ h1[id]::before { border-color: rgba(var(--color-warning-rgb), 0.2); color: rgb(120, 53, 15); } -.toast-notification--warning .toast-notification__icon { color: var(--color-warning); } +.toast-notification--warning .toast-notification__icon { + color: var(--color-warning); +} .dark .toast-notification--warning { color: rgb(254, 215, 170); } @@ -10024,11 +8284,12 @@ h1[id]::before { border-color: rgba(var(--color-info-rgb), 0.2); color: rgb(30, 58, 138); } -.toast-notification--info .toast-notification__icon { color: var(--color-info); } +.toast-notification--info .toast-notification__icon { + color: var(--color-info); +} .dark .toast-notification--info { color: rgb(191, 219, 254); } -/* Animation states */ .toast-notification--visible { transform: translateX(0); } @@ -10037,7 +8298,6 @@ h1[id]::before { opacity: 0; scale: 0.95; } -/* Enhanced animations */ @keyframes toast-slide-in { 0% { transform: translateX(100%) scale(0.95); @@ -10051,14 +8311,11 @@ h1[id]::before { .toast-notification--entering { animation: toast-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); } -/* Dark mode enhancements */ .dark .toast-notification { - box-shadow: - 0 20px 25px -5px rgba(0, 0, 0, 0.4), + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); } -/* Mobile responsiveness */ @media (max-width: 640px) { .toast-notification { left: 1rem; @@ -10066,15 +8323,12 @@ h1[id]::before { max-width: none; transform: translateY(-100%); } - .toast-notification--visible { transform: translateY(0); } - .toast-notification--hiding { transform: translateY(-100%); } - @keyframes toast-slide-in { 0% { transform: translateY(-100%) scale(0.95); @@ -10086,63 +8340,42 @@ h1[id]::before { } } } -/* Stacking for multiple toasts */ -.toast-notification:nth-child(1) { z-index: 9999; } -.toast-notification:nth-child(2) { z-index: 9998; top: 5.5rem; } -.toast-notification:nth-child(3) { z-index: 9997; top: 9.5rem; } -.toast-notification:nth-child(4) { z-index: 9996; top: 13.5rem; } -/** - * Notebook Component Styles - * Modern, accessible styling for Jupyter notebook rendering - * Aligned with site-wide design system for consistency - * - * Features: - * - Unified code block styling with article content - * - Consistent button components across the site - * - Aligned typography and spacing patterns - * - Semantic color system integration - * - Performance optimizations for theme switching - * - Simplified container structure (reduced nesting) - * - Container queries for true responsive behavior - * - CSS logical properties for internationalization - */ -/* ======================================== - Container Query Context - ======================================== */ +.toast-notification:nth-child(1) { + z-index: 9999; +} +.toast-notification:nth-child(2) { + z-index: 9998; + top: 5.5rem; +} +.toast-notification:nth-child(3) { + z-index: 9997; + top: 9.5rem; +} +.toast-notification:nth-child(4) { + z-index: 9996; + top: 13.5rem; +} .notebook { container-type: inline-size; container-name: notebook; } -/* ======================================== - Core Notebook Container (consolidated into .notebook__cells) - ======================================== */ -/* ======================================== - Progressive Cell Visibility - ======================================== */ -/* Notebook cell wrapper functionality merged into .notebook-cell */ .notebook-cell.notebook-cell-wrapper { - /* CSS containment for performance isolation */ contain: layout style paint; - /* No transitions on wrapper to avoid layout issues */ } .notebook-cell--hidden { - /* ✅ FIXED: Use animation tokens instead of display: none */ max-height: 0; opacity: 0; overflow: hidden; - transition: - max-height var(--timing-medium) var(--easing-standard), + transition: max-height var(--timing-medium) var(--easing-standard), opacity var(--timing-medium) var(--easing-standard), transform var(--timing-medium) var(--easing-standard); transform: translateY(20px); } .notebook-cell--revealing { - /* ✅ FIXED: Use animation tokens for smooth transitions */ max-height: var(--collapse-height-expanded, 2000px); opacity: 1; transform: translateY(0); - transition: - max-height var(--timing-medium) var(--easing-standard), + transition: max-height var(--timing-medium) var(--easing-standard), opacity var(--timing-medium) var(--easing-standard), transform var(--timing-medium) var(--easing-standard); } @@ -10152,16 +8385,12 @@ h1[id]::before { transform: translateY(0); } } -/* ======================================== - Notebook Header - ======================================== */ .notebook__header { padding: 1.5rem 2rem; border-bottom: 1px solid var(--color-border-primary); background: var(--color-surface); margin-bottom: 1rem; } -/* Hide header if it's empty */ .notebook__header:empty { display: none; } @@ -10185,83 +8414,61 @@ h1[id]::before { flex-wrap: wrap; } .notebook__metadata-item { - /* Align with site button/badge patterns */ display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; background: var(--color-surface); color: var(--color-text-secondary); - border-radius: 0.375rem; /* Match site border radius */ + border-radius: 0.375rem; border: 1px solid var(--color-border-primary); font-size: 0.875rem; font-weight: 500; } -/* ======================================== - Notebook Cells Container - ======================================== */ .notebook__cells { - /* Simplified container - no shadow since cells have their own */ max-width: 100%; margin: 0 auto; padding: 0; - - /* Layout for cells */ display: flex; flex-direction: column; gap: 0.75rem; - - /* Performance optimizations */ contain: layout style; } -/* Density variants based on data-view attribute */ [data-view="compact"] .notebook__cells { - gap: 0.25rem; /* Much tighter cell spacing */ - padding: 0.25rem; /* Minimal container padding */ + gap: 0.25rem; + padding: 0.25rem; } [data-view="comfortable"] .notebook__cells { - gap: 2rem; /* More spacious cell spacing */ - padding: 2rem; /* Generous container padding */ + gap: 2rem; + padding: 2rem; } -/* Reduce space for first cell */ .notebook__cells > .notebook-cell-wrapper:first-child .notebook-cell.collapse { margin-top: 0; } -/* ======================================== - Individual Cell Styling (extends existing collapse) - ======================================== */ .notebook-cell.collapse { - /* Notebook-specific styling for cells */ background: var(--glass-bg); border: 1px solid var(--glass-border-color); margin: 0 !important; --collapse-padding-expanded: 0; } -/* ======================================== - Cell Headers (extends existing collapse headers) - ======================================== */ .notebook-cell__header.collapse__header { - /* Notebook-specific header styling: narrower, glassmorphism */ padding: 0.5rem 0.75rem; background: var(--glass-bg); border-color: var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); box-shadow: var(--glass-shadow); } -/* Chevron/icon rotation synced to ARIA for notebook cells */ .notebook-cell .collapse__header .collapse__icon { transform: rotate(0deg); } .notebook-cell .collapse__header[aria-expanded="true"] .collapse__icon { transform: rotate(90deg) !important; } -/* Compact cell headers */ [data-view="compact"] .notebook-cell__header.collapse__header { - padding: 0.375rem 0.75rem; /* Much more compact header padding */ + padding: 0.375rem 0.75rem; } [data-view="comfortable"] .notebook-cell__header.collapse__header { - padding: 1.5rem 2.5rem; /* More generous header padding */ + padding: 1.5rem 2.5rem; } .notebook-cell__type { display: flex; @@ -10287,7 +8494,6 @@ h1[id]::before { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; margin-inline-start: 0.5rem; } -/* Cell numbering - Jupyter style */ .notebook-cell__number { font-size: 0.75rem; font-weight: 500; @@ -10310,10 +8516,9 @@ h1[id]::before { } .notebook-cell--markdown .notebook-cell__number { background: color-mix(in srgb, rgb(134, 239, 172) 10%, transparent); - color: #16a34a; + color: #059669; border-color: color-mix(in srgb, rgb(134, 239, 172) 20%, transparent); } -/* Execution status indicators */ .notebook-cell__status { font-size: 0.75rem; font-weight: 500; @@ -10323,7 +8528,7 @@ h1[id]::before { } .notebook-cell__status--executed { background: color-mix(in srgb, rgb(34, 197, 94) 10%, transparent); - color: #16a34a; + color: #059669; border: 1px solid color-mix(in srgb, rgb(34, 197, 94) 20%, transparent); } .notebook-cell__status--pending { @@ -10336,24 +8541,18 @@ h1[id]::before { color: #dc2626; border: 1px solid color-mix(in srgb, rgb(239, 68, 68) 20%, transparent); } -/* ======================================== - Cell Content (extends existing collapse body) - ======================================== */ .notebook-cell .collapse__body-content { padding: 0; } -/* Notebook cell body: align borders/background with glass style and avoid brand/green accents */ .notebook-cell .collapse__body { background: var(--glass-bg); border-color: var(--glass-border-color); - /* Ensure body animates using data attributes on itself or parent */ --collapse-padding-expanded: 0.75rem; } .notebook-cell.collapse[data-collapse-state="expanded"] .collapse__body, .notebook-cell.collapse.expanded .collapse__body { border-color: var(--glass-border-color); } -/* Render Markdown cells as normal article content (less chrome) */ .notebook-cell--markdown.collapse { background: transparent; border: none; @@ -10374,18 +8573,14 @@ h1[id]::before { .notebook-cell--markdown .collapse__body-content { padding: 0; } -/* Compact cell content */ [data-view="compact"] .notebook-cell .collapse__body-content { - padding: 0.5rem; /* Much more compact cell content */ + padding: 0.5rem; } [data-view="comfortable"] .notebook-cell .collapse__body-content { - padding: 2.5rem; /* More generous cell content padding */ + padding: 2.5rem; } -/* ======================================== - Markdown Cells - ======================================== */ .notebook-cell--markdown .notebook-cell__type-icon { - color: #16a34a; + color: #059669; } .notebook-cell__markdown-content { line-height: 1.7; @@ -10396,21 +8591,32 @@ h1[id]::before { .notebook-cell__markdown-content h4, .notebook-cell__markdown-content h5, .notebook-cell__markdown-content h6 { - /* Align with global heading styles from input.css */ margin-top: 0; margin-bottom: 1rem; color: var(--color-text-primary); font-weight: 700; word-wrap: break-word; } -.notebook-cell__markdown-content h1 { font-size: 1.875rem; font-weight: 900; } -.notebook-cell__markdown-content h2 { font-size: 1.5rem; } -.notebook-cell__markdown-content h3 { font-size: 1.25rem; } -.notebook-cell__markdown-content h4 { font-size: 1.125rem; } -.notebook-cell__markdown-content h5 { font-size: 1rem; } -.notebook-cell__markdown-content h6 { font-size: 0.875rem; } +.notebook-cell__markdown-content h1 { + font-size: 1.875rem; + font-weight: 900; +} +.notebook-cell__markdown-content h2 { + font-size: 1.5rem; +} +.notebook-cell__markdown-content h3 { + font-size: 1.25rem; +} +.notebook-cell__markdown-content h4 { + font-size: 1.125rem; +} +.notebook-cell__markdown-content h5 { + font-size: 1rem; +} +.notebook-cell__markdown-content h6 { + font-size: 0.875rem; +} .notebook-cell__markdown-content p { - /* Match #articleContent spacing pattern */ margin: 0.75rem 0; color: var(--color-text-primary); } @@ -10419,7 +8625,6 @@ h1[id]::before { } .notebook-cell__markdown-content ul, .notebook-cell__markdown-content ol { - /* Match #articleContent list patterns */ margin: 0.75rem 0; padding-inline-start: 1.5rem; } @@ -10428,12 +8633,10 @@ h1[id]::before { margin-inline-start: 1.5rem; } .notebook-cell__markdown-content strong { - /* Match #articleContent strong styling */ font-family: var(--font-family-brand); font-weight: 600; } .notebook-cell__markdown-content code { - /* Align with #articleContent code:not(pre code) styling */ padding: 0.25rem; border-radius: 0.25rem; font-size: 0.75rem; @@ -10442,42 +8645,30 @@ h1[id]::before { color: var(--color-brand-1); font-family: var(--font-family-mono, RobotoMono, monospace); } -/* Dark mode support for inline code */ .dark .notebook-cell__markdown-content code { color: var(--color-brand); } -/* ======================================== - Code Cells - ======================================== */ .notebook-cell--code .notebook-cell__type-icon { - color: var(--color-brand-3); /* Uses semantic color system */ + color: var(--color-brand-3); } -/* Notebook code cells now use .code-block-enhanced with proper corner radius handling */ -/* Fix border radius for code blocks with headers */ .code-block-enhanced .code-header { - border-radius: 0.75rem 0.75rem 0 0; /* Only top corners rounded */ + border-radius: 0.75rem 0.75rem 0 0; } .code-block-enhanced .code-content { - border-radius: 0 0 0.75rem 0.75rem; /* Only bottom corners rounded */ + border-radius: 0 0 0.75rem 0.75rem; } -/* Target the actual highlighted code element that has the background */ .code-block-enhanced .code-content .highlight { - border-radius: 0 0 0.75rem 0.75rem; /* Only bottom corners rounded */ + border-radius: 0 0 0.75rem 0.75rem; } .code-block-enhanced .code-content .highlight pre { - border-radius: 0 0 0.75rem 0.75rem; /* Only bottom corners rounded */ + border-radius: 0 0 0.75rem 0.75rem; } -/* Copy button styling handled by .code-block-enhanced */ -/* ======================================== - Cell Outputs - ======================================== */ .notebook-cell__outputs { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.75rem; } -/* Compact output spacing */ [data-view="compact"] .notebook-cell__outputs { margin-top: 0.5rem; gap: 0.375rem; @@ -10492,7 +8683,6 @@ h1[id]::before { border: 1px solid var(--color-border-primary); background: var(--color-surface); } -/* Stream Output */ .notebook-cell__output--stream { background: var(--color-bg-secondary); color: #4ade80; @@ -10509,7 +8699,6 @@ h1[id]::before { white-space: pre-wrap; word-break: break-word; } -/* Execute Result Output */ .notebook-cell__output--execute-result { padding: 1rem; } @@ -10530,26 +8719,23 @@ h1[id]::before { white-space: pre-wrap; word-break: break-word; } -/* Display Data Output */ .notebook-cell__output--display-data { padding: 1rem; } .notebook-cell__output--display-data img { max-width: 100%; height: auto; - aspect-ratio: auto; /* Preserve natural ratio but allow override */ + aspect-ratio: auto; -o-object-fit: contain; object-fit: contain; border-radius: 0.375rem; - box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); } -/* For plots and charts, maintain square aspect ratio */ .notebook-cell__output--display-data img[alt*="plot"], .notebook-cell__output--display-data img[alt*="chart"], .notebook-cell__output--display-data img[alt*="graph"] { aspect-ratio: 4 / 3; } -/* Error Output */ .notebook-cell__output--error { background: #7f1d1d; color: #fee2e2; @@ -10579,7 +8765,6 @@ h1[id]::before { padding-inline-start: 0.75rem; margin: 0.25rem 0; } -/* Collapsible outputs for long content */ .notebook-cell__output--collapsible { position: relative; } @@ -10612,12 +8797,10 @@ h1[id]::before { transition: all 0.3s ease; } .notebook-cell__output--collapsed .notebook-cell__output-content { - /* ✅ FIXED: Use height-based collapse for smooth animation */ max-height: 0; opacity: 0; overflow: hidden; - transition: - max-height var(--timing-medium) var(--easing-standard), + transition: max-height var(--timing-medium) var(--easing-standard), opacity var(--timing-medium) var(--easing-standard); } .notebook-cell__output-preview { @@ -10631,15 +8814,11 @@ h1[id]::before { overflow: hidden; text-overflow: ellipsis; } -/* Output size indicators */ .notebook-cell__output-size { font-size: 0.75rem; color: var(--color-text-tertiary); margin-inline-start: auto; } -/* ======================================== - Raw Cells - ======================================== */ .notebook-cell--raw .notebook-cell__type-icon { color: #9333ea; } @@ -10662,9 +8841,6 @@ h1[id]::before { padding: 0; color: var(--color-text-primary); } -/* ======================================== - Density Toggle and Navigation - ======================================== */ .notebook__toolbar { display: flex; align-items: center; @@ -10737,7 +8913,6 @@ h1[id]::before { width: 1rem; height: 1rem; } -/* Cell outline/navigation */ .notebook__outline { position: fixed; top: 50%; @@ -10785,18 +8960,13 @@ h1[id]::before { height: 0.75rem; flex-shrink: 0; } -/* ======================================== - Loading States and Performance Indicators - ======================================== */ .notebook__performance-notice { margin-bottom: 1.5rem; } .notebook-cell-wrapper { - /* Wrapper for lazy-loaded cells */ margin-bottom: 0; } .notebook-cell--lazy { - /* Hidden cells waiting to be loaded */ display: none; } .notebook-load-trigger { @@ -10826,29 +8996,19 @@ h1[id]::before { background: var(--color-surface); border-radius: 0.5rem; } -/* ======================================== - Light Mode Enhancements - ======================================== */ -/* Light mode styles handled in .notebook__cells */ .notebook-cell.collapse { - /* Light mode cell styling */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); - /* Add theme transition only to cells that need it */ transition: var(--transition-elevation); } .notebook-cell.collapse:hover { - /* Enhanced light mode hover */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06); transform: translateY(-1px); } -/* Light mode styling handled by .code-block-enhanced */ .notebook-cell__output--stream { - /* Stream output styling with consistent colors */ background: var(--color-bg-inverse); color: var(--color-brand-2); } .notebook-cell__output--error { - /* Error output styling with semantic colors */ background: rgba(var(--color-brand-7-rgb, 243, 179, 166), 0.1); color: var(--color-brand-7); border-color: rgba(var(--color-brand-7-rgb, 243, 179, 166), 0.3); @@ -10860,17 +9020,12 @@ h1[id]::before { .notebook-cell__traceback-line { border-inline-start-color: var(--color-brand-7); } -/* ======================================== - Dark Theme Support - ======================================== */ -/* Dark mode handled by individual cell shadows */ .dark .notebook-cell.collapse { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .dark .notebook-cell.collapse:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } -/* Dark mode styling handled by .code-block-enhanced */ .dark .notebook-cell__output--error { background: rgba(var(--color-brand-7-rgb, 243, 179, 166), 0.2); color: var(--color-text-primary); @@ -10882,63 +9037,44 @@ h1[id]::before { .dark .notebook-cell__traceback-line { border-inline-start-color: var(--color-brand-7); } -/* ======================================== - Container Query Responsive Design - ======================================== */ @container notebook (max-width: 768px) { .notebook__cells { margin: 0; padding: 0; } - .notebook__header { padding: 1rem 1.5rem; } - .notebook__title { font-size: 1.5rem; } - .notebook__description { font-size: 1rem; } - .notebook__cells { gap: 0; } - .notebook-cell .collapse__body-content { padding: 0; } - - /* Compact mode on mobile should be even more compact */ [data-view="compact"] .notebook__cells { padding: 0; gap: 0; } - [data-view="compact"] .notebook-cell .collapse__body-content { padding: 0; } - - /* Mobile code block styling handled by .code-block-enhanced */ - .notebook__performance-notice { margin: 0 1rem 1.5rem; } - - /* Hide outline on mobile */ .notebook__outline { display: none; } - - /* Stack toolbar on mobile */ .notebook__toolbar { flex-direction: column; align-items: stretch; gap: 0.75rem; } - .notebook__actions { justify-content: center; } @@ -10948,28 +9084,19 @@ h1[id]::before { flex-direction: column; gap: 0.5rem; } - .notebook-cell__header.collapse__header { padding: 0.75rem 1rem; } - .notebook-cell .collapse__body-content { padding: 0.75rem; } - - /* Print code block styling handled by .code-block-enhanced */ - .notebook-cell__type-text { font-size: 0.875rem; } - .notebook__performance-notice { margin: 0 0.75rem 1rem; } } -/* ======================================== - Print Styles - ======================================== */ @media print { .notebook__cells { border: 1px solid #ccc; @@ -10977,7 +9104,6 @@ h1[id]::before { break-inside: avoid; margin: 0; } - .notebook-cell .copy-code, .collapse__icon-wrapper, .notebook__performance-notice, @@ -10985,22 +9111,17 @@ h1[id]::before { .notebook-completion-indicator { display: none !important; } - - /* ✅ FIXED: Use standard collapse behavior with animation tokens */ .notebook-cell .collapse__body { max-height: var(--collapse-height-collapsed); opacity: var(--collapse-opacity-collapsed); overflow: hidden; - transition: - max-height var(--collapse-timing) var(--collapse-easing), + transition: max-height var(--collapse-timing) var(--collapse-easing), opacity var(--collapse-timing) var(--collapse-easing); } - .notebook-cell .collapse__body.expanded { max-height: var(--collapse-height-expanded); opacity: var(--collapse-opacity-expanded); } - .notebook-cell { -moz-column-break-inside: avoid; break-inside: avoid; @@ -11009,22 +9130,15 @@ h1[id]::before { border: 1px solid #ddd; margin-bottom: 1rem; } - .notebook-cell__outputs { -moz-column-break-inside: avoid; break-inside: avoid; } - - /* Print code styling handled by .code-block-enhanced */ - .notebook-cell__output--stream { background: #f0f0f0 !important; color: #333 !important; } } -/* ======================================== - Accessibility Enhancements - ======================================== */ @media (prefers-reduced-motion: reduce) { .notebook-cell, .notebook-cell__toggle, @@ -11040,7 +9154,6 @@ h1[id]::before { --cell-hover-border: #1d4ed8; --cell-active-border: #2563eb; } - .dark .notebook__cells { --notebook-border: #f3f4f6; --cell-border: #d1d5db; @@ -11048,9 +9161,6 @@ h1[id]::before { --cell-active-border: #60a5fa; } } -/* ======================================== - Animation Keyframes - ======================================== */ @keyframes notebook-cell-enter { from { opacity: 0; @@ -11062,17 +9172,24 @@ h1[id]::before { } } @keyframes copy-success { - 0%, 100% { transform: scale(1); } - 50% { transform: scale(1.1); } + 0%, 100% { + transform: scale(1); + } + 50% { + transform: scale(1.1); + } } @keyframes copy-error { - 0%, 100% { transform: translateX(0); } - 25% { transform: translateX(-0.25rem); } - 75% { transform: translateX(0.25rem); } + 0%, 100% { + transform: translateX(0); + } + 25% { + transform: translateX(-0.25rem); + } + 75% { + transform: translateX(0.25rem); + } } -/* ======================================== - Entry Animations - ======================================== */ .notebook-cell { animation: notebook-cell-enter 0.4s ease-out; animation-delay: calc(var(--cell-index, 0) * 0.1s); @@ -11084,10 +9201,6 @@ h1[id]::before { .notebook-cell__copy-btn--error { animation: copy-error 0.3s ease-out; } -/* ======================================== - :has() Notebook Component Enhancements - ======================================== */ -/* Notebook cells with error states get enhanced styling */ .notebook-cell:has(.notebook-cell__error-name) { border-inline-start: 4px solid var(--color-danger); background: linear-gradient( @@ -11103,7 +9216,6 @@ h1[id]::before { color: white; border-radius: 50%; } -/* Cells with outputs get enhanced spacing */ .notebook-cell:has(.notebook-cell__outputs) { margin-bottom: 2rem; border-bottom: 1px solid var(--color-border-secondary); @@ -11115,7 +9227,6 @@ h1[id]::before { padding: 1rem; margin-top: 1rem; } -/* Interactive notebook cells on hover */ .notebook-cell:has(.notebook-cell__copy-btn) { transition: all 0.2s ease; } @@ -11125,7 +9236,6 @@ h1[id]::before { margin: 0.5rem 0; padding: 0.5rem; } -/* Notebook with metadata gets enhanced header */ .notebook:has(.notebook__metadata) .notebook__header { background: linear-gradient( 135deg, @@ -11134,47 +9244,10 @@ h1[id]::before { ); border-radius: 0.75rem 0.75rem 0 0; } -/* Enhanced notebook title when description is present */ .notebook__header:has(.notebook__description) .notebook__title { margin-bottom: 1rem; font-size: 2.25rem; } -/* ======================================== - Modern CSS Features Summary - ======================================== */ -/* - * This notebook component showcases modern CSS techniques: - * - * ✅ Container Queries: - * - Responsive behavior based on container size, not viewport - * - @container notebook (max-width: 768px) replaces @media queries - * - * ✅ CSS Logical Properties: - * - margin-inline-start/end for better internationalization - * - border-inline-start for RTL language support - * - padding-inline-start for semantic spacing - * - * ✅ Modern Color Functions: - * - color-mix() for alpha blending instead of rgba() - * - More semantic and maintainable color mixing - * - * ✅ Aspect Ratio: - * - aspect-ratio property for consistent image display - * - object-fit: contain for proper image scaling - * - * ✅ Advanced Pseudo-classes: - * - :has() for parent selector functionality - * - :focus-visible for keyboard navigation - * - :focus-within for container focus states - * - * Browser Support: Modern features with graceful fallbacks - * Performance: CSS containment for layout isolation - */ -/* OpenAPI Component - Modular imports */ -/* OpenAPI Base Container & Section Headers */ -/* ========================================================================== - OpenAPI Base Container - ========================================================================== */ .openapi-spec { max-width: none; margin: 0; @@ -11185,9 +9258,6 @@ h1[id]::before { flex-direction: column; gap: 3rem; } -/* ========================================================================== - Section Headers - ========================================================================== */ .section-header { margin-bottom: 2rem; text-align: center; @@ -11211,10 +9281,6 @@ h1[id]::before { margin-left: auto; margin-right: auto; } -/* OpenAPI Header */ -/* ========================================================================== - OpenAPI Header - ========================================================================== */ .openapi-header { background: linear-gradient( 135deg, @@ -11260,8 +9326,7 @@ h1[id]::before { font-size: 0.875rem; font-weight: 600; color: var(--color-brand, #3b82f6); - transition: - background-color 0.2s ease, + transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; @@ -11271,7 +9336,6 @@ h1[id]::before { border-color: rgba(var(--color-brand-rgb, 59, 130, 246), 0.3); transform: translateY(-1px); } -/* Version Badge */ .openapi-header__badge--version { background: rgba(var(--color-accent-rgb, 139, 92, 246), 0.1); border-color: rgba(var(--color-accent-rgb, 139, 92, 246), 0.2); @@ -11281,7 +9345,6 @@ h1[id]::before { background: rgba(var(--color-accent-rgb, 139, 92, 246), 0.15); border-color: rgba(var(--color-accent-rgb, 139, 92, 246), 0.3); } -/* API Type Badge */ .openapi-header__badge--type[data-api-type="REST"] { background: rgba(var(--color-info-rgb), 0.1); border-color: rgba(var(--color-info-rgb), 0.2); @@ -11292,7 +9355,6 @@ h1[id]::before { border-color: rgba(var(--color-danger-rgb), 0.2); color: var(--color-danger); } -/* Maturity Badge */ .openapi-header__badge--maturity[data-maturity="stable"] { background: rgba(var(--color-success-rgb), 0.1); border-color: rgba(var(--color-success-rgb), 0.2); @@ -11308,7 +9370,6 @@ h1[id]::before { border-color: rgba(var(--color-danger-rgb), 0.2); color: var(--color-danger); } -/* Stability Badge */ .openapi-header__badge--stability { background: rgba(var(--color-security-rgb), 0.1); border-color: rgba(var(--color-security-rgb), 0.2); @@ -11406,26 +9467,19 @@ h1[id]::before { color: var(--color-accent); text-decoration: underline; } -/* ========================================================================== - :has() Content-Aware Header Enhancements - ========================================================================== */ -/* Header with description gets enhanced layout */ .openapi-header:has(.openapi-header__description) { padding-bottom: 2.5rem; } .openapi-header:has(.openapi-header__description) .openapi-header__title { margin-bottom: 1.25rem; } -/* Header without info section is more compact */ .openapi-header:not(:has(.openapi-header__info *)) .openapi-header__description { margin-bottom: 0; } -/* Meta section adapts based on version presence */ .openapi-header__meta:has(.openapi-header__version-stat) { gap: 1.5rem; align-items: stretch; } -/* Info section adapts to number of sections */ .openapi-header__info:has(.openapi-contact:only-child) { grid-template-columns: 1fr; max-width: 400px; @@ -11436,7 +9490,6 @@ h1[id]::before { .openapi-header__info:has(.openapi-contact + .openapi-license + .openapi-terms) { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } -/* Enhanced contact styling based on available info */ .openapi-contact:has(.contact-email):has(.contact-url) { background: linear-gradient(135deg, rgba(var(--color-brand-rgb), 0.05), rgba(var(--color-accent-rgb), 0.05)); border-color: rgba(var(--color-brand-rgb), 0.15); @@ -11444,7 +9497,6 @@ h1[id]::before { .openapi-contact:has(.contact-name) h3 { color: var(--color-brand); } -/* License with URL gets enhanced styling */ .openapi-license:has(a) .license-name a { color: var(--color-brand); font-weight: 600; @@ -11455,36 +9507,27 @@ h1[id]::before { color: var(--color-accent); text-decoration: underline; } -/* Header with full info gets enhanced spacing */ .openapi-header:has(.openapi-contact):has(.openapi-license):has(.openapi-terms) { padding: 2.5rem; } -/* Responsive adaptations using :has() */ @media (max-width: 768px) { .openapi-header:has(.openapi-header__info) { padding: 1.5rem; } - .openapi-header__info:has(.openapi-contact + .openapi-license + .openapi-terms) { grid-template-columns: 1fr; gap: 1rem; } - .openapi-header__meta:has(.openapi-header__version-stat) { flex-direction: column; gap: 0.75rem; align-items: flex-start; } } -/* OpenAPI Overview - Modern Info-Dense Layout */ -/* ========================================================================== - Overview Section - ========================================================================== */ .openapi-overview { padding: 1.5rem 0; margin-bottom: 1rem; } -/* Header */ .overview-header { margin-bottom: 1.5rem; text-align: left; @@ -11496,7 +9539,6 @@ h1[id]::before { color: var(--color-text-primary); margin: 0 0 0.25rem 0; } -/* Enhanced gradient text with fallback */ @supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) { .overview-title { background: linear-gradient(135deg, var(--color-brand, #3b82f6), var(--color-accent, #8b5cf6)); @@ -11512,15 +9554,11 @@ h1[id]::before { margin: 0; opacity: 0.8; } -/* Content Container */ .overview-content { display: flex; flex-direction: column; gap: 1.5rem; } -/* ========================================================================== - Stats Bar - Horizontal info-dense layout - ========================================================================== */ .overview-stats { display: flex; flex-wrap: wrap; @@ -11539,8 +9577,7 @@ h1[id]::before { ); border: 1px solid var(--color-border-primary); border-radius: 0.5rem; - transition: - background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), + transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), @@ -11570,7 +9607,6 @@ h1[id]::before { .overview-stat:hover::before { opacity: 1; } -/* Stat Icon - Container-based sizing following theme patterns */ .overview-stat__icon { width: 1.25rem; height: 1.25rem; @@ -11581,7 +9617,6 @@ h1[id]::before { align-items: center; justify-content: center; } -/* SVG naturally fills container */ .overview-stat__icon svg { width: 100%; height: 100%; @@ -11590,7 +9625,6 @@ h1[id]::before { .overview-stat:hover .overview-stat__icon { color: var(--color-brand); } -/* Stat Content */ .overview-stat__content { display: flex; flex-direction: column; @@ -11613,7 +9647,6 @@ h1[id]::before { line-height: 1.2; word-break: break-word; } -/* Stat Variants */ .overview-stat--primary { background: linear-gradient(135deg, var(--color-brand), var(--color-accent)); color: var(--color-text-inverse); @@ -11629,13 +9662,9 @@ h1[id]::before { } .overview-stat--primary:hover { transform: translateY(-3px); - box-shadow: - 0 8px 20px rgba(var(--color-brand-rgb), 0.25), + box-shadow: 0 8px 20px rgba(var(--color-brand-rgb), 0.25), 0 4px 8px rgba(0, 0, 0, 0.1); } -/* ========================================================================== - Description Section - ========================================================================== */ .overview-description { padding: 1rem 1.25rem; background: var(--color-bg-secondary); @@ -11649,9 +9678,6 @@ h1[id]::before { line-height: 1.6; font-size: 0.875rem; } -/* ========================================================================== - Documentation Links - ========================================================================== */ .overview-documentation { margin-top: 0.5rem; } @@ -11676,8 +9702,7 @@ h1[id]::before { border: 1px solid var(--color-border-primary); border-radius: 0.5rem; text-decoration: none; - transition: - background-color 0.2s ease, + transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, @@ -11714,7 +9739,6 @@ h1[id]::before { align-items: center; justify-content: center; } -/* SVG naturally fills container */ .overview-doc-link__icon svg { width: 100%; height: 100%; @@ -11750,14 +9774,12 @@ h1[id]::before { height: 1rem; color: var(--color-text-tertiary); flex-shrink: 0; - transition: - color 0.2s ease, + transition: color 0.2s ease, transform 0.2s ease; display: flex; align-items: center; justify-content: center; } -/* SVG naturally fills container */ .overview-doc-link__arrow svg { width: 100%; height: 100%; @@ -11767,17 +9789,20 @@ h1[id]::before { color: var(--color-brand); transform: translateX(2px) translateY(-2px); } -/* ========================================================================== - Responsive Design - ========================================================================== */ @media (max-width: 768px) { - .overview-stats { flex-direction: column; gap: 0.5rem; } - - .overview-stat { min-width: unset; } - - .overview-documentation__grid { grid-template-columns: 1fr; } - - .overview-title { font-size: 1.5rem; } + .overview-stats { + flex-direction: column; + gap: 0.5rem; + } + .overview-stat { + min-width: unset; + } + .overview-documentation__grid { + grid-template-columns: 1fr; + } + .overview-title { + font-size: 1.5rem; + } } @media (max-width: 480px) { .overview-stat { @@ -11785,28 +9810,21 @@ h1[id]::before { padding: 0.625rem 0.75rem; min-height: 50px; } - .overview-stat__icon { width: 1rem; height: 1rem; } - .overview-doc-link { gap: 0.5rem; padding: 0.75rem; } } -/* ========================================================================== - :has() Content-Aware Overview Enhancements - ========================================================================== */ -/* Overview with documentation gets enhanced layout */ .openapi-overview:has(.overview-documentation) { padding-bottom: 2rem; } .openapi-overview:has(.overview-documentation) .overview-stats { margin-bottom: 2rem; } -/* Stats container adapts based on number of stats */ .overview-stats:has(.overview-stat:nth-child(4)) { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } @@ -11816,23 +9834,19 @@ h1[id]::before { .overview-stats:has(.overview-stat:nth-child(2)) { grid-template-columns: repeat(2, 1fr); } -/* Enhanced hover effects for overview with documentation */ .openapi-overview:has(.overview-documentation) .overview-stat:hover { transform: translateY(-3px); box-shadow: var(--elevation-hover-4); } -/* Documentation section gets enhanced styling when stats are present */ .openapi-overview:has(.overview-stats) .overview-documentation { border-top: 1px solid var(--color-border-primary); padding-top: 1.5rem; margin-top: 1.5rem; } -/* Single stat gets special treatment */ .overview-stats:has(.overview-stat:only-child) .overview-stat { max-width: 300px; margin: 0 auto; } -/* API type specific enhancements */ [data-api-type="REST"] .overview-stat--secondary { background: linear-gradient(135deg, rgba(var(--color-info-rgb), 0.1), rgba(var(--color-security-rgb), 0.1)); border-color: rgba(var(--color-info-rgb), 0.2); @@ -11841,7 +9855,6 @@ h1[id]::before { background: linear-gradient(135deg, rgba(var(--color-danger-rgb), 0.1), rgba(var(--color-warning-rgb), 0.1)); border-color: rgba(var(--color-danger-rgb), 0.2); } -/* Maturity-based styling */ [data-maturity="stable"] .overview-stat--accent { background: linear-gradient(135deg, rgba(var(--color-success-rgb), 0.1), rgba(var(--color-success-rgb), 0.1)); border-color: rgba(var(--color-success-rgb), 0.2); @@ -11854,10 +9867,6 @@ h1[id]::before { background: linear-gradient(135deg, rgba(var(--color-danger-rgb), 0.1), rgba(var(--color-danger-rgb), 0.1)); border-color: rgba(var(--color-danger-rgb), 0.2); } -/* OpenAPI Servers */ -/* ========================================================================== - Servers Section - ========================================================================== */ .openapi-servers { padding: 2rem 0; } @@ -11871,8 +9880,7 @@ h1[id]::before { border: 1px solid var(--color-border-primary); border-radius: 1rem; padding: 2rem; - transition: - background-color 0.2s ease, + transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, @@ -11941,10 +9949,6 @@ h1[id]::before { border-radius: 0.125rem; color: var(--color-brand); } -/* OpenAPI Navigation */ -/* ========================================================================== - Endpoints Navigation - ========================================================================== */ .endpoints-nav { margin-bottom: 2rem; padding: 1.5rem; @@ -11980,8 +9984,7 @@ h1[id]::before { border: 1px solid var(--color-border-primary); background: var(--color-surface); color: var(--color-text-primary); - transition: - background-color 0.2s ease, + transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; @@ -12010,8 +10013,7 @@ h1[id]::before { font-weight: 500; color: var(--color-text-secondary); cursor: pointer; - transition: - background-color 0.2s ease, + transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; @@ -12027,33 +10029,51 @@ h1[id]::before { border-color: var(--color-brand); color: var(--color-brand); } -/* Method-specific colors */ -/* Old hex-based method filter colors commented out in favor of tokens per themes/milodocs/init */ -/* .method-filter--get { border-color: #22c55e; color: #22c55e; } -.method-filter--post { border-color: #3b82f6; color: #3b82f6; } -.method-filter--put { border-color: #f59e0b; color: #f59e0b; } -.method-filter--patch { border-color: #8b5cf6; color: #8b5cf6; } -.method-filter--delete { border-color: #ef4444; color: #ef4444; } */ -.method-filter--get { border-color: var(--http-get-bg); color: var(--http-get-bg); } -.method-filter--post { border-color: var(--http-post-bg); color: var(--http-post-bg); } -.method-filter--put { border-color: var(--http-put-bg); color: var(--http-put-bg); } -.method-filter--patch { border-color: var(--http-patch-bg); color: var(--http-patch-bg); } -.method-filter--delete { border-color: var(--http-delete-bg); color: var(--http-delete-bg); } -/* .method-filter--get.method-filter--active { background: #22c55e; border-color: #22c55e; color: white; } */ -.method-filter--get.method-filter--active { background: var(--http-get-bg); border-color: var(--http-get-bg); color: var(--http-get-text); } -/* .method-filter--post.method-filter--active { background: #3b82f6; border-color: #3b82f6; color: white; } */ -.method-filter--post.method-filter--active { background: var(--http-post-bg); border-color: var(--http-post-bg); color: var(--http-post-text); } -/* .method-filter--put.method-filter--active { background: #f59e0b; border-color: #f59e0b; color: white; } */ -.method-filter--put.method-filter--active { background: var(--http-put-bg); border-color: var(--http-put-bg); color: var(--http-put-text); } -/* .method-filter--patch.method-filter--active { background: #8b5cf6; border-color: #8b5cf6; color: white; } */ -.method-filter--patch.method-filter--active { background: var(--http-patch-bg); border-color: var(--http-patch-bg); color: var(--http-patch-text); } -/* .method-filter--delete.method-filter--active { background: #ef4444; border-color: #ef4444; color: white; } */ -.method-filter--delete.method-filter--active { background: var(--http-delete-bg); border-color: var(--http-delete-bg); color: var(--http-delete-text); } -/* OpenAPI Sidebar Styles */ -/* Inspired by Mintlify's clean, hierarchical design */ -/* ========================================================================== - OpenAPI Sidebar Base - ========================================================================== */ +.method-filter--get { + border-color: var(--http-get-bg); + color: var(--http-get-bg); +} +.method-filter--post { + border-color: var(--http-post-bg); + color: var(--http-post-bg); +} +.method-filter--put { + border-color: var(--http-put-bg); + color: var(--http-put-bg); +} +.method-filter--patch { + border-color: var(--http-patch-bg); + color: var(--http-patch-bg); +} +.method-filter--delete { + border-color: var(--http-delete-bg); + color: var(--http-delete-bg); +} +.method-filter--get.method-filter--active { + background: var(--http-get-bg); + border-color: var(--http-get-bg); + color: var(--http-get-text); +} +.method-filter--post.method-filter--active { + background: var(--http-post-bg); + border-color: var(--http-post-bg); + color: var(--http-post-text); +} +.method-filter--put.method-filter--active { + background: var(--http-put-bg); + border-color: var(--http-put-bg); + color: var(--http-put-text); +} +.method-filter--patch.method-filter--active { + background: var(--http-patch-bg); + border-color: var(--http-patch-bg); + color: var(--http-patch-text); +} +.method-filter--delete.method-filter--active { + background: var(--http-delete-bg); + border-color: var(--http-delete-bg); + color: var(--http-delete-text); +} .openapi-sidebar-section { margin-bottom: 2rem; padding-bottom: 1.5rem; @@ -12088,9 +10108,6 @@ h1[id]::before { line-height: 1.5; margin: 0.5rem 0 0 0; } -/* ========================================================================== - Navigation Links - ========================================================================== */ .openapi-sidebar-nav { list-style: none; margin: 0; @@ -12108,8 +10125,7 @@ h1[id]::before { border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; - transition: - background-color 0.15s ease, + transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, @@ -12129,9 +10145,6 @@ h1[id]::before { .openapi-sidebar-link-text { flex: 1; } -/* ========================================================================== - Section Headers - ========================================================================== */ .openapi-sidebar-section-header { margin-bottom: 1rem; } @@ -12143,9 +10156,6 @@ h1[id]::before { text-transform: uppercase; letter-spacing: 0.05em; } -/* ========================================================================== - Tag Groups - ========================================================================== */ .openapi-sidebar-endpoints { list-style: none; margin: 0; @@ -12172,8 +10182,7 @@ h1[id]::before { color: var(--color-text-secondary); cursor: pointer; border-radius: 0.25rem; - transition: - background-color 0.15s ease, + transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } @@ -12195,9 +10204,6 @@ h1[id]::before { color: var(--color-text-primary); text-transform: capitalize; } -/* ========================================================================== - Endpoints List - ========================================================================== */ .openapi-sidebar-endpoints-list { list-style: none; margin: 0; @@ -12205,9 +10211,6 @@ h1[id]::before { overflow: hidden; transition: max-height 0.15s ease, opacity 0.15s ease; } -.openapi-sidebar-endpoints-list--expanded { - /* Animation handled by display property changes in JS */ -} .openapi-sidebar-endpoint { margin-bottom: 0.125rem; } @@ -12219,13 +10222,12 @@ h1[id]::before { text-decoration: none; border-radius: 0.375rem; font-size: 0.8125rem; - transition: - background-color 0.15s ease, + transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; border: 1px solid transparent; - margin-left: 1.75rem; /* Indent under tag */ + margin-left: 1.75rem; gap: 0.5rem; } .openapi-sidebar-endpoint-link:hover { @@ -12238,9 +10240,6 @@ h1[id]::before { border-color: var(--color-brand-border); font-weight: 500; } -/* ========================================================================== - HTTP Method Badges - ========================================================================== */ .openapi-sidebar-method { display: inline-block; padding: 0.125rem 0.375rem; @@ -12253,16 +10252,31 @@ h1[id]::before { flex-shrink: 0; letter-spacing: 0.025em; } -.openapi-sidebar-method--get { background: var(--http-get-bg); color: var(--http-get-text); } -.openapi-sidebar-method--post { background: var(--http-post-bg); color: var(--http-post-text); } -.openapi-sidebar-method--put { background: var(--http-put-bg); color: var(--http-put-text); } -.openapi-sidebar-method--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } -.openapi-sidebar-method--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } +.openapi-sidebar-method--get { + background: var(--http-get-bg); + color: var(--http-get-text); +} +.openapi-sidebar-method--post { + background: var(--http-post-bg); + color: var(--http-post-text); +} +.openapi-sidebar-method--put { + background: var(--http-put-bg); + color: var(--http-put-text); +} +.openapi-sidebar-method--patch { + background: var(--http-patch-bg); + color: var(--http-patch-text); +} +.openapi-sidebar-method--delete { + background: var(--http-delete-bg); + color: var(--http-delete-text); +} .openapi-sidebar-method--head, -.openapi-sidebar-method--options { background: var(--http-head-bg); color: var(--http-head-text); } -/* ========================================================================== - Endpoint Details - ========================================================================== */ +.openapi-sidebar-method--options { + background: var(--http-head-bg); + color: var(--http-head-text); +} .openapi-sidebar-endpoint-path { flex: 1; font-weight: 500; @@ -12278,47 +10292,34 @@ h1[id]::before { margin-top: 0.125rem; font-weight: 400; } -/* ========================================================================== - Responsive Design - ========================================================================== */ @media (max-width: 768px) { .openapi-sidebar-section { margin-bottom: 1.5rem; padding-bottom: 1rem; } - .openapi-sidebar-title { font-size: 1rem; } - .openapi-sidebar-endpoint-link { margin-left: 1.5rem; padding: 0.375rem 0.5rem; } - .openapi-sidebar-method { min-width: 2.5rem; font-size: 0.625rem; } } -/* ========================================================================== - Dark Mode Support - ========================================================================== */ @media (prefers-color-scheme: dark) { - .openapi-sidebar-version { background: var(--color-brand-primary-dark, var(--color-brand-primary)); } + .openapi-sidebar-version { + background: var(--color-brand-primary-dark, var(--color-brand-primary)); + } } -/* ========================================================================== - Focus States - ========================================================================== */ .openapi-sidebar-link:focus-visible, .openapi-sidebar-endpoint-link:focus-visible, .openapi-sidebar-tag-toggle:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; } -/* ========================================================================== - Smooth Scrolling Enhancement - ========================================================================== */ html { scroll-behavior: smooth; } @@ -12326,17 +10327,11 @@ html { html { scroll-behavior: auto; } - .openapi-sidebar-chevron, .openapi-sidebar-endpoints-list { transition: none; } } -/* OpenAPI Generated Pages Styles */ -/* Styling for API overview, tag, and endpoint pages generated by content adapter */ -/* ========================================================================== - API Overview Page - ========================================================================== */ .api-overview .api-endpoint-groups { margin: 2rem 0; } @@ -12351,8 +10346,7 @@ html { background: var(--color-surface); border: 1px solid var(--color-border-primary); border-radius: 0.75rem; - transition: - background-color 0.2s ease, + transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, @@ -12387,9 +10381,6 @@ html { text-transform: uppercase; letter-spacing: 0.05em; } -/* ========================================================================== - API Tag Page - ========================================================================== */ .api-tag-header { margin-bottom: 2rem; padding-bottom: 1.5rem; @@ -12425,8 +10416,7 @@ html { border: 1px solid var(--color-border-primary); border-radius: 0.5rem; margin-bottom: 1rem; - transition: - background-color 0.2s ease, + transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, @@ -12463,9 +10453,6 @@ html { font-size: 0.875rem; line-height: 1.5; } -/* ========================================================================== - API Endpoint Page - ========================================================================== */ .api-endpoint-header { margin-bottom: 2rem; padding-bottom: 1.5rem; @@ -12515,9 +10502,6 @@ html { font-size: 1rem; line-height: 1.6; } -/* ========================================================================== - Method Badges (Enhanced) - ========================================================================== */ .method-badge { display: inline-block; padding: 0.25rem 0.75rem; @@ -12530,26 +10514,31 @@ html { min-width: 4rem; text-align: center; } -/* Old hex-based method colors commented out in favor of tokens per themes/milodocs/init */ -/* .method-badge--get { background: #10b981; color: white; } */ -.method-badge--get { background: var(--http-get-bg); color: var(--http-get-text); } -/* .method-badge--post { background: #3b82f6; color: white; } */ -.method-badge--post { background: var(--http-post-bg); color: var(--http-post-text); } -/* .method-badge--put { background: #f59e0b; color: white; } */ -.method-badge--put { background: var(--http-put-bg); color: var(--http-put-text); } -/* .method-badge--patch { background: #8b5cf6; color: white; } */ -.method-badge--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } -/* .method-badge--delete { background: #ef4444; color: white; } */ -.method-badge--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } -/* .method-badge--head, .method-badge--options { background: #6b7280; color: white; } */ +.method-badge--get { + background: var(--http-get-bg); + color: var(--http-get-text); +} +.method-badge--post { + background: var(--http-post-bg); + color: var(--http-post-text); +} +.method-badge--put { + background: var(--http-put-bg); + color: var(--http-put-text); +} +.method-badge--patch { + background: var(--http-patch-bg); + color: var(--http-patch-text); +} +.method-badge--delete { + background: var(--http-delete-bg); + color: var(--http-delete-text); +} .method-badge--head, .method-badge--options { background: var(--http-head-bg); color: var(--http-head-text); } -/* ========================================================================== - Page Content Integration - ========================================================================== */ .page-content { margin-top: 2rem; padding-top: 2rem; @@ -12558,63 +10547,38 @@ html { .page-content h2:first-child { margin-top: 0; } -/* ========================================================================== - Responsive Design - ========================================================================== */ @media (max-width: 768px) { .endpoint-groups-grid { grid-template-columns: 1fr; gap: 1rem; } - .endpoint-group-card { padding: 1rem; } - .endpoint-summary-header { flex-direction: column; gap: 0.75rem; } - .endpoint-method-path { flex-direction: column; align-items: flex-start; gap: 0.5rem; } - .endpoint-path { font-size: 1rem; word-break: break-all; } - .api-endpoint-header h1 { font-size: 1.5rem; } } -/* ========================================================================== - Dark Mode Adjustments - ========================================================================== */ -/* Dark mode handled via CSS variables in :root/.dark */ -/* - * OpenAPI Single Endpoint Page Styles - * Content-aware styling using :has() selectors - */ -/* ============================================================================= - Base Single Page Layout - ============================================================================= */ .api-endpoint { - /* Content-aware layout adjustments */ container-type: inline-size; container-name: endpoint-page; } -/* Override the hidden default - single pages should show endpoint details */ .api-endpoint .endpoint-details { display: block; } -/* ============================================================================= - Header Enhancements with :has() - ============================================================================= */ -/* Enhanced header when endpoint has both summary and description */ .api-endpoint-header:has(.endpoint-description) { background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-brand-rgb), 0.02) 100%); border-left: 4px solid rgba(var(--color-brand-rgb), 0.3); @@ -12622,7 +10586,6 @@ html { border-radius: 0.75rem; margin-bottom: 2rem; } -/* Method-specific header styling */ .api-endpoint-header:has(.method-badge--get) { background: linear-gradient(135deg, var(--color-surface) 0%, rgba(34, 197, 94, 0.02) 100%); border-left-color: rgba(34, 197, 94, 0.3); @@ -12643,9 +10606,6 @@ html { background: linear-gradient(135deg, var(--color-surface) 0%, rgba(168, 85, 247, 0.02) 100%); border-left-color: rgba(168, 85, 247, 0.3); } -/* ============================================================================= - Breadcrumb Enhancements - ============================================================================= */ .api-endpoint-breadcrumb { margin-bottom: 1.5rem; font-size: 0.875rem; @@ -12660,15 +10620,10 @@ html { color: var(--color-brand-dark); text-decoration: underline; } -/* ============================================================================= - Content Area Enhancements with :has() - ============================================================================= */ -/* Enhanced spacing for endpoints with multiple sections */ .api-endpoint-content:has(.endpoint-section:nth-child(n+3)) { display: grid; gap: 2rem; } -/* Special layout for complex endpoints */ .endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) { container-type: inline-size; } @@ -12676,32 +10631,18 @@ html { display: grid; gap: 2.5rem; } -/* Enhanced visual hierarchy for parameter-heavy endpoints */ -.endpoint-item:has([data-parameter-count]) { - /* Parameters count specific styling */ -} .endpoint-item:has([data-parameter-count="0"]) .endpoint-details { - /* Simplified layout for parameter-less endpoints */ gap: 1.5rem; } .endpoint-item:has([data-parameter-count^="1"]) .endpoint-section, .endpoint-item:has([data-parameter-count^="2"]) .endpoint-section, .endpoint-item:has([data-parameter-count^="3"]) .endpoint-section { - /* Enhanced styling for endpoints with 10+ parameters */ border: 1px solid rgba(var(--color-border-rgb), 0.5); border-radius: 0.5rem; padding: 1.5rem; background: rgba(var(--color-surface-rgb), 0.5); } -/* ============================================================================= - Section-Specific :has() Patterns - ============================================================================= */ -/* Parameters Section */ -.endpoint-details:has(.endpoint-parameters) { - /* Enhanced layout when parameters are present */ -} .endpoint-details:has(.endpoint-parameters .parameter-item:nth-child(n+5)) { - /* Special handling for parameter-heavy endpoints */ grid-template-columns: 1fr 1fr; gap: 2rem; } @@ -12710,55 +10651,36 @@ html { grid-template-columns: 1fr; } } -/* Request Body Section */ .endpoint-details:has(.endpoint-request-body) .endpoint-section { border-left: 3px solid rgba(var(--color-brand-rgb), 0.2); padding-left: 1rem; } -/* Responses Section */ -.endpoint-details:has(.endpoint-responses) { - /* Enhanced styling when responses are present */ -} .endpoint-details:has(.endpoint-responses .response-item:nth-child(n+3)) { - /* Special handling for endpoints with many response types */ background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-success-rgb), 0.01) 100%); border-radius: 0.75rem; padding: 1.5rem; } -/* Security Section */ .endpoint-details:has(.endpoint-security) { - /* Enhanced styling when security requirements are present */ border-top: 1px solid rgba(var(--color-border-rgb), 0.3); padding-top: 2rem; } -/* Code Examples Section */ -.endpoint-details:has(.endpoint-examples) { - /* Enhanced styling when code examples are present */ -} .endpoint-details:has(.endpoint-examples .example-tabs .tab-button:nth-child(n+4)) { - /* Special styling for endpoints with many code examples */ background: rgba(var(--color-accent-rgb), 0.02); border-radius: 0.5rem; padding: 1rem; } -/* ============================================================================= - Method-Specific Page Styling - ============================================================================= */ -/* GET endpoints - Success/data focused */ .api-endpoint[data-method="GET"] { --endpoint-accent: rgba(34, 197, 94, 0.1); } .api-endpoint[data-method="GET"]:has([data-has-responses="true"]) { background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); } -/* POST endpoints - Creation focused */ .api-endpoint[data-method="POST"] { --endpoint-accent: rgba(59, 130, 246, 0.1); } .api-endpoint[data-method="POST"]:has([data-has-request-body="true"]) { background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); } -/* PUT/PATCH endpoints - Update focused */ .api-endpoint[data-method="PUT"], .api-endpoint[data-method="PATCH"] { --endpoint-accent: rgba(245, 158, 11, 0.1); @@ -12767,29 +10689,15 @@ html { .api-endpoint[data-method="PATCH"]:has([data-has-request-body="true"]):has([data-has-responses="true"]) { background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); } -/* DELETE endpoints - Deletion focused */ .api-endpoint[data-method="DELETE"] { --endpoint-accent: rgba(239, 68, 68, 0.1); } .api-endpoint[data-method="DELETE"]:has([data-has-responses="true"]) { background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); } -/* ============================================================================= - Complexity-Based Styling - ============================================================================= */ -/* Simple endpoints (no parameters, no request body) */ -.api-endpoint[data-has-parameters="false"][data-has-request-body="false"] { - /* Simplified, clean layout */ -} .api-endpoint[data-has-parameters="false"][data-has-request-body="false"] .endpoint-details { gap: 1rem; } -/* Complex endpoints (has parameters, request body, and multiple responses) */ -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="1"]), -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="2"]), -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="3"]) { - /* Enhanced organization for complex endpoints */ -} .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="1"]) .endpoint-details, .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="2"]) .endpoint-details, .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="3"]) .endpoint-details { @@ -12799,33 +10707,20 @@ html { background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-accent-rgb), 0.01) 100%); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } -/* ============================================================================= - Responsive Enhancements - ============================================================================= */ @container endpoint-page (max-width: 768px) { .api-endpoint-header:has(.endpoint-description) { padding: 1.5rem; margin-bottom: 1.5rem; } - .endpoint-details:has(.endpoint-parameters .parameter-item:nth-child(n+3)) { grid-template-columns: 1fr; } - .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="1"]) .endpoint-details, .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="2"]) .endpoint-details, .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="3"]) .endpoint-details { padding: 1rem; } } -/* ============================================================================= - Accessibility Enhancements - ============================================================================= */ -/* Enhanced focus styles for interactive elements */ -.api-endpoint:has(:focus-visible) { - /* Container styling when child elements have focus */ -} -/* Reduced motion preferences */ @media (prefers-reduced-motion: reduce) { .api-endpoint-header:has(.endpoint-description), .endpoint-details:has(.endpoint-responses .response-item:nth-child(n+3)) { @@ -12833,14 +10728,9 @@ html { transition: none; } } -/* OpenAPI Endpoints */ -/* ========================================================================== - Endpoints Section - ========================================================================== */ .openapi-endpoints { padding: 2rem 0; } -/* Endpoint Groups */ .endpoint-group { margin-bottom: 2rem; background: var(--color-surface); @@ -12853,8 +10743,7 @@ html { background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border-primary); cursor: pointer; - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); @@ -12900,15 +10789,12 @@ html { transform: rotate(90deg); } .endpoint-group-content { - /* Use height-based collapse (consistent with response-details) */ max-height: 0; opacity: 0; overflow: hidden; padding: 0; - - /* Configure collapse behavior */ --collapse-height-collapsed: 0; - --collapse-height-expanded: 3000px; /* Larger for endpoint lists */ + --collapse-height-expanded: 3000px; --collapse-opacity-collapsed: 0; --collapse-opacity-expanded: 1; --collapse-overflow-collapsed: hidden; @@ -12918,8 +10804,6 @@ html { --collapse-timing: 0.3s; --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); } -/* Remove old class-based approach - component-states.css handles this */ -/* Endpoint Items within Groups */ .endpoint-item { background: var(--color-surface); border: none; @@ -12927,8 +10811,7 @@ html { border-radius: 0; margin-bottom: 0; overflow: hidden; - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); @@ -12939,20 +10822,17 @@ html { .endpoint-item:hover { background: var(--color-bg-secondary); } -/* Endpoint Header */ .endpoint-header { padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); } -/* Keyboard focus visibility */ .endpoint-group-header:focus-visible, .endpoint-header:focus-visible { outline: 2px solid var(--color-brand); @@ -13017,7 +10897,6 @@ html { font-size: 0.75rem; font-weight: 500; } -/* HTTP Method Badges */ .http-method { display: inline-flex; align-items: center; @@ -13030,22 +10909,34 @@ html { letter-spacing: 0.05em; min-width: 4rem; } -/* Old hex-based method colors commented out in favor of tokens per themes/milodocs/init */ -/* .http-method--get { background: #22c55e; color: white; } -.http-method--post { background: #3b82f6; color: white; } -.http-method--put { background: #f59e0b; color: white; } -.http-method--patch { background: #8b5cf6; color: white; } -.http-method--delete { background: #ef4444; color: white; } -.http-method--head { background: #6b7280; color: white; } -.http-method--options { background: #9333ea; color: white; } */ -.http-method--get { background: var(--http-get-bg); color: var(--http-get-text); } -.http-method--post { background: var(--http-post-bg); color: var(--http-post-text); } -.http-method--put { background: var(--http-put-bg); color: var(--http-put-text); } -.http-method--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } -.http-method--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } -.http-method--head { background: var(--http-head-bg); color: var(--http-head-text); } -.http-method--options { background: var(--http-options-bg); color: var(--http-options-text); } -/* Endpoint Details */ +.http-method--get { + background: var(--http-get-bg); + color: var(--http-get-text); +} +.http-method--post { + background: var(--http-post-bg); + color: var(--http-post-text); +} +.http-method--put { + background: var(--http-put-bg); + color: var(--http-put-text); +} +.http-method--patch { + background: var(--http-patch-bg); + color: var(--http-patch-text); +} +.http-method--delete { + background: var(--http-delete-bg); + color: var(--http-delete-text); +} +.http-method--head { + background: var(--http-head-bg); + color: var(--http-head-text); +} +.http-method--options { + background: var(--http-options-bg); + color: var(--http-options-text); +} .endpoint-details { display: none; padding: 1.5rem; @@ -13076,7 +10967,6 @@ html { color: var(--color-text-primary); margin-bottom: 1.5rem; } -/* Chevron Icon */ .chevron { width: 1rem; height: 1rem; @@ -13085,10 +10975,6 @@ html { .endpoint-header[aria-expanded="true"] .chevron { transform: rotate(90deg); } -/* ========================================================================== - :has() Content-Aware Endpoints Enhancements - ========================================================================== */ -/* API endpoint viewer adapts based on content type */ .openapi-spec[data-viewer-type="endpoint"]:has([data-has-parameters="true"]) { --has-params: true; } @@ -13098,7 +10984,6 @@ html { .openapi-spec[data-viewer-type="endpoint"]:has([data-has-responses="true"]) { --has-responses: true; } -/* Method-specific styling enhancements */ .openapi-spec[data-method="GET"]:has([data-has-parameters="true"]) .api-endpoint-header { border-left: 4px solid rgba(var(--color-info-rgb), 0.5); } @@ -13111,7 +10996,6 @@ html { .openapi-spec[data-method="DELETE"]:has([data-has-responses="true"]) .api-endpoint-header { border-left: 4px solid rgba(var(--color-danger-rgb), 0.5); } -/* Enhanced endpoint header based on content */ .api-endpoint-header:has([data-has-summary="true"]):has([data-has-description="true"]) { padding: 2rem 1.5rem; background: linear-gradient( @@ -13120,7 +11004,6 @@ html { var(--color-bg-secondary) 100% ); } -/* Endpoint item adapts based on available sections */ .endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) { --sections: comprehensive; border: 2px solid var(--color-border-primary); @@ -13138,7 +11021,6 @@ html { rgba(var(--color-brand-rgb), 0.02) 100% ); } -/* Parameter count indicators */ .endpoint-item[data-parameter-count]:not([data-parameter-count="0"])::before { content: attr(data-parameter-count) " params"; position: absolute; @@ -13151,7 +11033,6 @@ html { border-radius: 1rem; font-weight: 500; } -/* Response count indicators */ .endpoint-item[data-response-count]:not([data-response-count="0"])::after { content: attr(data-response-count) " responses"; position: absolute; @@ -13164,26 +11045,21 @@ html { border-radius: 1rem; font-weight: 500; } -/* Endpoint group with many endpoints gets grid layout */ .endpoint-group:has(.endpoint-item:nth-child(n+6)) .endpoint-group-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 1rem; } -/* Enhanced hover effects for content-rich endpoints */ .endpoint-item:has([data-has-examples="true"]):hover { transform: translateY(-2px); - box-shadow: - var(--elevation-hover-2), + box-shadow: var(--elevation-hover-2), var(--elevation-brand-subtle); } -/* Responsive adaptations for endpoints */ @media (max-width: 768px) { .endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) { border-radius: 0.5rem; margin: 0.5rem 0; } - .endpoint-item[data-parameter-count]:not([data-parameter-count="0"])::before, .endpoint-item[data-response-count]:not([data-response-count="0"])::after { position: static; @@ -13191,7 +11067,6 @@ html { margin: 0.25rem; } } -/* Reduced motion: remove transitions for interactive rows/headers */ @media (prefers-reduced-motion: reduce) { .endpoint-group-header, .endpoint-item, @@ -13199,10 +11074,6 @@ html { transition: none !important; } } -/* OpenAPI Parameters */ -/* ========================================================================== - Parameters - ========================================================================== */ .parameters-container { display: flex; flex-direction: column; @@ -13225,14 +11096,12 @@ html { font-weight: 600; color: var(--color-text-primary); } -/* Parameter Group Headers */ .parameter-group-header { padding: 0.75rem 1rem; background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border-primary); cursor: pointer; - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); @@ -13276,15 +11145,12 @@ html { transform: rotate(90deg); } .parameter-list { - /* Height-based collapse (consistent with all components) */ max-height: 0; opacity: 0; overflow: hidden; padding: 0; - - /* Configure collapse behavior */ --collapse-height-collapsed: 0; - --collapse-height-expanded: 1500px; /* Good for parameter lists */ + --collapse-height-expanded: 1500px; --collapse-opacity-collapsed: 0; --collapse-opacity-expanded: 1; --collapse-overflow-collapsed: hidden; @@ -13294,7 +11160,6 @@ html { --collapse-timing: 0.3s; --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); } -/* Remove old class-based approach - component-states.css handles this */ .parameters-list { padding: 0; } @@ -13370,10 +11235,6 @@ html { font-family: var(--font-family-mono); color: var(--color-brand); } -/* OpenAPI Responses */ -/* ========================================================================== - Response Sections - ========================================================================== */ .responses-container { display: flex; flex-direction: column; @@ -13389,8 +11250,7 @@ html { padding: 0.75rem 1rem; background: var(--color-bg-secondary); cursor: pointer; - transition: - background-color var(--timing-fast) var(--easing-standard), + transition: background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); @@ -13424,8 +11284,6 @@ html { } .response-details { border-top: 1px solid var(--color-border-primary); - - /* Use height-based collapse (not display-based) for smooth animations */ --collapse-height-collapsed: 0; --collapse-height-expanded: 2000px; --collapse-opacity-collapsed: 0; @@ -13436,8 +11294,6 @@ html { --collapse-padding-expanded: 1rem; --collapse-timing: 0.3s; --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); - - /* Start collapsed */ max-height: 0; opacity: 0; overflow: hidden; @@ -13448,7 +11304,6 @@ html { color: var(--color-text-secondary); margin: 0; } -/* Status Code Badges */ .status-code { display: inline-flex; align-items: center; @@ -13461,18 +11316,26 @@ html { letter-spacing: 0.05em; min-width: 3rem; } -/* Old hex-based status colors commented out in favor of tokens per themes/milodocs/init */ -/* .status-code--2xx { background: #22c55e; color: white; } -.status-code--3xx { background: #3b82f6; color: white; } -.status-code--4xx { background: #f59e0b; color: white; } -.status-code--5xx { background: #ef4444; color: white; } -.status-code--dxx { background: #6b7280; color: white; } */ -.status-code--2xx { background: var(--status-2xx-bg); color: var(--status-2xx-text); } -.status-code--3xx { background: var(--status-3xx-bg); color: var(--status-3xx-text); } -.status-code--4xx { background: var(--status-4xx-bg); color: var(--status-4xx-text); } -.status-code--5xx { background: var(--status-5xx-bg); color: var(--status-5xx-text); } -.status-code--dxx { background: var(--status-dxx-bg); color: var(--status-dxx-text); } -/* Response Content */ +.status-code--2xx { + background: var(--status-2xx-bg); + color: var(--status-2xx-text); +} +.status-code--3xx { + background: var(--status-3xx-bg); + color: var(--status-3xx-text); +} +.status-code--4xx { + background: var(--status-4xx-bg); + color: var(--status-4xx-text); +} +.status-code--5xx { + background: var(--status-5xx-bg); + color: var(--status-5xx-text); +} +.status-code--dxx { + background: var(--status-dxx-bg); + color: var(--status-dxx-text); +} .response-content { margin-top: 1rem; } @@ -13501,7 +11364,6 @@ html { .response-schema { margin-top: 0.75rem; } -/* Response Headers */ .response-headers { margin-bottom: 1rem; } @@ -13553,10 +11415,6 @@ html { align-items: center; gap: 0.25rem; } -/* OpenAPI Schemas */ -/* ========================================================================== - Schemas - ========================================================================== */ .schema-container { background: transparent; border: none; @@ -13652,8 +11510,7 @@ html { flex-direction: column; gap: 0.5rem; position: relative; - transition: - background-color 0.2s ease, + transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; @@ -13699,7 +11556,6 @@ html { .property-schema { margin-left: 0; } -/* Enhanced property information layout */ .property-meta { display: flex; align-items: center; @@ -13746,14 +11602,12 @@ html { border-radius: 0.25rem; border: 1px solid var(--color-border-secondary); } -/* Enhanced constraint styling */ .constraint-modifier { font-size: 0.7rem; color: var(--color-warning); font-style: italic; margin-left: 0.25rem; } -/* Array schema styling */ .schema-array-info { margin-bottom: 1.5rem; } @@ -13788,7 +11642,6 @@ html { padding: 1rem; margin-top: 0.5rem; } -/* Enhanced schema composition styling */ .schema-composition { margin-bottom: 1.5rem; } @@ -13820,10 +11673,6 @@ html { text-transform: uppercase; letter-spacing: 0.025em; } -/* ========================================================================== - :has() Content-Aware Schema Enhancements - ========================================================================== */ -/* Schema containers adapt based on content type and complexity */ .schema-container:has(.schema-properties) { background: linear-gradient( 135deg, @@ -13848,7 +11697,6 @@ html { ); border-left: 3px solid rgba(var(--color-accent-rgb), 0.3); } -/* Schema properties section enhances based on property count */ .schema-properties:has(.properties-list .property-item:nth-child(n+5)) { border: 2px solid rgba(var(--color-brand-rgb), 0.1); border-radius: 0.5rem; @@ -13859,12 +11707,10 @@ html { border-color: rgba(var(--color-accent-rgb), 0.2); background: rgba(var(--color-accent-rgb), 0.03); } -/* Properties adapt to required field density */ .properties-list:has(.property-item--required:nth-child(n+3)) { border-left: 4px solid var(--color-warning); padding-left: 0.5rem; } -/* Individual property items enhance based on content */ .property-item:has(.property-constraints) { border-left: 2px solid rgba(var(--color-info-rgb), 0.4); background: rgba(var(--color-info-rgb), 0.02); @@ -13873,7 +11719,6 @@ html { border-left-color: rgba(var(--color-accent-rgb), 0.4); background: rgba(var(--color-accent-rgb), 0.02); } -/* Schema constraints section adapts to constraint complexity */ .schema-constraints:has(.constraint:nth-child(n+3)) { background: rgba(var(--color-bg-secondary-rgb), 0.5); border: 1px solid var(--color-border-secondary); @@ -13883,21 +11728,18 @@ html { .schema-constraints:has(.constraint-modifier) { border-left: 3px solid var(--color-warning); } -/* Array info enhances based on constraints */ .schema-array-info:has(.array-constraints .constraint:nth-child(n+2)) { border: 1px solid rgba(var(--color-success-rgb), 0.2); border-radius: 0.5rem; padding: 1rem; background: rgba(var(--color-success-rgb), 0.02); } -/* Schema composition gets enhanced styling */ .schema-composition:has(.composition-item:nth-child(n+3)) { border: 2px solid rgba(var(--color-accent-rgb), 0.2); border-radius: 0.75rem; padding: 1.5rem; background: rgba(var(--color-accent-rgb), 0.02); } -/* Nested schema containers get reduced visual weight */ .schema-container[data-level="1"]:has(.schema-properties) { background: rgba(var(--color-bg-secondary-rgb), 0.3); border-left-width: 2px; @@ -13906,7 +11748,6 @@ html { background: rgba(var(--color-bg-secondary-rgb), 0.2); border-left-width: 1px; } -/* Type-specific enhancements */ .schema-header:has(.type-badge--object) + .schema-constraints, .schema-header:has(.type-badge--object) + * .schema-constraints { border-top: 2px solid rgba(var(--color-brand-rgb), 0.1); @@ -13917,7 +11758,6 @@ html { .schema-header:has(.type-badge--string) + .schema-constraints { border-top: 2px solid rgba(var(--color-info-rgb), 0.1); } -/* Reference schemas get special styling */ .schema-container:has(.schema-ref) { background: linear-gradient( 135deg, @@ -13926,12 +11766,10 @@ html { ); border: 1px dashed rgba(var(--color-accent-rgb), 0.3); } -/* Error and debug styling adaptations */ .schema-container:has(.schema-ref-error) { background: rgba(var(--color-danger-rgb), 0.05); border: 1px solid rgba(var(--color-danger-rgb), 0.2); } -/* Schema References */ .schema-ref { margin: 0.5rem 0; padding: 0.5rem; @@ -13987,7 +11825,6 @@ html { padding: 0.125rem 0.25rem; border-radius: 0.125rem; } -/* Array and Object Indicators */ .schema-array-items, .schema-object-properties { margin-top: 0.75rem; @@ -13999,7 +11836,6 @@ html { color: var(--color-text-secondary); margin-bottom: 0.5rem; } -/* Type Badges */ .type-badge { display: inline-block; padding: 0.125rem 0.5rem; @@ -14008,31 +11844,40 @@ html { font-weight: 600; text-transform: lowercase; } -/* Old hex-based type colors commented out in favor of tokens per themes/milodocs/init */ -/* .type-badge--string { background: rgba(34, 197, 94, 0.1); color: #059669; } -.type-badge--number, -.type-badge--integer { background: rgba(59, 130, 246, 0.1); color: #2563eb; } -.type-badge--boolean { background: rgba(168, 85, 247, 0.1); color: #7c3aed; } -.type-badge--array { background: rgba(245, 158, 11, 0.1); color: #d97706; } -.type-badge--object { background: rgba(239, 68, 68, 0.1); color: #dc2626; } -.type-badge--null { background: rgba(107, 114, 128, 0.1); color: #4b5563; } */ -.type-badge--string { background: var(--type-string-bg); color: var(--type-string-text); } -.type-badge--number { background: var(--type-number-bg); color: var(--type-number-text); } -.type-badge--integer { background: var(--type-integer-bg); color: var(--type-integer-text); } -.type-badge--boolean { background: var(--type-boolean-bg); color: var(--type-boolean-text); } -.type-badge--array { background: var(--type-array-bg); color: var(--type-array-text); } -.type-badge--object { background: var(--type-object-bg); color: var(--type-object-text); } -.type-badge--null { background: var(--type-null-bg); color: var(--type-null-text); } +.type-badge--string { + background: var(--type-string-bg); + color: var(--type-string-text); +} +.type-badge--number { + background: var(--type-number-bg); + color: var(--type-number-text); +} +.type-badge--integer { + background: var(--type-integer-bg); + color: var(--type-integer-text); +} +.type-badge--boolean { + background: var(--type-boolean-bg); + color: var(--type-boolean-text); +} +.type-badge--array { + background: var(--type-array-bg); + color: var(--type-array-text); +} +.type-badge--object { + background: var(--type-object-bg); + color: var(--type-object-text); +} +.type-badge--null { + background: var(--type-null-bg); + color: var(--type-null-text); +} .type-format { font-size: 0.75rem; color: var(--color-text-secondary); font-style: italic; margin-left: 0.25rem; } -/* OpenAPI Code Examples */ -/* ========================================================================== - Code Examples - ========================================================================== */ .code-examples { background: var(--color-surface); border: 1px solid var(--color-border-primary); @@ -14052,8 +11897,7 @@ html { font-weight: 600; color: var(--color-text-secondary); cursor: pointer; - transition: - background-color 0.2s ease, + transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; @@ -14101,8 +11945,7 @@ html { border-radius: 0.375rem; color: var(--color-text-secondary); cursor: pointer; - transition: - background-color 0.2s ease, + transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; @@ -14128,10 +11971,6 @@ html { line-height: 1.5; color: var(--color-text-code); } -/* OpenAPI Components */ -/* ========================================================================== - Components Section - ========================================================================== */ .openapi-components { padding: 2rem 0; } @@ -14159,8 +11998,7 @@ html { border: 1px solid var(--color-border-primary); border-radius: 0.75rem; overflow: hidden; - transition: - background-color 0.2s ease, + transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, @@ -14218,16 +12056,12 @@ html { } .component-details { border-top: 1px solid var(--color-border-primary); - - /* Height-based collapse (consistent with all components) */ max-height: 0; opacity: 0; overflow: hidden; padding: 0; - - /* Configure collapse behavior */ --collapse-height-collapsed: 0; - --collapse-height-expanded: 3000px; /* Large for complex schemas */ + --collapse-height-expanded: 3000px; --collapse-opacity-collapsed: 0; --collapse-opacity-expanded: 1; --collapse-overflow-collapsed: hidden; @@ -14237,8 +12071,6 @@ html { --collapse-timing: 0.3s; --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); } -/* Remove old class-based approach - component-states.css handles this */ -/* Legacy styles removed - component-states.css now handles all collapse behavior */ @keyframes schema-expand { from { opacity: 0; @@ -14249,17 +12081,12 @@ html { transform: translateY(0); } } -/* ========================================================================== - :has() Content-Aware Components Enhancements - ========================================================================== */ -/* Components section adapts based on content type and count */ .openapi-components:has(.components-section[data-section-type="schemas"]) { --primary-section: schemas; } .openapi-components:has(.components-section[data-section-type="parameters"]) { --secondary-section: parameters; } -/* Enhanced styling for sections with many items */ .components-section:has([data-item-count^="1"]) .components-section-title::after, .components-section:has([data-item-count^="2"]) .components-section-title::after, .components-section:has([data-item-count^="3"]) .components-section-title::after { @@ -14268,10 +12095,6 @@ html { font-size: 0.875rem; font-weight: 400; } -/* ========================================================================== - Enhanced Schema Expansion States with :has() - ========================================================================== */ -/* Component items with expanded content */ .component-item:has(.component-details.expanded) { border-color: var(--color-brand); box-shadow: 0 4px 16px rgba(var(--color-brand-rgb), 0.15); @@ -14289,12 +12112,10 @@ html { ); border-bottom: 1px solid rgba(var(--color-brand-rgb), 0.1); } -/* Enhanced chevron rotation for expanded state */ .component-item:has(.component-details.expanded) .chevron { transform: rotate(90deg); color: var(--color-brand); } -/* Schema-specific expanded state styling */ .component-item[data-component="component-schema"]:has(.component-details.expanded) { border-left: 4px solid var(--color-brand); } @@ -14302,7 +12123,6 @@ html { color: var(--color-brand); font-weight: 700; } -/* Complex schemas (with many properties) get enhanced styling when expanded */ .component-item[data-property-count^="1"]:has(.component-details.expanded), .component-item[data-property-count^="2"]:has(.component-details.expanded), .component-item[data-property-count^="3"]:has(.component-details.expanded) { @@ -14313,7 +12133,6 @@ html { .component-item[data-property-count^="3"]:has(.component-details.expanded) .component-name h4 { color: var(--color-accent); } -/* Required schemas get special highlighting when expanded */ .component-item[data-has-required="true"]:has(.component-details.expanded) .component-header { background: linear-gradient( 135deg, @@ -14321,7 +12140,6 @@ html { rgba(var(--color-warning-rgb), 0.03) 100% ); } -/* Different schema types get unique expanded styling */ .component-item[data-schema-type="array"]:has(.component-details.expanded) { border-left-color: var(--color-success); } @@ -14331,7 +12149,6 @@ html { .component-item[data-schema-type="string"]:has(.component-details.expanded) { border-left-color: var(--color-info); } -/* Schema-specific enhancements */ .component-item[data-component="component-schema"]:has([data-has-properties="true"]) { border-left: 3px solid var(--color-brand); } @@ -14350,7 +12167,6 @@ html { .component-item[data-schema-type="string"] .component-icon { color: var(--color-accent); } -/* Parameter-specific enhancements */ .component-item[data-component="component-parameter"][data-param-required="true"] { border-left: 3px solid var(--color-accent); } @@ -14366,14 +12182,11 @@ html { .component-item[data-param-in="header"] .component-header { background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.05), rgba(var(--color-accent-rgb), 0.05)); } -/* Enhanced hover effects based on content */ .component-item:has([data-has-description="true"]):hover { transform: translateY(-2px); - box-shadow: - 0 4px 12px rgba(var(--color-brand-rgb), 0.15), + box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.15), 0 2px 4px rgba(0, 0, 0, 0.08); } -/* Responsive adaptations */ .components-section:has(.component-item:nth-child(n+10)) { --large-section: true; } @@ -14382,20 +12195,14 @@ html { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; } -/* Section with only one item gets special treatment */ .components-section:has(.component-item:only-child) .component-item { max-width: 600px; margin: 0 auto; } -/* Enhanced focus states for accessibility */ .component-item:has(.component-header:focus-visible) { outline: 2px solid var(--color-brand); outline-offset: 2px; } -/* OpenAPI Security */ -/* ========================================================================== - Security Section - ========================================================================== */ .openapi-security { padding: 2rem 0; } @@ -14505,87 +12312,67 @@ html { border-radius: 0.125rem; font-size: 0.8rem; } -/* OpenAPI Responsive Styles */ -/* ========================================================================== - Responsive & Mobile - ========================================================================== */ @media (max-width: 768px) { .openapi-header { padding: 2rem 1.5rem; } - .openapi-header__title { font-size: 2rem; } - .openapi-header__info { grid-template-columns: 1fr; gap: 1rem; } - .section-title { font-size: 2rem; } - .overview-grid { grid-template-columns: 1fr; gap: 1rem; } - .endpoints-nav { padding: 1rem; } - .endpoints-nav__tags, .endpoints-nav__methods { gap: 0.375rem; } - .tag-filter, .method-filter { padding: 0.375rem 0.75rem; font-size: 0.8rem; } - .endpoint-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1rem; } - .endpoint-header__method { align-self: flex-start; } - .endpoint-header__toggle { position: absolute; top: 1rem; right: 1rem; } - .endpoint-details { padding: 1rem; } - .property-item { grid-template-columns: 1fr; gap: 0.5rem; } - .code-tabs-nav { flex-wrap: wrap; } - .code-tab { padding: 0.75rem 1rem; font-size: 0.8rem; } - .code-example-header { padding: 0.75rem 1rem; } - .parameters-section-header, .parameter-item { padding: 0.75rem 1rem; @@ -14595,68 +12382,49 @@ html { .openapi-header { padding: 1.5rem 1rem; } - .openapi-header__title { font-size: 1.75rem; } - .section-title { font-size: 1.75rem; } - .overview-stat { gap: 0.5rem; padding: 0.625rem 0.75rem; min-height: 50px; } - .overview-stat__icon { width: 1rem; height: 1rem; } - .overview-doc-link { gap: 0.5rem; padding: 0.75rem; } - .endpoint-header { padding: 0.75rem; } - .endpoint-details { padding: 0.75rem; } } -/* ========================================================================== - Print Styles - ========================================================================== */ @media print { .openapi-spec { background: white !important; color: black !important; } - .endpoint-details { display: block !important; } - .code-tab-panel { display: block !important; } - .endpoints-nav, .copy-button, .endpoint-header__toggle { display: none !important; } } -/* Unified Tabs Component CSS - * - Enhanced tabs ([data-component="tabs"], .tabs__*) - */ -/* ========================== - Enhanced Tabs (BEM + data) - ========================== */ [data-component="tabs"], .tabs { margin: 1.5rem 0; @@ -14664,20 +12432,16 @@ html { background: var(--glass-bg); border: 1px solid var(--glass-border-color); box-shadow: var(--glass-shadow); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); overflow: hidden; position: relative; } -/* Light mode: strengthen overall container border for visibility */ @media (prefers-color-scheme: light) { [data-component="tabs"], .tabs { border-color: var(--color-border-primary); } } -/* Header-aligned visuals are now the default */ -/* Tab buttons container */ [data-component="tabs"] [data-tab-id], .tabs__nav { background: var(--glass-bg); @@ -14687,21 +12451,18 @@ html { flex-wrap: wrap; gap: 0.25rem; } -/* Light mode: strengthen nav divider for visibility */ @media (prefers-color-scheme: light) { [data-component="tabs"] [data-tab-id], .tabs__nav { border-bottom-color: var(--color-border-primary); } } -/* Individual tab buttons */ [data-component="tabs"] button[data-tab-option], .tabs__button { position: relative; border-radius: 0.625rem; font-weight: 600; - transition: - background-color var(--timing-medium) var(--easing-standard), + transition: background-color var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard), color var(--timing-medium) var(--easing-standard), transform var(--timing-medium) var(--easing-standard); @@ -14709,25 +12470,21 @@ html { cursor: pointer; white-space: nowrap; background: var(--glass-bg); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - padding: 0.25rem 0.5rem; /* match breadcrumb */ + padding: 0.25rem 0.5rem; } -/* Default (inactive) */ [data-component="tabs"] button[data-tab-option]:not(.bg-brand), .tabs__button:not(.bg-brand) { background: var(--glass-bg) !important; color: var(--color-text-primary) !important; border-color: var(--glass-border-color); } -/* Light mode: increase inactive button border contrast */ @media (prefers-color-scheme: light) { [data-component="tabs"] button[data-tab-option]:not(.bg-brand), .tabs__button:not(.bg-brand) { border-color: var(--color-border-primary); } } -/* Hover */ [data-component="tabs"] button[data-tab-option]:not(.bg-brand):hover, .tabs__button:not(.bg-brand):hover { background: var(--color-surface-hover) !important; @@ -14736,7 +12493,6 @@ html { transform: translateY(-1px); box-shadow: var(--elevation-2); } -/* Active */ [data-component="tabs"] button.bg-brand, .tabs__button.bg-brand { background: var(--color-brand) !important; @@ -14745,11 +12501,9 @@ html { box-shadow: var(--elevation-brand-subtle); transform: translateY(-1px); } -/* Subtle variant: revert to tinted-active style */ [data-component="tabs"].tabs--subtle button.bg-brand, .tabs.tabs--subtle .tabs__button.bg-brand { - background: - linear-gradient( + background: linear-gradient( 135deg, rgba(var(--color-brand-rgb), 0.08) 0%, transparent 50%, @@ -14760,7 +12514,6 @@ html { border-color: rgba(var(--color-brand-rgb), 0.45); box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.18), var(--elevation-2); } -/* Dark mode: increase active contrast by default */ @media (prefers-color-scheme: dark) { [data-component="tabs"] button.bg-brand, .tabs__button.bg-brand { @@ -14770,14 +12523,12 @@ html { box-shadow: var(--elevation-brand-medium); } } -/* Focus */ [data-component="tabs"] button[data-tab-option]:focus-visible, .tabs__button:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); } -/* Content container */ [data-component="tabs"] .w-full, .tabs__content { min-height: 200px; @@ -14785,9 +12536,8 @@ html { overflow: hidden; border-top: 1px solid var(--glass-border-color); transition: height var(--timing-medium) var(--easing-standard); - isolation: isolate; /* prevent child blends from darkening surface */ + isolation: isolate; } -/* Panels */ [data-component="tabs"] [data-tabcontent], .tabs__panel { padding: 1.25rem 1.5rem; @@ -14802,12 +12552,10 @@ html { opacity: 0; visibility: hidden; pointer-events: none; - transition: - opacity var(--timing-medium) var(--easing-standard), + transition: opacity var(--timing-medium) var(--easing-standard), transform var(--timing-medium) var(--easing-standard), visibility 0s linear var(--timing-medium); } -/* Visible panel */ [data-component="tabs"] [data-tabcontent].is-active, .tabs__panel.is-active { opacity: 1; @@ -14817,15 +12565,18 @@ html { transition-delay: 0s, 0s, 0s; animation: slideInUp var(--timing-medium) var(--easing-standard); } -/* Panel content spacing */ [data-component="tabs"] [data-tabcontent] > *:first-child, -.tabs__panel > *:first-child { margin-top: 0; } +.tabs__panel > *:first-child { + margin-top: 0; +} [data-component="tabs"] [data-tabcontent] > *:last-child, -.tabs__panel > *:last-child { margin-bottom: 0; } -/* Smooth entrance */ +.tabs__panel > *:last-child { + margin-bottom: 0; +} [data-component="tabs"] [data-tabcontent] *, -.tabs__panel * { transition: none; } -/* Compact density variant */ +.tabs__panel * { + transition: none; +} [data-component="tabs"].tabs--compact .tabs__nav, .tabs.tabs--compact .tabs__nav { padding: 0.25rem 0.25rem; @@ -14836,12 +12587,13 @@ html { padding: 0.375rem 0.5rem; font-size: 0.875rem; } -/* Underline hover animation for inactive buttons */ [data-component="tabs"] button[data-tab-option]:not(.bg-brand)::after, .tabs__button:not(.bg-brand)::after { content: ""; position: absolute; - left: 0.5rem; right: 0.5rem; bottom: 0.25rem; + left: 0.5rem; + right: 0.5rem; + bottom: 0.25rem; height: 2px; background: rgba(var(--color-brand-rgb), 0.35); transform: scaleX(0); @@ -14849,30 +12601,66 @@ html { transition: transform var(--timing-medium) var(--easing-standard); } [data-component="tabs"] button[data-tab-option]:not(.bg-brand):hover::after, -.tabs__button:not(.bg-brand):hover::after { transform: scaleX(1); } -/* Responsive */ +.tabs__button:not(.bg-brand):hover::after { + transform: scaleX(1); +} @media (max-width: 640px) { [data-component="tabs"] [data-tab-id], - .tabs__nav { flex-direction: column; align-items: stretch; } + .tabs__nav { + flex-direction: column; + align-items: stretch; + } [data-component="tabs"] button[data-tab-option], - .tabs__button { text-align: left; justify-content: flex-start; } + .tabs__button { + text-align: left; + justify-content: flex-start; + } [data-component="tabs"] [data-tabcontent], - .tabs__panel { padding: 1.5rem; } + .tabs__panel { + padding: 1.5rem; + } } -/* Print */ @media print { [data-component="tabs"] [data-tab-id], - .tabs__nav { display: none; } + .tabs__nav { + display: none; + } [data-component="tabs"] [data-tabcontent], - .tabs__panel { position: static !important; display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; page-break-inside: avoid; } + .tabs__panel { + position: static !important; + display: block !important; + opacity: 1 !important; + visibility: visible !important; + pointer-events: auto !important; + transform: none !important; + page-break-inside: avoid; + } [data-component="tabs"] [data-tabcontent]:not(:first-of-type), - .tabs__panel:not(:first-of-type) { margin-top: 2rem; border-top: 1px solid var(--color-border-primary); padding-top: 2rem; } + .tabs__panel:not(:first-of-type) { + margin-top: 2rem; + border-top: 1px solid var(--color-border-primary); + padding-top: 2rem; + } [data-component="tabs"] [data-tabcontent]::before, - .tabs__panel::before { content: "Tab: " attr(data-tabcontent); display: block; font-weight: bold; margin-bottom: 1rem; color: var(--color-text-secondary); font-size: 0.875rem; text-transform: capitalize; } + .tabs__panel::before { + content: "Tab: " attr(data-tabcontent); + display: block; + font-weight: bold; + margin-bottom: 1rem; + color: var(--color-text-secondary); + font-size: 0.875rem; + text-transform: capitalize; + } +} +@media (prefers-color-scheme: dark) { + [data-component="tabs"], .tabs { + box-shadow: var(--elevation-4); + } + [data-component="tabs"] button.bg-brand, .tabs__button.bg-brand { + box-shadow: var(--elevation-brand-medium); + } } @media (prefers-color-scheme: dark) { - [data-component="tabs"], .tabs { box-shadow: var(--elevation-4); } - [data-component="tabs"] button.bg-brand, .tabs__button.bg-brand { box-shadow: var(--elevation-brand-medium); } [data-component="tabs"]::after, .tabs::after { background: linear-gradient( @@ -14883,17 +12671,14 @@ html { ); } } -/* Code Blocks - align with header/tabs glass surface and tokens */ .code-block-enhanced { background: var(--glass-bg); border-radius: 0.75rem; border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); box-shadow: var(--glass-shadow); overflow: hidden; } -/* Light mode: strengthen wrapper border for visibility */ @media (prefers-color-scheme: light) { .code-block-enhanced { border-color: var(--color-border-primary); @@ -14908,7 +12693,6 @@ html { background: var(--glass-bg); border-bottom: 1px solid var(--glass-border-color); } -/* Light mode: strengthen header divider similar to article header */ @media (prefers-color-scheme: light) { .code-block-enhanced .code-header { border-bottom-color: var(--color-border-primary); @@ -14949,883 +12733,45 @@ html { .code-block-enhanced .code-content code { display: block; } -/* Dark mode glow tuning aligns with header action glow */ @media (prefers-color-scheme: dark) { .code-block-enhanced { box-shadow: var(--elevation-4); } } -/* Copy button icon alignment and sizing - Ensure the single SVG icon in the copy button is visually centered and consistent */ .code-block-enhanced .code-actions .copy-code .btn__icon { - margin-right: 0; /* no trailing space for icon-only buttons */ - width: 1rem; /* enforce square icon */ + margin-right: 0; + width: 1rem; height: 1rem; - display: block; /* remove inline alignment quirks */ -} -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} -/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */ -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ -*, -::before, -::after { - box-sizing: border-box; /* 1 */ - border-width: 0; /* 2 */ - border-style: solid; /* 2 */ - border-color: #e5e7eb; /* 2 */ -} -::before, -::after { - --tw-content: ''; -} -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -7. Disable tap highlights on iOS -*/ -html, -:host { - line-height: 1.5; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -moz-tab-size: 4; /* 3 */ - -o-tab-size: 4; - tab-size: 4; /* 3 */ - font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ - font-feature-settings: normal; /* 5 */ - font-variation-settings: normal; /* 6 */ - -webkit-tap-highlight-color: transparent; /* 7 */ -} -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ -body { - margin: 0; /* 1 */ - line-height: inherit; /* 2 */ -} -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ -hr { - height: 0; /* 1 */ - color: inherit; /* 2 */ - border-top-width: 1px; /* 3 */ -} -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} -/* -Remove the default font size and weight for headings. -*/ -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ -a { - color: inherit; - text-decoration: inherit; -} -/* -Add the correct font weight in Edge and Safari. -*/ -b, -strong { - font-weight: bolder; -} -/* -1. Use the user's configured `mono` font-family by default. -2. Use the user's configured `mono` font-feature-settings by default. -3. Use the user's configured `mono` font-variation-settings by default. -4. Correct the odd `em` font sizing in all browsers. -*/ -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ - font-feature-settings: normal; /* 2 */ - font-variation-settings: normal; /* 3 */ - font-size: 1em; /* 4 */ -} -/* -Add the correct font size in all browsers. -*/ -small { - font-size: 80%; -} -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} -sub { - bottom: -0.25em; -} -sup { - top: -0.5em; -} -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ -table { - text-indent: 0; /* 1 */ - border-color: inherit; /* 2 */ - border-collapse: collapse; /* 3 */ -} -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-feature-settings: inherit; /* 1 */ - font-variation-settings: inherit; /* 1 */ - font-size: 100%; /* 1 */ - font-weight: inherit; /* 1 */ - line-height: inherit; /* 1 */ - letter-spacing: inherit; /* 1 */ - color: inherit; /* 1 */ - margin: 0; /* 2 */ - padding: 0; /* 3 */ -} -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ -button, -select { - text-transform: none; -} -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ -button, -input:where([type='button']), -input:where([type='reset']), -input:where([type='submit']) { - -webkit-appearance: button; /* 1 */ - background-color: transparent; /* 2 */ - background-image: none; /* 2 */ -} -/* -Use the modern Firefox focus style for all focusable elements. -*/ -:-moz-focusring { - outline: auto; -} -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ -:-moz-ui-invalid { - box-shadow: none; -} -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ -progress { - vertical-align: baseline; -} -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; + display: block; } -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ -[type='search'] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ -::-webkit-search-decoration { - -webkit-appearance: none; -} -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} -/* -Add the correct display in Chrome and Safari. -*/ -summary { - display: list-item; -} -/* -Removes the default spacing and border for appropriate elements. -*/ -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} -fieldset { - margin: 0; - padding: 0; -} -legend { - padding: 0; -} -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} -/* -Reset default styling for dialogs. -*/ -dialog { - padding: 0; -} -/* -Prevent resizing textareas horizontally by default. -*/ -textarea { - resize: vertical; -} -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; /* 1 */ - color: #9ca3af; /* 2 */ -} -input::placeholder, -textarea::placeholder { - opacity: 1; /* 1 */ - color: #9ca3af; /* 2 */ -} -/* -Set the default cursor for buttons. -*/ -button, -[role="button"] { - cursor: pointer; -} -/* -Make sure disabled buttons don't get the pointer cursor. -*/ -:disabled { - cursor: default; -} -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; /* 1 */ - vertical-align: middle; /* 2 */ -} -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ -img, -video { - max-width: 100%; - height: auto; -} -/* Make elements with the HTML hidden attribute stay hidden by default */ -[hidden]:where(:not([hidden="until-found"])) { - display: none; -} -:root { - /* Used for scroll anchoring above headings */ - --header-offset: 64px; - } -/* ✅ FIXED: Use animation tokens instead of hardcoded values */ -html:not(.no-transitions) { - transition: color-scheme var(--timing-medium) var(--easing-standard); - } -/* Apply transitions only to specific elements that need them */ -html:not(.no-transitions) .btn, - html:not(.no-transitions) .nav-link, - html:not(.no-transitions) .card, - html:not(.no-transitions) .collapse__header, - html:not(.no-transitions) .search-container, - html:not(.no-transitions) .toast-notification, - html:not(.no-transitions) .theme-transition { - transition: - background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard); - } -/* Disable transitions during page load to prevent flash */ -html.no-transitions, - html.no-transitions * { - transition: none !important; - } -/* Global Header Sizes & Thickness with Responsive Scaling */ -/* h1 { - font-size: clamp(1.5rem, 4vw, 1.875rem); */ -/* Responsive 24px-30px */ -/* line-height: 1.2; - font-weight: 900; - letter-spacing: -0.025em; - word-wrap: break-word; - } */ -h1 { - font-size: clamp(1.5rem, 3.5vw, 1.75rem); /* Responsive 24px-28px */ - line-height: 1.2; - font-weight: 900; - letter-spacing: -0.025em; - word-wrap: break-word; - } -/* h2 { - font-size: clamp(1.25rem, 3.5vw, 1.5rem); */ -/* Responsive 20px-24px */ -/* line-height: 1.33; - font-weight: 700; - letter-spacing: -0.025em; - word-wrap: break-word; - } */ -h2 { - font-size: clamp(1.25rem, 3vw, 1.375rem); /* Responsive 20px-22px */ - line-height: 1.33; - font-weight: 700; - letter-spacing: -0.025em; - word-wrap: break-word; - } -/* h3 { - font-size: clamp(1.125rem, 3vw, 1.25rem); */ -/* Responsive 18px-20px */ -/* line-height: 1.4; - font-weight: 700; - letter-spacing: -0.015em; - word-wrap: break-word; - } */ -h3 { - font-size: clamp(1.0625rem, 2.5vw, 1.1875rem); /* Responsive 17px-19px */ - line-height: 1.4; - font-weight: 700; - letter-spacing: -0.015em; - word-wrap: break-word; - } -h4 { - font-size: 1.125rem; - line-height: 1.75; - font-weight: 700; - letter-spacing: -0.01em; - word-wrap: break-word; -} -h5 { - font-size: 1rem; - line-height: 1.6; - font-weight: 700; -} -.related-content__card h5 { - color: var(--color-text-primary); - transition: color 0.2s ease; -} -.related-content__card:hover h5 { - color: var(--color-brand); -} -h5 { - word-wrap: break-word; - } -h6 { - font-size: 1rem; /* Increased from 0.875rem for accessibility */ - line-height: 1.5; - font-weight: 700; - word-wrap: break-word; - } -/* Global Font Family & Body Text - Uses brand font with fallbacks */ -main { - font-family: NVIDIA, Arial, Helvetica, sans-serif; -} -/* Improve font loading consistency between dev and production */ -html { - font-synthesis: none; /* Prevent synthetic font generation */ - } -/* Ensure consistent font metrics during font loading */ -body, main { - font-optical-sizing: auto; - font-feature-settings: "kern" 1; - text-rendering: optimizeLegibility; - } -/* Enhanced Body Text Typography */ -/* body { - font-size: clamp(1rem, 2.5vw, 1.125rem); */ -/* Responsive 16px-18px */ -/* line-height: 1.6; - letter-spacing: 0.01em; - } */ -body { - font-size: clamp(1rem, 2vw, 1.0625rem); /* Responsive 16px-17px */ - line-height: 1.6; - letter-spacing: 0.01em; - } -/* Article Content Styles */ -/* Margins */ -.article-content > * { - margin-top: 0.75rem; - margin-bottom: 0.75rem; -} -/* Font Color & Thickness */ -.article-content { - color: var(--color-text-primary); - font-size: 1rem; /* mobile-first */ - line-height: 1.65; /* mobile-first */ - letter-spacing: 0.01em; - } -/* Bump article typography at md and up (replaces mobile max-width overrides) */ -/* @screen md { - .article-content { - font-size: 1.125rem; */ -/* 18px for improved readability */ -/* line-height: 1.6; - } - } */ -@media (min-width: 768px) { - .article-content { - font-size: 1.0625rem; /* 17px for improved readability */ - line-height: 1.6; - } - } -.article-content p { - font-size: inherit; - line-height: inherit; - letter-spacing: inherit; - } -.article-content strong { - font-family: NVIDIA, Arial, Helvetica, sans-serif; - font-weight: 600; -} -/* List Styles */ -.article-content li li { - margin-left: 3rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} -.\!container { - width: 100% !important; -} -.container { - width: 100%; -} -@media (min-width: 640px) { - .\!container { - max-width: 640px !important; - } - .container { - max-width: 640px; - } -} -@media (min-width: 768px) { - .\!container { - max-width: 768px !important; - } - .container { - max-width: 768px; - } -} -@media (min-width: 1024px) { - .\!container { - max-width: 1024px !important; - } - .container { - max-width: 1024px; - } -} -@media (min-width: 1280px) { - .\!container { - max-width: 1280px !important; - } - .container { - max-width: 1280px; - } -} -@media (min-width: 1536px) { - .\!container { - max-width: 1536px !important; - } - .container { - max-width: 1536px; - } -} -/* - * Replacement policy: retire global element styles in favor of a semantic component API. - * Old global table selectors are intentionally removed to avoid leakage across the site. - */ -/* Bridge default Markdown tables to component rules until all markup adopts .table */ -:where(.table, .article-content table) { - width: 100%; - font-size: 0.875rem; - line-height: 1.5; -} -[data-component="tabs"] :where(.table, .article-content table) { - min-height: 200px; - position: relative; - overflow: hidden; - border-top: 1px solid var(--glass-border-color); - transition: height var(--timing-medium) var(--easing-standard); - isolation: isolate; /* prevent child blends from darkening surface */ -} -:where(.table, .article-content table) { - border-collapse: separate; - border-spacing: 0; - color: var(--color-text-primary); - } -/* Container (enables horizontal scroll when needed) */ -.table__container { - overflow-x: auto; - -webkit-overflow-scrolling: touch; - overflow-y: hidden; /* avoid clipping rounded headers within container */ -} -/* Ensure rounded headers aren't visually clipped when inside a scroll container */ -.table__container--rounded { border-radius: 0.75rem; } -/* Progressive enhancement: auto-round container if it has a rounded/glass table */ -.table__container:has(> .table.table--rounded), - .table__container:has(> .table.table--glass) { border-radius: 0.75rem; } -/* Head */ -:where(.table__head, .article-content table thead) th { - text-align: left; - font-size: 0.875rem; - line-height: 1.4; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.025em; -} -[data-component="article-next-prev"] .article-next-prev__link :where(.table__head, .article-content table thead) th { - color: var(--color-text-tertiary); - font-size: 0.75rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; - transition: color 0.2s ease; -} -[data-component="article-next-prev"] .article-next-prev__link:hover :where(.table__head, .article-content table thead) th { - color: var(--color-text-secondary); -} -[data-component="article-next-prev"] .article-next-prev__link--disabled :where(.table__head, .article-content table thead) th { - color: var(--color-text-tertiary); -} -@media (max-width: 768px) { - - [data-component="article-next-prev"] .article-next-prev__link :where(.table__head, .article-content table thead) th { - font-size: 0.6875rem; - } -} -:where(.table__head, .article-content table thead) th { - background-color: var(--color-surface-active); - color: var(--color-text-primary); - } -/* Rows */ -:where(.table__row, .article-content table tbody tr) { - vertical-align: top; -} -/* Cells */ -:where(.table__cell, .article-content table th, .article-content table td) { - padding-left: 0.75rem; - padding-right: 0.75rem; - padding-top: 0.375rem; - padding-bottom: 0.375rem; - border-top: 1px solid var(--color-border-primary); -} -.table__cell--nowrap { - white-space: nowrap; -} -/* Density variants */ -.table--dense .table__cell { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} -.table--compact .table__cell { - padding-top: 0.125rem; - padding-bottom: 0.125rem; -} -/* Row states */ -.table :where(.table__row:hover) { background-color: var(--color-surface-hover); } -:where(.article-content table tbody tr:hover) { background-color: var(--color-surface-hover); } -.table--zebra .table__body > .table__row:nth-child(even) { background-color: var(--color-surface); } -/* Ensure hover wins over zebra striping */ -.table--zebra .table__body > .table__row:nth-child(even):hover { background-color: var(--color-surface-hover); } -/* Pinned header (opt-in) */ -/* Glass morphism (opt-in) */ -.table--glass { - border-radius: 0.5rem; - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); border-radius: var(--radius-lg); - backdrop-filter: saturate(150%) blur(8px); - -webkit-backdrop-filter: saturate(150%) blur(8px); - /* Light: subtle translucent surface; Dark: stronger translucency */ - background-color: rgb(255 255 255 / 0.6); -} -@media (prefers-color-scheme: dark) { - .table--glass { - background-color: rgb(24 24 27 / 0.4); - } -} -.table--glass { - border: 1px solid var(--color-border-primary); - } -/* Inspired header: match code/tabs glass header visuals */ -.table--header-glass .table__head, - .table--glass .table__head { - background: var(--glass-bg); - border-bottom: 1px solid var(--glass-border-color); - overflow: hidden; /* ensure rounded corners show */ - } -.table--header-glass .table__head th, - .table--glass .table__head th { - padding-left: 0.75rem; - padding-right: 0.75rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - font-size: 0.875rem; - line-height: 1.4; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.025em; -} -[data-component="article-next-prev"] .article-next-prev__link .table--header-glass .table__head th,[data-component="article-next-prev"] .article-next-prev__link - .table--glass .table__head th { - color: var(--color-text-tertiary); - font-size: 0.75rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; - transition: color 0.2s ease; -} -[data-component="article-next-prev"] .article-next-prev__link:hover .table--header-glass .table__head th,[data-component="article-next-prev"] .article-next-prev__link:hover - .table--glass .table__head th { - color: var(--color-text-secondary); -} -[data-component="article-next-prev"] .article-next-prev__link--disabled .table--header-glass .table__head th,[data-component="article-next-prev"] .article-next-prev__link--disabled - .table--glass .table__head th { - color: var(--color-text-tertiary); -} -@media (max-width: 768px) { - - [data-component="article-next-prev"] .article-next-prev__link .table--header-glass .table__head th,[data-component="article-next-prev"] .article-next-prev__link - .table--glass .table__head th { - font-size: 0.6875rem; - } -} -.table--header-glass .table__head th, - .table--glass .table__head th { - background: var(--glass-bg); - border-top: none; /* avoid double border at the top */ - } -/* Subtle separators between header cells (like tabs nav) */ -.table--header-glass .table__head th + th, - .table--glass .table__head th + th { - border-left: 1px solid var(--glass-border-color); - } -/* Light mode: strengthen dividers for visibility */ -@media (prefers-color-scheme: light) { - .table--header-glass .table__head, - .table--glass .table__head { border-bottom-color: var(--color-border-primary); } - .table--header-glass .table__head th + th, - .table--glass .table__head th + th { border-left-color: var(--color-border-primary); } - } -/* Rounded top corners when using glass/rounded variant */ -.table--rounded .table__head th:first-child, - .table--glass .table__head th:first-child { border-top-left-radius: 0.75rem; } -.table--rounded .table__head th:last-child, - .table--glass .table__head th:last-child { border-top-right-radius: 0.75rem; } -.table--rounded .table__head { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; overflow: hidden; } -/* Object Model Component */ -[data-component="object-model"] { - /* Align nested option text with summary text start: px-3 + chevron(1rem) + gap(0.5rem) */ - --om-pad-x: 0rem; /* no outer horizontal padding on rows */ - --om-chevron: 1rem; /* h-4 w-4 */ - --om-gap: 0.5rem; /* gap-2 */ +@layer components { + [data-component="object-model"] { + --om-pad-x: 0rem; + --om-chevron: 1rem; + --om-gap: 0.5rem; --om-indent: calc(var(--om-pad-x) + var(--om-chevron) + var(--om-gap)); } -.object-model__title, + .object-model__title, .object-model__heading { scroll-margin-top: var(--header-offset); } -.object-model__heading, + .object-model__heading, .object-model__subheading { color: var(--color-text-primary); } -/* Token-based badge for section headings (replaces hard-coded bg classes) */ -.object-model__heading-badge { + .object-model__heading-badge { display: inline-block; - padding: 0.25rem 0.5rem; /* px-2 py-1 */ + padding: 0.25rem 0.5rem; border-radius: 0.5rem; background: var(--color-surface); border: 1px solid var(--color-border-primary); color: var(--color-text-primary); } -.object-model__intro-text, + .object-model__intro-text, .object-model__summary { color: var(--color-text-primary); } -.object-model__list { - /* Borderless, airy list; separation via spacing and summary hover */ + .object-model__list { background: transparent; border: 0; box-shadow: none; @@ -15834,1502 +12780,2429 @@ body { list-style: none; padding-left: 0; } -/* Ensure inner text inherits proper token-based colors */ -.object-model__item, + .object-model__item, .object-model__field, .object-model__options { color: inherit; } -.object-model__details { - /* Remove default marker for consistent chevron */ - } -.object-model__details > summary::-webkit-details-marker { + .object-model__details > summary::-webkit-details-marker { display: none; } -.object-model__details > summary { + .object-model__details > summary { list-style: none; } -/* Fine tune nested lists */ -.object-model__options { - /* Use only the explicit padding from markup; remove UA list padding/indent */ + .object-model__options { list-style: none; padding-inline-start: 0; margin-left: 0.5em; padding-left: var(--om-indent); - padding-top: 0.25rem; /* tighter attach under summary */ + padding-top: 0.25rem; } -/* Override global article nested list indent for this component only */ -.article-content[data-component="object-model"] .object-model__list li, + .article-content[data-component="object-model"] .object-model__list li, .article-content[data-component="object-model"] .object-model__list li li { margin-left: 0; padding-left: 0; } -/* Ensure summary row has clear focus ring */ -.object-model__summary-row { - border-radius: 0.375rem; - outline: 2px solid transparent; - outline-offset: 2px; border-radius: var(--radius-md); -} -.object-model__summary-row:focus-visible { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); - --tw-ring-opacity: 1; - --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1)); -} -@media (prefers-color-scheme: dark) { - .object-model__summary-row:focus-visible { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(129 140 248 / var(--tw-ring-opacity, 1)); - } -} -.object-model__summary-row:hover { - background-color: rgba(var(--color-brand-rgb), 0.03); + .object-model__summary-row { + border-radius: var(--radius-md); + --tw-outline-style: none; + outline-style: none; + &:focus-visible { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + &:focus-visible { + --tw-ring-color: var(--color-indigo-500); + } + @media (prefers-color-scheme: dark) { + &:focus-visible { + --tw-ring-color: var(--color-indigo-400); + } + } } -/* Ensure names/descriptions use token text colors automatically */ -.object-model__name { + .object-model__summary-row:hover { + background-color: rgba(var(--color-brand-rgb), 0.03); + } + .object-model__name { color: var(--color-text-primary); } -.object-model__description { + .object-model__description { color: var(--color-text-primary); } -.object-model__chevron { + .object-model__chevron { color: var(--color-text-secondary); } -.object-model__dash { + .object-model__dash { color: var(--color-border-primary); } -/* Option items typography */ -/* Keys and values color tokens */ -.object-model__option-key code { + .object-model__option-key code { color: var(--color-text-primary); - font-weight: 600; /* add visual weight to keys */ + font-weight: 600; } -.object-model__option-value, + .object-model__option-value, .object-model__option-value p, .object-model__option-value a { color: var(--color-text-primary); } -.object-model__option-value { display: inline; margin-left: 0.375rem; } -.object-model__option-value p { display: inline; margin: 0; } -.object-model__option-value a:hover { color: var(--color-brand); } -/* Option item in normal inline flow (avoid flex to prevent text splitting into multiple flex items) */ -.object-model__option-item { + .object-model__option-value { + display: inline; + margin-left: 0.375rem; + } + .object-model__option-value p { + display: inline; + margin: 0; + } + .object-model__option-value a:hover { + color: var(--color-brand); + } + .object-model__option-item { display: block; padding: 0.125rem 0; - font-size: 0.875rem; /* text-sm */ + font-size: 0.875rem; line-height: 1.45; } -.object-model__option-key { + .object-model__option-key { color: var(--color-text-secondary); white-space: nowrap; } -.object-model__option-value { + .object-model__option-value { color: var(--color-text-primary); } -/* Strong label variant (for legacy markup without key/value wrappers) */ -.object-model__option-item > strong { - margin-right: 0.375rem; - font-weight: 600; + .object-model__option-item > strong { + margin-right: 0.375rem; + font-weight: 600; } -.object-model__option-item code { - white-space: nowrap; + .object-model__option-item code { + white-space: nowrap; } -/* Compact spacing for rows in dense lists */ -.object-model__row, - .object-model__summary-row { - padding-top: 0.375rem; - padding-bottom: 0.375rem; -} -@media (min-width: 768px) { .object-model__row, .object-model__summary-row { - padding-top: 0.5rem; - padding-bottom: 0.5rem; + padding-block: calc(var(--spacing) * 1.5); + @media (width >= 48rem) { + padding-block: calc(var(--spacing) * 2); + } } -} -.object-model__details:not([open]) .object-model__summary-row { box-shadow: none; } -.object-model__details[open] .object-model__summary-row { box-shadow: none; } -/* Soft separation between items without borders */ -.object-model__item + .object-model__item { margin-top: 0.25rem; } -/* Responsive auto-fit grid for cards/tiles */ -.grid-autofit { - grid-template-columns: repeat(auto-fit, minmax(var(--grid-card-min, 280px), 1fr)); + .object-model__details:not([open]) .object-model__summary-row { + box-shadow: none; } -@media (min-width: 768px) { - .grid-autofit { - gap: 2rem; + .object-model__details[open] .object-model__summary-row { + box-shadow: none; + } + .object-model__item + .object-model__item { + margin-top: 0.25rem; + } +} +@layer theme { + :root, :host { + --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", + "Courier New", monospace; + --color-red-50: oklch(97.1% 0.013 17.38); + --color-red-100: oklch(93.6% 0.032 17.717); + --color-red-200: oklch(88.5% 0.062 18.334); + --color-red-400: oklch(70.4% 0.191 22.216); + --color-red-500: oklch(63.7% 0.237 25.331); + --color-red-600: oklch(57.7% 0.245 27.325); + --color-red-700: oklch(50.5% 0.213 27.518); + --color-red-800: oklch(44.4% 0.177 26.899); + --color-red-900: oklch(39.6% 0.141 25.723); + --color-yellow-50: oklch(98.7% 0.026 102.212); + --color-yellow-100: oklch(97.3% 0.071 103.193); + --color-yellow-200: oklch(94.5% 0.129 101.54); + --color-yellow-300: oklch(90.5% 0.182 98.111); + --color-yellow-400: oklch(85.2% 0.199 91.936); + --color-yellow-500: oklch(79.5% 0.184 86.047); + --color-yellow-700: oklch(55.4% 0.135 66.442); + --color-yellow-800: oklch(47.6% 0.114 61.907); + --color-yellow-900: oklch(42.1% 0.095 57.708); + --color-green-100: oklch(96.2% 0.044 156.743); + --color-green-500: oklch(72.3% 0.219 149.579); + --color-green-600: oklch(62.7% 0.194 149.214); + --color-blue-50: oklch(97% 0.014 254.604); + --color-blue-100: oklch(93.2% 0.032 255.585); + --color-blue-200: oklch(88.2% 0.059 254.128); + --color-blue-300: oklch(80.9% 0.105 251.813); + --color-blue-500: oklch(62.3% 0.214 259.815); + --color-blue-600: oklch(54.6% 0.245 262.881); + --color-blue-800: oklch(42.4% 0.199 265.638); + --color-blue-900: oklch(37.9% 0.146 265.522); + --color-indigo-400: oklch(67.3% 0.182 276.935); + --color-indigo-500: oklch(58.5% 0.233 277.117); + --color-gray-50: oklch(98.5% 0.002 247.839); + --color-gray-100: oklch(96.7% 0.003 264.542); + --color-gray-200: oklch(92.8% 0.006 264.531); + --color-gray-300: oklch(87.2% 0.01 258.338); + --color-gray-400: oklch(70.7% 0.022 261.325); + --color-gray-500: oklch(55.1% 0.027 264.364); + --color-gray-600: oklch(44.6% 0.03 256.802); + --color-gray-700: oklch(37.3% 0.034 259.733); + --color-gray-800: oklch(27.8% 0.033 256.848); + --color-gray-900: oklch(21% 0.034 264.665); + --color-zinc-100: oklch(96.7% 0.001 286.375); + --color-zinc-200: oklch(92% 0.004 286.32); + --color-zinc-300: oklch(87.1% 0.006 286.286); + --color-zinc-600: oklch(44.2% 0.017 285.786); + --color-zinc-700: oklch(37% 0.013 285.805); + --color-zinc-800: oklch(27.4% 0.006 286.033); + --color-zinc-900: oklch(21% 0.006 285.885); + --color-black: #000; + --color-white: #fff; + --spacing: 0.25rem; + --breakpoint-xl: 80rem; + --breakpoint-2xl: 96rem; + --container-2xl: 42rem; + --container-3xl: 48rem; + --container-4xl: 56rem; + --container-5xl: 64rem; + --container-6xl: 72rem; + --container-7xl: 80rem; + --text-xs: 0.75rem; + --text-xs--line-height: calc(1 / 0.75); + --text-sm: 0.875rem; + --text-sm--line-height: calc(1.25 / 0.875); + --text-base: 1rem; + --text-base--line-height: calc(1.5 / 1); + --text-lg: 1.125rem; + --text-lg--line-height: calc(1.75 / 1.125); + --text-xl: 1.25rem; + --text-xl--line-height: calc(1.75 / 1.25); + --text-2xl: 1.5rem; + --text-2xl--line-height: calc(2 / 1.5); + --text-3xl: 1.875rem; + --text-3xl--line-height: calc(2.25 / 1.875); + --text-4xl: 2.25rem; + --text-4xl--line-height: calc(2.5 / 2.25); + --text-5xl: 3rem; + --text-5xl--line-height: 1; + --font-weight-thin: 100; + --font-weight-light: 300; + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --font-weight-black: 900; + --tracking-wide: 0.025em; + --leading-tight: 1.25; + --leading-relaxed: 1.625; + --radius-sm: 0.25rem; + --radius-md: 0.375rem; + --radius-lg: 0.5rem; + --radius-xl: 0.75rem; + --radius-2xl: 1rem; + --radius-3xl: 1.5rem; + --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); + --animate-spin: spin 1s linear infinite; + --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + --default-transition-duration: 150ms; + --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + --default-font-family: var(--font-sans); + --default-mono-font-family: var(--font-mono); + } +} +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; + } + html, + :host { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var(--default-font-variation-settings, normal); + -webkit-tap-highlight-color: transparent; + } + hr { + height: 0; + color: inherit; + border-top-width: 1px; + } + abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + } + h1, + h2, + h3, + h4, + h5, + h6 { + font-size: inherit; + font-weight: inherit; + } + a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; + } + b, + strong { + font-weight: bolder; + } + code, + kbd, + samp, + pre { + font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); + font-feature-settings: var(--default-mono-font-feature-settings, normal); + font-variation-settings: var(--default-mono-font-variation-settings, normal); + font-size: 1em; + } + small { + font-size: 80%; + } + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + sub { + bottom: -0.25em; + } + sup { + top: -0.5em; + } + table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; + } + :-moz-focusring { + outline: auto; + } + progress { + vertical-align: baseline; + } + summary { + display: list-item; + } + ol, + ul, + menu { + list-style: none; + } + img, + svg, + video, + canvas, + audio, + iframe, + embed, + object { + display: block; + vertical-align: middle; + } + img, + video { + max-width: 100%; + height: auto; + } + button, + input, + select, + optgroup, + textarea, + ::file-selector-button { + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + border-radius: 0; + background-color: transparent; + opacity: 1; + } + :where(select:is([multiple], [size])) optgroup { + font-weight: bolder; + } + :where(select:is([multiple], [size])) optgroup option { + padding-inline-start: 20px; + } + ::file-selector-button { + margin-inline-end: 4px; + } + ::-moz-placeholder { + opacity: 1; + } + ::placeholder { + opacity: 1; + } + @supports (not (-webkit-appearance: -apple-pay-button)) or + (contain-intrinsic-size: 1px) { + ::-moz-placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + ::placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } } } -/* Layout shell: centralizes the app's three-column grid with tokens */ -.layout-shell { - width: 100%; - padding-left: 1rem; - padding-right: 1rem; - transition-property: all; - transition-duration: 300ms; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -} -[data-component="tabs"] .layout-shell { - min-height: 200px; - position: relative; - overflow: hidden; - border-top: 1px solid var(--glass-border-color); - transition: height var(--timing-medium) var(--easing-standard); - isolation: isolate; /* prevent child blends from darkening surface */ -} -@media (min-width: 640px) { - .layout-shell { - padding-left: 1.5rem; - padding-right: 1.5rem; + textarea { + resize: vertical; } -} -@media (min-width: 1024px) { - .layout-shell { - padding-left: 2rem; - padding-right: 2rem; + ::-webkit-search-decoration { + -webkit-appearance: none; } -} -@media (min-width: 1280px) { - .layout-shell { - padding-left: 0px; - padding-right: 0px; - display: grid; - grid-template-columns: var(--left-rail-width) minmax(0, 1fr) var(--right-rail-width); - gap: var(--layout-gap-xl); + ::-webkit-date-and-time-value { + min-height: 1lh; + text-align: inherit; + } + ::-webkit-datetime-edit { + display: inline-flex; + } + ::-webkit-datetime-edit-fields-wrapper { + padding: 0; + } + ::-webkit-datetime-edit, + ::-webkit-datetime-edit-year-field, + ::-webkit-datetime-edit-month-field, + ::-webkit-datetime-edit-day-field, + ::-webkit-datetime-edit-hour-field, + ::-webkit-datetime-edit-minute-field, + ::-webkit-datetime-edit-second-field, + ::-webkit-datetime-edit-millisecond-field, + ::-webkit-datetime-edit-meridiem-field { + padding-block: 0; + } + ::-webkit-calendar-picker-indicator { + line-height: 1; + } + :-moz-ui-invalid { + box-shadow: none; + } + button, + input:where([type="button"], [type="reset"], [type="submit"]), + ::file-selector-button { + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + } + ::-webkit-inner-spin-button, + ::-webkit-outer-spin-button { + height: auto; + } + [hidden]:where(:not([hidden="until-found"])) { + display: none !important; } } -@media (min-width: 1536px) { - .layout-shell { - grid-template-columns: var(--left-rail-width-2xl) minmax(0, 1fr) var(--right-rail-width-2xl); - gap: var(--layout-gap-2xl); +@layer utilities { + .pointer-events-none { + pointer-events: none; + } + .collapse { + visibility: collapse; + } + .visible { + visibility: visible; + } + .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip-path: inset(50%); + white-space: nowrap; + border-width: 0; + } + .absolute { + position: absolute; + } + .fixed { + position: fixed; + } + .relative { + position: relative; + } + .static { + position: static; + } + .sticky { + position: sticky; + } + .inset-0 { + inset: calc(var(--spacing) * 0); + } + .top-0 { + top: calc(var(--spacing) * 0); + } + .top-4 { + top: calc(var(--spacing) * 4); + } + .top-10 { + top: calc(var(--spacing) * 10); + } + .top-16 { + top: calc(var(--spacing) * 16); + } + .top-20 { + top: calc(var(--spacing) * 20); + } + .right-0 { + right: calc(var(--spacing) * 0); + } + .right-2\.5 { + right: calc(var(--spacing) * 2.5); + } + .bottom-\[9px\] { + bottom: 9px; + } + .left-0 { + left: calc(var(--spacing) * 0); + } + .left-4 { + left: calc(var(--spacing) * 4); + } + .z-10 { + z-index: 10; + } + .z-40 { + z-index: 40; + } + .z-50 { + z-index: 50; + } + .container { + width: 100%; + @media (width >= 40rem) { + max-width: 40rem; + } + @media (width >= 48rem) { + max-width: 48rem; + } + @media (width >= 64rem) { + max-width: 64rem; + } + @media (width >= 80rem) { + max-width: 80rem; + } + @media (width >= 96rem) { + max-width: 96rem; } } -/* Page container max-width controlled by token */ -.page-container { - max-width: var(--max-width-content); + .m-4 { + margin: calc(var(--spacing) * 4); } -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; -} -.pointer-events-none { - pointer-events: none; -} -.visible { - visibility: visible; -} -.collapse { - visibility: collapse; -} -.static { - position: static; -} -.fixed { - position: fixed; -} -.absolute { - position: absolute; -} -.relative { - position: relative; -} -.sticky { - position: sticky; -} -.inset-0 { - inset: 0px; -} -.bottom-\[9px\] { - bottom: 9px; -} -.left-0 { - left: 0px; -} -.left-4 { - left: 1rem; -} -.right-0 { - right: 0px; -} -.right-2\.5 { - right: 0.625rem; -} -.top-0 { - top: 0px; -} -.top-10 { - top: 2.5rem; -} -.top-16 { - top: 4rem; -} -.top-20 { - top: 5rem; -} -.top-4 { - top: 1rem; -} -.z-10 { - z-index: 10; -} -.z-40 { - z-index: 40; -} -.z-50 { - z-index: 50; -} -.m-4 { - margin: 1rem; -} -.mx-2 { - margin-left: 0.5rem; - margin-right: 0.5rem; -} -.mx-8 { - margin-left: 2rem; - margin-right: 2rem; -} -.mx-auto { - margin-left: auto; - margin-right: auto; -} -.my-1 { - margin-top: 0.25rem; - margin-bottom: 0.25rem; -} -.my-10 { - margin-top: 2.5rem; - margin-bottom: 2.5rem; -} -.my-2 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} -.my-4 { - margin-top: 1rem; - margin-bottom: 1rem; -} -.-mr-1 { - margin-right: -0.25rem; -} -.mb-1 { - margin-bottom: 0.25rem; -} -.mb-2 { - margin-bottom: 0.5rem; -} -.mb-3 { - margin-bottom: 0.75rem; -} -.mb-4 { - margin-bottom: 1rem; -} -.mb-6 { - margin-bottom: 1.5rem; -} -.mb-8 { - margin-bottom: 2rem; -} -.ml-1 { - margin-left: 0.25rem; -} -.ml-2 { - margin-left: 0.5rem; -} -.ml-3 { - margin-left: 0.75rem; -} -.ml-4 { - margin-left: 1rem; -} -.ml-8 { - margin-left: 2rem; -} -.mr-1 { - margin-right: 0.25rem; -} -.mr-2 { - margin-right: 0.5rem; -} -.mr-3 { - margin-right: 0.75rem; -} -.mt-1 { - margin-top: 0.25rem; -} -.mt-12 { - margin-top: 3rem; -} -.mt-2 { - margin-top: 0.5rem; -} -.mt-3 { - margin-top: 0.75rem; -} -.mt-4 { - margin-top: 1rem; -} -.mt-6 { - margin-top: 1.5rem; -} -.mt-8 { - margin-top: 2rem; -} -.line-clamp-2 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; -} -.line-clamp-3 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; -} -.\!block { - display: block !important; -} -.block { - display: block; -} -.inline-block { - display: inline-block; -} -.inline { - display: inline; -} -.flex { - display: flex; -} -.inline-flex { - display: inline-flex; -} -.table { - display: table; -} -.grid { - display: grid; -} -.contents { - display: contents; -} -.hidden { - display: none; -} -.h-1\.5 { - height: 0.375rem; -} -.h-10 { - height: 2.5rem; -} -.h-16 { - height: 4rem; -} -.h-3 { - height: 0.75rem; -} -.h-3\.5 { - height: 0.875rem; -} -.h-32 { - height: 8rem; -} -.h-4 { - height: 1rem; -} -.h-48 { - height: 12rem; -} -.h-5 { - height: 1.25rem; -} -.h-6 { - height: 1.5rem; -} -.h-7 { - height: 1.75rem; -} -.h-8 { - height: 2rem; -} -.h-\[calc\(100vh-4rem\)\] { - height: calc(100vh - 4rem); -} -.h-\[calc\(100vh-5rem\)\] { - height: calc(100vh - 5rem); -} -.h-\[calc\(100vh-6rem\)\] { - height: calc(100vh - 6rem); -} -.h-full { - height: 100%; -} -.h-screen { - height: 100vh; -} -.w-1 { - width: 0.25rem; -} -.w-3 { - width: 0.75rem; -} -.w-3\.5 { - width: 0.875rem; -} -.w-3\/4 { - width: 75%; -} -.w-4 { - width: 1rem; -} -.w-4\/6 { - width: 66.666667%; -} -.w-5 { - width: 1.25rem; -} -.w-5\/6 { - width: 83.333333%; -} -.w-56 { - width: 14rem; -} -.w-6 { - width: 1.5rem; -} -.w-7 { - width: 1.75rem; -} -.w-8 { - width: 2rem; -} -.w-80 { - width: 20rem; -} -.w-full { - width: 100%; -} -.min-w-0 { - min-width: 0px; -} -.max-w-2xl { - max-width: 42rem; -} -.max-w-3xl { - max-width: 48rem; -} -.max-w-4xl { - max-width: 56rem; -} -.max-w-6xl { - max-width: 72rem; -} -.max-w-7xl { - max-width: 80rem; -} -.flex-1 { - flex: 1 1 0%; -} -.flex-shrink { - flex-shrink: 1; -} -.flex-shrink-0 { - flex-shrink: 0; -} -.shrink-0 { - flex-shrink: 0; -} -.flex-grow { - flex-grow: 1; -} -.grow { - flex-grow: 1; -} -.-translate-x-full { - --tw-translate-x: -100%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} -.translate-x-0 { - --tw-translate-x: 0px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} -.rotate-90 { - --tw-rotate: 90deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} -.scale-0 { - --tw-scale-x: 0; - --tw-scale-y: 0; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} -.scale-100 { - --tw-scale-x: 1; - --tw-scale-y: 1; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} -.transform { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} -@keyframes pulse { - 50% { - opacity: .5; + .mx-2 { + margin-inline: calc(var(--spacing) * 2); } -} -.animate-pulse { - animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; -} -@keyframes spin { - to { - transform: rotate(360deg); + .mx-8 { + margin-inline: calc(var(--spacing) * 8); + } + .mx-auto { + margin-inline: auto; + } + .my-1 { + margin-block: calc(var(--spacing) * 1); + } + .my-2 { + margin-block: calc(var(--spacing) * 2); + } + .my-4 { + margin-block: calc(var(--spacing) * 4); + } + .my-10 { + margin-block: calc(var(--spacing) * 10); + } + .mt-1 { + margin-top: calc(var(--spacing) * 1); + } + .mt-2 { + margin-top: calc(var(--spacing) * 2); + } + .mt-3 { + margin-top: calc(var(--spacing) * 3); + } + .mt-4 { + margin-top: calc(var(--spacing) * 4); + } + .mt-6 { + margin-top: calc(var(--spacing) * 6); + } + .mt-8 { + margin-top: calc(var(--spacing) * 8); + } + .mt-12 { + margin-top: calc(var(--spacing) * 12); + } + .-mr-1 { + margin-right: calc(var(--spacing) * -1); + } + .mr-1 { + margin-right: calc(var(--spacing) * 1); + } + .mr-2 { + margin-right: calc(var(--spacing) * 2); + } + .mr-3 { + margin-right: calc(var(--spacing) * 3); + } + .mb-1 { + margin-bottom: calc(var(--spacing) * 1); + } + .mb-2 { + margin-bottom: calc(var(--spacing) * 2); + } + .mb-3 { + margin-bottom: calc(var(--spacing) * 3); + } + .mb-4 { + margin-bottom: calc(var(--spacing) * 4); + } + .mb-6 { + margin-bottom: calc(var(--spacing) * 6); + } + .mb-8 { + margin-bottom: calc(var(--spacing) * 8); + } + .ml-1 { + margin-left: calc(var(--spacing) * 1); + } + .ml-2 { + margin-left: calc(var(--spacing) * 2); + } + .ml-3 { + margin-left: calc(var(--spacing) * 3); + } + .ml-4 { + margin-left: calc(var(--spacing) * 4); + } + .ml-8 { + margin-left: calc(var(--spacing) * 8); + } + .line-clamp-2 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + } + .line-clamp-3 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + } + .block { + display: block; + } + .contents { + display: contents; + } + .flex { + display: flex; + } + .grid { + display: grid; + } + .hidden { + display: none; + } + .inline { + display: inline; + } + .inline-block { + display: inline-block; + } + .inline-flex { + display: inline-flex; + } + .table { + display: table; + } + .h-1\.5 { + height: calc(var(--spacing) * 1.5); + } + .h-3 { + height: calc(var(--spacing) * 3); + } + .h-3\.5 { + height: calc(var(--spacing) * 3.5); + } + .h-4 { + height: calc(var(--spacing) * 4); + } + .h-5 { + height: calc(var(--spacing) * 5); + } + .h-6 { + height: calc(var(--spacing) * 6); + } + .h-7 { + height: calc(var(--spacing) * 7); + } + .h-8 { + height: calc(var(--spacing) * 8); + } + .h-10 { + height: calc(var(--spacing) * 10); + } + .h-16 { + height: calc(var(--spacing) * 16); + } + .h-32 { + height: calc(var(--spacing) * 32); + } + .h-48 { + height: calc(var(--spacing) * 48); + } + .h-\[calc\(100vh-4rem\)\] { + height: calc(100vh - 4rem); + } + .h-\[calc\(100vh-5rem\)\] { + height: calc(100vh - 5rem); + } + .h-\[calc\(100vh-6rem\)\] { + height: calc(100vh - 6rem); + } + .h-full { + height: 100%; + } + .h-screen { + height: 100vh; + } + .w-1 { + width: calc(var(--spacing) * 1); + } + .w-3 { + width: calc(var(--spacing) * 3); + } + .w-3\.5 { + width: calc(var(--spacing) * 3.5); + } + .w-3\/4 { + width: calc(3/4 * 100%); + } + .w-4 { + width: calc(var(--spacing) * 4); + } + .w-4\/6 { + width: calc(4/6 * 100%); + } + .w-5 { + width: calc(var(--spacing) * 5); + } + .w-5\/6 { + width: calc(5/6 * 100%); + } + .w-6 { + width: calc(var(--spacing) * 6); + } + .w-7 { + width: calc(var(--spacing) * 7); + } + .w-8 { + width: calc(var(--spacing) * 8); + } + .w-56 { + width: calc(var(--spacing) * 56); + } + .w-80 { + width: calc(var(--spacing) * 80); + } + .w-full { + width: 100%; + } + .max-w-2xl { + max-width: var(--container-2xl); + } + .max-w-3xl { + max-width: var(--container-3xl); + } + .max-w-4xl { + max-width: var(--container-4xl); + } + .max-w-6xl { + max-width: var(--container-6xl); + } + .max-w-7xl { + max-width: var(--container-7xl); + } + .max-w-screen-xl { + max-width: var(--breakpoint-xl); + } + .min-w-0 { + min-width: calc(var(--spacing) * 0); + } + .flex-1 { + flex: 1; + } + .flex-shrink { + flex-shrink: 1; + } + .flex-shrink-0 { + flex-shrink: 0; + } + .shrink-0 { + flex-shrink: 0; + } + .flex-grow { + flex-grow: 1; + } + .grow { + flex-grow: 1; + } + .-translate-x-full { + --tw-translate-x: -100%; + translate: var(--tw-translate-x) var(--tw-translate-y); + } + .translate-x-0 { + --tw-translate-x: calc(var(--spacing) * 0); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + .scale-0 { + --tw-scale-x: 0%; + --tw-scale-y: 0%; + --tw-scale-z: 0%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + .scale-100 { + --tw-scale-x: 100%; + --tw-scale-y: 100%; + --tw-scale-z: 100%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + .rotate-90 { + rotate: 90deg; + } + .transform { + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + } + .animate-pulse { + animation: var(--animate-pulse); + } + .animate-spin { + animation: var(--animate-spin); + } + .cursor-not-allowed { + cursor: not-allowed; + } + .cursor-pointer { + cursor: pointer; + } + .resize { + resize: both; + } + .resize-none { + resize: none; + } + .list-inside { + list-style-position: inside; + } + .list-disc { + list-style-type: disc; + } + .list-none { + list-style-type: none; + } + .grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + .grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .grid-cols-\[repeat\(auto-fit\,minmax\(280px\,1fr\)\)\] { + grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); + } + .flex-col { + flex-direction: column; + } + .flex-row { + flex-direction: row; + } + .flex-wrap { + flex-wrap: wrap; + } + .items-center { + align-items: center; + } + .items-end { + align-items: flex-end; + } + .items-start { + align-items: flex-start; + } + .justify-between { + justify-content: space-between; + } + .justify-center { + justify-content: center; + } + .justify-end { + justify-content: flex-end; + } + .gap-1 { + gap: calc(var(--spacing) * 1); + } + .gap-2 { + gap: calc(var(--spacing) * 2); + } + .gap-3 { + gap: calc(var(--spacing) * 3); + } + .gap-4 { + gap: calc(var(--spacing) * 4); + } + .gap-6 { + gap: calc(var(--spacing) * 6); + } + .space-y-1 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-y-2 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-y-3 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-y-4 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-x-1 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse))); + } + } + .space-x-2 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))); + } + } + .space-x-3 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse))); + } + } + .space-x-4 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); + } + } + .divide-y { + :where(& > :not(:last-child)) { + --tw-divide-y-reverse: 0; + border-bottom-style: var(--tw-border-style); + border-top-style: var(--tw-border-style); + border-top-width: calc(1px * var(--tw-divide-y-reverse)); + border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); + } + } + .divide-gray-100 { + :where(& > :not(:last-child)) { + border-color: var(--color-gray-100); + } + } + .truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .overflow-hidden { + overflow: hidden; + } + .overflow-y-auto { + overflow-y: auto; + } + .rounded { + border-radius: 0.25rem; + } + .rounded-2xl { + border-radius: var(--radius-2xl); + } + .rounded-full { + border-radius: calc(infinity * 1px); + } + .rounded-lg { + border-radius: var(--radius-lg); + } + .rounded-md { + border-radius: var(--radius-md); + } + .border { + border-style: var(--tw-border-style); + border-width: 1px; + } + .border-2 { + border-style: var(--tw-border-style); + border-width: 2px; + } + .border-4 { + border-style: var(--tw-border-style); + border-width: 4px; + } + .border-t { + border-top-style: var(--tw-border-style); + border-top-width: 1px; + } + .border-l-4 { + border-left-style: var(--tw-border-style); + border-left-width: 4px; + } + .border-dotted { + --tw-border-style: dotted; + border-style: dotted; + } + .border-blue-200 { + border-color: var(--color-blue-200); + } + .border-blue-300 { + border-color: var(--color-blue-300); + } + .border-gray-100 { + border-color: var(--color-gray-100); + } + .border-gray-200 { + border-color: var(--color-gray-200); + } + .border-gray-300 { + border-color: var(--color-gray-300); + } + .border-red-200 { + border-color: var(--color-red-200); + } + .border-red-400 { + border-color: var(--color-red-400); + } + .border-red-500 { + border-color: var(--color-red-500); + } + .border-transparent { + border-color: transparent; + } + .border-yellow-200 { + border-color: var(--color-yellow-200); + } + .border-yellow-400 { + border-color: var(--color-yellow-400); + } + .border-yellow-500 { + border-color: var(--color-yellow-500); + } + .border-zinc-200 { + border-color: var(--color-zinc-200); + } + .border-t-current { + border-top-color: currentcolor; + } + .border-t-transparent { + border-top-color: transparent; + } + .bg-black { + background-color: var(--color-black); + } + .bg-blue-50 { + background-color: var(--color-blue-50); + } + .bg-blue-100 { + background-color: var(--color-blue-100); + } + .bg-gray-100 { + background-color: var(--color-gray-100); + } + .bg-gray-200 { + background-color: var(--color-gray-200); + } + .bg-green-100 { + background-color: var(--color-green-100); + } + .bg-green-500 { + background-color: var(--color-green-500); + } + .bg-green-600 { + background-color: var(--color-green-600); + } + .bg-red-50 { + background-color: var(--color-red-50); + } + .bg-red-100 { + background-color: var(--color-red-100); + } + .bg-red-600 { + background-color: var(--color-red-600); + } + .bg-white { + background-color: var(--color-white); + } + .bg-yellow-50 { + background-color: var(--color-yellow-50); + } + .bg-yellow-100 { + background-color: var(--color-yellow-100); + } + .bg-zinc-100 { + background-color: var(--color-zinc-100); + } + .bg-zinc-600 { + background-color: var(--color-zinc-600); + } + .object-cover { + -o-object-fit: cover; + object-fit: cover; + } + .p-1 { + padding: calc(var(--spacing) * 1); + } + .p-1\.5 { + padding: calc(var(--spacing) * 1.5); + } + .p-2 { + padding: calc(var(--spacing) * 2); + } + .p-3 { + padding: calc(var(--spacing) * 3); + } + .p-4 { + padding: calc(var(--spacing) * 4); + } + .p-5 { + padding: calc(var(--spacing) * 5); + } + .p-6 { + padding: calc(var(--spacing) * 6); + } + .p-8 { + padding: calc(var(--spacing) * 8); + } + .px-2 { + padding-inline: calc(var(--spacing) * 2); + } + .px-3 { + padding-inline: calc(var(--spacing) * 3); + } + .px-3\.5 { + padding-inline: calc(var(--spacing) * 3.5); + } + .px-4 { + padding-inline: calc(var(--spacing) * 4); + } + .py-1 { + padding-block: calc(var(--spacing) * 1); + } + .py-2 { + padding-block: calc(var(--spacing) * 2); + } + .py-2\.5 { + padding-block: calc(var(--spacing) * 2.5); + } + .py-3 { + padding-block: calc(var(--spacing) * 3); + } + .py-4 { + padding-block: calc(var(--spacing) * 4); + } + .py-8 { + padding-block: calc(var(--spacing) * 8); + } + .pt-2 { + padding-top: calc(var(--spacing) * 2); + } + .pt-3 { + padding-top: calc(var(--spacing) * 3); + } + .pt-4 { + padding-top: calc(var(--spacing) * 4); + } + .pt-5 { + padding-top: calc(var(--spacing) * 5); + } + .pr-1 { + padding-right: calc(var(--spacing) * 1); + } + .pr-2 { + padding-right: calc(var(--spacing) * 2); + } + .pr-12 { + padding-right: calc(var(--spacing) * 12); + } + .pl-0 { + padding-left: calc(var(--spacing) * 0); + } + .pl-2 { + padding-left: calc(var(--spacing) * 2); + } + .pl-4 { + padding-left: calc(var(--spacing) * 4); + } + .text-center { + text-align: center; + } + .text-left { + text-align: left; + } + .text-right { + text-align: right; + } + .text-2xl { + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + } + .text-3xl { + font-size: var(--text-3xl); + line-height: var(--tw-leading, var(--text-3xl--line-height)); + } + .text-4xl { + font-size: var(--text-4xl); + line-height: var(--tw-leading, var(--text-4xl--line-height)); + } + .text-base { + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + } + .text-lg { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + } + .text-sm { + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + } + .text-xl { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + } + .text-xs { + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); + } + .leading-relaxed { + --tw-leading: var(--leading-relaxed); + line-height: var(--leading-relaxed); + } + .leading-tight { + --tw-leading: var(--leading-tight); + line-height: var(--leading-tight); + } + .font-black { + --tw-font-weight: var(--font-weight-black); + font-weight: var(--font-weight-black); + } + .font-bold { + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + } + .font-light { + --tw-font-weight: var(--font-weight-light); + font-weight: var(--font-weight-light); + } + .font-medium { + --tw-font-weight: var(--font-weight-medium); + font-weight: var(--font-weight-medium); + } + .font-semibold { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + } + .font-thin { + --tw-font-weight: var(--font-weight-thin); + font-weight: var(--font-weight-thin); + } + .tracking-wide { + --tw-tracking: var(--tracking-wide); + letter-spacing: var(--tracking-wide); + } + .text-black { + color: var(--color-black); + } + .text-blue-600 { + color: var(--color-blue-600); + } + .text-blue-900 { + color: var(--color-blue-900); + } + .text-current { + color: currentcolor; + } + .text-gray-400 { + color: var(--color-gray-400); + } + .text-gray-500 { + color: var(--color-gray-500); + } + .text-gray-600 { + color: var(--color-gray-600); + } + .text-gray-700 { + color: var(--color-gray-700); + } + .text-gray-900 { + color: var(--color-gray-900); + } + .text-green-100 { + color: var(--color-green-100); + } + .text-green-500 { + color: var(--color-green-500); + } + .text-red-500 { + color: var(--color-red-500); + } + .text-red-600 { + color: var(--color-red-600); + } + .text-red-700 { + color: var(--color-red-700); + } + .text-red-900 { + color: var(--color-red-900); + } + .text-transparent { + color: transparent; + } + .text-white { + color: var(--color-white); + } + .text-yellow-700 { + color: var(--color-yellow-700); + } + .text-yellow-800 { + color: var(--color-yellow-800); + } + .text-zinc-200 { + color: var(--color-zinc-200); + } + .text-zinc-700 { + color: var(--color-zinc-700); + } + .text-zinc-800 { + color: var(--color-zinc-800); + } + .uppercase { + text-transform: uppercase; + } + .italic { + font-style: italic; + } + .ordinal { + --tw-ordinal: ordinal; + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); + } + .underline { + text-decoration-line: underline; + } + .antialiased { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + .opacity-40 { + opacity: 40%; + } + .opacity-50 { + opacity: 50%; + } + .opacity-60 { + opacity: 60%; + } + .opacity-70 { + opacity: 70%; + } + .shadow { + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-lg { + --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-md { + --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-sm { + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-xl { + --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow\/elevation { + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .ring-1 { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .ring-black { + --tw-ring-color: var(--color-black); + } + .blur { + --tw-blur: blur(8px); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + .filter { + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + .backdrop-filter { + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + } + .transition { + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .transition-all { + transition-property: all; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .transition-colors { + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .transition-opacity { + transition-property: opacity; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .transition-transform { + transition-property: transform, translate, scale, rotate; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .duration-200 { + --tw-duration: 200ms; + transition-duration: 200ms; + } + .duration-300 { + --tw-duration: 300ms; + transition-duration: 300ms; + } + .duration-500 { + --tw-duration: 500ms; + transition-duration: 500ms; + } + .ease-in-out { + --tw-ease: var(--ease-in-out); + transition-timing-function: var(--ease-in-out); + } + .group-open\:rotate-90 { + &:is(:where(.group):is([open], :popover-open, :open) *) { + rotate: 90deg; + } + } + .group-hover\:inline { + &:is(:where(.group):hover *) { + @media (hover: hover) { + display: inline; + } + } + } + .group-hover\:scale-105 { + &:is(:where(.group):hover *) { + @media (hover: hover) { + --tw-scale-x: 105%; + --tw-scale-y: 105%; + --tw-scale-z: 105%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + } + } + .group-hover\:opacity-100 { + &:is(:where(.group):hover *) { + @media (hover: hover) { + opacity: 100%; + } + } + } + .hover\:bg-gray-50 { + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-50); + } + } + } + .hover\:bg-gray-100 { + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-100); + } + } + } + .hover\:bg-red-700 { + &:hover { + @media (hover: hover) { + background-color: var(--color-red-700); + } + } + } + .hover\:bg-zinc-100 { + &:hover { + @media (hover: hover) { + background-color: var(--color-zinc-100); + } + } + } + .hover\:text-blue-600 { + &:hover { + @media (hover: hover) { + color: var(--color-blue-600); + } + } + } + .hover\:text-blue-800 { + &:hover { + @media (hover: hover) { + color: var(--color-blue-800); + } + } + } + .hover\:text-gray-900 { + &:hover { + @media (hover: hover) { + color: var(--color-gray-900); + } + } + } + .hover\:text-red-800 { + &:hover { + @media (hover: hover) { + color: var(--color-red-800); + } + } + } + .hover\:text-white { + &:hover { + @media (hover: hover) { + color: var(--color-white); + } + } + } + .hover\:text-zinc-900 { + &:hover { + @media (hover: hover) { + color: var(--color-zinc-900); + } + } + } + .hover\:opacity-80 { + &:hover { + @media (hover: hover) { + opacity: 80%; + } + } + } + .hover\:opacity-100 { + &:hover { + @media (hover: hover) { + opacity: 100%; + } + } + } + .focus\:border-blue-500 { + &:focus { + border-color: var(--color-blue-500); + } + } + .focus\:text-blue-600 { + &:focus { + color: var(--color-blue-600); + } + } + .focus\:ring-2 { + &:focus { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + } + .focus\:ring-blue-500 { + &:focus { + --tw-ring-color: var(--color-blue-500); + } + } + .focus\:ring-indigo-500 { + &:focus { + --tw-ring-color: var(--color-indigo-500); + } + } + .focus\:ring-offset-2 { + &:focus { + --tw-ring-offset-width: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + } + } + .focus\:outline-none { + &:focus { + --tw-outline-style: none; + outline-style: none; + } + } + .disabled\:cursor-not-allowed { + &:disabled { + cursor: not-allowed; + } + } + .disabled\:opacity-50 { + &:disabled { + opacity: 50%; + } } -} -.animate-spin { - animation: spin 1s linear infinite; -} -.cursor-not-allowed { - cursor: not-allowed; -} -.cursor-pointer { - cursor: pointer; -} -.resize-none { - resize: none; -} -.resize { - resize: both; -} -.list-inside { - list-style-position: inside; -} -.list-disc { - list-style-type: disc; -} -.list-none { - list-style-type: none; -} -.grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); -} -.grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); -} -.grid-cols-\[repeat\(auto-fit\2c minmax\(280px\2c 1fr\)\)\] { - grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); -} -.flex-row { - flex-direction: row; -} -.flex-col { - flex-direction: column; -} -.flex-wrap { - flex-wrap: wrap; -} -.items-start { - align-items: flex-start; -} -.items-end { - align-items: flex-end; -} -.items-center { - align-items: center; -} -.justify-end { - justify-content: flex-end; -} -.justify-center { - justify-content: center; -} -.justify-between { - justify-content: space-between; -} -.gap-1 { - gap: 0.25rem; -} -.gap-2 { - gap: 0.5rem; -} -.gap-3 { - gap: 0.75rem; -} -.gap-4 { - gap: 1rem; -} -.gap-6 { - gap: 1.5rem; -} -.space-x-1 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.25rem * var(--tw-space-x-reverse)); - margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); -} -.space-x-2 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.5rem * var(--tw-space-x-reverse)); - margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); -} -.space-x-3 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.75rem * var(--tw-space-x-reverse)); - margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); -} -.space-x-4 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(1rem * var(--tw-space-x-reverse)); - margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); -} -.space-y-1 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); -} -.space-y-2 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); -} -.space-y-3 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); -} -.space-y-4 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); -} -.divide-y > :not([hidden]) ~ :not([hidden]) { - --tw-divide-y-reverse: 0; - border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); - border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); -} -.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { - --tw-divide-opacity: 1; - border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1)); -} -.overflow-hidden { - overflow: hidden; -} -.overflow-y-auto { - overflow-y: auto; -} -.truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.rounded { - border-radius: 0.25rem; -} -.rounded-2xl { - border-radius: 1rem; -} -.rounded-full { - border-radius: 9999px; -} -.rounded-lg { - border-radius: 0.5rem; -} -.rounded-md { - border-radius: 0.375rem; -} -.border { - border-width: 1px; -} -.border-2 { - border-width: 2px; -} -.border-4 { - border-width: 4px; -} -.border-l-4 { - border-left-width: 4px; -} -.border-t { - border-top-width: 1px; -} -.border-dotted { - border-style: dotted; -} -.border-blue-200 { - --tw-border-opacity: 1; - border-color: rgb(191 219 254 / var(--tw-border-opacity, 1)); -} -.border-blue-300 { - --tw-border-opacity: 1; - border-color: rgb(147 197 253 / var(--tw-border-opacity, 1)); -} -.border-border-primary { - border-color: var(--color-border-primary); -} -.border-brand { - border-color: var(--color-brand); -} -.border-gray-100 { - --tw-border-opacity: 1; - border-color: rgb(243 244 246 / var(--tw-border-opacity, 1)); -} -.border-gray-200 { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); -} -.border-gray-300 { - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); -} -.border-red-200 { - --tw-border-opacity: 1; - border-color: rgb(254 202 202 / var(--tw-border-opacity, 1)); -} -.border-red-400 { - --tw-border-opacity: 1; - border-color: rgb(248 113 113 / var(--tw-border-opacity, 1)); -} -.border-red-500 { - --tw-border-opacity: 1; - border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); -} -.border-transparent { - border-color: transparent; -} -.border-yellow-200 { - --tw-border-opacity: 1; - border-color: rgb(254 240 138 / var(--tw-border-opacity, 1)); -} -.border-yellow-400 { - --tw-border-opacity: 1; - border-color: rgb(250 204 21 / var(--tw-border-opacity, 1)); -} -.border-yellow-500 { - --tw-border-opacity: 1; - border-color: rgb(234 179 8 / var(--tw-border-opacity, 1)); -} -.border-zinc-200 { - --tw-border-opacity: 1; - border-color: rgb(228 228 231 / var(--tw-border-opacity, 1)); -} -.border-t-current { - border-top-color: currentColor; -} -.border-t-transparent { - border-top-color: transparent; -} -.border-opacity-20 { - --tw-border-opacity: 0.2; -} -.bg-bg-primary { - background-color: var(--color-bg-primary); -} -.bg-black { - --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); -} -.bg-blue-100 { - --tw-bg-opacity: 1; - background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1)); -} -.bg-blue-50 { - --tw-bg-opacity: 1; - background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); -} -.bg-brand { - background-color: var(--color-brand); -} -.bg-gray-100 { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); -} -.bg-gray-200 { - --tw-bg-opacity: 1; - background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); -} -.bg-green-100 { - --tw-bg-opacity: 1; - background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1)); -} -.bg-green-500 { - --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); -} -.bg-green-600 { - --tw-bg-opacity: 1; - background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)); -} -.bg-red-100 { - --tw-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); -} -.bg-red-50 { - --tw-bg-opacity: 1; - background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1)); -} -.bg-red-600 { - --tw-bg-opacity: 1; - background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); -} -.bg-surface { - background-color: var(--color-surface); -} -.bg-white { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); -} -.bg-yellow-100 { - --tw-bg-opacity: 1; - background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1)); -} -.bg-yellow-50 { - --tw-bg-opacity: 1; - background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1)); -} -.bg-zinc-100 { - --tw-bg-opacity: 1; - background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1)); -} -.bg-zinc-600 { - --tw-bg-opacity: 1; - background-color: rgb(82 82 91 / var(--tw-bg-opacity, 1)); -} -.bg-opacity-50 { - --tw-bg-opacity: 0.5; -} -.object-cover { - -o-object-fit: cover; - object-fit: cover; -} -.p-1 { - padding: 0.25rem; -} -.p-1\.5 { - padding: 0.375rem; -} -.p-2 { - padding: 0.5rem; -} -.p-3 { - padding: 0.75rem; -} -.p-4 { - padding: 1rem; -} -.p-5 { - padding: 1.25rem; -} -.p-6 { - padding: 1.5rem; -} -.p-8 { - padding: 2rem; -} -.px-3 { - padding-left: 0.75rem; - padding-right: 0.75rem; -} -.px-3\.5 { - padding-left: 0.875rem; - padding-right: 0.875rem; -} -.px-4 { - padding-left: 1rem; - padding-right: 1rem; -} -.py-1 { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} -.py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} -.py-2\.5 { - padding-top: 0.625rem; - padding-bottom: 0.625rem; -} -.py-3 { - padding-top: 0.75rem; - padding-bottom: 0.75rem; -} -.py-4 { - padding-top: 1rem; - padding-bottom: 1rem; -} -.py-8 { - padding-top: 2rem; - padding-bottom: 2rem; -} -.pl-0 { - padding-left: 0px; -} -.pl-2 { - padding-left: 0.5rem; -} -.pl-4 { - padding-left: 1rem; -} -.pr-1 { - padding-right: 0.25rem; -} -.pr-12 { - padding-right: 3rem; -} -.pr-2 { - padding-right: 0.5rem; -} -.pt-2 { - padding-top: 0.5rem; -} -.pt-3 { - padding-top: 0.75rem; -} -.pt-4 { - padding-top: 1rem; -} -.pt-5 { - padding-top: 1.25rem; -} -.text-left { - text-align: left; -} -.text-center { - text-align: center; -} -.text-right { - text-align: right; -} -.font-brand { - font-family: NVIDIA, Arial, Helvetica, sans-serif; -} -.text-2xl { - font-size: 1.5rem; - line-height: 2; -} -.text-3xl { - font-size: 1.875rem; - line-height: 2.25; -} -.text-4xl { - font-size: 2.25rem; - line-height: 2.5rem; -} -.text-base { - font-size: 1rem; - line-height: 1.6; -} -.text-lg { - font-size: 1.125rem; - line-height: 1.75; -} -.text-sm { - font-size: 0.875rem; - line-height: 1.5; -} -.text-xl { - font-size: 1.25rem; - line-height: 1.75; -} -.text-xs { - font-size: 0.875rem; - line-height: 1.4; -} -.font-black { - font-weight: 900; -} -.font-bold { - font-weight: 700; -} -.font-light { - font-weight: 300; -} -.font-medium { - font-weight: 500; -} -.font-semibold { - font-weight: 600; -} -.font-thin { - font-weight: 100; -} -.uppercase { - text-transform: uppercase; -} -.italic { - font-style: italic; -} -.leading-relaxed { - line-height: 1.625; -} -.leading-tight { - line-height: 1.25; -} -.tracking-wide { - letter-spacing: 0.025em; -} -.text-black { - --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity, 1)); -} -.text-blue-600 { - --tw-text-opacity: 1; - color: rgb(37 99 235 / var(--tw-text-opacity, 1)); -} -.text-blue-900 { - --tw-text-opacity: 1; - color: rgb(30 58 138 / var(--tw-text-opacity, 1)); -} -.text-brand { - color: var(--color-brand); -} -.text-current { - color: currentColor; -} -.text-gray-400 { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity, 1)); -} -.text-gray-500 { - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity, 1)); -} -.text-gray-600 { - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity, 1)); -} -.text-gray-700 { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity, 1)); -} -.text-gray-900 { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity, 1)); -} -.text-green-100 { - --tw-text-opacity: 1; - color: rgb(220 252 231 / var(--tw-text-opacity, 1)); -} -.text-green-500 { - --tw-text-opacity: 1; - color: rgb(34 197 94 / var(--tw-text-opacity, 1)); -} -.text-red-500 { - --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity, 1)); -} -.text-red-600 { - --tw-text-opacity: 1; - color: rgb(220 38 38 / var(--tw-text-opacity, 1)); -} -.text-red-700 { - --tw-text-opacity: 1; - color: rgb(185 28 28 / var(--tw-text-opacity, 1)); -} -.text-red-900 { - --tw-text-opacity: 1; - color: rgb(127 29 29 / var(--tw-text-opacity, 1)); -} -.text-text-primary { - color: var(--color-text-primary); -} -.text-text-secondary { - color: var(--color-text-secondary); -} -.text-transparent { - color: transparent; -} -.text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity, 1)); -} -.text-yellow-700 { - --tw-text-opacity: 1; - color: rgb(161 98 7 / var(--tw-text-opacity, 1)); -} -.text-yellow-800 { - --tw-text-opacity: 1; - color: rgb(133 77 14 / var(--tw-text-opacity, 1)); -} -.underline { - text-decoration-line: underline; -} -.antialiased { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -.opacity-40 { - opacity: 0.4; -} -.opacity-50 { - opacity: 0.5; -} -.opacity-60 { - opacity: 0.6; -} -.opacity-70 { - opacity: 0.7; -} -.shadow-lg { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} -.shadow-sm { - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} -.shadow-xl { - --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} -.ring-1 { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} -.ring-black { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1)); -} -.ring-opacity-5 { - --tw-ring-opacity: 0.05; -} -.blur { - --tw-blur: blur(8px); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} -.filter { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} -.backdrop-filter { - -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); -} -.transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} -.transition-all { - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} -.transition-colors { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} -.transition-opacity { - transition-property: opacity; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} -.transition-transform { - transition-property: transform; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} -.duration-200 { - transition-duration: 200ms; -} -.duration-300 { - transition-duration: 300ms; -} -.duration-500 { - transition-duration: 500ms; -} -.ease-in-out { - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -} -.hover\:border-brand:hover { - border-color: var(--color-brand); -} -.hover\:bg-brand-1:hover { - background-color: var(--color-brand-1); -} -.hover\:bg-gray-100:hover { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); -} -.hover\:bg-gray-50:hover { - --tw-bg-opacity: 1; - background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); -} -.hover\:bg-red-700:hover { - --tw-bg-opacity: 1; - background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1)); -} -.hover\:bg-zinc-100:hover { - --tw-bg-opacity: 1; - background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1)); -} -.hover\:text-blue-600:hover { - --tw-text-opacity: 1; - color: rgb(37 99 235 / var(--tw-text-opacity, 1)); -} -.hover\:text-blue-800:hover { - --tw-text-opacity: 1; - color: rgb(30 64 175 / var(--tw-text-opacity, 1)); -} -.hover\:text-brand:hover { - color: var(--color-brand); -} -.hover\:text-gray-900:hover { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity, 1)); -} -.hover\:text-red-800:hover { - --tw-text-opacity: 1; - color: rgb(153 27 27 / var(--tw-text-opacity, 1)); -} -.hover\:opacity-100:hover { - opacity: 1; -} -.hover\:opacity-80:hover { - opacity: 0.8; -} -.focus\:border-blue-500:focus { - --tw-border-opacity: 1; - border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)); -} -.focus\:text-blue-600:focus { - --tw-text-opacity: 1; - color: rgb(37 99 235 / var(--tw-text-opacity, 1)); -} -.focus\:outline-none:focus { - outline: 2px solid transparent; - outline-offset: 2px; -} -.focus\:ring-2:focus { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} -.focus\:ring-blue-500:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)); -} -.focus\:ring-brand:focus { - --tw-ring-color: var(--color-brand); -} -.focus\:ring-offset-2:focus { - --tw-ring-offset-width: 2px; -} -.disabled\:cursor-not-allowed:disabled { - cursor: not-allowed; -} -.disabled\:opacity-50:disabled { - opacity: 0.5; -} -.group[open] .group-open\:rotate-90 { - --tw-rotate: 90deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} -.group:hover .group-hover\:inline { - display: inline; -} -.group:hover .group-hover\:scale-105 { - --tw-scale-x: 1.05; - --tw-scale-y: 1.05; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} -.group:hover .group-hover\:opacity-100 { - opacity: 1; -} -@media (min-width: 640px) { .sm\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); + @media (width >= 40rem) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } } -} -@media (min-width: 768px) { .md\:relative { - position: relative; + @media (width >= 48rem) { + position: relative; + } } .md\:sticky { - position: sticky; + @media (width >= 48rem) { + position: sticky; + } } .md\:top-16 { - top: 4rem; + @media (width >= 48rem) { + top: calc(var(--spacing) * 16); + } } .md\:mb-0 { - margin-bottom: 0px; + @media (width >= 48rem) { + margin-bottom: calc(var(--spacing) * 0); + } } .md\:block { - display: block; + @media (width >= 48rem) { + display: block; + } } .md\:flex { - display: flex; + @media (width >= 48rem) { + display: flex; + } } .md\:hidden { - display: none; + @media (width >= 48rem) { + display: none; + } } .md\:h-\[calc\(100vh-4rem\)\] { - height: calc(100vh - 4rem); + @media (width >= 48rem) { + height: calc(100vh - 4rem); + } } .md\:h-full { - height: 100%; + @media (width >= 48rem) { + height: 100%; + } } .md\:w-1\/5 { - width: 20%; + @media (width >= 48rem) { + width: calc(1/5 * 100%); + } } .md\:w-32 { - width: 8rem; + @media (width >= 48rem) { + width: calc(var(--spacing) * 32); + } + } + .md\:w-96 { + @media (width >= 48rem) { + width: calc(var(--spacing) * 96); + } } .md\:max-w-80 { - max-width: 20rem; + @media (width >= 48rem) { + max-width: calc(var(--spacing) * 80); + } } .md\:flex-1 { - flex: 1 1 0%; + @media (width >= 48rem) { + flex: 1; + } } .md\:translate-x-0 { - --tw-translate-x: 0px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + @media (width >= 48rem) { + --tw-translate-x: calc(var(--spacing) * 0); + translate: var(--tw-translate-x) var(--tw-translate-y); + } } .md\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); + @media (width >= 48rem) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } } .md\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); + @media (width >= 48rem) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } } .md\:flex-row { - flex-direction: row; + @media (width >= 48rem) { + flex-direction: row; + } } .md\:gap-5 { - gap: 1.25rem; + @media (width >= 48rem) { + gap: calc(var(--spacing) * 5); + } + } + .md\:p-6 { + @media (width >= 48rem) { + padding: calc(var(--spacing) * 6); + } } .md\:px-0 { - padding-left: 0px; - padding-right: 0px; + @media (width >= 48rem) { + padding-inline: calc(var(--spacing) * 0); + } } .md\:pt-4 { - padding-top: 1rem; + @media (width >= 48rem) { + padding-top: calc(var(--spacing) * 4); + } } .md\:shadow-none { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + @media (width >= 48rem) { + --tw-shadow: 0 0 #0000; + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } } -} -@media (min-width: 1024px) { .lg\:mt-0 { - margin-top: 0px; + @media (width >= 64rem) { + margin-top: calc(var(--spacing) * 0); + } + } + .lg\:w-3\/5 { + @media (width >= 64rem) { + width: calc(3/5 * 100%); + } } .lg\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); + @media (width >= 64rem) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } } .lg\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); + @media (width >= 64rem) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } } .lg\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); + @media (width >= 64rem) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } } .lg\:text-5xl { - font-size: 3rem; - line-height: 1; + @media (width >= 64rem) { + font-size: var(--text-5xl); + line-height: var(--tw-leading, var(--text-5xl--line-height)); + } } -} -@media (min-width: 1280px) { .xl\:sticky { - position: sticky; + @media (width >= 80rem) { + position: sticky; + } } .xl\:top-16 { - top: 4rem; + @media (width >= 80rem) { + top: calc(var(--spacing) * 16); + } } .xl\:block { - display: block; + @media (width >= 80rem) { + display: block; + } } .xl\:hidden { - display: none; + @media (width >= 80rem) { + display: none; + } } .xl\:h-\[calc\(100vh-4rem\)\] { - height: calc(100vh - 4rem); + @media (width >= 80rem) { + height: calc(100vh - 4rem); + } } .xl\:w-auto { - width: auto; + @media (width >= 80rem) { + width: auto; + } } .xl\:max-w-4xl { - max-width: 56rem; + @media (width >= 80rem) { + max-width: var(--container-4xl); + } } .xl\:translate-x-0 { - --tw-translate-x: 0px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + @media (width >= 80rem) { + --tw-translate-x: calc(var(--spacing) * 0); + translate: var(--tw-translate-x) var(--tw-translate-y); + } } .xl\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); + @media (width >= 80rem) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } } .xl\:px-8 { - padding-left: 2rem; - padding-right: 2rem; + @media (width >= 80rem) { + padding-inline: calc(var(--spacing) * 8); + } } -} -@media (min-width: 1536px) { - .\32xl\:max-w-5xl { - max-width: 64rem; + .\32 xl\:max-w-5xl { + @media (width >= 96rem) { + max-width: var(--container-5xl); + } + } + .\32 xl\:max-w-7xl { + @media (width >= 96rem) { + max-width: var(--container-7xl); + } } - .\32xl\:max-w-7xl { - max-width: 80rem; + .\32 xl\:max-w-screen-2xl { + @media (width >= 96rem) { + max-width: var(--breakpoint-2xl); + } } - .\32xl\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); + .\32 xl\:grid-cols-3 { + @media (width >= 96rem) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } } - .\32xl\:px-12 { - padding-left: 3rem; - padding-right: 3rem; + .\32 xl\:px-12 { + @media (width >= 96rem) { + padding-inline: calc(var(--spacing) * 12); + } } -} -@media (prefers-color-scheme: dark) { .dark\:border-gray-600 { - --tw-border-opacity: 1; - border-color: rgb(75 85 99 / var(--tw-border-opacity, 1)); + @media (prefers-color-scheme: dark) { + border-color: var(--color-gray-600); + } } .dark\:border-gray-700 { - --tw-border-opacity: 1; - border-color: rgb(55 65 81 / var(--tw-border-opacity, 1)); + @media (prefers-color-scheme: dark) { + border-color: var(--color-gray-700); + } } .dark\:border-yellow-800 { - --tw-border-opacity: 1; - border-color: rgb(133 77 14 / var(--tw-border-opacity, 1)); + @media (prefers-color-scheme: dark) { + border-color: var(--color-yellow-800); + } } .dark\:border-zinc-800 { - --tw-border-opacity: 1; - border-color: rgb(39 39 42 / var(--tw-border-opacity, 1)); + @media (prefers-color-scheme: dark) { + border-color: var(--color-zinc-800); + } } .dark\:bg-gray-800 { - --tw-bg-opacity: 1; - background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1)); + @media (prefers-color-scheme: dark) { + background-color: var(--color-gray-800); + } } .dark\:bg-yellow-900\/20 { - background-color: rgb(113 63 18 / 0.2); + @media (prefers-color-scheme: dark) { + background-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 20%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-yellow-900) 20%, transparent); + } + } + } + .dark\:bg-zinc-900 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-zinc-900); + } } .dark\:text-gray-200 { - --tw-text-opacity: 1; - color: rgb(229 231 235 / var(--tw-text-opacity, 1)); + @media (prefers-color-scheme: dark) { + color: var(--color-gray-200); + } } .dark\:text-gray-400 { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity, 1)); + @media (prefers-color-scheme: dark) { + color: var(--color-gray-400); + } } .dark\:text-yellow-200 { - --tw-text-opacity: 1; - color: rgb(254 240 138 / var(--tw-text-opacity, 1)); + @media (prefers-color-scheme: dark) { + color: var(--color-yellow-200); + } } .dark\:text-yellow-300 { - --tw-text-opacity: 1; - color: rgb(253 224 71 / var(--tw-text-opacity, 1)); + @media (prefers-color-scheme: dark) { + color: var(--color-yellow-300); + } } - .dark\:hover\:bg-gray-700:hover { - --tw-bg-opacity: 1; - background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)); + .dark\:text-zinc-100 { + @media (prefers-color-scheme: dark) { + color: var(--color-zinc-100); + } + } + .dark\:text-zinc-300 { + @media (prefers-color-scheme: dark) { + color: var(--color-zinc-300); + } + } + .dark\:opacity-90 { + @media (prefers-color-scheme: dark) { + opacity: 90%; + } + } + .dark\:hover\:bg-gray-700 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-700); + } + } + } + } + .dark\:hover\:bg-zinc-800 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: var(--color-zinc-800); + } + } + } + } + .dark\:hover\:text-white { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + color: var(--color-white); + } + } + } + } +} +@layer components { + .grid-autofit { + grid-template-columns: repeat(auto-fit, minmax(var(--grid-card-min, 280px), 1fr)); + } + @screen md { + .grid-autofit { + gap: 2rem; + } + } + .layout-shell { + width: 100%; + padding-inline: calc(var(--spacing) * 4); + transition-property: all; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + --tw-duration: 300ms; + transition-duration: 300ms; + --tw-ease: var(--ease-in-out); + transition-timing-function: var(--ease-in-out); + @media (width >= 40rem) { + padding-inline: calc(var(--spacing) * 6); + } + @media (width >= 64rem) { + padding-inline: calc(var(--spacing) * 8); + } + @media (width >= 80rem) { + padding-inline: calc(var(--spacing) * 0); + } + } + @screen xl { + .layout-shell { + display: grid; + grid-template-columns: var(--left-rail-width) minmax(0, 1fr) var(--right-rail-width); + gap: var(--layout-gap-xl); + } + } + @screen 2xl { + .layout-shell { + grid-template-columns: var(--left-rail-width-2xl) minmax(0, 1fr) var(--right-rail-width-2xl); + gap: var(--layout-gap-2xl); + } + } + .page-container { + max-width: var(--max-width-content); + } +} +@layer base { + :root { + --header-offset: 64px; + } + html:not(.no-transitions) { + transition: color-scheme var(--timing-medium) var(--easing-standard); + } + html:not(.no-transitions) .btn, + html:not(.no-transitions) .nav-link, + html:not(.no-transitions) .collapse__header, + html:not(.no-transitions) .search-container, + html:not(.no-transitions) .toast-notification, + html:not(.no-transitions) .theme-transition { + transition: background-color var(--timing-medium) var(--easing-standard), + color var(--timing-medium) var(--easing-standard), + border-color var(--timing-medium) var(--easing-standard); + } + html.no-transitions, + html.no-transitions * { + transition: none !important; + } + h1 { + font-size: clamp(1.5rem, 3.5vw, 1.75rem); + line-height: 1.2; + font-weight: 900; + letter-spacing: -0.025em; + word-wrap: break-word; + } + h2 { + font-size: clamp(1.25rem, 3vw, 1.375rem); + line-height: 1.33; + font-weight: 700; + letter-spacing: -0.025em; + word-wrap: break-word; } + h3 { + font-size: clamp(1.0625rem, 2.5vw, 1.1875rem); + line-height: 1.4; + font-weight: 700; + letter-spacing: -0.015em; + word-wrap: break-word; + } + h4 { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + letter-spacing: -0.01em; + word-wrap: break-word; + } + h5 { + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + word-wrap: break-word; + } + h6 { + font-size: 1rem; + line-height: 1.5; + font-weight: 700; + word-wrap: break-word; + } + main { + font-family: "NVIDIA", "Arial", "Helvetica", sans-serif; + } + html { + font-synthesis: none; + } + body, main { + font-optical-sizing: auto; + font-feature-settings: "kern" 1; + text-rendering: optimizeLegibility; + } + body { + font-size: clamp(1rem, 2vw, 1.0625rem); + line-height: 1.6; + letter-spacing: 0.01em; + } + .article-content > * { + margin-block: calc(var(--spacing) * 3); + } + .article-content { + color: var(--color-text-primary); + font-size: 1rem; + line-height: 1.65; + letter-spacing: 0.01em; + } + @screen md { + .article-content { + font-size: 1.0625rem; + line-height: 1.6; + } + } + .article-content p { + font-size: inherit; + line-height: inherit; + letter-spacing: inherit; + } + .article-content strong { + font-family: "NVIDIA", "Arial", "Helvetica", sans-serif; + font-weight: 600; + } + .article-content li li { + margin-left: calc(var(--spacing) * 12); + padding-block: calc(var(--spacing) * 1); + } +} +@property --tw-font-weight { + syntax: "*"; + inherits: false; +} +@property --tw-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-inset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-ring-inset { + syntax: "*"; + inherits: false; +} +@property --tw-ring-offset-width { + syntax: ""; + inherits: false; + initial-value: 0px; +} +@property --tw-ring-offset-color { + syntax: "*"; + inherits: false; + initial-value: #fff; +} +@property --tw-ring-offset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-tracking { + syntax: "*"; + inherits: false; +} +@property --tw-duration { + syntax: "*"; + inherits: false; +} +@property --tw-space-y-reverse { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-border-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} +@property --tw-space-x-reverse { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-translate-x { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-translate-y { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-translate-z { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-scale-x { + syntax: "*"; + inherits: false; + initial-value: 1; +} +@property --tw-scale-y { + syntax: "*"; + inherits: false; + initial-value: 1; +} +@property --tw-scale-z { + syntax: "*"; + inherits: false; + initial-value: 1; +} +@property --tw-rotate-x { + syntax: "*"; + inherits: false; +} +@property --tw-rotate-y { + syntax: "*"; + inherits: false; +} +@property --tw-rotate-z { + syntax: "*"; + inherits: false; +} +@property --tw-skew-x { + syntax: "*"; + inherits: false; +} +@property --tw-skew-y { + syntax: "*"; + inherits: false; +} +@property --tw-divide-y-reverse { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-leading { + syntax: "*"; + inherits: false; +} +@property --tw-ordinal { + syntax: "*"; + inherits: false; +} +@property --tw-slashed-zero { + syntax: "*"; + inherits: false; +} +@property --tw-numeric-figure { + syntax: "*"; + inherits: false; +} +@property --tw-numeric-spacing { + syntax: "*"; + inherits: false; +} +@property --tw-numeric-fraction { + syntax: "*"; + inherits: false; +} +@property --tw-blur { + syntax: "*"; + inherits: false; +} +@property --tw-brightness { + syntax: "*"; + inherits: false; +} +@property --tw-contrast { + syntax: "*"; + inherits: false; +} +@property --tw-grayscale { + syntax: "*"; + inherits: false; +} +@property --tw-hue-rotate { + syntax: "*"; + inherits: false; +} +@property --tw-invert { + syntax: "*"; + inherits: false; +} +@property --tw-opacity { + syntax: "*"; + inherits: false; +} +@property --tw-saturate { + syntax: "*"; + inherits: false; +} +@property --tw-sepia { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-drop-shadow-size { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-blur { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-brightness { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-contrast { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-grayscale { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-hue-rotate { + syntax: "*"; + inherits: false; } +@property --tw-backdrop-invert { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-opacity { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-saturate { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-sepia { + syntax: "*"; + inherits: false; +} +@property --tw-ease { + syntax: "*"; + inherits: false; +} +@keyframes spin { + to { + transform: rotate(360deg); + } +} +@keyframes pulse { + 50% { + opacity: 0.5; + } +} +@layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-font-weight: initial; + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-tracking: initial; + --tw-duration: initial; + --tw-space-y-reverse: 0; + --tw-border-style: solid; + --tw-space-x-reverse: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-scale-z: 1; + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; + --tw-divide-y-reverse: 0; + --tw-leading: initial; + --tw-ordinal: initial; + --tw-slashed-zero: initial; + --tw-numeric-figure: initial; + --tw-numeric-spacing: initial; + --tw-numeric-fraction: initial; + --tw-blur: initial; + --tw-brightness: initial; + --tw-contrast: initial; + --tw-grayscale: initial; + --tw-hue-rotate: initial; + --tw-invert: initial; + --tw-opacity: initial; + --tw-saturate: initial; + --tw-sepia: initial; + --tw-drop-shadow: initial; + --tw-drop-shadow-color: initial; + --tw-drop-shadow-alpha: 100%; + --tw-drop-shadow-size: initial; + --tw-backdrop-blur: initial; + --tw-backdrop-brightness: initial; + --tw-backdrop-contrast: initial; + --tw-backdrop-grayscale: initial; + --tw-backdrop-hue-rotate: initial; + --tw-backdrop-invert: initial; + --tw-backdrop-opacity: initial; + --tw-backdrop-saturate: initial; + --tw-backdrop-sepia: initial; + --tw-ease: initial; + } + } +} + diff --git a/assets/css/src/input.css b/assets/css/src/input.css index b180d21..3b63bab 100644 --- a/assets/css/src/input.css +++ b/assets/css/src/input.css @@ -1,35 +1,34 @@ /* This file is used to compile the main.css file. */ /* Import component CSS files - MUST be first! */ -@import "../architecture/index.css"; - -@import "../components/buttons.css"; -@import "../components/tables.css"; -@import "../components/notice.css"; -@import "../components/navigation.css"; -@import "../components/navigation-api.css"; -@import "../components/breadcrumbs.css"; -@import "../components/search.css"; -@import "../components/chat.css"; -@import "../components/article-header.css"; -@import "../components/article/related-content.css"; -@import "../components/article/page-resources.css"; -@import "../components/tiles.css"; -@import "../components/child-links.css"; -@import "../components/cards.css"; -@import "../components/glossary.css"; -@import "../components/quicklinks.css"; -@import "../components/next-prev.css"; -@import "../components/tutorial.css"; -@import "../components/toast.css"; -@import "../components/notebook.css"; -@import "../components/openapi/index.css"; -@import "../components/tabs.css"; -@import "../components/code.css"; -@import "../components/object-model.css"; - -@tailwind base; -@tailwind components; +@import '../architecture/index.css'; + +@import '../components/buttons.css'; +@import '../components/tables.css'; +@import '../components/notice.css'; +@import '../components/navigation.css'; +@import '../components/navigation-api.css'; +@import '../components/breadcrumbs.css'; +@import '../components/search.css'; +@import '../components/chat.css'; +@import '../components/article-header.css'; +@import '../components/article/related-content.css'; +@import '../components/article/page-resources.css'; +@import '../components/tiles.css'; +@import '../components/child-links.css'; +@import '../components/cards.css'; +@import '../components/glossary.css'; +@import '../components/quicklinks.css'; +@import '../components/next-prev.css'; +@import '../components/tutorial.css'; +@import '../components/toast.css'; +@import '../components/notebook.css'; +@import '../components/openapi/index.css'; +@import '../components/tabs.css'; +@import '../components/code.css'; +@import '../components/object-model.css'; + +@import 'tailwindcss'; @layer components { /* Responsive auto-fit grid for cards/tiles */ @@ -38,7 +37,7 @@ } @screen md { .grid-autofit { - gap: theme('spacing.8'); + gap: --spacing(8); } } @@ -80,7 +79,6 @@ /* Apply transitions only to specific elements that need them */ html:not(.no-transitions) .btn, html:not(.no-transitions) .nav-link, - html:not(.no-transitions) .card, html:not(.no-transitions) .collapse__header, html:not(.no-transitions) .search-container, html:not(.no-transitions) .toast-notification, @@ -158,7 +156,7 @@ /* Global Font Family & Body Text - Uses brand font with fallbacks */ main { - @apply font-brand; + font-family: "NVIDIA", "Arial", "Helvetica", sans-serif; } /* Improve font loading consistency between dev and production */ @@ -221,7 +219,8 @@ } .article-content strong { - @apply font-brand font-semibold; + font-family: "NVIDIA", "Arial", "Helvetica", sans-serif; + font-weight: 600; } /* List Styles */ @@ -230,4 +229,3 @@ } } -@tailwind utilities; diff --git a/assets/js/utils/NotificationManager.js b/assets/js/utils/NotificationManager.js index 0a30f91..89b2771 100644 --- a/assets/js/utils/NotificationManager.js +++ b/assets/js/utils/NotificationManager.js @@ -580,7 +580,7 @@ export class NotificationManager { } .notification__icon { - flex-shrink: 0; + shrink: 0; margin-top: 0.125rem; } diff --git a/exampleSite/content/guides/themes/search/algolia.md b/exampleSite/content/guides/themes/search/algolia.md index 2e5ca45..13275f5 100644 --- a/exampleSite/content/guides/themes/search/algolia.md +++ b/exampleSite/content/guides/themes/search/algolia.md @@ -99,7 +99,7 @@ Let's create our search results container element. This element will be hidden b ``` 3. Add the partial to your theme's `layouts/_default/baseof.html` layout file. Here's where I've put mine: ```html -
+
{{partial "navigation/sidebar-left.html" . }}
{{- if .IsHome}}{{ block "home" . }}{{ end }}{{else}}{{ block "main" . }}{{ end }}{{- end}} diff --git a/exampleSite/content/guides/theming-and-tokens.md b/exampleSite/content/guides/theming-and-tokens.md index 5c017f3..f087e9f 100644 --- a/exampleSite/content/guides/theming-and-tokens.md +++ b/exampleSite/content/guides/theming-and-tokens.md @@ -9,7 +9,7 @@ This theme centralizes styling in CSS variables (tokens) and small component cla ## Where tokens live - Architecture: `assets/css/architecture/` - `colors*.css`: color palettes and brand tokens - - `elevation-system.css`: shadow/elevation tokens (e.g., `--elevation-2`, `--elevation-hover-4`) + - `elevation-system.css`: shadow tokens (e.g., `--elevation-2`, `--elevation-hover-4`) - `animation-system.css`: timing/easing/transform tokens - `layout-foundations.css`: spacing/width/z-index and layout tokens diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index 89442f7..1410ee7 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -1122,184 +1122,184 @@ "classify-python-entity", "clearAll", "closed-question-pipeline", - "code-1758982405990843000", - "code-1758982405991092000", - "code-1758982405991745000", - "code-1758982405992006000", - "code-1758982405992210000", - "code-1758982405992403000", - "code-1758982405992575000", - "code-1758982405992973000", - "code-1758982405993276000", - "code-1758982405994228000", - "code-1758982405994544000", - "code-1758982405994842000", - "code-1758982405995064000", - "code-1758982405995261000", - "code-1758982405995493000", - "code-1758982405995599000", - "code-1758982405995688000", - "code-1758982405995823000", - "code-1758982405995997000", - "code-1758982405996272000", - "code-1758982406002374000", - "code-1758982406002526000", - "code-1758982406002756000", - "code-1758982406002927000", - "code-1758982406003123000", - "code-1758982406003271000", - "code-1758982406003370000", - "code-1758982406003490000", - "code-1758982406003643000", - "code-1758982406003820000", - "code-1758982406003972000", - "code-1758982406004129000", - "code-1758982406004292000", - "code-1758982406004402000", - "code-1758982406004499000", - "code-1758982406004701000", - "code-1758982406004822000", - "code-1758982406005225000", - "code-1758982406005443000", - "code-1758982406005780000", - "code-1758982406006503000", - "code-1758982406012747000", - "code-1758982406013031000", - "code-1758982406016970000", - "code-1758982406018074000", - "code-1758982406030393000", - "code-1758982406032345000", - "code-1758982406032733000", - "code-1758982406033450000", - "code-1758982406033563000", - "code-1758982406033937000", - "code-1758982406033987000", - "code-1758982406035022000", - "code-1758982406036881000", - "code-1758982406044165000", - "code-1758982406044862000", - "code-1758982406046327000", - "code-1758982406048455000", - "code-1758982406049170000", - "code-1758982406062223000", - "code-1758982406063207000", - "code-1758982406063425000", - "code-1758982406077875000", - "code-1758982406078442000", - "code-1758982406194974000", - "code-1758982406198675000", - "code-1758982406199050000", - "code-1758982406199198000", - "code-1758982406199360000", - "code-1758982406199407000", - "code-1758982406199540000", - "code-1758982406199870000", - "code-1758982406200125000", - "code-1758982406200134000", - "code-1758982406200300000", - "code-1758982406200666000", - "code-1758982406200734000", - "code-1758982406200912000", - "code-1758982406200994000", - "code-1758982406201314000", - "code-1758982406201429000", - "code-1758982406201981000", - "code-1758982406202653000", - "code-1758982406203285000", - "code-1758982406203331000", - "code-1758982406203541000", - "code-1758982406203670000", - "code-1758982406203786000", - "code-1758982406204000000", - "code-1758982406204259000", - "code-1758982406204475000", - "code-1758982406204568000", - "code-1758982406204617000", - "code-1758982406204705000", - "code-1758982406204906000", - "code-1758982406205045000", - "code-1758982406205048000", - "code-1758982406205171000", - "code-1758982406205387000", - "code-1758982406205553000", - "code-1758982406205572000", - "code-1758982406206355000", - "code-1758982406206571000", - "code-1758982406206799000", - "code-1758982406206953000", - "code-1758982406207079000", - "code-1758982406207198000", - "code-1758982406207204000", - "code-1758982406207245000", - "code-1758982406207348000", - "code-1758982406207447000", - "code-1758982406207555000", - "code-1758982406207728000", - "code-1758982406208033000", - "code-1758982406208127000", - "code-1758982406208467000", - "code-1758982406208570000", - "code-1758982406208688000", - "code-1758982406208886000", - "code-1758982406209215000", - "code-1758982406209998000", - "code-1758982406210520000", - "code-1758982406210855000", - "code-1758982406218121000", - "code-1758982406218259000", - "code-1758982406218432000", - "code-1758982406219818000", - "code-1758982406220061000", - "code-1758982406220553000", - "code-1758982406221116000", - "code-1758982406221409000", - "code-1758982406223945000", - "code-1758982406224060000", - "code-1758982406224145000", - "code-1758982406224415000", - "code-1758982406224718000", - "code-1758982406226288000", - "code-1758982406226791000", - "code-1758982406226934000", - "code-1758982406227190000", - "code-1758982406227421000", - "code-1758982406227666000", - "code-1758982406227859000", - "code-1758982406227860000", - "code-1758982406227969000", - "code-1758982406228080000", - "code-1758982406228194000", - "code-1758982406228306000", - "code-1758982406228414000", - "code-1758982406229516000", - "code-1758982406229747000", - "code-1758982406230788000", - "code-1758982406231133000", - "code-1758982406233369000", - "code-1758982406233693000", - "code-1758982406234634000", - "code-1758982406234781000", - "code-1758982406234889000", - "code-1758982406235025000", - "code-1758982406235189000", - "code-1758982406235470000", - "code-1758982406235635000", - "code-1758982406237405000", - "code-1758982406237779000", - "code-1758982406237948000", - "code-1758982406238479000", - "code-1758982406238871000", - "code-1758982406239097000", - "code-1758982406248066000", - "code-1758982406278531000", - "code-1758982406281052000", - "code-1758982406281265000", - "collapse-0d0cece9160ef824a01d2821d406048f-1758982406235597000", - "collapse-0d0cece9160ef824a01d2821d406048f-1758982406235597000-body", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758982406028507000", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758982406028507000-body", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758982406028576000", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758982406028576000-body", + "code-1758982901005903000", + "code-1758982901006421000", + "code-1758982901007034000", + "code-1758982901008067000", + "code-1758982901008670000", + "code-1758982901009053000", + "code-1758982901009204000", + "code-1758982901009595000", + "code-1758982901009700000", + "code-1758982901014662000", + "code-1758982901014826000", + "code-1758982901014955000", + "code-1758982901015084000", + "code-1758982901015283000", + "code-1758982901015537000", + "code-1758982901015664000", + "code-1758982901015783000", + "code-1758982901015960000", + "code-1758982901016174000", + "code-1758982901017137000", + "code-1758982901024762000", + "code-1758982901025154000", + "code-1758982901025976000", + "code-1758982901026149000", + "code-1758982901026337000", + "code-1758982901026477000", + "code-1758982901026575000", + "code-1758982901026687000", + "code-1758982901026824000", + "code-1758982901026970000", + "code-1758982901027120000", + "code-1758982901027265000", + "code-1758982901027410000", + "code-1758982901027524000", + "code-1758982901027627000", + "code-1758982901027797000", + "code-1758982901027885000", + "code-1758982901027983000", + "code-1758982901028069000", + "code-1758982901028168000", + "code-1758982901028332000", + "code-1758982901029992000", + "code-1758982901030905000", + "code-1758982901031092000", + "code-1758982901031480000", + "code-1758982901033298000", + "code-1758982901033765000", + "code-1758982901034034000", + "code-1758982901039611000", + "code-1758982901045104000", + "code-1758982901045803000", + "code-1758982901046343000", + "code-1758982901049502000", + "code-1758982901053046000", + "code-1758982901053367000", + "code-1758982901054585000", + "code-1758982901179929000", + "code-1758982901182710000", + "code-1758982901184020000", + "code-1758982901233519000", + "code-1758982901233695000", + "code-1758982901233856000", + "code-1758982901234603000", + "code-1758982901235204000", + "code-1758982901377682000", + "code-1758982901378440000", + "code-1758982901378691000", + "code-1758982901378964000", + "code-1758982901379105000", + "code-1758982901379363000", + "code-1758982901381277000", + "code-1758982901381330000", + "code-1758982901381682000", + "code-1758982901382065000", + "code-1758982901382429000", + "code-1758982901382786000", + "code-1758982901382913000", + "code-1758982901383134000", + "code-1758982901383492000", + "code-1758982901383539000", + "code-1758982901386111000", + "code-1758982901386373000", + "code-1758982901387354000", + "code-1758982901388963000", + "code-1758982901389277000", + "code-1758982901389479000", + "code-1758982901389923000", + "code-1758982901390305000", + "code-1758982901395487000", + "code-1758982901395881000", + "code-1758982901395919000", + "code-1758982901396861000", + "code-1758982901396917000", + "code-1758982901397112000", + "code-1758982901397281000", + "code-1758982901397456000", + "code-1758982901397649000", + "code-1758982901397836000", + "code-1758982901398256000", + "code-1758982901398305000", + "code-1758982901398813000", + "code-1758982901399429000", + "code-1758982901399438000", + "code-1758982901399891000", + "code-1758982901400085000", + "code-1758982901400377000", + "code-1758982901400495000", + "code-1758982901400626000", + "code-1758982901406589000", + "code-1758982901408708000", + "code-1758982901409477000", + "code-1758982901411375000", + "code-1758982901411377000", + "code-1758982901411495000", + "code-1758982901411909000", + "code-1758982901411915000", + "code-1758982901412742000", + "code-1758982901412990000", + "code-1758982901413259000", + "code-1758982901413271000", + "code-1758982901413575000", + "code-1758982901413675000", + "code-1758982901413891000", + "code-1758982901414152000", + "code-1758982901414199000", + "code-1758982901414404000", + "code-1758982901414449000", + "code-1758982901414537000", + "code-1758982901414906000", + "code-1758982901415151000", + "code-1758982901415392000", + "code-1758982901417894000", + "code-1758982901418193000", + "code-1758982901418356000", + "code-1758982901418623000", + "code-1758982901419249000", + "code-1758982901419420000", + "code-1758982901419519000", + "code-1758982901419635000", + "code-1758982901419684000", + "code-1758982901419729000", + "code-1758982901419830000", + "code-1758982901419976000", + "code-1758982901420016000", + "code-1758982901420437000", + "code-1758982901420718000", + "code-1758982901423279000", + "code-1758982901423382000", + "code-1758982901423465000", + "code-1758982901427076000", + "code-1758982901427289000", + "code-1758982901428099000", + "code-1758982901428254000", + "code-1758982901429187000", + "code-1758982901429318000", + "code-1758982901430034000", + "code-1758982901430235000", + "code-1758982901430326000", + "code-1758982901430460000", + "code-1758982901430579000", + "code-1758982901430950000", + "code-1758982901431391000", + "code-1758982901431991000", + "code-1758982901432143000", + "code-1758982901432166000", + "code-1758982901432665000", + "code-1758982901433367000", + "code-1758982901433614000", + "code-1758982901433647000", + "code-1758982901505827000", + "code-1758982901507656000", + "code-1758982901507740000", + "collapse-0d0cece9160ef824a01d2821d406048f-1758982901432136000", + "collapse-0d0cece9160ef824a01d2821d406048f-1758982901432136000-body", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758982901041094000", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758982901041094000-body", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758982901041860000", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758982901041860000-body", "collapsehtml-examples", "collapsehtml-how-it-works", "collapsehtml-source-code", diff --git a/package.json b/package.json index 346632a..e1843b8 100644 --- a/package.json +++ b/package.json @@ -13,10 +13,11 @@ "author": "", "license": "ISC", "devDependencies": { + "@tailwindcss/postcss": "^4.1.13", "autoprefixer": "^10.4.21", "postcss": "^8.5.6", "postcss-cli": "^11.0.1", "postcss-import": "^16.1.1", - "tailwindcss": "^3.3.5" + "tailwindcss": "^4.1.13" } } diff --git a/postcss.config.js b/postcss.config.js index abcaed7..c13363e 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,7 +1,7 @@ module.exports = { plugins: [ require('postcss-import'), // postcss-import needs to be first - require('tailwindcss'), + require('@tailwindcss/postcss'), require('autoprefixer') ] } \ No newline at end of file From abc8a607d0e9f0fbc4ecd1df9d89655cf3d4a452 Mon Sep 17 00:00:00 2001 From: "L.B." Date: Sat, 27 Sep 2025 10:32:01 -0400 Subject: [PATCH 4/7] conversion --- TAILWIND_SETUP.md | 150 ++++++++ assets/css/src/input.css | 52 +-- exampleSite/assets/css/components/buttons.css | 328 ++++++++++++++++ exampleSite/hugo_stats.json | 356 +++++++++--------- exampleSite/package.json | 11 +- exampleSite/postcss.config.js | 9 + ...s_e03652540c5bbc68d359e86d9fc1015a.content | 95 ++++- ....css_e03652540c5bbc68d359e86d9fc1015a.json | 1 + exampleSite/tailwind.config.js | 47 ++- exampleSite/themes/milodocs | 1 + layouts/partials/head/css.html | 16 +- package.json | 12 +- postcss.config.js | 7 - tailwind.config.js | 65 ---- 14 files changed, 841 insertions(+), 309 deletions(-) create mode 100644 TAILWIND_SETUP.md create mode 100644 exampleSite/assets/css/components/buttons.css create mode 100644 exampleSite/postcss.config.js rename assets/css/main.css => exampleSite/resources/_gen/assets/css/src/input.css_e03652540c5bbc68d359e86d9fc1015a.content (99%) create mode 100644 exampleSite/resources/_gen/assets/css/src/input.css_e03652540c5bbc68d359e86d9fc1015a.json create mode 120000 exampleSite/themes/milodocs delete mode 100644 postcss.config.js delete mode 100644 tailwind.config.js diff --git a/TAILWIND_SETUP.md b/TAILWIND_SETUP.md new file mode 100644 index 0000000..8e0130e --- /dev/null +++ b/TAILWIND_SETUP.md @@ -0,0 +1,150 @@ +# Hugo Native Tailwind CSS Setup + +MiloDocs theme now supports Hugo's native Tailwind CSS v4 processing, eliminating the need for separate build tools. + +## Quick Setup + +### 1. Install Dependencies + +In your Hugo site root, install the required dependencies: + +```bash +npm install -D @tailwindcss/postcss autoprefixer postcss postcss-import tailwindcss +``` + +### 2. Create PostCSS Configuration + +Create `postcss.config.js` in your site root: + +```javascript +module.exports = { + plugins: [ + require('postcss-import')({ + path: ['themes/milodocs/assets/css'] + }), + require('@tailwindcss/postcss'), + require('autoprefixer') + ] +} +``` + +### 3. Create Tailwind Configuration + +Create `tailwind.config.js` in your site root: + +```javascript +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + "content/**/*.md", + "layouts/**/*.html", + "themes/milodocs/layouts/**/*.html", + "themes/milodocs/content/**/*.md", + "assets/js/**/*.js" + ], + theme: { + extend: { + colors: { + brand: "var(--color-brand)", + "brand-1": "var(--color-brand-1)", + "brand-2": "var(--color-brand-2)", + "brand-3": "var(--color-brand-3)", + "brand-4": "var(--color-brand-4)", + "brand-5": "var(--color-brand-5)", + "brand-6": "var(--color-brand-6)", + "brand-7": "var(--color-brand-7)", + surface: "var(--color-surface)", + "surface-hover": "var(--color-surface-hover)", + "surface-active": "var(--color-surface-active)", + text: { + primary: "var(--color-text-primary)", + secondary: "var(--color-text-secondary)", + tertiary: "var(--color-text-tertiary)", + inverse: "var(--color-text-inverse)", + }, + bg: { + primary: "var(--color-bg-primary)", + secondary: "var(--color-bg-secondary)", + tertiary: "var(--color-bg-tertiary)", + inverse: "var(--color-bg-inverse)", + }, + border: { + primary: "var(--color-border-primary)", + secondary: "var(--color-border-secondary)", + focus: "var(--color-border-focus)", + }, + }, + fontFamily: { + "brand": ["NVIDIA", "Arial", "Helvetica", "sans-serif"], + "nvidia": ["NVIDIA", "Arial", "Helvetica", "sans-serif"], + "nvidia-mono": ["RobotoMono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"], + }, + fontSize: { + 'xs': ['0.875rem', { lineHeight: '1.4' }], + 'sm': ['0.875rem', { lineHeight: '1.5' }], + 'base': ['1rem', { lineHeight: '1.6' }], + 'lg': ['1.125rem', { lineHeight: '1.75' }], + 'xl': ['1.25rem', { lineHeight: '1.75' }], + '2xl': ['1.5rem', { lineHeight: '2' }], + '3xl': ['1.875rem', { lineHeight: '2.25' }], + }, + }, + }, + plugins: [], +}; +``` + +### 4. Create Theme Symlink + +For the example site to work, create a symlink to the theme: + +```bash +mkdir -p themes +ln -sf ../../ themes/milodocs +``` + +## How It Works + +1. **Hugo Processing**: Hugo automatically detects the PostCSS configuration and processes CSS files through PostCSS +2. **Tailwind v4**: The `@tailwindcss/postcss` plugin handles Tailwind CSS v4 compilation +3. **Component Imports**: PostCSS Import resolves the theme's component CSS files +4. **No Build Step**: Everything happens automatically when you run `hugo server` or `hugo build` + +## Benefits + +- ✅ **No separate build tools**: Hugo handles everything natively +- ✅ **Live reload**: CSS changes are reflected immediately during development +- ✅ **Optimized output**: Hugo automatically minifies and fingerprints CSS in production +- ✅ **Tailwind v4**: Latest Tailwind CSS features and performance improvements +- ✅ **Theme integration**: Full access to theme components and design tokens + +## Troubleshooting + +### CSS Import Errors + +If you see import path errors, ensure: +1. The theme symlink exists: `themes/milodocs` → `../../` +2. PostCSS import path is configured: `path: ['themes/milodocs/assets/css']` + +### Missing Dependencies + +Ensure you have Hugo Extended version for PostCSS support: +```bash +hugo version # Should show "extended" +``` + +### Development vs Production + +- **Development**: CSS is processed but not minified for faster builds +- **Production**: CSS is automatically minified and fingerprinted by Hugo + +## Migration from PostCSS Build + +If you're migrating from the previous PostCSS build setup: + +1. Remove build scripts from `package.json` +2. Delete generated `assets/css/main.css` +3. Remove theme-level `postcss.config.js` and `tailwind.config.js` +4. Follow the setup steps above + +The theme now handles CSS processing through Hugo's native capabilities, providing a much cleaner and more maintainable setup. diff --git a/assets/css/src/input.css b/assets/css/src/input.css index 3b63bab..22c497e 100644 --- a/assets/css/src/input.css +++ b/assets/css/src/input.css @@ -1,32 +1,32 @@ /* This file is used to compile the main.css file. */ /* Import component CSS files - MUST be first! */ -@import '../architecture/index.css'; - -@import '../components/buttons.css'; -@import '../components/tables.css'; -@import '../components/notice.css'; -@import '../components/navigation.css'; -@import '../components/navigation-api.css'; -@import '../components/breadcrumbs.css'; -@import '../components/search.css'; -@import '../components/chat.css'; -@import '../components/article-header.css'; -@import '../components/article/related-content.css'; -@import '../components/article/page-resources.css'; -@import '../components/tiles.css'; -@import '../components/child-links.css'; -@import '../components/cards.css'; -@import '../components/glossary.css'; -@import '../components/quicklinks.css'; -@import '../components/next-prev.css'; -@import '../components/tutorial.css'; -@import '../components/toast.css'; -@import '../components/notebook.css'; -@import '../components/openapi/index.css'; -@import '../components/tabs.css'; -@import '../components/code.css'; -@import '../components/object-model.css'; +@import 'architecture/index.css'; + +@import 'components/buttons.css'; +@import 'components/tables.css'; +@import 'components/notice.css'; +@import 'components/navigation.css'; +@import 'components/navigation-api.css'; +@import 'components/breadcrumbs.css'; +@import 'components/search.css'; +@import 'components/chat.css'; +@import 'components/article-header.css'; +@import 'components/article/related-content.css'; +@import 'components/article/page-resources.css'; +@import 'components/tiles.css'; +@import 'components/child-links.css'; +@import 'components/cards.css'; +@import 'components/glossary.css'; +@import 'components/quicklinks.css'; +@import 'components/next-prev.css'; +@import 'components/tutorial.css'; +@import 'components/toast.css'; +@import 'components/notebook.css'; +@import 'components/openapi/index.css'; +@import 'components/tabs.css'; +@import 'components/code.css'; +@import 'components/object-model.css'; @import 'tailwindcss'; diff --git a/exampleSite/assets/css/components/buttons.css b/exampleSite/assets/css/components/buttons.css new file mode 100644 index 0000000..9cdb5b6 --- /dev/null +++ b/exampleSite/assets/css/components/buttons.css @@ -0,0 +1,328 @@ +/* Buttons Component - Enhanced button system with NVIDIA styling */ + +/* Enhanced Button System */ +.btn { + @apply inline-flex items-center justify-center px-4 py-2 + font-medium focus:outline-none focus:ring-2 focus:ring-offset-2; + border-radius: var(--radius-button); + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + background-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard), + box-shadow var(--timing-fast) var(--easing-standard); + min-height: 2.5rem; + text-decoration: none; + cursor: pointer; + position: relative; + overflow: hidden; +} + +.btn:disabled { + @apply opacity-50 cursor-not-allowed; +} + +.btn--primary { + background-color: var(--color-brand); + color: var(--color-text-inverse); + --tw-ring-color: var(--color-brand); +} + +.btn--primary:hover:not(:disabled) { + background-color: var(--color-brand-1); + transform: var(--transform-lift-subtle); + box-shadow: var(--elevation-hover-2); +} + +.btn--secondary { + background-color: var(--color-surface); + color: var(--color-text-primary); + border: 1px solid var(--color-border-primary); + --tw-ring-color: var(--color-brand); +} + +.btn--secondary:hover:not(:disabled) { + background-color: var(--color-surface-hover); + border-color: var(--color-brand); + transform: var(--transform-lift-subtle); +} + +.btn--ghost { + background-color: transparent; + color: var(--color-text-secondary); + --tw-ring-color: var(--color-brand); +} + +.btn--ghost:hover:not(:disabled) { + background-color: var(--color-surface-hover); + color: var(--color-text-primary); +} + +.btn--danger { + background-color: var(--color-brand-7); + color: var(--color-text-inverse); + --tw-ring-color: var(--color-brand-7); +} + +.btn--danger:hover:not(:disabled) { + /* background-color: #dc2626; */ + background-color: var(--feedback-error); + transform: var(--transform-lift-subtle); +} + +.btn--sm { + /* @apply px-3 py-1 text-sm; */ + @apply text-sm; + min-height: 2rem; + min-width: 2rem; + padding: 0.375rem 0.5rem; /* tighter, more square */ +} + +.btn--lg { + @apply px-6 py-3 text-lg; + min-height: 3rem; +} + +.btn__icon { + /* @apply w-4 h-4 mr-2; */ + width: 1rem; + height: 1rem; + margin-right: 0.375rem; + display: inline-block; + vertical-align: middle; +} + +/* Icon-only small buttons: remove right margin for centering */ +.btn--sm .btn__icon:only-child { + margin-right: 0; +} + +.btn__icon--right { + @apply w-4 h-4 ml-2 mr-0; +} + +/* Enhanced loading state */ +.btn--loading { + @apply opacity-75 cursor-wait; +} + +.btn--loading::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 1rem; + height: 1rem; + margin: -0.5rem 0 0 -0.5rem; + border: 2px solid transparent; + border-top-color: currentColor; + border-radius: 50%; + animation: spin 1s linear infinite; +} + +/* Topbar Button Component */ +.topbar__button { + position: relative; + padding: 0.5rem; + border-radius: var(--radius-lg); + min-width: 2.25rem; + min-height: 2.25rem; + background-color: var(--color-surface); + border: 1px solid var(--color-border-primary); + color: var(--color-text-secondary); + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.topbar__button::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at center, rgba(var(--color-brand-rgb), 0.1) 0%, transparent 70%); + opacity: 0; + transition: opacity var(--timing-fast) var(--easing-standard); + pointer-events: none; +} + +.topbar__button:hover { + background-color: var(--color-surface-hover); + border-color: var(--color-brand); + color: var(--color-text-primary); + transform: var(--transform-lift-subtle); + /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ + box-shadow: var(--elevation-hover-2); +} + +.topbar__button:hover::before { + opacity: 1; +} + +.topbar__button:active { + transform: translateY(0); + /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ + box-shadow: var(--elevation-1); +} + +.topbar__button img { + width: 1.125rem; + height: 1.125rem; + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); + filter: brightness(0.8); + flex-shrink: 0; +} + +.topbar__button:hover img { + filter: brightness(1); + transform: scale(1.1); +} + +/* Legacy toggle-btn support for backward compatibility */ +.toggle-btn { + position: relative; + padding: 0.5rem; + border-radius: var(--radius-lg); + min-width: 2.25rem; + min-height: 2.25rem; + background-color: var(--color-surface); + border: 1px solid var(--color-border-primary); + color: var(--color-text-secondary); + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + --tw-ring-color: var(--color-brand); +} + +.toggle-btn:focus { + outline: 2px solid transparent; + outline-offset: 2px; + box-shadow: 0 0 0 2px var(--color-brand); +} + +.toggle-btn::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient( + circle at center, + rgba(var(--color-brand-rgb), 0.1) 0%, + transparent 70% + ); + opacity: 0; + transition: opacity var(--timing-fast) var(--easing-standard); + pointer-events: none; +} + +.toggle-btn:hover { + background-color: var(--color-surface-hover); + border-color: var(--color-brand); + color: var(--color-text-primary); + transform: var(--transform-lift-subtle); + /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ + box-shadow: var(--elevation-hover-2); +} + +.toggle-btn:hover::before { + opacity: 1; +} + +.toggle-btn:active { + transform: translateY(0); + /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ + box-shadow: var(--elevation-1); +} + +.toggle-btn--active { + background-color: var(--color-brand); + color: var(--color-text-inverse); + border-color: var(--color-brand); +} + +.toggle-btn--active:hover { + background-color: var(--color-brand-1); + color: var(--color-text-inverse); +} + +.toggle-btn img { + width: 1.125rem !important; /* Properly sized icons */ + height: 1.125rem !important; + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); + filter: brightness(0.8); + flex-shrink: 0; /* Prevent icon compression */ +} + +.toggle-btn:hover img { + filter: brightness(1); + transform: scale(1.1); +} + +.toggle-btn--active img { + filter: brightness(1) invert(1); +} + +/* Button Ripple Effects */ +.ripple { + position: absolute !important; + border-radius: 50%; + background: rgba(255, 255, 255, 0.3); + transform: scale(0); + /* ✅ FIXED: Use animation tokens for ripple effect */ + animation: ripple-animation var(--timing-slow) linear; + pointer-events: none; + z-index: 1; + /* Ensure it doesn't affect layout */ + top: 0; + left: 0; + width: 0; + height: 0; +} + +.dark .ripple { + background: rgba(255, 255, 255, 0.2); +} + +/* ✅ KEYFRAME: Ripple animation using animation tokens */ +@keyframes ripple-animation { + to { + transform: scale(4); + opacity: var(--opacity-hidden); + } +} + +/* Ensure buttons have proper positioning for ripple containment */ +button, .btn { + position: relative; + overflow: hidden; +} \ No newline at end of file diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index 1410ee7..238ad2b 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -1122,184 +1122,184 @@ "classify-python-entity", "clearAll", "closed-question-pipeline", - "code-1758982901005903000", - "code-1758982901006421000", - "code-1758982901007034000", - "code-1758982901008067000", - "code-1758982901008670000", - "code-1758982901009053000", - "code-1758982901009204000", - "code-1758982901009595000", - "code-1758982901009700000", - "code-1758982901014662000", - "code-1758982901014826000", - "code-1758982901014955000", - "code-1758982901015084000", - "code-1758982901015283000", - "code-1758982901015537000", - "code-1758982901015664000", - "code-1758982901015783000", - "code-1758982901015960000", - "code-1758982901016174000", - "code-1758982901017137000", - "code-1758982901024762000", - "code-1758982901025154000", - "code-1758982901025976000", - "code-1758982901026149000", - "code-1758982901026337000", - "code-1758982901026477000", - "code-1758982901026575000", - "code-1758982901026687000", - "code-1758982901026824000", - "code-1758982901026970000", - "code-1758982901027120000", - "code-1758982901027265000", - "code-1758982901027410000", - "code-1758982901027524000", - "code-1758982901027627000", - "code-1758982901027797000", - "code-1758982901027885000", - "code-1758982901027983000", - "code-1758982901028069000", - "code-1758982901028168000", - "code-1758982901028332000", - "code-1758982901029992000", - "code-1758982901030905000", - "code-1758982901031092000", - "code-1758982901031480000", - "code-1758982901033298000", - "code-1758982901033765000", - "code-1758982901034034000", - "code-1758982901039611000", - "code-1758982901045104000", - "code-1758982901045803000", - "code-1758982901046343000", - "code-1758982901049502000", - "code-1758982901053046000", - "code-1758982901053367000", - "code-1758982901054585000", - "code-1758982901179929000", - "code-1758982901182710000", - "code-1758982901184020000", - "code-1758982901233519000", - "code-1758982901233695000", - "code-1758982901233856000", - "code-1758982901234603000", - "code-1758982901235204000", - "code-1758982901377682000", - "code-1758982901378440000", - "code-1758982901378691000", - "code-1758982901378964000", - "code-1758982901379105000", - "code-1758982901379363000", - "code-1758982901381277000", - "code-1758982901381330000", - "code-1758982901381682000", - "code-1758982901382065000", - "code-1758982901382429000", - "code-1758982901382786000", - "code-1758982901382913000", - "code-1758982901383134000", - "code-1758982901383492000", - "code-1758982901383539000", - "code-1758982901386111000", - "code-1758982901386373000", - "code-1758982901387354000", - "code-1758982901388963000", - "code-1758982901389277000", - "code-1758982901389479000", - "code-1758982901389923000", - "code-1758982901390305000", - "code-1758982901395487000", - "code-1758982901395881000", - "code-1758982901395919000", - "code-1758982901396861000", - "code-1758982901396917000", - "code-1758982901397112000", - "code-1758982901397281000", - "code-1758982901397456000", - "code-1758982901397649000", - "code-1758982901397836000", - "code-1758982901398256000", - "code-1758982901398305000", - "code-1758982901398813000", - "code-1758982901399429000", - "code-1758982901399438000", - "code-1758982901399891000", - "code-1758982901400085000", - "code-1758982901400377000", - "code-1758982901400495000", - "code-1758982901400626000", - "code-1758982901406589000", - "code-1758982901408708000", - "code-1758982901409477000", - "code-1758982901411375000", - "code-1758982901411377000", - "code-1758982901411495000", - "code-1758982901411909000", - "code-1758982901411915000", - "code-1758982901412742000", - "code-1758982901412990000", - "code-1758982901413259000", - "code-1758982901413271000", - "code-1758982901413575000", - "code-1758982901413675000", - "code-1758982901413891000", - "code-1758982901414152000", - "code-1758982901414199000", - "code-1758982901414404000", - "code-1758982901414449000", - "code-1758982901414537000", - "code-1758982901414906000", - "code-1758982901415151000", - "code-1758982901415392000", - "code-1758982901417894000", - "code-1758982901418193000", - "code-1758982901418356000", - "code-1758982901418623000", - "code-1758982901419249000", - "code-1758982901419420000", - "code-1758982901419519000", - "code-1758982901419635000", - "code-1758982901419684000", - "code-1758982901419729000", - "code-1758982901419830000", - "code-1758982901419976000", - "code-1758982901420016000", - "code-1758982901420437000", - "code-1758982901420718000", - "code-1758982901423279000", - "code-1758982901423382000", - "code-1758982901423465000", - "code-1758982901427076000", - "code-1758982901427289000", - "code-1758982901428099000", - "code-1758982901428254000", - "code-1758982901429187000", - "code-1758982901429318000", - "code-1758982901430034000", - "code-1758982901430235000", - "code-1758982901430326000", - "code-1758982901430460000", - "code-1758982901430579000", - "code-1758982901430950000", - "code-1758982901431391000", - "code-1758982901431991000", - "code-1758982901432143000", - "code-1758982901432166000", - "code-1758982901432665000", - "code-1758982901433367000", - "code-1758982901433614000", - "code-1758982901433647000", - "code-1758982901505827000", - "code-1758982901507656000", - "code-1758982901507740000", - "collapse-0d0cece9160ef824a01d2821d406048f-1758982901432136000", - "collapse-0d0cece9160ef824a01d2821d406048f-1758982901432136000-body", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758982901041094000", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758982901041094000-body", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758982901041860000", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758982901041860000-body", + "code-1758983429908923000", + "code-1758983429909439000", + "code-1758983429910066000", + "code-1758983429910511000", + "code-1758983429910724000", + "code-1758983429911017000", + "code-1758983429911175000", + "code-1758983429911580000", + "code-1758983429911692000", + "code-1758983429914197000", + "code-1758983429914338000", + "code-1758983429914422000", + "code-1758983429914512000", + "code-1758983429914660000", + "code-1758983429914848000", + "code-1758983429915218000", + "code-1758983429915388000", + "code-1758983429916981000", + "code-1758983429917283000", + "code-1758983429919272000", + "code-1758983429921217000", + "code-1758983429921614000", + "code-1758983429922496000", + "code-1758983429922836000", + "code-1758983429923140000", + "code-1758983429923804000", + "code-1758983429924195000", + "code-1758983429924801000", + "code-1758983429925498000", + "code-1758983429925920000", + "code-1758983429926349000", + "code-1758983429926777000", + "code-1758983429927207000", + "code-1758983429927565000", + "code-1758983429927848000", + "code-1758983429928259000", + "code-1758983429928733000", + "code-1758983429929004000", + "code-1758983429929107000", + "code-1758983429929218000", + "code-1758983429929396000", + "code-1758983429930267000", + "code-1758983429930816000", + "code-1758983429933504000", + "code-1758983429938575000", + "code-1758983429941886000", + "code-1758983429943444000", + "code-1758983429943822000", + "code-1758983429944282000", + "code-1758983429944548000", + "code-1758983429945051000", + "code-1758983429945305000", + "code-1758983429945606000", + "code-1758983429947744000", + "code-1758983429950673000", + "code-1758983429950954000", + "code-1758983429956261000", + "code-1758983429961000000", + "code-1758983429962113000", + "code-1758983429975141000", + "code-1758983429975301000", + "code-1758983429975447000", + "code-1758983429982290000", + "code-1758983429982842000", + "code-1758983430088715000", + "code-1758983430091174000", + "code-1758983430091410000", + "code-1758983430091677000", + "code-1758983430091839000", + "code-1758983430092101000", + "code-1758983430092957000", + "code-1758983430093049000", + "code-1758983430093561000", + "code-1758983430093766000", + "code-1758983430093851000", + "code-1758983430093957000", + "code-1758983430094459000", + "code-1758983430095461000", + "code-1758983430095579000", + "code-1758983430096172000", + "code-1758983430097092000", + "code-1758983430097293000", + "code-1758983430098588000", + "code-1758983430099393000", + "code-1758983430102277000", + "code-1758983430102559000", + "code-1758983430102755000", + "code-1758983430102922000", + "code-1758983430104527000", + "code-1758983430105750000", + "code-1758983430108917000", + "code-1758983430109374000", + "code-1758983430109417000", + "code-1758983430109818000", + "code-1758983430109984000", + "code-1758983430110340000", + "code-1758983430110509000", + "code-1758983430110517000", + "code-1758983430110565000", + "code-1758983430110740000", + "code-1758983430110754000", + "code-1758983430110785000", + "code-1758983430110792000", + "code-1758983430110871000", + "code-1758983430111003000", + "code-1758983430111032000", + "code-1758983430111135000", + "code-1758983430111357000", + "code-1758983430111375000", + "code-1758983430111589000", + "code-1758983430111760000", + "code-1758983430111972000", + "code-1758983430112819000", + "code-1758983430113019000", + "code-1758983430113543000", + "code-1758983430114152000", + "code-1758983430114821000", + "code-1758983430115135000", + "code-1758983430115407000", + "code-1758983430115834000", + "code-1758983430116198000", + "code-1758983430116407000", + "code-1758983430116601000", + "code-1758983430118139000", + "code-1758983430118245000", + "code-1758983430118574000", + "code-1758983430119535000", + "code-1758983430119980000", + "code-1758983430120633000", + "code-1758983430121126000", + "code-1758983430121142000", + "code-1758983430121238000", + "code-1758983430121406000", + "code-1758983430121508000", + "code-1758983430121602000", + "code-1758983430121606000", + "code-1758983430121703000", + "code-1758983430121784000", + "code-1758983430121786000", + "code-1758983430126778000", + "code-1758983430127063000", + "code-1758983430127191000", + "code-1758983430127421000", + "code-1758983430127478000", + "code-1758983430128025000", + "code-1758983430128214000", + "code-1758983430128329000", + "code-1758983430128363000", + "code-1758983430128437000", + "code-1758983430128486000", + "code-1758983430128594000", + "code-1758983430128667000", + "code-1758983430128737000", + "code-1758983430128925000", + "code-1758983430129036000", + "code-1758983430129116000", + "code-1758983430129190000", + "code-1758983430129599000", + "code-1758983430129989000", + "code-1758983430130283000", + "code-1758983430130361000", + "code-1758983430130579000", + "code-1758983430130936000", + "code-1758983430130940000", + "code-1758983430131073000", + "code-1758983430131128000", + "code-1758983430131220000", + "code-1758983430132610000", + "code-1758983430133100000", + "code-1758983430159728000", + "code-1758983430160546000", + "code-1758983430160577000", + "collapse-0d0cece9160ef824a01d2821d406048f-1758983430130208000", + "collapse-0d0cece9160ef824a01d2821d406048f-1758983430130208000-body", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758983429939558000", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758983429939558000-body", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758983429939607000", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758983429939607000-body", "collapsehtml-examples", "collapsehtml-how-it-works", "collapsehtml-source-code", diff --git a/exampleSite/package.json b/exampleSite/package.json index 10296e1..e1843b8 100644 --- a/exampleSite/package.json +++ b/exampleSite/package.json @@ -1,18 +1,23 @@ { - "name": "example-site", + "name": "milo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "hugo server", "test": "echo \"Error: no test specified\" && exit 1", - "build-tw": "pnpm tailwindcss -i ./themes/milodocs/assets/css/src/input.css -o ./themes/milodocs/assets/css/main.css", - "watch-tw": "pnpm tailwindcss -i ./themes/milodocs/assets/css/src/input.css -o ./themes/milodocs/assets/css/main.css -w --minify" + "build-tw": "pnpm postcss ./assets/css/src/input.css -o ./assets/css/main.css", + "watch-tw": "pnpm postcss ./assets/css/src/input.css -o ./assets/css/main.css --watch" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { + "@tailwindcss/postcss": "^4.1.13", + "autoprefixer": "^10.4.21", + "postcss": "^8.5.6", + "postcss-cli": "^11.0.1", + "postcss-import": "^16.1.1", "tailwindcss": "^4.1.13" } } diff --git a/exampleSite/postcss.config.js b/exampleSite/postcss.config.js new file mode 100644 index 0000000..35d0e15 --- /dev/null +++ b/exampleSite/postcss.config.js @@ -0,0 +1,9 @@ +module.exports = { + plugins: [ + require('postcss-import')({ + path: ['themes/milodocs/assets/css'] + }), // postcss-import needs to be first + require('@tailwindcss/postcss'), + require('autoprefixer') + ] +} \ No newline at end of file diff --git a/assets/css/main.css b/exampleSite/resources/_gen/assets/css/src/input.css_e03652540c5bbc68d359e86d9fc1015a.content similarity index 99% rename from assets/css/main.css rename to exampleSite/resources/_gen/assets/css/src/input.css_e03652540c5bbc68d359e86d9fc1015a.content index 89e608c..6a6c713 100644 --- a/assets/css/main.css +++ b/exampleSite/resources/_gen/assets/css/src/input.css_e03652540c5bbc68d359e86d9fc1015a.content @@ -12951,6 +12951,11 @@ html { --spacing: 0.25rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; + --container-xs: 20rem; + --container-sm: 24rem; + --container-md: 28rem; + --container-lg: 32rem; + --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; @@ -13204,6 +13209,9 @@ html { } } @layer utilities { + .\@container { + container-type: inline-size; + } .pointer-events-none { pointer-events: none; } @@ -13260,6 +13268,9 @@ html { .right-0 { right: calc(var(--spacing) * 0); } + .right-2 { + right: calc(var(--spacing) * 2); + } .right-2\.5 { right: calc(var(--spacing) * 2.5); } @@ -13302,6 +13313,9 @@ html { .m-4 { margin: calc(var(--spacing) * 4); } + .m-auto { + margin: auto; + } .mx-2 { margin-inline: calc(var(--spacing) * 2); } @@ -13323,6 +13337,9 @@ html { .my-10 { margin-block: calc(var(--spacing) * 10); } + .my-auto { + margin-block: auto; + } .mt-1 { margin-top: calc(var(--spacing) * 1); } @@ -13428,6 +13445,9 @@ html { .table { display: table; } + .h-1 { + height: calc(var(--spacing) * 1); + } .h-1\.5 { height: calc(var(--spacing) * 1.5); } @@ -13521,6 +13541,9 @@ html { .w-full { width: 100%; } + .max-w-\(--breakpoint-xl\) { + max-width: var(--breakpoint-xl); + } .max-w-2xl { max-width: var(--container-2xl); } @@ -13530,14 +13553,35 @@ html { .max-w-4xl { max-width: var(--container-4xl); } + .max-w-5xl { + max-width: var(--container-5xl); + } .max-w-6xl { max-width: var(--container-6xl); } .max-w-7xl { max-width: var(--container-7xl); } - .max-w-screen-xl { - max-width: var(--breakpoint-xl); + .max-w-full { + max-width: 100%; + } + .max-w-lg { + max-width: var(--container-lg); + } + .max-w-md { + max-width: var(--container-md); + } + .max-w-prose { + max-width: 65ch; + } + .max-w-sm { + max-width: var(--container-sm); + } + .max-w-xl { + max-width: var(--container-xl); + } + .max-w-xs { + max-width: var(--container-xs); } .min-w-0 { min-width: calc(var(--spacing) * 0); @@ -13551,6 +13595,9 @@ html { .flex-shrink-0 { flex-shrink: 0; } + .shrink { + flex-shrink: 1; + } .shrink-0 { flex-shrink: 0; } @@ -13560,6 +13607,9 @@ html { .grow { flex-grow: 1; } + .border-collapse { + border-collapse: collapse; + } .-translate-x-full { --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); @@ -13751,6 +13801,9 @@ html { .rounded-2xl { border-radius: var(--radius-2xl); } + .rounded-3xl { + border-radius: var(--radius-3xl); + } .rounded-full { border-radius: calc(infinity * 1px); } @@ -13760,6 +13813,15 @@ html { .rounded-md { border-radius: var(--radius-md); } + .rounded-none { + border-radius: 0; + } + .rounded-sm { + border-radius: var(--radius-sm); + } + .rounded-xl { + border-radius: var(--radius-xl); + } .border { border-style: var(--tw-border-style); border-width: 1px; @@ -13881,6 +13943,9 @@ html { -o-object-fit: cover; object-fit: cover; } + .p-0 { + padding: calc(var(--spacing) * 0); + } .p-1 { padding: calc(var(--spacing) * 1); } @@ -14157,10 +14222,6 @@ html { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .shadow\/elevation { - --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } .ring-1 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -14168,6 +14229,10 @@ html { .ring-black { --tw-ring-color: var(--color-black); } + .outline { + outline-style: var(--tw-outline-style); + outline-width: 1px; + } .blur { --tw-blur: blur(8px); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); @@ -14584,6 +14649,11 @@ html { padding-inline: calc(var(--spacing) * 8); } } + .\32 xl\:max-w-\(--breakpoint-2xl\) { + @media (width >= 96rem) { + max-width: var(--breakpoint-2xl); + } + } .\32 xl\:max-w-5xl { @media (width >= 96rem) { max-width: var(--container-5xl); @@ -14594,11 +14664,6 @@ html { max-width: var(--container-7xl); } } - .\32 xl\:max-w-screen-2xl { - @media (width >= 96rem) { - max-width: var(--breakpoint-2xl); - } - } .\32 xl\:grid-cols-3 { @media (width >= 96rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); @@ -14716,7 +14781,7 @@ html { } @screen md { .grid-autofit { - gap: 2rem; + gap: calc(var(--spacing) * 8); } } .layout-shell { @@ -15035,6 +15100,11 @@ html { syntax: "*"; inherits: false; } +@property --tw-outline-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} @property --tw-blur { syntax: "*"; inherits: false; @@ -15179,6 +15249,7 @@ html { --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; + --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; diff --git a/exampleSite/resources/_gen/assets/css/src/input.css_e03652540c5bbc68d359e86d9fc1015a.json b/exampleSite/resources/_gen/assets/css/src/input.css_e03652540c5bbc68d359e86d9fc1015a.json new file mode 100644 index 0000000..c9beff7 --- /dev/null +++ b/exampleSite/resources/_gen/assets/css/src/input.css_e03652540c5bbc68d359e86d9fc1015a.json @@ -0,0 +1 @@ +{"Target":"/css/src/input.css","MediaType":"text/css","Data":{}} \ No newline at end of file diff --git a/exampleSite/tailwind.config.js b/exampleSite/tailwind.config.js index 91d5bf9..d5aa069 100644 --- a/exampleSite/tailwind.config.js +++ b/exampleSite/tailwind.config.js @@ -1,6 +1,12 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["content/**/*.md", "layouts/**/*.html", "assets/js/**/*.js", "themes/milodocs/**"], + content: [ + "content/**/*.md", + "layouts/**/*.html", + "../../layouts/**/*.html", + "../../content/**/*.md", + "assets/js/**/*.js" + ], theme: { extend: { colors: { @@ -12,10 +18,45 @@ module.exports = { "brand-5": "var(--color-brand-5)", "brand-6": "var(--color-brand-6)", "brand-7": "var(--color-brand-7)", + + /* Semantic color tokens mapped to CSS variables */ + surface: "var(--color-surface)", + "surface-hover": "var(--color-surface-hover)", + "surface-active": "var(--color-surface-active)", + + text: { + primary: "var(--color-text-primary)", + secondary: "var(--color-text-secondary)", + tertiary: "var(--color-text-tertiary)", + inverse: "var(--color-text-inverse)", + }, + bg: { + primary: "var(--color-bg-primary)", + secondary: "var(--color-bg-secondary)", + tertiary: "var(--color-bg-tertiary)", + inverse: "var(--color-bg-inverse)", + }, + border: { + primary: "var(--color-border-primary)", + secondary: "var(--color-border-secondary)", + focus: "var(--color-border-focus)", + }, }, fontFamily: { - "brand": ["Rubik", "sans-serif"], - "brand-italic": ["Rubik", "sans-serif", "italic"], + "brand": ["NVIDIA", "Arial", "Helvetica", "sans-serif"], + "brand-italic": ["NVIDIA", "Arial", "Helvetica", "sans-serif"], + "nvidia": ["NVIDIA", "Arial", "Helvetica", "sans-serif"], + "nvidia-mono": ["RobotoMono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"], + }, + fontSize: { + // Override default text sizes for better accessibility + 'xs': ['0.875rem', { lineHeight: '1.4' }], // Increased from 0.75rem + 'sm': ['0.875rem', { lineHeight: '1.5' }], // Keep at 0.875rem + 'base': ['1rem', { lineHeight: '1.6' }], // Enhanced line height + 'lg': ['1.125rem', { lineHeight: '1.75' }], // Keep current + 'xl': ['1.25rem', { lineHeight: '1.75' }], // Keep current + '2xl': ['1.5rem', { lineHeight: '2' }], // Keep current + '3xl': ['1.875rem', { lineHeight: '2.25' }], // Keep current }, }, }, diff --git a/exampleSite/themes/milodocs b/exampleSite/themes/milodocs new file mode 120000 index 0000000..c25bddb --- /dev/null +++ b/exampleSite/themes/milodocs @@ -0,0 +1 @@ +../.. \ No newline at end of file diff --git a/layouts/partials/head/css.html b/layouts/partials/head/css.html index 2df350c..d9c5792 100644 --- a/layouts/partials/head/css.html +++ b/layouts/partials/head/css.html @@ -2,12 +2,20 @@ {{/* Build CSS resources array */}} {{- $cssResources := slice -}} -{{/* Add main CSS */}} -{{- $mainCSS := resources.Get "css/main.css" -}} +{{/* Add main CSS - Use Hugo's native PostCSS processing for Tailwind */}} +{{- $mainCSS := resources.Get "css/src/input.css" -}} {{- if $mainCSS -}} - {{- $cssResources = $cssResources | append $mainCSS -}} + {{/* Use Hugo's native PostCSS processing */}} + {{- $processedCSS := $mainCSS | css.PostCSS -}} + {{- $cssResources = $cssResources | append $processedCSS -}} {{- else -}} - {{- warnf "CSS: main.css not found" -}} + {{/* Fallback to pre-compiled CSS if PostCSS source not available */}} + {{- $fallbackCSS := resources.Get "css/main.css" -}} + {{- if $fallbackCSS -}} + {{- $cssResources = $cssResources | append $fallbackCSS -}} + {{- else -}} + {{- warnf "CSS: Neither src/input.css nor main.css found" -}} + {{- end -}} {{- end -}} {{/* Environment-specific resource loading with advanced optimization */}} diff --git a/package.json b/package.json index e1843b8..b6638ca 100644 --- a/package.json +++ b/package.json @@ -5,19 +5,9 @@ "main": "index.js", "scripts": { "start": "hugo server", - "test": "echo \"Error: no test specified\" && exit 1", - "build-tw": "pnpm postcss ./assets/css/src/input.css -o ./assets/css/main.css", - "watch-tw": "pnpm postcss ./assets/css/src/input.css -o ./assets/css/main.css --watch" + "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", - "devDependencies": { - "@tailwindcss/postcss": "^4.1.13", - "autoprefixer": "^10.4.21", - "postcss": "^8.5.6", - "postcss-cli": "^11.0.1", - "postcss-import": "^16.1.1", - "tailwindcss": "^4.1.13" - } } diff --git a/postcss.config.js b/postcss.config.js deleted file mode 100644 index c13363e..0000000 --- a/postcss.config.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - plugins: [ - require('postcss-import'), // postcss-import needs to be first - require('@tailwindcss/postcss'), - require('autoprefixer') - ] -} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js deleted file mode 100644 index d5aa069..0000000 --- a/tailwind.config.js +++ /dev/null @@ -1,65 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -module.exports = { - content: [ - "content/**/*.md", - "layouts/**/*.html", - "../../layouts/**/*.html", - "../../content/**/*.md", - "assets/js/**/*.js" - ], - theme: { - extend: { - colors: { - brand: "var(--color-brand)", - "brand-1": "var(--color-brand-1)", - "brand-2": "var(--color-brand-2)", - "brand-3": "var(--color-brand-3)", - "brand-4": "var(--color-brand-4)", - "brand-5": "var(--color-brand-5)", - "brand-6": "var(--color-brand-6)", - "brand-7": "var(--color-brand-7)", - - /* Semantic color tokens mapped to CSS variables */ - surface: "var(--color-surface)", - "surface-hover": "var(--color-surface-hover)", - "surface-active": "var(--color-surface-active)", - - text: { - primary: "var(--color-text-primary)", - secondary: "var(--color-text-secondary)", - tertiary: "var(--color-text-tertiary)", - inverse: "var(--color-text-inverse)", - }, - bg: { - primary: "var(--color-bg-primary)", - secondary: "var(--color-bg-secondary)", - tertiary: "var(--color-bg-tertiary)", - inverse: "var(--color-bg-inverse)", - }, - border: { - primary: "var(--color-border-primary)", - secondary: "var(--color-border-secondary)", - focus: "var(--color-border-focus)", - }, - }, - fontFamily: { - "brand": ["NVIDIA", "Arial", "Helvetica", "sans-serif"], - "brand-italic": ["NVIDIA", "Arial", "Helvetica", "sans-serif"], - "nvidia": ["NVIDIA", "Arial", "Helvetica", "sans-serif"], - "nvidia-mono": ["RobotoMono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"], - }, - fontSize: { - // Override default text sizes for better accessibility - 'xs': ['0.875rem', { lineHeight: '1.4' }], // Increased from 0.75rem - 'sm': ['0.875rem', { lineHeight: '1.5' }], // Keep at 0.875rem - 'base': ['1rem', { lineHeight: '1.6' }], // Enhanced line height - 'lg': ['1.125rem', { lineHeight: '1.75' }], // Keep current - 'xl': ['1.25rem', { lineHeight: '1.75' }], // Keep current - '2xl': ['1.5rem', { lineHeight: '2' }], // Keep current - '3xl': ['1.875rem', { lineHeight: '2.25' }], // Keep current - }, - }, - }, - plugins: [], -}; - From ff397eb7010df93ce61d67fa3084fd38506902a5 Mon Sep 17 00:00:00 2001 From: "L.B." Date: Sat, 27 Sep 2025 10:38:43 -0400 Subject: [PATCH 5/7] update --- assets/css/main.css | 2 + assets/css/src/input.css | 57 ++-- exampleSite/config/_default/hugo.yaml | 16 + exampleSite/config/_default/security.yaml | 1 + exampleSite/hugo_stats.json | 358 +++++++++++----------- layouts/_default/baseof.html | 4 +- layouts/partials/head/css.html | 18 +- 7 files changed, 239 insertions(+), 217 deletions(-) create mode 100644 assets/css/main.css diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..7516cb1 --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,2 @@ +@import "tailwindcss"; +@source "hugo_stats.json"; diff --git a/assets/css/src/input.css b/assets/css/src/input.css index 22c497e..cae1ae3 100644 --- a/assets/css/src/input.css +++ b/assets/css/src/input.css @@ -1,34 +1,35 @@ /* This file is used to compile the main.css file. */ /* Import component CSS files - MUST be first! */ -@import 'architecture/index.css'; - -@import 'components/buttons.css'; -@import 'components/tables.css'; -@import 'components/notice.css'; -@import 'components/navigation.css'; -@import 'components/navigation-api.css'; -@import 'components/breadcrumbs.css'; -@import 'components/search.css'; -@import 'components/chat.css'; -@import 'components/article-header.css'; -@import 'components/article/related-content.css'; -@import 'components/article/page-resources.css'; -@import 'components/tiles.css'; -@import 'components/child-links.css'; -@import 'components/cards.css'; -@import 'components/glossary.css'; -@import 'components/quicklinks.css'; -@import 'components/next-prev.css'; -@import 'components/tutorial.css'; -@import 'components/toast.css'; -@import 'components/notebook.css'; -@import 'components/openapi/index.css'; -@import 'components/tabs.css'; -@import 'components/code.css'; -@import 'components/object-model.css'; - -@import 'tailwindcss'; +@import '../architecture/index.css'; + +@import '../components/buttons.css'; +@import '../components/tables.css'; +@import '../components/notice.css'; +@import '../components/navigation.css'; +@import '../components/navigation-api.css'; +@import '../components/breadcrumbs.css'; +@import '../components/search.css'; +@import '../components/chat.css'; +@import '../components/article-header.css'; +@import '../components/article/related-content.css'; +@import '../components/article/page-resources.css'; +@import '../components/tiles.css'; +@import '../components/child-links.css'; +@import '../components/cards.css'; +@import '../components/glossary.css'; +@import '../components/quicklinks.css'; +@import '../components/next-prev.css'; +@import '../components/tutorial.css'; +@import '../components/toast.css'; +@import '../components/notebook.css'; +@import '../components/openapi/index.css'; +@import '../components/tabs.css'; +@import '../components/code.css'; +@import '../components/object-model.css'; + +@import 'tailwindcss' layer(base, components, utilities); +@source "hugo_stats.json"; @layer components { /* Responsive auto-fit grid for cards/tiles */ diff --git a/exampleSite/config/_default/hugo.yaml b/exampleSite/config/_default/hugo.yaml index e5fc5b5..65b2450 100644 --- a/exampleSite/config/_default/hugo.yaml +++ b/exampleSite/config/_default/hugo.yaml @@ -20,6 +20,22 @@ imaging: build: useResourceCacheWhen: "fallback" writeStats: true + buildStats: + enable: true + cachebusters: + - source: 'assets/notwatching/hugo_stats\.json' + target: 'css' + - source: '(postcss|tailwind)\.config\.js' + target: 'css' + +# Module configuration for TailwindCSS v4 Hugo integration +module: + mounts: + - source: 'assets' + target: 'assets' + - disableWatch: true + source: 'hugo_stats.json' + target: 'assets/notwatching/hugo_stats.json' ## Misc enableGitInfo: true diff --git a/exampleSite/config/_default/security.yaml b/exampleSite/config/_default/security.yaml index b514e8b..4b98491 100644 --- a/exampleSite/config/_default/security.yaml +++ b/exampleSite/config/_default/security.yaml @@ -4,6 +4,7 @@ exec: - '^go$' - '^npx$' - '^postcss$' + - '^tailwindcss$' - '^rst2html.py$' - '^rst2html$' - '^asciidoctor$' diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index 238ad2b..746a361 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -1122,184 +1122,184 @@ "classify-python-entity", "clearAll", "closed-question-pipeline", - "code-1758983429908923000", - "code-1758983429909439000", - "code-1758983429910066000", - "code-1758983429910511000", - "code-1758983429910724000", - "code-1758983429911017000", - "code-1758983429911175000", - "code-1758983429911580000", - "code-1758983429911692000", - "code-1758983429914197000", - "code-1758983429914338000", - "code-1758983429914422000", - "code-1758983429914512000", - "code-1758983429914660000", - "code-1758983429914848000", - "code-1758983429915218000", - "code-1758983429915388000", - "code-1758983429916981000", - "code-1758983429917283000", - "code-1758983429919272000", - "code-1758983429921217000", - "code-1758983429921614000", - "code-1758983429922496000", - "code-1758983429922836000", - "code-1758983429923140000", - "code-1758983429923804000", - "code-1758983429924195000", - "code-1758983429924801000", - "code-1758983429925498000", - "code-1758983429925920000", - "code-1758983429926349000", - "code-1758983429926777000", - "code-1758983429927207000", - "code-1758983429927565000", - "code-1758983429927848000", - "code-1758983429928259000", - "code-1758983429928733000", - "code-1758983429929004000", - "code-1758983429929107000", - "code-1758983429929218000", - "code-1758983429929396000", - "code-1758983429930267000", - "code-1758983429930816000", - "code-1758983429933504000", - "code-1758983429938575000", - "code-1758983429941886000", - "code-1758983429943444000", - "code-1758983429943822000", - "code-1758983429944282000", - "code-1758983429944548000", - "code-1758983429945051000", - "code-1758983429945305000", - "code-1758983429945606000", - "code-1758983429947744000", - "code-1758983429950673000", - "code-1758983429950954000", - "code-1758983429956261000", - "code-1758983429961000000", - "code-1758983429962113000", - "code-1758983429975141000", - "code-1758983429975301000", - "code-1758983429975447000", - "code-1758983429982290000", - "code-1758983429982842000", - "code-1758983430088715000", - "code-1758983430091174000", - "code-1758983430091410000", - "code-1758983430091677000", - "code-1758983430091839000", - "code-1758983430092101000", - "code-1758983430092957000", - "code-1758983430093049000", - "code-1758983430093561000", - "code-1758983430093766000", - "code-1758983430093851000", - "code-1758983430093957000", - "code-1758983430094459000", - "code-1758983430095461000", - "code-1758983430095579000", - "code-1758983430096172000", - "code-1758983430097092000", - "code-1758983430097293000", - "code-1758983430098588000", - "code-1758983430099393000", - "code-1758983430102277000", - "code-1758983430102559000", - "code-1758983430102755000", - "code-1758983430102922000", - "code-1758983430104527000", - "code-1758983430105750000", - "code-1758983430108917000", - "code-1758983430109374000", - "code-1758983430109417000", - "code-1758983430109818000", - "code-1758983430109984000", - "code-1758983430110340000", - "code-1758983430110509000", - "code-1758983430110517000", - "code-1758983430110565000", - "code-1758983430110740000", - "code-1758983430110754000", - "code-1758983430110785000", - "code-1758983430110792000", - "code-1758983430110871000", - "code-1758983430111003000", - "code-1758983430111032000", - "code-1758983430111135000", - "code-1758983430111357000", - "code-1758983430111375000", - "code-1758983430111589000", - "code-1758983430111760000", - "code-1758983430111972000", - "code-1758983430112819000", - "code-1758983430113019000", - "code-1758983430113543000", - "code-1758983430114152000", - "code-1758983430114821000", - "code-1758983430115135000", - "code-1758983430115407000", - "code-1758983430115834000", - "code-1758983430116198000", - "code-1758983430116407000", - "code-1758983430116601000", - "code-1758983430118139000", - "code-1758983430118245000", - "code-1758983430118574000", - "code-1758983430119535000", - "code-1758983430119980000", - "code-1758983430120633000", - "code-1758983430121126000", - "code-1758983430121142000", - "code-1758983430121238000", - "code-1758983430121406000", - "code-1758983430121508000", - "code-1758983430121602000", - "code-1758983430121606000", - "code-1758983430121703000", - "code-1758983430121784000", - "code-1758983430121786000", - "code-1758983430126778000", - "code-1758983430127063000", - "code-1758983430127191000", - "code-1758983430127421000", - "code-1758983430127478000", - "code-1758983430128025000", - "code-1758983430128214000", - "code-1758983430128329000", - "code-1758983430128363000", - "code-1758983430128437000", - "code-1758983430128486000", - "code-1758983430128594000", - "code-1758983430128667000", - "code-1758983430128737000", - "code-1758983430128925000", - "code-1758983430129036000", - "code-1758983430129116000", - "code-1758983430129190000", - "code-1758983430129599000", - "code-1758983430129989000", - "code-1758983430130283000", - "code-1758983430130361000", - "code-1758983430130579000", - "code-1758983430130936000", - "code-1758983430130940000", - "code-1758983430131073000", - "code-1758983430131128000", - "code-1758983430131220000", - "code-1758983430132610000", - "code-1758983430133100000", - "code-1758983430159728000", - "code-1758983430160546000", - "code-1758983430160577000", - "collapse-0d0cece9160ef824a01d2821d406048f-1758983430130208000", - "collapse-0d0cece9160ef824a01d2821d406048f-1758983430130208000-body", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758983429939558000", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758983429939558000-body", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758983429939607000", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758983429939607000-body", + "code-1758983751426468000", + "code-1758983751426691000", + "code-1758983751426964000", + "code-1758983751427221000", + "code-1758983751427406000", + "code-1758983751427588000", + "code-1758983751427752000", + "code-1758983751428245000", + "code-1758983751428382000", + "code-1758983751428787000", + "code-1758983751428914000", + "code-1758983751429020000", + "code-1758983751429110000", + "code-1758983751431055000", + "code-1758983751431577000", + "code-1758983751431690000", + "code-1758983751431791000", + "code-1758983751432355000", + "code-1758983751432859000", + "code-1758983751434063000", + "code-1758983751436635000", + "code-1758983751436790000", + "code-1758983751437033000", + "code-1758983751437216000", + "code-1758983751437395000", + "code-1758983751437540000", + "code-1758983751437673000", + "code-1758983751437814000", + "code-1758983751437968000", + "code-1758983751438227000", + "code-1758983751438630000", + "code-1758983751438813000", + "code-1758983751438978000", + "code-1758983751439106000", + "code-1758983751439232000", + "code-1758983751439752000", + "code-1758983751439918000", + "code-1758983751440027000", + "code-1758983751440123000", + "code-1758983751440263000", + "code-1758983751440466000", + "code-1758983751444414000", + "code-1758983751444717000", + "code-1758983751445425000", + "code-1758983751459266000", + "code-1758983751470008000", + "code-1758983751470174000", + "code-1758983751470373000", + "code-1758983751497143000", + "code-1758983751671610000", + "code-1758983751680361000", + "code-1758983751681686000", + "code-1758983751716077000", + "code-1758983751717272000", + "code-1758983751718873000", + "code-1758983751721757000", + "code-1758983751733402000", + "code-1758983751735821000", + "code-1758983751736621000", + "code-1758983751756474000", + "code-1758983751783059000", + "code-1758983751783388000", + "code-1758983751790034000", + "code-1758983751790407000", + "code-1758983751936671000", + "code-1758983751938358000", + "code-1758983751938582000", + "code-1758983751938710000", + "code-1758983751938838000", + "code-1758983751939309000", + "code-1758983751939327000", + "code-1758983751940135000", + "code-1758983751940495000", + "code-1758983751940768000", + "code-1758983751940906000", + "code-1758983751940965000", + "code-1758983751941040000", + "code-1758983751941163000", + "code-1758983751941356000", + "code-1758983751941467000", + "code-1758983751941632000", + "code-1758983751942006000", + "code-1758983751942664000", + "code-1758983751942850000", + "code-1758983751943076000", + "code-1758983751943391000", + "code-1758983751944256000", + "code-1758983751944928000", + "code-1758983751945207000", + "code-1758983751945719000", + "code-1758983751945917000", + "code-1758983751946186000", + "code-1758983751946698000", + "code-1758983751947582000", + "code-1758983751949477000", + "code-1758983751950221000", + "code-1758983751950888000", + "code-1758983751951035000", + "code-1758983751951253000", + "code-1758983751951586000", + "code-1758983751951728000", + "code-1758983751951963000", + "code-1758983751952152000", + "code-1758983751952491000", + "code-1758983751952528000", + "code-1758983751952729000", + "code-1758983751952740000", + "code-1758983751952917000", + "code-1758983751953163000", + "code-1758983751953386000", + "code-1758983751953685000", + "code-1758983751954033000", + "code-1758983751954229000", + "code-1758983751954424000", + "code-1758983751957292000", + "code-1758983751957531000", + "code-1758983751957804000", + "code-1758983751958107000", + "code-1758983751958381000", + "code-1758983751958689000", + "code-1758983751959063000", + "code-1758983751959272000", + "code-1758983751959468000", + "code-1758983751969684000", + "code-1758983751969920000", + "code-1758983751970111000", + "code-1758983751970381000", + "code-1758983751970525000", + "code-1758983751971101000", + "code-1758983751971380000", + "code-1758983751971510000", + "code-1758983751971767000", + "code-1758983751972384000", + "code-1758983751972499000", + "code-1758983751972603000", + "code-1758983751972721000", + "code-1758983751972852000", + "code-1758983751972977000", + "code-1758983751976341000", + "code-1758983751976463000", + "code-1758983751976659000", + "code-1758983751978034000", + "code-1758983751978142000", + "code-1758983751978231000", + "code-1758983751982828000", + "code-1758983751982945000", + "code-1758983751983055000", + "code-1758983751983158000", + "code-1758983751983348000", + "code-1758983752003207000", + "code-1758983752003355000", + "code-1758983752003470000", + "code-1758983752003723000", + "code-1758983752003845000", + "code-1758983752004110000", + "code-1758983752004363000", + "code-1758983752004914000", + "code-1758983752005079000", + "code-1758983752006065000", + "code-1758983752006202000", + "code-1758983752007254000", + "code-1758983752007520000", + "code-1758983752047686000", + "code-1758983752048255000", + "code-1758983752048455000", + "code-1758983752048707000", + "code-1758983752052806000", + "code-1758983752055273000", + "code-1758983752055377000", + "code-1758983752058453000", + "code-1758983752061143000", + "code-1758983752061172000", + "collapse-0d0cece9160ef824a01d2821d406048f-1758983752057826000", + "collapse-0d0cece9160ef824a01d2821d406048f-1758983752057826000-body", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758983751459363000", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758983751459363000-body", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758983751459431000", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758983751459431000-body", "collapsehtml-examples", "collapsehtml-how-it-works", "collapsehtml-source-code", @@ -1539,7 +1539,6 @@ "how-to-locally-test-your-theme", "hpa-template", "hugo-environment", - "hugo-environment-json", "i", "images-and-assets", "includehtml-examples", @@ -1591,7 +1590,6 @@ "local-version", "m", "macos", - "main-css", "mainContent", "make-search-script-available", "makefile-commands", diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 32b6e64..0a64db8 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,7 +1,9 @@ - {{ partial "head.html" . }} + {{ with (templates.Defer (dict "key" "global")) }} + {{ partial "head.html" . }} + {{ end }} {{ block "head-extra" . }}{{ end }} Date: Sat, 27 Sep 2025 10:41:30 -0400 Subject: [PATCH 6/7] updates --- assets/css/src/input.css | 232 --------------------- exampleSite/hugo_stats.json | 356 ++++++++++++++++----------------- layouts/partials/head/css.html | 11 +- 3 files changed, 180 insertions(+), 419 deletions(-) delete mode 100644 assets/css/src/input.css diff --git a/assets/css/src/input.css b/assets/css/src/input.css deleted file mode 100644 index cae1ae3..0000000 --- a/assets/css/src/input.css +++ /dev/null @@ -1,232 +0,0 @@ -/* This file is used to compile the main.css file. */ -/* Import component CSS files - MUST be first! */ - -@import '../architecture/index.css'; - -@import '../components/buttons.css'; -@import '../components/tables.css'; -@import '../components/notice.css'; -@import '../components/navigation.css'; -@import '../components/navigation-api.css'; -@import '../components/breadcrumbs.css'; -@import '../components/search.css'; -@import '../components/chat.css'; -@import '../components/article-header.css'; -@import '../components/article/related-content.css'; -@import '../components/article/page-resources.css'; -@import '../components/tiles.css'; -@import '../components/child-links.css'; -@import '../components/cards.css'; -@import '../components/glossary.css'; -@import '../components/quicklinks.css'; -@import '../components/next-prev.css'; -@import '../components/tutorial.css'; -@import '../components/toast.css'; -@import '../components/notebook.css'; -@import '../components/openapi/index.css'; -@import '../components/tabs.css'; -@import '../components/code.css'; -@import '../components/object-model.css'; - -@import 'tailwindcss' layer(base, components, utilities); -@source "hugo_stats.json"; - -@layer components { - /* Responsive auto-fit grid for cards/tiles */ - .grid-autofit { - grid-template-columns: repeat(auto-fit, minmax(var(--grid-card-min, 280px), 1fr)); - } - @screen md { - .grid-autofit { - gap: --spacing(8); - } - } - - /* Layout shell: centralizes the app's three-column grid with tokens */ - .layout-shell { - @apply w-full px-4 sm:px-6 lg:px-8 xl:px-0 transition-all duration-300 ease-in-out; - } - @screen xl { - .layout-shell { - display: grid; - grid-template-columns: var(--left-rail-width) minmax(0, 1fr) var(--right-rail-width); - gap: var(--layout-gap-xl); - } - } - @screen 2xl { - .layout-shell { - grid-template-columns: var(--left-rail-width-2xl) minmax(0, 1fr) var(--right-rail-width-2xl); - gap: var(--layout-gap-2xl); - } - } - - /* Page container max-width controlled by token */ - .page-container { - max-width: var(--max-width-content); - } -} - -@layer base { - :root { - /* Used for scroll anchoring above headings */ - --header-offset: 64px; - } - - /* ✅ FIXED: Use animation tokens instead of hardcoded values */ - html:not(.no-transitions) { - transition: color-scheme var(--timing-medium) var(--easing-standard); - } - - /* Apply transitions only to specific elements that need them */ - html:not(.no-transitions) .btn, - html:not(.no-transitions) .nav-link, - html:not(.no-transitions) .collapse__header, - html:not(.no-transitions) .search-container, - html:not(.no-transitions) .toast-notification, - html:not(.no-transitions) .theme-transition { - transition: - background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard); - } - - /* Disable transitions during page load to prevent flash */ - html.no-transitions, - html.no-transitions * { - transition: none !important; - } - - /* Global Header Sizes & Thickness with Responsive Scaling */ - /* h1 { - font-size: clamp(1.5rem, 4vw, 1.875rem); */ /* Responsive 24px-30px */ - /* line-height: 1.2; - font-weight: 900; - letter-spacing: -0.025em; - word-wrap: break-word; - } */ - h1 { - font-size: clamp(1.5rem, 3.5vw, 1.75rem); /* Responsive 24px-28px */ - line-height: 1.2; - font-weight: 900; - letter-spacing: -0.025em; - word-wrap: break-word; - } - /* h2 { - font-size: clamp(1.25rem, 3.5vw, 1.5rem); */ /* Responsive 20px-24px */ - /* line-height: 1.33; - font-weight: 700; - letter-spacing: -0.025em; - word-wrap: break-word; - } */ - h2 { - font-size: clamp(1.25rem, 3vw, 1.375rem); /* Responsive 20px-22px */ - line-height: 1.33; - font-weight: 700; - letter-spacing: -0.025em; - word-wrap: break-word; - } - /* h3 { - font-size: clamp(1.125rem, 3vw, 1.25rem); */ /* Responsive 18px-20px */ - /* line-height: 1.4; - font-weight: 700; - letter-spacing: -0.015em; - word-wrap: break-word; - } */ - h3 { - font-size: clamp(1.0625rem, 2.5vw, 1.1875rem); /* Responsive 17px-19px */ - line-height: 1.4; - font-weight: 700; - letter-spacing: -0.015em; - word-wrap: break-word; - } - h4 { - @apply text-lg font-bold; - letter-spacing: -0.01em; - word-wrap: break-word; - } - h5 { - @apply text-base font-bold; - word-wrap: break-word; - } - h6 { - font-size: 1rem; /* Increased from 0.875rem for accessibility */ - line-height: 1.5; - font-weight: 700; - word-wrap: break-word; - } - - /* Global Font Family & Body Text - Uses brand font with fallbacks */ - main { - font-family: "NVIDIA", "Arial", "Helvetica", sans-serif; - } - - /* Improve font loading consistency between dev and production */ - html { - font-synthesis: none; /* Prevent synthetic font generation */ - } - - /* Ensure consistent font metrics during font loading */ - body, main { - font-optical-sizing: auto; - font-feature-settings: "kern" 1; - text-rendering: optimizeLegibility; - } - - /* Enhanced Body Text Typography */ - /* body { - font-size: clamp(1rem, 2.5vw, 1.125rem); */ /* Responsive 16px-18px */ - /* line-height: 1.6; - letter-spacing: 0.01em; - } */ - body { - font-size: clamp(1rem, 2vw, 1.0625rem); /* Responsive 16px-17px */ - line-height: 1.6; - letter-spacing: 0.01em; - } - - /* Article Content Styles */ - - /* Margins */ - .article-content > * { - @apply my-3; - } - - /* Font Color & Thickness */ - .article-content { - color: var(--color-text-primary); - font-size: 1rem; /* mobile-first */ - line-height: 1.65; /* mobile-first */ - letter-spacing: 0.01em; - } - - /* Bump article typography at md and up (replaces mobile max-width overrides) */ - /* @screen md { - .article-content { - font-size: 1.125rem; */ /* 18px for improved readability */ - /* line-height: 1.6; - } - } */ - @screen md { - .article-content { - font-size: 1.0625rem; /* 17px for improved readability */ - line-height: 1.6; - } - } - - .article-content p { - font-size: inherit; - line-height: inherit; - letter-spacing: inherit; - } - - .article-content strong { - font-family: "NVIDIA", "Arial", "Helvetica", sans-serif; - font-weight: 600; - } - - /* List Styles */ - .article-content li li { - @apply ml-12 py-1; - } -} - diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index 746a361..e0a8221 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -1122,184 +1122,184 @@ "classify-python-entity", "clearAll", "closed-question-pipeline", - "code-1758983751426468000", - "code-1758983751426691000", - "code-1758983751426964000", - "code-1758983751427221000", - "code-1758983751427406000", - "code-1758983751427588000", - "code-1758983751427752000", - "code-1758983751428245000", - "code-1758983751428382000", - "code-1758983751428787000", - "code-1758983751428914000", - "code-1758983751429020000", - "code-1758983751429110000", - "code-1758983751431055000", - "code-1758983751431577000", - "code-1758983751431690000", - "code-1758983751431791000", - "code-1758983751432355000", - "code-1758983751432859000", - "code-1758983751434063000", - "code-1758983751436635000", - "code-1758983751436790000", - "code-1758983751437033000", - "code-1758983751437216000", - "code-1758983751437395000", - "code-1758983751437540000", - "code-1758983751437673000", - "code-1758983751437814000", - "code-1758983751437968000", - "code-1758983751438227000", - "code-1758983751438630000", - "code-1758983751438813000", - "code-1758983751438978000", - "code-1758983751439106000", - "code-1758983751439232000", - "code-1758983751439752000", - "code-1758983751439918000", - "code-1758983751440027000", - "code-1758983751440123000", - "code-1758983751440263000", - "code-1758983751440466000", - "code-1758983751444414000", - "code-1758983751444717000", - "code-1758983751445425000", - "code-1758983751459266000", - "code-1758983751470008000", - "code-1758983751470174000", - "code-1758983751470373000", - "code-1758983751497143000", - "code-1758983751671610000", - "code-1758983751680361000", - "code-1758983751681686000", - "code-1758983751716077000", - "code-1758983751717272000", - "code-1758983751718873000", - "code-1758983751721757000", - "code-1758983751733402000", - "code-1758983751735821000", - "code-1758983751736621000", - "code-1758983751756474000", - "code-1758983751783059000", - "code-1758983751783388000", - "code-1758983751790034000", - "code-1758983751790407000", - "code-1758983751936671000", - "code-1758983751938358000", - "code-1758983751938582000", - "code-1758983751938710000", - "code-1758983751938838000", - "code-1758983751939309000", - "code-1758983751939327000", - "code-1758983751940135000", - "code-1758983751940495000", - "code-1758983751940768000", - "code-1758983751940906000", - "code-1758983751940965000", - "code-1758983751941040000", - "code-1758983751941163000", - "code-1758983751941356000", - "code-1758983751941467000", - "code-1758983751941632000", - "code-1758983751942006000", - "code-1758983751942664000", - "code-1758983751942850000", - "code-1758983751943076000", - "code-1758983751943391000", - "code-1758983751944256000", - "code-1758983751944928000", - "code-1758983751945207000", - "code-1758983751945719000", - "code-1758983751945917000", - "code-1758983751946186000", - "code-1758983751946698000", - "code-1758983751947582000", - "code-1758983751949477000", - "code-1758983751950221000", - "code-1758983751950888000", - "code-1758983751951035000", - "code-1758983751951253000", - "code-1758983751951586000", - "code-1758983751951728000", - "code-1758983751951963000", - "code-1758983751952152000", - "code-1758983751952491000", - "code-1758983751952528000", - "code-1758983751952729000", - "code-1758983751952740000", - "code-1758983751952917000", - "code-1758983751953163000", - "code-1758983751953386000", - "code-1758983751953685000", - "code-1758983751954033000", - "code-1758983751954229000", - "code-1758983751954424000", - "code-1758983751957292000", - "code-1758983751957531000", - "code-1758983751957804000", - "code-1758983751958107000", - "code-1758983751958381000", - "code-1758983751958689000", - "code-1758983751959063000", - "code-1758983751959272000", - "code-1758983751959468000", - "code-1758983751969684000", - "code-1758983751969920000", - "code-1758983751970111000", - "code-1758983751970381000", - "code-1758983751970525000", - "code-1758983751971101000", - "code-1758983751971380000", - "code-1758983751971510000", - "code-1758983751971767000", - "code-1758983751972384000", - "code-1758983751972499000", - "code-1758983751972603000", - "code-1758983751972721000", - "code-1758983751972852000", - "code-1758983751972977000", - "code-1758983751976341000", - "code-1758983751976463000", - "code-1758983751976659000", - "code-1758983751978034000", - "code-1758983751978142000", - "code-1758983751978231000", - "code-1758983751982828000", - "code-1758983751982945000", - "code-1758983751983055000", - "code-1758983751983158000", - "code-1758983751983348000", - "code-1758983752003207000", - "code-1758983752003355000", - "code-1758983752003470000", - "code-1758983752003723000", - "code-1758983752003845000", - "code-1758983752004110000", - "code-1758983752004363000", - "code-1758983752004914000", - "code-1758983752005079000", - "code-1758983752006065000", - "code-1758983752006202000", - "code-1758983752007254000", - "code-1758983752007520000", - "code-1758983752047686000", - "code-1758983752048255000", - "code-1758983752048455000", - "code-1758983752048707000", - "code-1758983752052806000", - "code-1758983752055273000", - "code-1758983752055377000", - "code-1758983752058453000", - "code-1758983752061143000", - "code-1758983752061172000", - "collapse-0d0cece9160ef824a01d2821d406048f-1758983752057826000", - "collapse-0d0cece9160ef824a01d2821d406048f-1758983752057826000-body", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758983751459363000", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758983751459363000-body", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758983751459431000", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758983751459431000-body", + "code-1758984056047387000", + "code-1758984056047983000", + "code-1758984056049020000", + "code-1758984056049664000", + "code-1758984056050012000", + "code-1758984056050478000", + "code-1758984056050811000", + "code-1758984056051632000", + "code-1758984056051938000", + "code-1758984056056613000", + "code-1758984056056790000", + "code-1758984056056916000", + "code-1758984056057046000", + "code-1758984056057242000", + "code-1758984056057495000", + "code-1758984056057628000", + "code-1758984056057754000", + "code-1758984056057926000", + "code-1758984056058166000", + "code-1758984056059254000", + "code-1758984056062553000", + "code-1758984056062769000", + "code-1758984056063000000", + "code-1758984056063166000", + "code-1758984056063341000", + "code-1758984056063838000", + "code-1758984056063959000", + "code-1758984056064110000", + "code-1758984056064385000", + "code-1758984056064507000", + "code-1758984056064739000", + "code-1758984056065077000", + "code-1758984056066298000", + "code-1758984056068624000", + "code-1758984056069124000", + "code-1758984056069343000", + "code-1758984056069477000", + "code-1758984056069694000", + "code-1758984056069800000", + "code-1758984056069911000", + "code-1758984056070004000", + "code-1758984056070155000", + "code-1758984056070403000", + "code-1758984056071405000", + "code-1758984056071510000", + "code-1758984056071945000", + "code-1758984056072526000", + "code-1758984056072822000", + "code-1758984056074204000", + "code-1758984056076347000", + "code-1758984056078232000", + "code-1758984056081988000", + "code-1758984056085752000", + "code-1758984056086143000", + "code-1758984056090598000", + "code-1758984056090813000", + "code-1758984056091006000", + "code-1758984056093009000", + "code-1758984056093805000", + "code-1758984056101265000", + "code-1758984056101452000", + "code-1758984056101595000", + "code-1758984056112084000", + "code-1758984056112670000", + "code-1758984056206460000", + "code-1758984056206972000", + "code-1758984056207175000", + "code-1758984056207447000", + "code-1758984056207591000", + "code-1758984056207863000", + "code-1758984056214457000", + "code-1758984056214674000", + "code-1758984056215149000", + "code-1758984056215369000", + "code-1758984056215640000", + "code-1758984056215968000", + "code-1758984056216146000", + "code-1758984056216358000", + "code-1758984056229565000", + "code-1758984056229925000", + "code-1758984056230651000", + "code-1758984056233200000", + "code-1758984056249651000", + "code-1758984056251020000", + "code-1758984056251246000", + "code-1758984056251450000", + "code-1758984056251662000", + "code-1758984056251910000", + "code-1758984056252067000", + "code-1758984056254797000", + "code-1758984056254982000", + "code-1758984056255698000", + "code-1758984056260149000", + "code-1758984056260179000", + "code-1758984056260325000", + "code-1758984056260357000", + "code-1758984056260521000", + "code-1758984056260670000", + "code-1758984056260712000", + "code-1758984056264476000", + "code-1758984056266178000", + "code-1758984056269275000", + "code-1758984056271157000", + "code-1758984056271595000", + "code-1758984056271990000", + "code-1758984056273558000", + "code-1758984056273863000", + "code-1758984056275075000", + "code-1758984056275707000", + "code-1758984056275748000", + "code-1758984056275864000", + "code-1758984056275947000", + "code-1758984056275983000", + "code-1758984056276039000", + "code-1758984056276205000", + "code-1758984056276611000", + "code-1758984056276797000", + "code-1758984056276883000", + "code-1758984056276957000", + "code-1758984056277868000", + "code-1758984056278091000", + "code-1758984056278343000", + "code-1758984056278614000", + "code-1758984056278862000", + "code-1758984056279328000", + "code-1758984056286140000", + "code-1758984056286372000", + "code-1758984056286582000", + "code-1758984056287100000", + "code-1758984056287237000", + "code-1758984056288130000", + "code-1758984056288267000", + "code-1758984056289182000", + "code-1758984056289418000", + "code-1758984056290275000", + "code-1758984056290615000", + "code-1758984056291094000", + "code-1758984056291809000", + "code-1758984056292169000", + "code-1758984056292701000", + "code-1758984056293118000", + "code-1758984056293792000", + "code-1758984056294300000", + "code-1758984056294626000", + "code-1758984056296148000", + "code-1758984056296549000", + "code-1758984056297080000", + "code-1758984056297141000", + "code-1758984056297205000", + "code-1758984056297555000", + "code-1758984056304325000", + "code-1758984056304543000", + "code-1758984056304768000", + "code-1758984056304879000", + "code-1758984056305389000", + "code-1758984056305406000", + "code-1758984056305692000", + "code-1758984056306080000", + "code-1758984056306228000", + "code-1758984056306235000", + "code-1758984056306407000", + "code-1758984056306683000", + "code-1758984056306837000", + "code-1758984056307141000", + "code-1758984056307756000", + "code-1758984056308354000", + "code-1758984056308756000", + "code-1758984056308980000", + "code-1758984056309178000", + "code-1758984056348979000", + "code-1758984056350346000", + "code-1758984056350392000", + "collapse-0d0cece9160ef824a01d2821d406048f-1758984056306807000", + "collapse-0d0cece9160ef824a01d2821d406048f-1758984056306807000-body", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758984056080492000", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758984056080492000-body", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758984056080601000", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758984056080601000-body", "collapsehtml-examples", "collapsehtml-how-it-works", "collapsehtml-source-code", diff --git a/layouts/partials/head/css.html b/layouts/partials/head/css.html index da30aa1..bfd62ce 100644 --- a/layouts/partials/head/css.html +++ b/layouts/partials/head/css.html @@ -2,7 +2,7 @@ {{/* Build CSS resources array */}} {{- $cssResources := slice -}} -{{/* Add main CSS - Use Hugo's native TailwindCSS processing */}} +{{/* Add main CSS - Use Hugo's native TailwindCSS v4 processing */}} {{- $mainCSS := resources.Get "css/main.css" -}} {{- if $mainCSS -}} {{/* Use Hugo's native TailwindCSS v4 processing */}} @@ -10,14 +10,7 @@ {{- $processedCSS := $mainCSS | css.TailwindCSS $opts -}} {{- $cssResources = $cssResources | append $processedCSS -}} {{- else -}} - {{/* Fallback to legacy CSS processing if TailwindCSS source not available */}} - {{- $fallbackCSS := resources.Get "css/src/input.css" -}} - {{- if $fallbackCSS -}} - {{- $processedCSS := $fallbackCSS | css.PostCSS -}} - {{- $cssResources = $cssResources | append $processedCSS -}} - {{- else -}} - {{- warnf "CSS: Neither main.css nor src/input.css found" -}} - {{- end -}} + {{- warnf "CSS: main.css not found - TailwindCSS v4 processing disabled" -}} {{- end -}} {{/* Environment-specific resource loading with advanced optimization */}} From 376d1a483681aed387ef906610483600bcf93c9b Mon Sep 17 00:00:00 2001 From: "L.B." Date: Sat, 27 Sep 2025 12:35:38 -0400 Subject: [PATCH 7/7] updates --- assets/css/architecture/animation-system.css | 370 - assets/css/architecture/component-states.css | 304 - assets/css/architecture/elevation-system.css | 347 - assets/css/architecture/index.css | 162 - .../css/architecture/interaction-patterns.css | 314 - .../css/architecture/layout-foundations.css | 601 - assets/css/architecture/loading-states.css | 570 - assets/css/architecture/typography-system.css | 54 - assets/css/colors-enterprise.css | 128 - assets/css/colors-nvidia.css | 132 - assets/css/colors-opensource.css | 128 - assets/css/colors.css | 129 - assets/css/components/README.md | 76 - assets/css/components/article-header.css | 600 - .../css/components/article/page-resources.css | 8 - .../components/article/related-content.css | 332 - assets/css/components/breadcrumbs.css | 308 - assets/css/components/buttons.css | 328 - assets/css/components/cards.css | 429 - assets/css/components/chat.css | 534 - assets/css/components/child-links.css | 131 - assets/css/components/code.css | 96 - assets/css/components/collapse.css | 461 - assets/css/components/glossary.css | 278 - assets/css/components/navigation-api.css | 174 - assets/css/components/navigation.css | 4 - assets/css/components/navigation/README.md | 104 - assets/css/components/navigation/base.css | 120 - .../components/navigation/chat-toc-toggle.css | 129 - assets/css/components/navigation/dropdown.css | 82 - assets/css/components/navigation/index.css | 10 - .../navigation/language-switcher.css | 18 - assets/css/components/navigation/sidebar.css | 343 - assets/css/components/navigation/toc.css | 229 - assets/css/components/navigation/topbar.css | 140 - assets/css/components/next-prev.css | 313 - assets/css/components/notebook.css | 1241 -- assets/css/components/notice.css | 257 - assets/css/components/object-model.css | 156 - assets/css/components/openapi/base.css | 47 - .../css/components/openapi/code-examples.css | 115 - assets/css/components/openapi/components.css | 316 - assets/css/components/openapi/endpoints.css | 425 - assets/css/components/openapi/header.css | 307 - assets/css/components/openapi/index.css | 18 - assets/css/components/openapi/navigation.css | 124 - assets/css/components/openapi/overview.css | 439 - assets/css/components/openapi/pages.css | 313 - assets/css/components/openapi/parameters.css | 200 - assets/css/components/openapi/responses.css | 213 - assets/css/components/openapi/responsive.css | 151 - assets/css/components/openapi/schemas.css | 552 - assets/css/components/openapi/security.css | 132 - assets/css/components/openapi/servers.css | 103 - assets/css/components/openapi/sidebar.css | 336 - assets/css/components/openapi/single.css | 288 - assets/css/components/quicklinks.css | 472 - assets/css/components/search.css | 941 - assets/css/components/tables.css | 105 - assets/css/components/tabs.css | 261 - assets/css/components/tiles.css | 197 - assets/css/components/toast.css | 216 - assets/css/components/tutorial.css | 1290 -- assets/css/fonts-nvidia.css | 131 - assets/css/fonts-offline.css | 15 - assets/css/fonts.css | 16 - assets/css/main.css | 123 +- assets/js/components/article/Asciinema.js | 2 +- assets/js/components/chat/ChatBubbles.js | 2 +- assets/js/utils/CopyManager.js | 8 +- enterprise_html_architecture.md | 431 + exampleSite/assets/css/components/buttons.css | 328 - exampleSite/config/_default/hugo.yaml | 16 - exampleSite/content/_index.md | 2 +- exampleSite/hugo_stats.json | 1674 +- exampleSite/package.json | 4 +- exampleSite/postcss.config.js | 5 +- ..._77ecfdd452157f5ec51441f5c20cb322.content} | 16492 ++++++++++------ ....css_77ecfdd452157f5ec51441f5c20cb322.json | 1 + ....css_e03652540c5bbc68d359e86d9fc1015a.json | 1 - exampleSite/tailwind.config.js | 65 - html_master_plan.md | 186 + html_quality_analysis.md | 158 + layouts/404.html | 73 +- layouts/_default/api.html | 172 +- layouts/_default/baseof.html | 172 +- layouts/_default/glossary.html | 173 +- layouts/_default/home.html | 200 +- layouts/_default/list.html | 223 +- layouts/_default/single.html | 182 +- layouts/notebook/single.html | 263 +- layouts/object-model/single.html | 473 +- layouts/openapi/single.html | 219 +- layouts/partials/article/header.html | 92 +- layouts/partials/article/metadata.html | 214 +- layouts/partials/article/next-prev.html | 202 +- layouts/partials/article/page-resources.html | 321 +- layouts/partials/article/related-content.html | 245 +- layouts/partials/article/status-warnings.html | 123 +- layouts/partials/article/toc.html | 119 +- layouts/partials/css/purge-analyzer.html | 43 + layouts/partials/css/stats-analyzer.html | 54 + layouts/partials/footer.html | 154 +- layouts/partials/head/css.html | 336 +- layouts/partials/header.html | 95 +- layouts/partials/navigation/breadcrumbs.html | 92 +- layouts/partials/navigation/directory.html | 65 +- layouts/partials/navigation/sidebar-left.html | 113 +- .../partials/navigation/sidebar-right.html | 150 +- layouts/shortcodes/collapse.html | 103 +- layouts/shortcodes/csv.html | 260 +- layouts/shortcodes/include.html | 131 +- layouts/shortcodes/mermaid.html | 85 +- layouts/shortcodes/notice.html | 67 +- layouts/shortcodes/orgName.html | 14 +- layouts/shortcodes/productName.html | 50 +- layouts/shortcodes/quicklinks.html | 192 +- layouts/shortcodes/readfile.html | 89 +- layouts/shortcodes/tab.html | 50 +- layouts/shortcodes/version.html | 58 +- layouts/shortcodes/video.html | 113 +- package-lock.json | 71 + package.json | 29 +- tailwind.config.js | 28 + template_audit.md | 93 + template_mental_model.md | 237 + 126 files changed, 15763 insertions(+), 27836 deletions(-) delete mode 100644 assets/css/architecture/animation-system.css delete mode 100644 assets/css/architecture/component-states.css delete mode 100644 assets/css/architecture/elevation-system.css delete mode 100644 assets/css/architecture/index.css delete mode 100644 assets/css/architecture/interaction-patterns.css delete mode 100644 assets/css/architecture/layout-foundations.css delete mode 100644 assets/css/architecture/loading-states.css delete mode 100644 assets/css/architecture/typography-system.css delete mode 100644 assets/css/colors-enterprise.css delete mode 100644 assets/css/colors-nvidia.css delete mode 100644 assets/css/colors-opensource.css delete mode 100644 assets/css/colors.css delete mode 100644 assets/css/components/README.md delete mode 100644 assets/css/components/article-header.css delete mode 100644 assets/css/components/article/page-resources.css delete mode 100644 assets/css/components/article/related-content.css delete mode 100644 assets/css/components/breadcrumbs.css delete mode 100644 assets/css/components/buttons.css delete mode 100644 assets/css/components/cards.css delete mode 100644 assets/css/components/chat.css delete mode 100644 assets/css/components/child-links.css delete mode 100644 assets/css/components/code.css delete mode 100644 assets/css/components/collapse.css delete mode 100644 assets/css/components/glossary.css delete mode 100644 assets/css/components/navigation-api.css delete mode 100644 assets/css/components/navigation.css delete mode 100644 assets/css/components/navigation/README.md delete mode 100644 assets/css/components/navigation/base.css delete mode 100644 assets/css/components/navigation/chat-toc-toggle.css delete mode 100644 assets/css/components/navigation/dropdown.css delete mode 100644 assets/css/components/navigation/index.css delete mode 100644 assets/css/components/navigation/language-switcher.css delete mode 100644 assets/css/components/navigation/sidebar.css delete mode 100644 assets/css/components/navigation/toc.css delete mode 100644 assets/css/components/navigation/topbar.css delete mode 100644 assets/css/components/next-prev.css delete mode 100644 assets/css/components/notebook.css delete mode 100644 assets/css/components/notice.css delete mode 100644 assets/css/components/object-model.css delete mode 100644 assets/css/components/openapi/base.css delete mode 100644 assets/css/components/openapi/code-examples.css delete mode 100644 assets/css/components/openapi/components.css delete mode 100644 assets/css/components/openapi/endpoints.css delete mode 100644 assets/css/components/openapi/header.css delete mode 100644 assets/css/components/openapi/index.css delete mode 100644 assets/css/components/openapi/navigation.css delete mode 100644 assets/css/components/openapi/overview.css delete mode 100644 assets/css/components/openapi/pages.css delete mode 100644 assets/css/components/openapi/parameters.css delete mode 100644 assets/css/components/openapi/responses.css delete mode 100644 assets/css/components/openapi/responsive.css delete mode 100644 assets/css/components/openapi/schemas.css delete mode 100644 assets/css/components/openapi/security.css delete mode 100644 assets/css/components/openapi/servers.css delete mode 100644 assets/css/components/openapi/sidebar.css delete mode 100644 assets/css/components/openapi/single.css delete mode 100644 assets/css/components/quicklinks.css delete mode 100644 assets/css/components/search.css delete mode 100644 assets/css/components/tables.css delete mode 100644 assets/css/components/tabs.css delete mode 100644 assets/css/components/tiles.css delete mode 100644 assets/css/components/toast.css delete mode 100644 assets/css/components/tutorial.css delete mode 100644 assets/css/fonts-nvidia.css delete mode 100644 assets/css/fonts-offline.css delete mode 100644 assets/css/fonts.css create mode 100644 enterprise_html_architecture.md delete mode 100644 exampleSite/assets/css/components/buttons.css rename exampleSite/resources/_gen/assets/css/{src/input.css_e03652540c5bbc68d359e86d9fc1015a.content => main.css_77ecfdd452157f5ec51441f5c20cb322.content} (64%) create mode 100644 exampleSite/resources/_gen/assets/css/main.css_77ecfdd452157f5ec51441f5c20cb322.json delete mode 100644 exampleSite/resources/_gen/assets/css/src/input.css_e03652540c5bbc68d359e86d9fc1015a.json delete mode 100644 exampleSite/tailwind.config.js create mode 100644 html_master_plan.md create mode 100644 html_quality_analysis.md create mode 100644 layouts/partials/css/purge-analyzer.html create mode 100644 layouts/partials/css/stats-analyzer.html create mode 100644 package-lock.json create mode 100644 tailwind.config.js create mode 100644 template_audit.md create mode 100644 template_mental_model.md diff --git a/assets/css/architecture/animation-system.css b/assets/css/architecture/animation-system.css deleted file mode 100644 index 90ea00a..0000000 --- a/assets/css/architecture/animation-system.css +++ /dev/null @@ -1,370 +0,0 @@ -/* đŸŽ¯ Universal Animation System - Single Source of Truth - * ===================================================== - * - * This file establishes consistent timing, easing, and animation patterns - * across the entire theme to eliminate timing chaos and performance issues. - */ - -:root { - /* ✨ TIMING TOKENS - Only these 4 speeds allowed site-wide */ - --timing-instant: 0.1s; /* Micro-interactions (hover, focus) */ - --timing-fast: 0.2s; /* Standard interactions (buttons, links) */ - --timing-medium: 0.3s; /* Complex interactions (collapse, expand) */ - --timing-slow: 0.5s; /* Dramatic reveals (page transitions) */ - - /* ✨ EASING TOKENS - Only these 3 curves allowed site-wide */ - --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Default - smooth start/end */ - --easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); /* Dramatic - bouncy feel */ - --easing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Gentle - soft motion */ - - /* đŸŽ¯ COLLAPSE TOKENS - Universal collapse/expand behavior */ - --collapse-timing: var(--timing-medium); - --collapse-easing: var(--easing-standard); - --collapse-height-collapsed: 0; - --collapse-height-expanded: 2000px; /* Never use 'none' or 'auto' - breaks animation */ - --collapse-opacity-collapsed: 0; - --collapse-opacity-expanded: 1; - - /* 🎨 TRANSFORM TOKENS - 3D acceleration friendly */ - --transform-scale-down: scale(0.95); - --transform-scale-up: scale(1.05); - --transform-scale-normal: scale(1); - --transform-translate-up: translateY(-4px); - --transform-translate-down: translateY(4px); - --transform-translate-none: translateY(0); - - /* 🌟 OPACITY TOKENS - Visibility states */ - --opacity-hidden: 0; - --opacity-faded: 0.6; - --opacity-visible: 1; - - /* 🎨 COMPONENT-SPECIFIC TOKENS - From design-tokens.css merge */ - - /* Card & Tile Tokens */ - --card-shadow-rest: 0 1px 3px rgba(0,0,0,0.1); - --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.15); - --card-shadow-active: 0 8px 25px rgba(0,0,0,0.15); - --card-transform-hover: translateY(-2px); - --card-transform-active: translateY(-1px) scale(0.98); - --card-border-radius: 0.5rem; - - /* ✨ ADDITIONAL TRANSFORM PATTERNS - From component analysis */ - --transform-lift-subtle: translateY(-1px); /* Buttons, small elements */ - --transform-lift-medium: translateY(-2px); /* Cards, medium elements */ - --transform-lift-dramatic: translateY(-4px); /* Hero elements */ - --transform-slide-in-up: translateY(20px); /* Entry animations */ - --transform-slide-in-down: translateY(-20px); /* Dropdown animations */ - --transform-scale-hover: scale(1.02); /* Hover scale up */ - --transform-scale-active: scale(0.98); /* Active scale down */ - --transform-scale-entrance: scale(0.95); /* Entry scale */ - - /* ✨ COMBINED TRANSFORMS - Common combinations */ - --transform-lift-and-scale: translateY(-2px) scale(1.02); - --transform-press-down: translateY(1px) scale(0.98); - --transform-bounce-in: translateY(10px) scale(0.95); - --transform-slide-up-fade: translateY(15px); - - /* Interaction Tokens */ - --hover-scale: 1.02; - --active-scale: 0.98; - --focus-ring-width: 2px; - --focus-ring-offset: 2px; - --focus-ring-color: rgba(var(--color-brand-rgb), 0.2); - - /* Loading State Tokens */ - --loading-opacity: 0.6; - --loading-blur: blur(1px); - --loading-skeleton-bg: linear-gradient(90deg, - rgba(var(--color-brand-rgb), 0.1) 25%, - rgba(var(--color-brand-rgb), 0.2) 50%, - rgba(var(--color-brand-rgb), 0.1) 75%); - --loading-skeleton-size: 200% 100%; - - /* Feedback Tokens */ - --feedback-success: #10b981; - --feedback-warning: #f59e0b; - --feedback-error: #ef4444; - --feedback-info: #3b82f6; - --feedback-slide-in: translateY(-10px); - --feedback-slide-out: translateY(-20px); - - /* Progressive Reveal Tokens */ - --reveal-stagger-delay: 0.05s; - --reveal-batch-delay: 0.15s; - --reveal-slide-distance: 20px; -} - -/* 🌙 DARK MODE ENHANCEMENTS */ -.dark { - --focus-ring-color: rgba(var(--color-brand-rgb), 0.3); - - /* Enhanced loading states for dark mode */ - --loading-skeleton-bg: linear-gradient(90deg, - rgba(255, 255, 255, 0.05) 25%, - rgba(255, 255, 255, 0.1) 50%, - rgba(255, 255, 255, 0.05) 75%); - - /* Enhanced shadows for dark mode */ - --card-shadow-rest: 0 1px 3px rgba(0,0,0,0.3); - --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.4); - --card-shadow-active: 0 8px 25px rgba(0,0,0,0.5); -} - -/* 🚨 ACCESSIBILITY - Respect user preferences */ -@media (prefers-reduced-motion: reduce) { - :root { - --timing-instant: 0.01s; - --timing-fast: 0.01s; - --timing-medium: 0.01s; - --timing-slow: 0.01s; - } - - * { - animation-duration: 0.01s !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01s !important; - } -} - -/* ✅ UNIVERSAL COLLAPSE COMPONENT - * ================================ - * Use these classes on any collapsible content for consistent behavior - */ - -/* Base collapsible container */ -.collapse-container { - position: relative; - overflow: hidden; -} - -/* Collapsible content body */ -.collapse-body { - max-height: var(--collapse-height-collapsed); - opacity: var(--collapse-opacity-collapsed); - overflow: hidden; - transition: - max-height var(--collapse-timing) var(--collapse-easing), - opacity var(--collapse-timing) var(--collapse-easing); -} - -/* Expanded state */ -.collapse-body.expanded { - max-height: var(--collapse-height-expanded); - opacity: var(--collapse-opacity-expanded); -} - -/* Duplicated component/data state rules moved to architecture/component-states.css */ -/* Keeping this section intentionally empty to avoid divergence. */ - -/* ✅ PERFORMANCE-OPTIMIZED HOVER STATES - * ====================================== - * Use specific property transitions instead of "transition: all" - */ - -.interactive-element { - transition: - transform var(--timing-fast) var(--easing-standard), - opacity var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard); -} - -.interactive-element:hover { - transform: var(--transform-translate-up); - opacity: var(--opacity-visible); -} - -.interactive-element:active { - transform: var(--transform-scale-down); - transition-duration: var(--timing-instant); /* Instant feedback */ -} - -/* ✅ COMPONENT-SPECIFIC CUSTOMIZATION - * ==================================== - * Override tokens for specific component needs - */ - -/* OpenAPI components need larger heights for complex content */ -.openapi-response { - --collapse-height-expanded: 3000px; - --collapse-timing: var(--timing-medium); -} - -/* Notebook cells should be snappier */ -.notebook-cell { - --collapse-height-expanded: 2000px; - --collapse-timing: var(--timing-fast); -} - -/* Tutorial sections can be more dramatic */ -.tutorial-section { - --collapse-height-expanded: 2500px; - --collapse-timing: var(--timing-slow); - --collapse-easing: var(--easing-emphasized); -} - -/* Tabs need instant switching for good UX */ -.tab-content { - --collapse-height-expanded: 1500px; - --collapse-timing: var(--timing-fast); -} - -/* ✅ SIDEBAR NAVIGATION TREE - Optimized for hierarchical content */ -.nested-content { - --collapse-height-expanded: 2000px; - --collapse-timing: var(--timing-medium); - --collapse-easing: var(--easing-standard); - - /* Performance optimization for tree navigation */ - will-change: max-height, opacity; - transform: translateZ(0); /* Force hardware acceleration */ -} - -/* ✅ UTILITY CLASSES - * =================== - * Common animation patterns as reusable classes - */ - -.fade-in { - opacity: var(--opacity-hidden); - animation: fadeIn var(--timing-medium) var(--easing-standard) forwards; -} - -.fade-out { - opacity: var(--opacity-visible); - animation: fadeOut var(--timing-medium) var(--easing-standard) forwards; -} - -.slide-up { - transform: var(--transform-translate-down); - animation: slideUp var(--timing-medium) var(--easing-standard) forwards; -} - -.slide-in-up { - transform: var(--transform-slide-in-up); - opacity: var(--opacity-hidden); - animation: slideInUp var(--timing-medium) var(--easing-standard) forwards; -} - -.slide-in-down { - transform: var(--transform-slide-in-down); - opacity: var(--opacity-hidden); - animation: slideInDown var(--timing-medium) var(--easing-standard) forwards; -} - -.scale-in { - transform: var(--transform-scale-down); - opacity: var(--opacity-hidden); - animation: scaleIn var(--timing-medium) var(--easing-emphasized) forwards; -} - -.bounce-in { - transform: var(--transform-bounce-in); - opacity: var(--opacity-hidden); - animation: bounceIn var(--timing-slow) var(--easing-emphasized) forwards; -} - -.lift-on-hover { - transition: transform var(--timing-fast) var(--easing-standard); -} - -.lift-on-hover:hover { - transform: var(--transform-lift-medium); -} - -/* ✅ KEYFRAME ANIMATIONS - * ======================= - * Standard animations used across components - */ - -@keyframes fadeIn { - to { - opacity: var(--opacity-visible); - } -} - -@keyframes fadeOut { - to { - opacity: var(--opacity-hidden); - } -} - -@keyframes slideUp { - to { - transform: var(--transform-translate-none); - } -} - -@keyframes slideInUp { - to { - transform: var(--transform-translate-none); - opacity: var(--opacity-visible); - } -} - -@keyframes slideInDown { - to { - transform: var(--transform-translate-none); - opacity: var(--opacity-visible); - } -} - -@keyframes scaleIn { - to { - transform: var(--transform-scale-normal); - opacity: var(--opacity-visible); - } -} - -@keyframes bounceIn { - 0% { - transform: var(--transform-bounce-in); - opacity: var(--opacity-hidden); - } - 50% { - transform: translateY(-5px) scale(1.02); - opacity: var(--opacity-faded); - } - 100% { - transform: var(--transform-translate-none); - opacity: var(--opacity-visible); - } -} - -/* ✅ STAGGER ANIMATIONS - * ====================== - * For animating groups of elements with delays - */ - -.stagger-children > * { - animation-delay: calc(var(--reveal-stagger-delay) * var(--stagger-index, 0)); -} - -.stagger-fade-in > * { - opacity: var(--opacity-hidden); - animation: fadeIn var(--timing-medium) var(--easing-standard) forwards; -} - -.stagger-slide-up > * { - transform: var(--transform-slide-in-up); - opacity: var(--opacity-hidden); - animation: slideInUp var(--timing-medium) var(--easing-standard) forwards; -} - -/* ✅ DEBUG MODE - * ============== - * Uncomment to visualize animation timing (development only) - */ - -/* -.collapse-body { - border: 2px dashed red !important; -} - -.collapse-body.expanded { - border-color: green !important; -} - -[data-collapse-state] { - outline: 2px solid blue !important; -} -*/ \ No newline at end of file diff --git a/assets/css/architecture/component-states.css b/assets/css/architecture/component-states.css deleted file mode 100644 index 8e5a644..0000000 --- a/assets/css/architecture/component-states.css +++ /dev/null @@ -1,304 +0,0 @@ -/* đŸŽ¯ Universal Component State Management System - * ============================================== - * - * This file establishes consistent state management patterns across all - * interactive components, replacing inconsistent class-based approaches - * with data-attribute driven state management. - */ - -/* ✅ COLLAPSE STATE MANAGEMENT - * ============================= - * Universal collapse/expand states using data attributes - */ - -/* Base collapsed state - applies to any element with data-collapse-state */ -[data-collapse-state="collapsed"] { - max-height: var(--collapse-height-collapsed, 0); - opacity: var(--collapse-opacity-collapsed, 0); - overflow: hidden; - transition: - max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), - opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); -} - -/* Transitioning state - shows element is mid-animation */ -[data-collapse-state="transitioning"] { - overflow: hidden; /* Ensure no content spillage during animation */ - pointer-events: none; /* Prevent interaction during transition */ -} - -/* Expanded state - fully visible and interactive */ -[data-collapse-state="expanded"] { - max-height: var(--collapse-height-expanded, 2000px); - opacity: var(--collapse-opacity-expanded, 1); - overflow: visible; /* Allow content to be fully visible when expanded */ - transition: - max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), - opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); -} - -/* ✅ COMPONENT LIFECYCLE STATES - * ============================== - * Standard states for component initialization and interaction - */ - -/* Loading state - component is being initialized */ -[data-component-state="loading"] { - opacity: var(--opacity-faded, 0.6); - pointer-events: none; - cursor: wait; - transition: opacity var(--timing-fast) var(--easing-standard); -} - -/* Ready state - component is initialized and interactive */ -[data-component-state="ready"] { - opacity: var(--opacity-visible, 1); - pointer-events: auto; - transition: opacity var(--timing-fast) var(--easing-standard); -} - -/* Disabled state - component is non-interactive */ -[data-component-state="disabled"] { - opacity: var(--opacity-faded, 0.6); - pointer-events: none; - cursor: not-allowed; - filter: grayscale(50%); - transition: - opacity var(--timing-fast) var(--easing-standard), - filter var(--timing-fast) var(--easing-standard); -} - -/* Error state - component has encountered an error */ -[data-component-state="error"] { - opacity: var(--opacity-visible, 1); - border-color: var(--color-danger, #ef4444); - background-color: rgba(239, 68, 68, 0.05); - transition: - border-color var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard); -} - -/* ✅ LEGACY CLASS SUPPORT (Backward Compatibility) - * ================================================= - * Bridge classes for existing components that use class-based states - */ - -/* Support for existing .expanded classes */ -.expanded { - max-height: var(--collapse-height-expanded, 2000px) !important; - opacity: var(--collapse-opacity-expanded, 1) !important; - overflow: visible !important; - transition: - max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), - opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); -} - -/* Support for existing .collapsed classes */ -.collapsed { - max-height: var(--collapse-height-collapsed, 0) !important; - opacity: var(--collapse-opacity-collapsed, 0) !important; - overflow: hidden !important; - transition: - max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), - opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); -} - -/* ✅ INTERACTIVE STATES - * ===================== - * Consistent hover, focus, and active states - */ - -/* Interactive elements with hover states */ -[data-interactive="true"]:hover, -.interactive:hover { - transform: var(--transform-translate-up, translateY(-2px)); - transition: transform var(--timing-fast) var(--easing-standard); -} - -/* Interactive elements with focus states */ -[data-interactive="true"]:focus-visible, -.interactive:focus-visible { - outline: 2px solid var(--color-brand, #3b82f6); - outline-offset: 2px; - border-radius: 0.25rem; -} - -/* Interactive elements with active states */ -[data-interactive="true"]:active, -.interactive:active { - transform: var(--transform-scale-down, scale(0.98)); - transition: transform var(--timing-instant) var(--easing-standard); -} - -/* ✅ COMPONENT-SPECIFIC STATE OVERRIDES - * ====================================== - * Customization for specific component types - */ - -/* OpenAPI Components */ -.openapi-response[data-collapse-state], -.openapi-endpoint[data-collapse-state], -.openapi-parameter[data-collapse-state] { - --collapse-height-expanded: 3000px; /* Complex API content needs more space */ - --collapse-timing: var(--timing-medium); - --collapse-easing: var(--easing-standard); -} - -/* Notebook Components */ -.notebook-cell[data-collapse-state], -.notebook-output[data-collapse-state] { - --collapse-height-expanded: 2000px; /* Code and output content */ - --collapse-timing: var(--timing-fast); /* Snappier interaction */ - --collapse-easing: var(--easing-standard); -} - -/* Tutorial Components */ -.tutorial-section[data-collapse-state], -.section-content[data-collapse-state] { - --collapse-height-expanded: 2500px; /* Text-heavy content */ - --collapse-timing: var(--timing-slow); /* More dramatic for educational content */ - --collapse-easing: var(--easing-emphasized); -} - -/* Tab Components */ -.tab-content[data-collapse-state], -[data-tabcontent][data-collapse-state] { - --collapse-height-expanded: 1500px; /* Tab content usually more compact */ - --collapse-timing: var(--timing-fast); /* Quick switching expected */ - --collapse-easing: var(--easing-standard); -} - -/* ✅ UTILITY CLASSES - * =================== - * Quick state application classes - */ - -/* Force immediate state without animation */ -.state-immediate { - transition: none !important; -} - -/* Force slow animation timing */ -.state-slow { - --collapse-timing: var(--timing-slow); - --collapse-easing: var(--easing-smooth); -} - -/* Force fast animation timing */ -.state-fast { - --collapse-timing: var(--timing-fast); - --collapse-easing: var(--easing-standard); -} - -/* Emphasized dramatic animation */ -.state-dramatic { - --collapse-timing: var(--timing-slow); - --collapse-easing: var(--easing-emphasized); -} - -/* ✅ ACCESSIBILITY ENHANCEMENTS - * ============================== - * Enhanced states for screen readers and assistive technology - */ - -/* ✅ REMOVED: Enhanced focus indicators causing ancestry tree echoing - * The :focus-within pseudo-class was applying styling to ALL ancestor elements - * with data-collapse-state attributes, creating the visual "echo" effect. - * Focus should be handled by individual interactive elements instead. - */ - -/* Screen reader friendly state announcements */ -[data-collapse-state="collapsed"][aria-label]::before { - content: "Collapsed: "; - position: absolute; - left: -10000px; - width: 1px; - height: 1px; - overflow: hidden; -} - -[data-collapse-state="expanded"][aria-label]::before { - content: "Expanded: "; - position: absolute; - left: -10000px; - width: 1px; - height: 1px; - overflow: hidden; -} - -/* ✅ MOTION REDUCTION SUPPORT - * ============================ - * Respect user motion preferences - */ - -@media (prefers-reduced-motion: reduce) { - [data-collapse-state], - [data-component-state], - .expanded, - .collapsed, - [data-interactive] { - transition: none !important; - animation: none !important; - transform: none !important; - } -} - -/* ✅ HIGH CONTRAST MODE SUPPORT - * ============================== - * Enhanced visibility for high contrast users - */ - -@media (prefers-contrast: high) { - [data-component-state="error"] { - border-width: 2px; - border-style: solid; - } - - /* ✅ REMOVED: focus-within outline for high contrast mode - * This was also contributing to the ancestry tree echo effect - */ -} - -[data-interactive="true"]:focus-visible { - outline-width: 3px; - outline-style: solid; -} - -/* ✅ DEBUG MODE (Development Only) - * ================================= - * Uncomment to visualize state management in development - */ - -/* -[data-collapse-state] { - position: relative; -} - -[data-collapse-state]::before { - content: "State: " attr(data-collapse-state); - position: absolute; - top: -1.5rem; - left: 0; - background: #000; - color: #fff; - padding: 0.25rem 0.5rem; - font-size: 0.75rem; - border-radius: 0.25rem; - z-index: 1000; - pointer-events: none; -} - -[data-component-state]::after { - content: "Component: " attr(data-component-state); - position: absolute; - top: -3rem; - left: 0; - background: #3b82f6; - color: #fff; - padding: 0.25rem 0.5rem; - font-size: 0.75rem; - border-radius: 0.25rem; - z-index: 1000; - pointer-events: none; -} -*/ \ No newline at end of file diff --git a/assets/css/architecture/elevation-system.css b/assets/css/architecture/elevation-system.css deleted file mode 100644 index 3e3a1cc..0000000 --- a/assets/css/architecture/elevation-system.css +++ /dev/null @@ -1,347 +0,0 @@ -/* đŸŽ¯ Universal Elevation System - * ============================== - * - * This file centralizes all box-shadow patterns to create a consistent - * elevation system across the theme. Based on Material Design principles - * but adapted for our brand aesthetic. - */ - -:root { - /* ✨ ELEVATION LEVELS (0-24dp equivalent) */ - --elevation-0: none; - /* --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.1); */ - --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.06); - /* --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1); */ - --elevation-2: 0 1px 3px rgba(0, 0, 0, 0.08); - /* --elevation-3: 0 2px 6px rgba(0, 0, 0, 0.1); */ - --elevation-3: 0 2px 5px rgba(0, 0, 0, 0.08); - /* --elevation-4: 0 2px 8px rgba(0, 0, 0, 0.1); */ - --elevation-4: 0 2px 6px rgba(0, 0, 0, 0.1); - /* --elevation-6: 0 4px 12px rgba(0, 0, 0, 0.1); */ - --elevation-6: 0 3px 10px rgba(0, 0, 0, 0.12); - /* --elevation-8: 0 4px 16px rgba(0, 0, 0, 0.1); */ - --elevation-8: 0 4px 14px rgba(0, 0, 0, 0.12); - /* --elevation-12: 0 8px 24px rgba(0, 0, 0, 0.1); */ - --elevation-12: 0 6px 20px rgba(0, 0, 0, 0.14); - /* --elevation-16: 0 12px 28px rgba(0, 0, 0, 0.1); */ - --elevation-16: 0 8px 24px rgba(0, 0, 0, 0.14); - /* --elevation-24: 0 16px 32px rgba(0, 0, 0, 0.15); */ - --elevation-24: 0 12px 28px rgba(0, 0, 0, 0.16); - - /* ✨ INTERACTIVE ELEVATION (hover states) */ - /* --elevation-hover-1: 0 4px 8px rgba(0, 0, 0, 0.15); */ - --elevation-hover-1: 0 3px 8px rgba(0, 0, 0, 0.12); - /* --elevation-hover-2: 0 4px 12px rgba(0, 0, 0, 0.15); */ - --elevation-hover-2: 0 4px 10px rgba(0, 0, 0, 0.14); - /* --elevation-hover-3: 0 6px 16px rgba(0, 0, 0, 0.15); */ - --elevation-hover-3: 0 5px 14px rgba(0, 0, 0, 0.14); - /* --elevation-hover-4: 0 8px 20px rgba(0, 0, 0, 0.15); */ - --elevation-hover-4: 0 6px 18px rgba(0, 0, 0, 0.16); - /* --elevation-hover-6: 0 12px 28px rgba(0, 0, 0, 0.15); */ - --elevation-hover-6: 0 8px 22px rgba(0, 0, 0, 0.18); - /* --elevation-hover-8: 0 16px 32px rgba(0, 0, 0, 0.2); */ - --elevation-hover-8: 0 10px 28px rgba(0, 0, 0, 0.2); - - /* ✨ BRAND-COLORED ELEVATIONS */ - --elevation-brand-subtle: 0 2px 8px rgba(var(--color-brand-rgb), 0.1); - --elevation-brand-medium: 0 4px 16px rgba(var(--color-brand-rgb), 0.15); - --elevation-brand-strong: 0 8px 24px rgba(var(--color-brand-rgb), 0.2); - --elevation-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.15); - --elevation-brand-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.2); - - /* ✨ SPECIALIZED ELEVATIONS */ - --elevation-inset: inset 0 1px 3px rgba(0, 0, 0, 0.1); - --elevation-inset-deep: inset 0 2px 6px rgba(0, 0, 0, 0.15); - --elevation-outline: 0 0 0 1px rgba(0, 0, 0, 0.1); - --elevation-outline-brand: 0 0 0 1px var(--color-brand); - - /* ✨ ERROR/WARNING/SUCCESS ELEVATIONS */ - --elevation-error: 0 4px 12px rgba(239, 68, 68, 0.2); - --elevation-warning: 0 4px 12px rgba(245, 158, 11, 0.2); - --elevation-success: 0 4px 12px rgba(16, 185, 129, 0.2); - --elevation-info: 0 4px 12px rgba(59, 130, 246, 0.2); - - /* ✨ OVERLAYS AND MODALS */ - --elevation-overlay: 0 24px 48px rgba(0, 0, 0, 0.3); - --elevation-modal: 0 32px 64px rgba(0, 0, 0, 0.4); - --elevation-dropdown: 0 8px 24px rgba(0, 0, 0, 0.15); - --elevation-tooltip: 0 4px 12px rgba(0, 0, 0, 0.2); -} - -/* 🌙 DARK MODE ELEVATION ADJUSTMENTS */ -.dark { - /* Stronger shadows for dark mode */ - /* --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.3); */ - --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.25); - /* --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.3); */ - --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.28); - /* --elevation-3: 0 2px 6px rgba(0, 0, 0, 0.4); */ - --elevation-3: 0 2px 5px rgba(0, 0, 0, 0.34); - /* --elevation-4: 0 2px 8px rgba(0, 0, 0, 0.4); */ - --elevation-4: 0 2px 6px rgba(0, 0, 0, 0.36); - /* --elevation-6: 0 4px 12px rgba(0, 0, 0, 0.4); */ - --elevation-6: 0 3px 10px rgba(0, 0, 0, 0.4); - /* --elevation-8: 0 4px 16px rgba(0, 0, 0, 0.5); */ - --elevation-8: 0 4px 14px rgba(0, 0, 0, 0.48); - /* --elevation-12: 0 8px 24px rgba(0, 0, 0, 0.5); */ - --elevation-12: 0 6px 20px rgba(0, 0, 0, 0.5); - /* --elevation-16: 0 12px 28px rgba(0, 0, 0, 0.6); */ - --elevation-16: 0 8px 24px rgba(0, 0, 0, 0.56); - /* --elevation-24: 0 16px 32px rgba(0, 0, 0, 0.7); */ - --elevation-24: 0 12px 28px rgba(0, 0, 0, 0.6); - - /* Enhanced hover states for dark mode */ - /* --elevation-hover-1: 0 4px 8px rgba(0, 0, 0, 0.5); */ - --elevation-hover-1: 0 3px 8px rgba(0, 0, 0, 0.44); - /* --elevation-hover-2: 0 4px 12px rgba(0, 0, 0, 0.5); */ - --elevation-hover-2: 0 4px 10px rgba(0, 0, 0, 0.48); - /* --elevation-hover-3: 0 6px 16px rgba(0, 0, 0, 0.6); */ - --elevation-hover-3: 0 5px 14px rgba(0, 0, 0, 0.5); - /* --elevation-hover-4: 0 8px 20px rgba(0, 0, 0, 0.6); */ - --elevation-hover-4: 0 6px 18px rgba(0, 0, 0, 0.54); - /* --elevation-hover-6: 0 12px 28px rgba(0, 0, 0, 0.7); */ - --elevation-hover-6: 0 8px 22px rgba(0, 0, 0, 0.58); - /* --elevation-hover-8: 0 16px 32px rgba(0, 0, 0, 0.8); */ - --elevation-hover-8: 0 10px 28px rgba(0, 0, 0, 0.62); - - /* Enhanced brand elevations for dark mode */ - --elevation-brand-subtle: 0 2px 8px rgba(var(--color-brand-rgb), 0.15); - --elevation-brand-medium: 0 4px 16px rgba(var(--color-brand-rgb), 0.2); - --elevation-brand-strong: 0 8px 24px rgba(var(--color-brand-rgb), 0.25); - --elevation-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.25); - --elevation-brand-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.3); - - /* Enhanced overlay elevations for dark mode */ - --elevation-overlay: 0 24px 48px rgba(0, 0, 0, 0.8); - --elevation-modal: 0 32px 64px rgba(0, 0, 0, 0.9); - --elevation-dropdown: 0 8px 24px rgba(0, 0, 0, 0.6); - --elevation-tooltip: 0 4px 12px rgba(0, 0, 0, 0.7); -} - -/* ✅ ELEVATION UTILITY CLASSES - * ============================= - * Apply these classes for consistent elevation - */ - -.elevation-0 { box-shadow: var(--elevation-0); } -.elevation-1 { box-shadow: var(--elevation-1); } -.elevation-2 { box-shadow: var(--elevation-2); } -.elevation-3 { box-shadow: var(--elevation-3); } -.elevation-4 { box-shadow: var(--elevation-4); } -.elevation-6 { box-shadow: var(--elevation-6); } -.elevation-8 { box-shadow: var(--elevation-8); } -.elevation-12 { box-shadow: var(--elevation-12); } -.elevation-16 { box-shadow: var(--elevation-16); } -.elevation-24 { box-shadow: var(--elevation-24); } - -/* Hover elevation classes */ -.elevation-hover-1:hover { box-shadow: var(--elevation-hover-1); } -.elevation-hover-2:hover { box-shadow: var(--elevation-hover-2); } -.elevation-hover-3:hover { box-shadow: var(--elevation-hover-3); } -.elevation-hover-4:hover { box-shadow: var(--elevation-hover-4); } -.elevation-hover-6:hover { box-shadow: var(--elevation-hover-6); } -.elevation-hover-8:hover { box-shadow: var(--elevation-hover-8); } - -/* Brand elevation classes */ -.elevation-brand-subtle { box-shadow: var(--elevation-brand-subtle); } -.elevation-brand-medium { box-shadow: var(--elevation-brand-medium); } -.elevation-brand-strong { box-shadow: var(--elevation-brand-strong); } -.elevation-brand-glow { box-shadow: var(--elevation-brand-glow); } - -/* Focus elevation */ -.elevation-focus:focus-visible { - box-shadow: var(--elevation-brand-focus); - outline: none; -} - -/* ✅ COMPONENT-SPECIFIC ELEVATION MAPPINGS - * ========================================= - * Semantic elevation assignments for common components - */ - -/* Surface elements */ -.surface { - box-shadow: var(--elevation-0); -} - -.surface-raised { - box-shadow: var(--elevation-1); -} - -/* Cards */ -.card-flat { - box-shadow: var(--elevation-1); -} - -.card-raised { - box-shadow: var(--elevation-2); -} - -.card-elevated { - box-shadow: var(--elevation-4); -} - -.card-floating { - box-shadow: var(--elevation-8); -} - -/* Interactive cards with hover */ -.card-interactive { - box-shadow: var(--elevation-2); - transition: box-shadow var(--timing-medium) var(--easing-standard); -} - -.card-interactive:hover { - box-shadow: var(--elevation-hover-4); -} - -/* Buttons */ -.btn-flat { - box-shadow: var(--elevation-0); -} - -.btn-raised { - box-shadow: var(--elevation-1); -} - -.btn-floating { - box-shadow: var(--elevation-6); -} - -.btn-raised:hover, -.btn-floating:hover { - box-shadow: var(--elevation-hover-2); -} - -/* Navigation */ -.nav-bar { - box-shadow: var(--elevation-2); -} - -.nav-drawer { - box-shadow: var(--elevation-16); -} - -.nav-tabs { - box-shadow: var(--elevation-1); -} - -/* Overlays */ -.dropdown-menu { - box-shadow: var(--elevation-dropdown); -} - -.modal-content { - box-shadow: var(--elevation-modal); -} - -.tooltip { - box-shadow: var(--elevation-tooltip); -} - -.popover { - box-shadow: var(--elevation-8); -} - -/* Content sections */ -.content-section { - box-shadow: var(--elevation-1); -} - -.featured-content { - box-shadow: var(--elevation-4); -} - -.hero-section { - box-shadow: var(--elevation-8); -} - -/* ✅ STATE-BASED ELEVATIONS - * ========================== - * Elevation changes based on component state - */ - -/* Loading states get reduced elevation */ -[data-component-state="loading"] { - box-shadow: var(--elevation-1) !important; - opacity: var(--opacity-faded); -} - -/* Error states get error elevation */ -[data-component-state="error"] { - box-shadow: var(--elevation-error) !important; -} - -/* Focus states for accessibility */ -[data-component-state="focused"] { - box-shadow: var(--elevation-brand-focus) !important; -} - -/* ✅ COMBINED ELEVATIONS - * ======================= - * Multiple shadows for complex effects - */ - -.elevation-layered { - box-shadow: - var(--elevation-2), - var(--elevation-brand-glow); -} - -.elevation-outlined { - box-shadow: - var(--elevation-4), - var(--elevation-outline); -} - -.elevation-brand-outlined { - box-shadow: - var(--elevation-4), - var(--elevation-outline-brand); -} - -/* ✅ PERFORMANCE OPTIMIZATIONS - * ============================= - * Enable hardware acceleration for elements with elevation changes - */ - -.elevation-animated { - will-change: box-shadow; - transform: translateZ(0); /* Force hardware acceleration */ -} - -/* ✅ ACCESSIBILITY ENHANCEMENTS - * ============================== - * High contrast and reduced motion support - */ - -@media (prefers-contrast: high) { - /* Enhance shadows for better visibility */ - :root { - --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.3); - --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.3); - --elevation-4: 0 2px 8px rgba(0, 0, 0, 0.4); - --elevation-6: 0 4px 12px rgba(0, 0, 0, 0.4); - } -} - -@media (prefers-reduced-motion: reduce) { - /* Remove shadow transitions for reduced motion */ - .card-interactive, - .btn-raised, - .btn-floating, - .elevation-animated { - transition: none !important; - } -} - -/* ✅ PRINT STYLES - * ================ - * Remove shadows for print media - */ - -@media print { - * { - box-shadow: none !important; - } -} \ No newline at end of file diff --git a/assets/css/architecture/index.css b/assets/css/architecture/index.css deleted file mode 100644 index b72eb49..0000000 --- a/assets/css/architecture/index.css +++ /dev/null @@ -1,162 +0,0 @@ -/* đŸŽ¯ Architecture System - Complete Import - * ========================================= - * - * This file imports all architectural foundation files in the correct order - * to ensure proper CSS cascade and prevent conflicts. - * - * Import this single file to get the complete architectural system. - */ - -/* ✅ STEP 1: ANIMATION FOUNDATION - * ================================ - * Must be first - provides timing tokens, easing curves, and base animation patterns - * that other systems depend on. - */ -@import './animation-system.css'; - -/* ✅ STEP 2: COMPONENT STATE MANAGEMENT - * ====================================== - * Depends on animation tokens. Provides state management patterns that - * interaction and loading systems build upon. - */ -@import './component-states.css'; - -/* ✅ STEP 3: LAYOUT FOUNDATIONS - * ============================== - * Independent system that provides spacing, positioning, and layout tokens. - * Can be loaded in parallel with other systems. - */ -@import './layout-foundations.css'; - -/* ✅ STEP 3.5: TYPOGRAPHY SYSTEM - * =============================== - * Global type rules and article typography. - */ -@import './typography-system.css'; - -/* ✅ STEP 4: ELEVATION SYSTEM - * ============================ - * Independent shadow system. Provides elevation tokens that interaction - * patterns will reference. - */ -@import './elevation-system.css'; - -/* ✅ STEP 5: INTERACTION PATTERNS - * ================================ - * Depends on animation tokens and elevation tokens. Provides unified - * hover, focus, and active state patterns. - */ -@import './interaction-patterns.css'; - -/* ✅ STEP 6: LOADING STATES - * ========================== - * Depends on animation tokens and layout tokens. Provides loading patterns - * and skeleton components. - */ -@import './loading-states.css'; - -/* đŸŽ¯ ARCHITECTURE SYSTEM SUMMARY - * =============================== - * - * This architecture system provides: - * - * 1. **Animation System** (animation-system.css) - * - Consistent timing tokens (--timing-*) - * - Easing curves (--easing-*) - * - Transform patterns (--transform-*) - * - Collapse/expand behaviors - * - Utility animation classes - * - * 2. **Component States** (component-states.css) - * - Data-attribute driven state management - * - Lifecycle states (loading, ready, disabled, error) - * - Collapse states (collapsed, transitioning, expanded) - * - Interactive states with accessibility support - * - * 3. **Layout Foundations** (layout-foundations.css) - * - Comprehensive spacing scale (--space-*) - * - Semantic spacing tokens (--space-xs, --space-md, etc.) - * - Border radius system (--radius-*) - * - Z-index scale (--z-*) - * - Max-width tokens (--max-width-*) - * - Layout pattern classes (.container, .stack, .cluster, etc.) - * - * 4. **Elevation System** (elevation-system.css) - * - Consistent shadow elevation levels (--elevation-*) - * - Interactive hover elevations (--elevation-hover-*) - * - Brand-colored elevations (--elevation-brand-*) - * - State-specific elevations (error, focus, etc.) - * - Semantic elevation classes (.card-elevated, .btn-floating, etc.) - * - * 5. **Interaction Patterns** (interaction-patterns.css) - * - Unified hover/focus/active behaviors - * - Interactive element classes (.interact-subtle, .interact-dramatic, etc.) - * - Consistent focus management - * - Disabled and loading state patterns - * - Touch device optimizations - * - * 6. **Loading States** (loading-states.css) - * - Loading state classes (.loading, .loading-blur, etc.) - * - Spinner components (.spinner, .spinner-dots, etc.) - * - Skeleton loading patterns (.skeleton, .skeleton-text, etc.) - * - Progressive loading behaviors - * - Async operation state management - * - * USAGE EXAMPLES: - * =============== - * - * // Use architectural tokens in components: - * .my-component { - * padding: var(--space-md); - * border-radius: var(--radius-card); - * box-shadow: var(--elevation-2); - * transition: var(--transition-interactive); - * } - * - * .my-component:hover { - * transform: var(--transform-lift-medium); - * box-shadow: var(--elevation-hover-4); - * } - * - * // Apply architectural classes: - *
- *
...
- *
- * - * // Use state management: - *
- *
Content
- *
- * - * BENEFITS: - * ========= - * - * ✅ **Consistency**: All components use the same timing, spacing, and interaction patterns - * ✅ **Maintainability**: Changes to timing/spacing/shadows happen in one place - * ✅ **Performance**: Optimized transitions and hardware acceleration - * ✅ **Accessibility**: Built-in support for reduced motion, high contrast, screen readers - * ✅ **Developer Experience**: Semantic tokens and utility classes speed up development - * ✅ **Brand Coherence**: Consistent elevation and interaction patterns across all components - * ✅ **Scalability**: Easy to extend with new tokens and patterns - * - * MIGRATION GUIDE: - * ================ - * - * To migrate existing components to use this architecture: - * - * 1. Replace hardcoded timing values with --timing-* tokens - * 2. Replace hardcoded shadows with --elevation-* tokens - * 3. Replace hardcoded transforms with --transform-* tokens - * 4. Use .interact-* classes instead of custom hover states - * 5. Use data-attributes for state management instead of classes - * 6. Replace loading patterns with .skeleton and .loading classes - * - * PERFORMANCE NOTES: - * ================== - * - * - All animations use transform and opacity for 60fps performance - * - Hardware acceleration is enabled on interactive elements - * - Reduced motion preferences are respected throughout - * - Z-index values are managed to prevent stacking conflicts - * - Specific property transitions prevent layout thrashing - */ \ No newline at end of file diff --git a/assets/css/architecture/interaction-patterns.css b/assets/css/architecture/interaction-patterns.css deleted file mode 100644 index 7eee669..0000000 --- a/assets/css/architecture/interaction-patterns.css +++ /dev/null @@ -1,314 +0,0 @@ -/* đŸŽ¯ Universal Interaction Patterns System - * ======================================== - * - * This file centralizes all hover, focus, active, and interactive patterns - * to eliminate the hundreds of scattered transform/transition definitions - * across component files. - */ - -:root { - /* ✨ INTERACTION TRANSFORM TOKENS */ - --hover-lift-subtle: translateY(-1px); /* Buttons, small elements */ - --hover-lift-medium: translateY(-2px); /* Cards, medium elements */ - --hover-lift-dramatic: translateY(-4px); /* Hero cards, dramatic elements */ - --hover-scale-up: scale(1.02); /* Slight growth on hover */ - --hover-scale-down: scale(0.98); /* Slight shrink on active */ - --hover-combined-lift: translateY(-2px) scale(1.02); /* Combined lift + scale */ - - /* ✨ SHADOW ELEVATION TOKENS */ - --shadow-rest: 0 1px 3px rgba(0, 0, 0, 0.1); - --shadow-hover-subtle: 0 4px 8px rgba(0, 0, 0, 0.1); - --shadow-hover-medium: 0 4px 12px rgba(0, 0, 0, 0.15); - --shadow-hover-dramatic: 0 12px 28px rgba(0, 0, 0, 0.12); - --shadow-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.2); - --shadow-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.15); - - /* ✨ TRANSITION SETS - Reusable combinations */ - --transition-interactive: - transform var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard); - - --transition-elevation: - transform var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - - --transition-button: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard); -} - -/* ✅ INTERACTION BEHAVIOR CLASSES - * ================================ - * Apply these classes for consistent interactive behavior - */ - -/* Subtle interactive elements (buttons, small cards) */ -.interact-subtle { - transition: var(--transition-interactive); - cursor: pointer; -} - -.interact-subtle:hover { - transform: var(--hover-lift-subtle); - box-shadow: var(--shadow-hover-subtle); -} - -.interact-subtle:active { - transform: var(--hover-scale-down); - transition-duration: var(--timing-instant); -} - -/* Medium interactive elements (content cards, tiles) */ -.interact-medium { - transition: var(--transition-elevation); - cursor: pointer; -} - -.interact-medium:hover { - transform: var(--hover-lift-medium); - box-shadow: var(--shadow-hover-medium); -} - -.interact-medium:active { - transform: var(--hover-scale-down); - transition-duration: var(--timing-instant); -} - -/* Dramatic interactive elements (hero cards, featured content) */ -.interact-dramatic { - transition: var(--transition-elevation); - cursor: pointer; -} - -.interact-dramatic:hover { - transform: var(--hover-lift-dramatic); - box-shadow: var(--shadow-hover-dramatic); - border-color: var(--color-brand); -} - -.interact-dramatic:active { - transform: var(--hover-combined-lift); - transition-duration: var(--timing-instant); -} - -/* ✅ BUTTON INTERACTION PATTERNS - * =============================== - * Specialized patterns for button-like elements - */ - -.btn-interact { - transition: var(--transition-button); - position: relative; - overflow: hidden; -} - -.btn-interact:hover { - transform: var(--hover-lift-subtle); - box-shadow: var(--shadow-hover-medium); -} - -.btn-interact:active { - transform: var(--hover-scale-down); - transition-duration: var(--timing-instant); -} - -.btn-interact:focus-visible { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - box-shadow: var(--shadow-focus); -} - -/* ✅ BRAND-FOCUSED INTERACTIONS - * ============================== - * Elements that should emphasize brand colors - */ - -.interact-brand { - transition: var(--transition-elevation); - cursor: pointer; -} - -.interact-brand:hover { - transform: var(--hover-lift-medium); - box-shadow: - var(--shadow-hover-medium), - var(--shadow-brand-glow); - border-color: var(--color-brand); -} - -.interact-brand:hover h1, -.interact-brand:hover h2, -.interact-brand:hover h3, -.interact-brand:hover h4, -.interact-brand:hover h5, -.interact-brand:hover h6 { - color: var(--color-brand); - transition: color var(--timing-fast) var(--easing-standard); -} - -/* ✅ FOCUS MANAGEMENT - * ==================== - * Consistent focus indicators across all interactive elements - */ - -.focusable { - border-radius: 0.25rem; /* Ensure focus outline has proper shape */ -} - -.focusable:focus-visible { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - box-shadow: var(--shadow-focus); - transition: - outline-color var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard); -} - -/* ✅ DISABLED STATES - * =================== - * Consistent disabled behavior - */ - -.interact-disabled, -[data-interactive="false"], -.interact-subtle:disabled, -.interact-medium:disabled, -.interact-dramatic:disabled { - opacity: var(--opacity-faded); - cursor: not-allowed; - pointer-events: none; - filter: grayscale(50%); - transition: - opacity var(--timing-fast) var(--easing-standard), - filter var(--timing-fast) var(--easing-standard); -} - -/* ✅ LOADING STATES - * ================== - * Interactive elements in loading state - */ - -.interact-loading { - opacity: var(--loading-opacity); - cursor: wait; - pointer-events: none; - filter: var(--loading-blur); - transition: - opacity var(--timing-fast) var(--easing-standard), - filter var(--timing-fast) var(--easing-standard); -} - -/* ✅ NESTED INTERACTION INHERITANCE - * ================================== - * Child elements inherit parent interaction states - */ - -.interact-subtle:hover .nested-text, -.interact-medium:hover .nested-text, -.interact-dramatic:hover .nested-text { - color: var(--color-brand); - transition: color var(--timing-fast) var(--easing-standard); -} - -/* ✅ ACCESSIBILITY ENHANCEMENTS - * ============================== - * Enhanced interaction patterns for accessibility - */ - -/* High contrast mode support */ -@media (prefers-contrast: high) { - .focusable:focus-visible { - outline-width: 3px; - outline-style: solid; - } - - .interact-subtle:hover, - .interact-medium:hover, - .interact-dramatic:hover { - border-width: 2px; - border-style: solid; - border-color: var(--color-brand); - } -} - -/* Reduced motion support */ -@media (prefers-reduced-motion: reduce) { - .interact-subtle, - .interact-medium, - .interact-dramatic, - .btn-interact, - .interact-brand { - transition: none !important; - transform: none !important; - } - - .interact-subtle:hover, - .interact-medium:hover, - .interact-dramatic:hover, - .btn-interact:hover, - .interact-brand:hover { - transform: none !important; - } -} - -/* ✅ TOUCH DEVICE OPTIMIZATIONS - * ============================== - * Better interactions for touch devices - */ - -@media (hover: none) and (pointer: coarse) { - /* Reduce hover effects on touch devices */ - .interact-subtle:hover, - .interact-medium:hover, - .interact-dramatic:hover { - transform: none; - box-shadow: var(--shadow-rest); - } - - /* Enhance active states for touch feedback */ - .interact-subtle:active, - .interact-medium:active, - .interact-dramatic:active { - transform: var(--hover-scale-down); - opacity: 0.8; - } -} - -/* ✅ DARK MODE ENHANCEMENTS - * ========================== - * Enhanced shadows and interactions for dark mode - */ - -.dark { - --shadow-rest: 0 1px 3px rgba(0, 0, 0, 0.3); - --shadow-hover-subtle: 0 4px 8px rgba(0, 0, 0, 0.3); - --shadow-hover-medium: 0 4px 12px rgba(0, 0, 0, 0.4); - --shadow-hover-dramatic: 0 12px 28px rgba(0, 0, 0, 0.5); - --shadow-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.3); - --shadow-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.25); -} - -/* ✅ COMPONENT-SPECIFIC OVERRIDES - * ================================ - * Allow components to customize interaction patterns - */ - -/* Cards and tiles can use larger transforms */ -.card, -.tile { - /* Use .interact-medium or .interact-dramatic class instead of custom transforms */ -} - -/* Buttons get subtle interactions by default */ -.btn { - /* Use .btn-interact class instead of custom transforms */ -} - -/* Navigation items get subtle interactions */ -.nav-item, -.sidebar__item { - /* Use .interact-subtle class instead of custom transforms */ -} \ No newline at end of file diff --git a/assets/css/architecture/layout-foundations.css b/assets/css/architecture/layout-foundations.css deleted file mode 100644 index 87ddfe1..0000000 --- a/assets/css/architecture/layout-foundations.css +++ /dev/null @@ -1,601 +0,0 @@ -/* đŸŽ¯ Universal Layout Foundations System - * ======================================= - * - * This file centralizes common spacing, positioning, and layout patterns - * to ensure consistent spatial relationships across all components. - */ - -:root { - /* ✨ SPACING SCALE (based on 0.25rem = 4px base) */ - --space-0: 0; - --space-px: 1px; - --space-0-5: 0.125rem; /* 2px */ - --space-1: 0.25rem; /* 4px */ - --space-1-5: 0.375rem; /* 6px */ - --space-2: 0.5rem; /* 8px */ - --space-2-5: 0.625rem; /* 10px */ - --space-3: 0.75rem; /* 12px */ - --space-3-5: 0.875rem; /* 14px */ - --space-4: 1rem; /* 16px */ - --space-5: 1.25rem; /* 20px */ - --space-6: 1.5rem; /* 24px */ - --space-7: 1.75rem; /* 28px */ - --space-8: 2rem; /* 32px */ - --space-9: 2.25rem; /* 36px */ - --space-10: 2.5rem; /* 40px */ - --space-11: 2.75rem; /* 44px */ - --space-12: 3rem; /* 48px */ - --space-14: 3.5rem; /* 56px */ - --space-16: 4rem; /* 64px */ - --space-20: 5rem; /* 80px */ - --space-24: 6rem; /* 96px */ - --space-28: 7rem; /* 112px */ - --space-32: 8rem; /* 128px */ - --space-36: 9rem; /* 144px */ - --space-40: 10rem; /* 160px */ - --space-44: 11rem; /* 176px */ - --space-48: 12rem; /* 192px */ - --space-52: 13rem; /* 208px */ - --space-56: 14rem; /* 224px */ - --space-60: 15rem; /* 240px */ - --space-64: 16rem; /* 256px */ - --space-72: 18rem; /* 288px */ - --space-80: 20rem; /* 320px */ - --space-96: 24rem; /* 384px */ - - /* ✨ SEMANTIC SPACING TOKENS */ - --space-xs: var(--space-1); /* 4px - Minimal spacing */ - --space-sm: var(--space-2); /* 8px - Small spacing */ - --space-md: var(--space-4); /* 16px - Medium spacing */ - --space-lg: var(--space-6); /* 24px - Large spacing */ - --space-xl: var(--space-8); /* 32px - Extra large spacing */ - --space-2xl: var(--space-12); /* 48px - Double extra large */ - --space-3xl: var(--space-16); /* 64px - Triple extra large */ - - /* ✨ CONTENT SPACING TOKENS */ - --content-gap-tight: var(--space-2); /* 8px - Tight content */ - --content-gap-normal: var(--space-4); /* 16px - Normal content */ - --content-gap-relaxed: var(--space-6); /* 24px - Relaxed content */ - --content-gap-loose: var(--space-8); /* 32px - Loose content */ - - /* ✨ COMPONENT SPACING TOKENS */ - --component-padding-sm: var(--space-3); /* 12px - Small components */ - --component-padding-md: var(--space-4); /* 16px - Medium components */ - --component-padding-lg: var(--space-6); /* 24px - Large components */ - --component-padding-xl: var(--space-8); /* 32px - Extra large components */ - - /* ✨ BORDER RADIUS SCALE */ - --radius-none: 0; - --radius-sm: 0.125rem; /* 2px */ - --radius-base: 0.25rem; /* 4px */ - --radius-md: 0.375rem; /* 6px */ - --radius-lg: 0.5rem; /* 8px */ - --radius-xl: 0.75rem; /* 12px */ - --radius-2xl: 1rem; /* 16px */ - --radius-3xl: 1.5rem; /* 24px */ - --radius-full: 9999px; /* Full radius */ - - /* ✨ SEMANTIC BORDER RADIUS TOKENS */ - --radius-button: var(--radius-md); /* Button border radius */ - --radius-card: var(--radius-lg); /* Card border radius */ - --radius-modal: var(--radius-xl); /* Modal border radius */ - --radius-input: var(--radius-base); /* Input border radius */ - - /* ✨ Z-INDEX SCALE */ - --z-behind: -1; - --z-base: 0; - --z-low: 10; - --z-medium: 100; - --z-high: 1000; - --z-overlay: 10000; - --z-modal: 100000; - --z-popover: 1000000; - --z-tooltip: 10000000; - --z-top: 999999999; - - /* ✨ SEMANTIC Z-INDEX TOKENS */ - --z-dropdown: var(--z-overlay); - --z-sticky-header: var(--z-high); - --z-sidebar: var(--z-medium); - --z-loading-overlay: var(--z-modal); - --z-toast: var(--z-overlay); - - /* ✨ MAX WIDTH SCALE */ - --max-width-xs: 20rem; /* 320px */ - --max-width-sm: 24rem; /* 384px */ - --max-width-md: 28rem; /* 448px */ - --max-width-lg: 32rem; /* 512px */ - --max-width-xl: 36rem; /* 576px */ - --max-width-2xl: 42rem; /* 672px */ - --max-width-3xl: 48rem; /* 768px */ - --max-width-4xl: 56rem; /* 896px */ - --max-width-5xl: 64rem; /* 1024px */ - --max-width-6xl: 72rem; /* 1152px */ - --max-width-7xl: 80rem; /* 1280px */ - --max-width-full: 100%; - --max-width-prose: 65ch; /* Optimal reading width */ - --max-width-screen-sm: 640px; - --max-width-screen-md: 768px; - --max-width-screen-lg: 1024px; - --max-width-screen-xl: 1280px; - --max-width-screen-2xl: 1536px; - - /* ✨ SEMANTIC MAX WIDTH TOKENS */ - --max-width-content: var(--max-width-4xl); /* Main content area */ - --max-width-sidebar: var(--max-width-xs); /* Sidebar width */ - --max-width-modal: var(--max-width-2xl); /* Modal dialogs */ - --max-width-form: var(--max-width-lg); /* Form containers */ - - /* ✨ LAYOUT SHELL TOKENS (moved from input.css) */ - --left-rail-width: 18rem; /* xl left rail */ - --right-rail-width: 22rem; /* xl right rail */ - --layout-gap-xl: var(--space-8);/* xl gap */ - --left-rail-width-2xl: 20rem; /* 2xl left rail */ - --right-rail-width-2xl: 28rem; /* 2xl right rail */ - --layout-gap-2xl: var(--space-16); /* 2xl gap */ - - /* ✨ GRID/TILE TOKENS (moved from input.css) */ - --grid-card-min: 280px; /* minimum card width for auto-fit grids */ - --tile-glass-blur: 12px; /* tile glass blur amount */ - --tile-glass-saturate: 140%; /* tile glass saturation */ - - /* ✨ GLASSMORPHISM TOKENS (unified) */ - --glass-blur: 8px; - --glass-saturate: 1.15; - --glass-bg: rgba(255, 255, 255, 0.45); - --glass-border-color: rgba(255, 255, 255, 0.22); - --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); -} - -/* Dark mode glass adjustments */ -.dark { - --glass-bg: rgba(17, 17, 17, 0.5); - --glass-border-color: rgba(255, 255, 255, 0.10); - --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); -} - -/* Right-rail presence attribute hook */ -main.layout-shell[data-has-right-rail="false"] { - /* Slightly increase center column breathing room when right rail is hidden */ - --layout-gap-xl: var(--space-8); - --layout-gap-2xl: var(--space-12); - --max-width-content: var(--max-width-5xl); -} - -/* Density presets - Apply by adding a class on or
, or via future param-driven mapping */ -.layout-density--compact { - --grid-card-min: 320px; /* wider cards to reduce row count */ - --layout-gap-xl: var(--space-6); /* slightly tighter gap */ - --layout-gap-2xl: var(--space-10); -} - -.layout-density--comfortable { - --grid-card-min: 280px; - --layout-gap-xl: var(--space-8); - --layout-gap-2xl: var(--space-16); -} - -/* ✅ SPACING UTILITY CLASSES - * =========================== - * Consistent spacing patterns for common use cases - */ - -/* Margin utilities */ -.m-auto { margin: auto; } -.mx-auto { margin-left: auto; margin-right: auto; } -.my-auto { margin-top: auto; margin-bottom: auto; } - -/* Padding utilities */ -.p-0 { padding: var(--space-0); } -.p-1 { padding: var(--space-1); } -.p-2 { padding: var(--space-2); } -.p-3 { padding: var(--space-3); } -.p-4 { padding: var(--space-4); } -.p-6 { padding: var(--space-6); } -.p-8 { padding: var(--space-8); } - -/* Semantic spacing classes */ -.gap-tight { gap: var(--content-gap-tight); } -.gap-normal { gap: var(--content-gap-normal); } -.gap-relaxed { gap: var(--content-gap-relaxed); } -.gap-loose { gap: var(--content-gap-loose); } - -/* Component padding classes */ -.padding-sm { padding: var(--component-padding-sm); } -.padding-md { padding: var(--component-padding-md); } -.padding-lg { padding: var(--component-padding-lg); } -.padding-xl { padding: var(--component-padding-xl); } - -/* ✅ LAYOUT PATTERN CLASSES - * ========================== - * Common layout patterns as reusable classes - */ - -/* Container patterns */ -.container { - width: 100%; - max-width: var(--max-width-content); - margin-left: auto; - margin-right: auto; - padding-left: var(--space-4); - padding-right: var(--space-4); -} - -.container-narrow { - max-width: var(--max-width-2xl); -} - -.container-wide { - max-width: var(--max-width-6xl); -} - -.container-full { - max-width: none; - padding-left: 0; - padding-right: 0; -} - -/* Content sections */ -.section { - padding-top: var(--space-12); - padding-bottom: var(--space-12); -} - -.section-sm { - padding-top: var(--space-8); - padding-bottom: var(--space-8); -} - -.section-lg { - padding-top: var(--space-16); - padding-bottom: var(--space-16); -} - -/* Stack layouts (vertical spacing) */ -.stack > * + * { - margin-top: var(--content-gap-normal); -} - -.stack-tight > * + * { - margin-top: var(--content-gap-tight); -} - -.stack-relaxed > * + * { - margin-top: var(--content-gap-relaxed); -} - -.stack-loose > * + * { - margin-top: var(--content-gap-loose); -} - -/* Cluster layouts (horizontal spacing) */ -.cluster { - display: flex; - flex-wrap: wrap; - gap: var(--content-gap-normal); - align-items: center; -} - -.cluster-tight { - gap: var(--content-gap-tight); -} - -.cluster-relaxed { - gap: var(--content-gap-relaxed); -} - -/* Grid patterns */ -.grid-auto { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: var(--content-gap-normal); -} - -.grid-auto-sm { - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); -} - -.grid-auto-lg { - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); -} - -/* Flexbox patterns */ -.flex-between { - display: flex; - justify-content: space-between; - align-items: center; -} - -.flex-center { - display: flex; - justify-content: center; - align-items: center; -} - -.flex-start { - display: flex; - justify-content: flex-start; - align-items: center; -} - -.flex-end { - display: flex; - justify-content: flex-end; - align-items: center; -} - -/* ✅ POSITIONING UTILITIES - * ========================= - * Common positioning patterns - */ - -.relative { position: relative; } -.absolute { position: absolute; } -.fixed { position: fixed; } -.sticky { position: sticky; } - -/* Absolute positioning helpers */ -.absolute-center { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -.absolute-top-left { - position: absolute; - top: var(--space-2); - left: var(--space-2); -} - -.absolute-top-right { - position: absolute; - top: var(--space-2); - right: var(--space-2); -} - -.absolute-bottom-left { - position: absolute; - bottom: var(--space-2); - left: var(--space-2); -} - -.absolute-bottom-right { - position: absolute; - bottom: var(--space-2); - right: var(--space-2); -} - -/* Z-index utilities */ -.z-behind { z-index: var(--z-behind); } -.z-base { z-index: var(--z-base); } -.z-low { z-index: var(--z-low); } -.z-medium { z-index: var(--z-medium); } -.z-high { z-index: var(--z-high); } -.z-overlay { z-index: var(--z-overlay); } -.z-modal { z-index: var(--z-modal); } -.z-top { z-index: var(--z-top); } - -/* ✅ BORDER RADIUS UTILITIES - * =========================== - * Consistent border radius patterns - */ - -.rounded-none { border-radius: var(--radius-none); } -.rounded-sm { border-radius: var(--radius-sm); } -.rounded { border-radius: var(--radius-base); } -.rounded-md { border-radius: var(--radius-md); } -.rounded-lg { border-radius: var(--radius-lg); } -.rounded-xl { border-radius: var(--radius-xl); } -.rounded-2xl { border-radius: var(--radius-2xl); } -.rounded-3xl { border-radius: var(--radius-3xl); } -.rounded-full { border-radius: var(--radius-full); } - -/* Semantic border radius */ -.rounded-button { border-radius: var(--radius-button); } -.rounded-card { border-radius: var(--radius-card); } -.rounded-modal { border-radius: var(--radius-modal); } -.rounded-input { border-radius: var(--radius-input); } - -/* ✅ MAX WIDTH UTILITIES - * ======================= - * Consistent content width constraints - */ - -.max-w-xs { max-width: var(--max-width-xs); } -.max-w-sm { max-width: var(--max-width-sm); } -.max-w-md { max-width: var(--max-width-md); } -.max-w-lg { max-width: var(--max-width-lg); } -.max-w-xl { max-width: var(--max-width-xl); } -.max-w-2xl { max-width: var(--max-width-2xl); } -.max-w-3xl { max-width: var(--max-width-3xl); } -.max-w-4xl { max-width: var(--max-width-4xl); } -.max-w-5xl { max-width: var(--max-width-5xl); } -.max-w-6xl { max-width: var(--max-width-6xl); } -.max-w-7xl { max-width: var(--max-width-7xl); } -.max-w-full { max-width: var(--max-width-full); } -.max-w-prose { max-width: var(--max-width-prose); } - -/* Semantic max width */ -.max-w-content { max-width: var(--max-width-content); } -.max-w-sidebar { max-width: var(--max-width-sidebar); } -.max-w-modal { max-width: var(--max-width-modal); } -.max-w-form { max-width: var(--max-width-form); } - -/* ✅ RESPONSIVE PATTERNS - * ======================= - * Mobile-first responsive design patterns - */ - -@media (min-width: 640px) { - .sm\:container { - max-width: var(--max-width-screen-sm); - } - - .sm\:section { - padding-top: var(--space-16); - padding-bottom: var(--space-16); - } - - .sm\:padding-lg { - padding: var(--component-padding-lg); - } -} - -@media (min-width: 768px) { - .md\:container { - max-width: var(--max-width-screen-md); - } - - .md\:section { - padding-top: var(--space-20); - padding-bottom: var(--space-20); - } - - .md\:padding-xl { - padding: var(--component-padding-xl); - } - - .md\:grid-2 { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (min-width: 1024px) { - .lg\:container { - max-width: var(--max-width-screen-lg); - } - - .lg\:section { - padding-top: var(--space-24); - padding-bottom: var(--space-24); - } - - .lg\:grid-3 { - grid-template-columns: repeat(3, 1fr); - } -} - -@media (min-width: 1280px) { - .xl\:container { - max-width: var(--max-width-screen-xl); - } - - .xl\:grid-4 { - grid-template-columns: repeat(4, 1fr); - } -} - -@media (min-width: 1536px) { - .\32xl\:container { - max-width: var(--max-width-screen-2xl); - } -} - -/* ✅ CONTENT FLOW PATTERNS - * ========================= - * Typography and content spacing patterns - */ - -/* Prose content */ -.prose { - max-width: var(--max-width-prose); - line-height: 1.7; -} - -.prose > * + * { - margin-top: var(--space-4); -} - -.prose h1, -.prose h2, -.prose h3, -.prose h4, -.prose h5, -.prose h6 { - margin-top: var(--space-8); - margin-bottom: var(--space-4); -} - -.prose h1:first-child, -.prose h2:first-child, -.prose h3:first-child, -.prose h4:first-child, -.prose h5:first-child, -.prose h6:first-child { - margin-top: 0; -} - -.prose p + h1, -.prose p + h2, -.prose p + h3 { - margin-top: var(--space-12); -} - -.prose p + h4, -.prose p + h5, -.prose p + h6 { - margin-top: var(--space-8); -} - -/* List spacing */ -.prose ul, -.prose ol { - padding-left: var(--space-6); -} - -.prose li + li { - margin-top: var(--space-2); -} - -/* ✅ ACCESSIBILITY ENHANCEMENTS - * ============================== - * Spacing and layout for accessibility - */ - -/* Focus spacing */ -.focus-spacing:focus-visible { - outline-offset: var(--space-1); -} - -/* Touch target sizing */ -.touch-target { - min-height: 44px; - min-width: 44px; - padding: var(--space-2); -} - -/* Screen reader spacing */ -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -/* ✅ PRINT OPTIMIZATIONS - * ======================= - * Layout adjustments for print media - */ - -@media print { - .section { - padding-top: var(--space-6); - padding-bottom: var(--space-6); - } - - .container { - padding-left: 0; - padding-right: 0; - } - - .stack > * + * { - margin-top: var(--space-3); - } -} \ No newline at end of file diff --git a/assets/css/architecture/loading-states.css b/assets/css/architecture/loading-states.css deleted file mode 100644 index a28de5d..0000000 --- a/assets/css/architecture/loading-states.css +++ /dev/null @@ -1,570 +0,0 @@ -/* đŸŽ¯ Universal Loading States System - * =================================== - * - * This file centralizes all loading patterns, skeletons, and async state - * management to ensure consistent loading experiences across components. - */ - -:root { - /* ✨ LOADING TIMING TOKENS */ - --loading-duration-fast: 1s; - --loading-duration-normal: 1.5s; - --loading-duration-slow: 2s; - --loading-pulse-duration: 2s; - --loading-shimmer-duration: 1.5s; - - /* ✨ LOADING VISUAL TOKENS */ - --loading-opacity: 0.6; - --loading-blur: blur(1px); - --loading-grayscale: grayscale(30%); - --loading-backdrop: rgba(255, 255, 255, 0.8); - --loading-spinner-size: 2rem; - --loading-spinner-border: 2px; - - /* ✨ SKELETON TOKENS */ - --skeleton-bg-base: rgba(var(--color-text-primary-rgb, 0, 0, 0), 0.1); - --skeleton-bg-shimmer: rgba(var(--color-text-primary-rgb, 0, 0, 0), 0.2); - --skeleton-border-radius: 0.25rem; - --skeleton-height-text: 1rem; - --skeleton-height-title: 1.5rem; - --skeleton-height-button: 2.5rem; - --skeleton-height-avatar: 3rem; - - /* ✨ SHIMMER GRADIENT */ - --shimmer-gradient: linear-gradient( - 90deg, - var(--skeleton-bg-base) 25%, - var(--skeleton-bg-shimmer) 50%, - var(--skeleton-bg-base) 75% - ); - - /* ✨ PULSE GRADIENT */ - --pulse-gradient: linear-gradient( - 45deg, - rgba(var(--color-brand-rgb), 0.1) 0%, - rgba(var(--color-brand-rgb), 0.3) 50%, - rgba(var(--color-brand-rgb), 0.1) 100% - ); -} - -/* 🌙 DARK MODE LOADING ADJUSTMENTS */ -.dark { - --loading-backdrop: rgba(0, 0, 0, 0.8); - --skeleton-bg-base: rgba(255, 255, 255, 0.1); - --skeleton-bg-shimmer: rgba(255, 255, 255, 0.2); - - --shimmer-gradient: linear-gradient( - 90deg, - var(--skeleton-bg-base) 25%, - var(--skeleton-bg-shimmer) 50%, - var(--skeleton-bg-base) 75% - ); -} - -/* ✅ LOADING STATE CLASSES - * ========================= - * Apply these classes to show loading states - */ - -/* Basic loading state */ -.loading { - opacity: var(--loading-opacity); - pointer-events: none; - cursor: wait; - transition: opacity var(--timing-fast) var(--easing-standard); -} - -/* Loading with blur effect */ -.loading-blur { - opacity: var(--loading-opacity); - filter: var(--loading-blur); - pointer-events: none; - cursor: wait; - transition: - opacity var(--timing-fast) var(--easing-standard), - filter var(--timing-fast) var(--easing-standard); -} - -/* Loading with grayscale effect */ -.loading-muted { - opacity: var(--loading-opacity); - filter: var(--loading-grayscale); - pointer-events: none; - cursor: wait; - transition: - opacity var(--timing-fast) var(--easing-standard), - filter var(--timing-fast) var(--easing-standard); -} - -/* Loading overlay */ -.loading-overlay { - position: relative; -} - -.loading-overlay::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: var(--loading-backdrop); - backdrop-filter: blur(2px); - z-index: var(--z-overlay); - opacity: 0; - pointer-events: none; - transition: opacity var(--timing-medium) var(--easing-standard); -} - -.loading-overlay.is-loading::before { - opacity: 1; - pointer-events: auto; -} - -/* ✅ SPINNER COMPONENTS - * ====================== - * Various spinner patterns - */ - -/* Basic spinner */ -.spinner { - width: var(--loading-spinner-size); - height: var(--loading-spinner-size); - border: var(--loading-spinner-border) solid rgba(var(--color-brand-rgb), 0.2); - border-top: var(--loading-spinner-border) solid var(--color-brand); - border-radius: 50%; - animation: spin var(--loading-duration-fast) linear infinite; - display: inline-block; -} - -.spinner-sm { - --loading-spinner-size: 1rem; - --loading-spinner-border: 1px; -} - -.spinner-lg { - --loading-spinner-size: 3rem; - --loading-spinner-border: 3px; -} - -/* Dots spinner */ -.spinner-dots { - display: inline-flex; - gap: 0.25rem; -} - -.spinner-dots::before, -.spinner-dots::after { - content: ''; - width: 0.5rem; - height: 0.5rem; - background: var(--color-brand); - border-radius: 50%; - animation: pulse var(--loading-pulse-duration) ease-in-out infinite; -} - -.spinner-dots::before { - animation-delay: 0s; -} - -.spinner-dots::after { - animation-delay: 0.5s; -} - -/* Pulse spinner */ -.spinner-pulse { - width: var(--loading-spinner-size); - height: var(--loading-spinner-size); - background: var(--color-brand); - border-radius: 50%; - animation: pulse var(--loading-pulse-duration) ease-in-out infinite; -} - -/* ✅ SKELETON COMPONENTS - * ======================= - * Skeleton loading patterns for different content types - */ - -/* Base skeleton */ -.skeleton { - background: var(--skeleton-bg-base); - border-radius: var(--skeleton-border-radius); - position: relative; - overflow: hidden; -} - -.skeleton::after { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: var(--shimmer-gradient); - animation: shimmer var(--loading-shimmer-duration) ease-in-out infinite; -} - -/* Skeleton variations */ -.skeleton-text { - height: var(--skeleton-height-text); - width: 100%; -} - -.skeleton-text-short { - width: 75%; -} - -.skeleton-text-long { - width: 90%; -} - -.skeleton-title { - height: var(--skeleton-height-title); - width: 60%; - margin-bottom: var(--space-2); -} - -.skeleton-button { - height: var(--skeleton-height-button); - width: 120px; - border-radius: var(--radius-button); -} - -.skeleton-avatar { - width: var(--skeleton-height-avatar); - height: var(--skeleton-height-avatar); - border-radius: 50%; -} - -.skeleton-card { - height: 200px; - border-radius: var(--radius-card); -} - -.skeleton-image { - height: 150px; - width: 100%; - border-radius: var(--radius-base); -} - -/* ✅ SKELETON LAYOUTS - * ==================== - * Complete skeleton layouts for common components - */ - -/* Article skeleton */ -.skeleton-article { - padding: var(--space-6); -} - -.skeleton-article .skeleton-title { - margin-bottom: var(--space-4); -} - -.skeleton-article .skeleton-text { - margin-bottom: var(--space-3); -} - -.skeleton-article .skeleton-text:last-child { - width: 65%; - margin-bottom: 0; -} - -/* Card skeleton */ -.skeleton-card-content { - padding: var(--space-4); -} - -.skeleton-card-content .skeleton-image { - margin-bottom: var(--space-4); -} - -.skeleton-card-content .skeleton-title { - margin-bottom: var(--space-3); -} - -.skeleton-card-content .skeleton-text { - margin-bottom: var(--space-2); -} - -/* List item skeleton */ -.skeleton-list-item { - display: flex; - align-items: center; - gap: var(--space-3); - padding: var(--space-3); -} - -.skeleton-list-item .skeleton-avatar { - flex-shrink: 0; -} - -.skeleton-list-item .skeleton-content { - flex: 1; -} - -.skeleton-list-item .skeleton-text { - margin-bottom: var(--space-1); -} - -.skeleton-list-item .skeleton-text:last-child { - width: 40%; - margin-bottom: 0; -} - -/* ✅ PROGRESSIVE LOADING - * ======================= - * Progressive reveal patterns - */ - -.progressive-load { - opacity: 0; - transform: var(--transform-slide-in-up); - transition: - opacity var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard); -} - -.progressive-load.loaded { - opacity: 1; - transform: var(--transform-translate-none); -} - -/* Staggered progressive loading */ -.progressive-load-stagger > * { - opacity: 0; - transform: var(--transform-slide-in-up); - transition: - opacity var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard); - transition-delay: calc(var(--reveal-stagger-delay) * var(--stagger-index, 0)); -} - -.progressive-load-stagger.loaded > * { - opacity: 1; - transform: var(--transform-translate-none); -} - -/* ✅ ASYNC OPERATION STATES - * ========================== - * Loading states for different async operations - */ - -/* Button loading states */ -.btn-loading { - position: relative; - color: transparent !important; - cursor: wait; - pointer-events: none; -} - -.btn-loading::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 1rem; - height: 1rem; - border: 2px solid rgba(255, 255, 255, 0.3); - border-top: 2px solid currentColor; - border-radius: 50%; - animation: spin var(--loading-duration-fast) linear infinite; -} - -/* Form loading states */ -.form-loading { - opacity: var(--loading-opacity); - pointer-events: none; -} - -.form-loading input, -.form-loading textarea, -.form-loading select { - cursor: wait; - background-color: var(--color-surface-muted); -} - -/* Content loading states */ -.content-loading { - min-height: 200px; - display: flex; - align-items: center; - justify-content: center; -} - -/* ✅ ERROR AND RETRY STATES - * ========================== - * Loading error and retry patterns - */ - -.loading-error { - padding: var(--space-6); - text-align: center; - color: var(--color-text-secondary); -} - -.loading-error-icon { - width: 3rem; - height: 3rem; - margin: 0 auto var(--space-4); - opacity: 0.5; -} - -.retry-button { - margin-top: var(--space-4); -} - -/* ✅ KEYFRAME ANIMATIONS - * ======================= - * Loading-specific animations - */ - -@keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@keyframes pulse { - 0%, 100% { - opacity: 0.3; - transform: scale(1); - } - 50% { - opacity: 1; - transform: scale(1.1); - } -} - -@keyframes shimmer { - 0% { - left: -100%; - } - 100% { - left: 100%; - } -} - -@keyframes fade-pulse { - 0%, 100% { - opacity: 0.3; - } - 50% { - opacity: 0.7; - } -} - -/* ✅ ACCESSIBILITY ENHANCEMENTS - * ============================== - * Loading states for screen readers and reduced motion - */ - -/* Screen reader announcements */ -.sr-loading-text { - position: absolute; - left: -10000px; - width: 1px; - height: 1px; - overflow: hidden; -} - -/* Reduced motion support */ -@media (prefers-reduced-motion: reduce) { - .spinner, - .spinner-pulse, - .skeleton::after { - animation: fade-pulse var(--loading-duration-slow) ease-in-out infinite; - } - - .progressive-load, - .progressive-load-stagger > * { - transition: opacity var(--timing-fast) ease; - transform: none !important; - } -} - -/* High contrast mode */ -@media (prefers-contrast: high) { - .skeleton { - background: rgba(0, 0, 0, 0.2); - border: 1px solid rgba(0, 0, 0, 0.3); - } - - .dark .skeleton { - background: rgba(255, 255, 255, 0.2); - border: 1px solid rgba(255, 255, 255, 0.3); - } -} - -/* ✅ COMPONENT INTEGRATION - * ========================= - * Integration with existing component systems - */ - -/* Loading states for data attributes */ -[data-loading="true"] { - opacity: var(--loading-opacity); - pointer-events: none; - cursor: wait; -} - -[data-loading-type="skeleton"] { - background: var(--skeleton-bg-base); - border-radius: var(--skeleton-border-radius); - position: relative; - overflow: hidden; -} - -[data-loading-type="skeleton"]::after { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: var(--shimmer-gradient); - animation: shimmer var(--loading-shimmer-duration) ease-in-out infinite; -} - -/* Loading states for component states */ -[data-component-state="loading"] { - opacity: var(--loading-opacity); - filter: var(--loading-blur); - pointer-events: none; - cursor: wait; -} - -/* ✅ PERFORMANCE OPTIMIZATIONS - * ============================= - * Hardware acceleration for loading animations - */ - -.spinner, -.skeleton::after, -.progressive-load { - will-change: transform, opacity; - transform: translateZ(0); /* Force hardware acceleration */ -} - -/* ✅ UTILITY CLASSES - * =================== - * Quick loading state utilities - */ - -.is-loading { opacity: var(--loading-opacity); pointer-events: none; } -.is-skeleton { background: var(--skeleton-bg-base); } -.has-shimmer { position: relative; overflow: hidden; } -.has-shimmer::after { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: var(--shimmer-gradient); - animation: shimmer var(--loading-shimmer-duration) ease-in-out infinite; -} \ No newline at end of file diff --git a/assets/css/architecture/typography-system.css b/assets/css/architecture/typography-system.css deleted file mode 100644 index 0ae70f2..0000000 --- a/assets/css/architecture/typography-system.css +++ /dev/null @@ -1,54 +0,0 @@ -/* Typography System - Base type scales and article text - Centralizes type sizing tokens and base rules. */ - -/* Global Headings */ -h1 { - font-size: clamp(1.5rem, 3.5vw, 1.75rem); /* 24px–28px */ - line-height: 1.2; - font-weight: 900; - letter-spacing: -0.025em; - word-wrap: break-word; -} - -h2 { - font-size: clamp(1.25rem, 3vw, 1.375rem); /* 20px–22px */ - line-height: 1.33; - font-weight: 700; - letter-spacing: -0.025em; - word-wrap: break-word; -} - -h3 { - font-size: clamp(1.0625rem, 2.5vw, 1.1875rem); /* 17px–19px */ - line-height: 1.4; - font-weight: 700; - letter-spacing: -0.015em; - word-wrap: break-word; -} - -h4 { letter-spacing: -0.01em; } - -/* Body */ -body { - font-size: clamp(1rem, 2vw, 1.0625rem); /* 16px–17px */ - line-height: 1.6; - letter-spacing: 0.01em; -} - -/* Brand font on main */ -main { font-family: var(--font-family-brand, inherit); } - -/* Article Content Typography */ -.article-content { - color: var(--color-text-primary); - font-size: 1rem; /* mobile-first */ - line-height: 1.65; /* mobile-first */ - letter-spacing: 0.01em; -} - -@media (min-width: 768px) { - .article-content { - font-size: 1.0625rem; /* 17px */ - line-height: 1.6; - } -} \ No newline at end of file diff --git a/assets/css/colors-enterprise.css b/assets/css/colors-enterprise.css deleted file mode 100644 index 566f113..0000000 --- a/assets/css/colors-enterprise.css +++ /dev/null @@ -1,128 +0,0 @@ -:root { - --primary-gradient-color: #ffffff; - --secondary-gradient-color: rgba(99, 102, 241, 0.1); - - /* Enterprise Brand Colors */ - --color-brand: #6366f1; /* primary color - Enterprise indigo */ - --color-brand-rgb: 99, 102, 241; /* RGB values for alpha transparency */ - --color-brand-1: #4338ca; /* secondary color - darker indigo */ - --color-brand-2: #5145cd; /* tertiary color - mid indigo */ - --color-brand-3: #86a6cf; /* note color */ - --color-brand-4: #ADD9F4; /* tip color */ - --color-brand-5: #059669; /* security color - enterprise green */ - --color-brand-6: #d97706; /* warning color - enterprise amber */ - --color-brand-7: #dc2626; /* danger color - enterprise red */ - - /* Semantic Color System for Light Mode */ - --color-text-primary: #111827; - --color-text-secondary: #6b7280; - --color-text-tertiary: #9ca3af; - --color-text-inverse: #ffffff; - - --color-bg-primary: #ffffff; - --color-bg-secondary: #f9fafb; - --color-bg-tertiary: #f3f4f6; - --color-bg-inverse: #111827; - - --color-border-primary: #e5e7eb; - --color-border-secondary: #d1d5db; - --color-border-focus: var(--color-brand); - - --color-surface: #ffffff; - --color-surface-hover: #f9fafb; - --color-surface-active: #f3f4f6; - - /* Interactive states */ - --color-hover: rgba(var(--color-brand-rgb), 0.1); - --color-active: rgba(var(--color-brand-rgb), 0.2); - --color-focus: rgba(var(--color-brand-rgb), 0.3); - - /* Semantic status colors (light) */ - --color-success: #10b981; --color-success-rgb: 16, 185, 129; - --color-info: #3b82f6; --color-info-rgb: 59, 130, 246; - --color-warning: #f59e0b; --color-warning-rgb: 245, 158, 11; - --color-danger: #ef4444; --color-danger-rgb: 239, 68, 68; - --color-note: #6366f1; --color-note-rgb: 99, 102, 241; - --color-tip: #22c55e; --color-tip-rgb: 34, 197, 94; - --color-security: #a855f7; --color-security-rgb: 168, 85, 247; - --color-snack: #ec4899; --color-snack-rgb: 236, 72, 153; - - /* HTTP method colors (light) */ - --http-get-bg: #22c55e; --http-get-text: #ffffff; - --http-post-bg: #3b82f6; --http-post-text: #ffffff; - --http-put-bg: #f59e0b; --http-put-text: #ffffff; - --http-patch-bg: #8b5cf6; --http-patch-text: #ffffff; - --http-delete-bg: #ef4444; --http-delete-text: #ffffff; - --http-head-bg: #6b7280; --http-head-text: #ffffff; - --http-options-bg: #9333ea; --http-options-text: #ffffff; - - /* Response status colors (light) */ - --status-2xx-bg: #22c55e; --status-2xx-text: #ffffff; - --status-3xx-bg: #3b82f6; --status-3xx-text: #ffffff; - --status-4xx-bg: #f59e0b; --status-4xx-text: #ffffff; - --status-5xx-bg: #ef4444; --status-5xx-text: #ffffff; - --status-dxx-bg: #6b7280; --status-dxx-text: #ffffff; - - /* Schema type badge colors (light) */ - --type-string-bg: rgba(34, 197, 94, 0.1); --type-string-text: #059669; - --type-number-bg: rgba(59, 130, 246, 0.1); --type-number-text: #2563eb; - --type-integer-bg: rgba(59, 130, 246, 0.1); --type-integer-text: #2563eb; - --type-boolean-bg: rgba(168, 85, 247, 0.1); --type-boolean-text: #7c3aed; - --type-array-bg: rgba(245, 158, 11, 0.1); --type-array-text: #d97706; - --type-object-bg: rgba(239, 68, 68, 0.1); --type-object-text: #dc2626; - --type-null-bg: rgba(107, 114, 128, 0.1); --type-null-text: #4b5563; -} - -.dark { - --primary-gradient-color: rgba(99, 102, 241, 0.3); - --secondary-gradient-color: #0f1419; - - /* Semantic Color System for Dark Mode - Enterprise Theme */ - --color-text-primary: #f9fafb; - --color-text-secondary: #d1d5db; - --color-text-tertiary: #9ca3af; - --color-text-inverse: #111827; - - --color-bg-primary: #0f1419; - --color-bg-secondary: #1a202c; - --color-bg-tertiary: #2d3748; - --color-bg-inverse: #ffffff; - - --color-border-primary: #2d3748; - --color-border-secondary: #4a5568; - --color-border-focus: var(--color-brand); - - --color-surface: #1a202c; - --color-surface-hover: #2d3748; - --color-surface-active: #4a5568; - - /* Interactive states for dark mode */ - --color-hover: rgba(var(--color-brand-rgb), 0.2); - --color-active: rgba(var(--color-brand-rgb), 0.3); - --color-focus: rgba(var(--color-brand-rgb), 0.4); - - /* HTTP method colors (dark) */ - --http-get-bg: #059669; --http-get-text: #ffffff; - --http-post-bg: #2563eb; --http-post-text: #ffffff; - --http-put-bg: #d97706; --http-put-text: #ffffff; - --http-patch-bg: #7c3aed; --http-patch-text: #ffffff; - --http-delete-bg: #dc2626; --http-delete-text: #ffffff; - --http-head-bg: #4b5563; --http-head-text: #ffffff; - --http-options-bg: #7c3aed; --http-options-text: #ffffff; - - /* Response status colors (dark) */ - --status-2xx-bg: #059669; --status-2xx-text: #ffffff; - --status-3xx-bg: #2563eb; --status-3xx-text: #ffffff; - --status-4xx-bg: #d97706; --status-4xx-text: #111827; - --status-5xx-bg: #dc2626; --status-5xx-text: #ffffff; - --status-dxx-bg: #4b5563; --status-dxx-text: #ffffff; - - /* Schema type badge colors (dark) */ - --type-string-bg: rgba(34, 197, 94, 0.15); --type-string-text: #10b981; - --type-number-bg: rgba(59, 130, 246, 0.15); --type-number-text: #3b82f6; - --type-integer-bg: rgba(59, 130, 246, 0.15); --type-integer-text: #3b82f6; - --type-boolean-bg: rgba(168, 85, 247, 0.15); --type-boolean-text: #8b5cf6; - --type-array-bg: rgba(245, 158, 11, 0.15); --type-array-text: #f59e0b; - --type-object-bg: rgba(239, 68, 68, 0.15); --type-object-text: #ef4444; - --type-null-bg: rgba(107, 114, 128, 0.15); --type-null-text: #9ca3af; -} \ No newline at end of file diff --git a/assets/css/colors-nvidia.css b/assets/css/colors-nvidia.css deleted file mode 100644 index 50081fd..0000000 --- a/assets/css/colors-nvidia.css +++ /dev/null @@ -1,132 +0,0 @@ -:root { - --primary-gradient-color: #ffffff; - --secondary-gradient-color: rgba(118, 185, 0, 0.1); - - /* NVIDIA Brand Colors - Official Palette */ - --color-brand: #76B900; /* primary color - NVIDIA green */ - --color-brand-rgb: 118, 185, 0; /* RGB values for alpha transparency */ - --color-brand-1: #265600; /* secondary color - NVIDIA green dark 2 */ - --color-brand-2: #3f8500; /* tertiary color - NVIDIA green dark 1 */ - --color-brand-3: #0074df; /* note color - NVIDIA blue */ - --color-brand-4: #7cd7fe; /* tip color - NVIDIA blue light 1 */ - --color-brand-5: #76B900; /* security color - NVIDIA green */ - --color-brand-6: #f9c500; /* warning color - NVIDIA yellow */ - --color-brand-7: #e52020; /* danger color - NVIDIA red */ - - /* NVIDIA Font Families */ - --font-family-brand: NVIDIA, Arial, Helvetica, sans-serif; - --font-family-mono: RobotoMono, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; - - /* Semantic Color System for Light Mode - NVIDIA Grays */ - --color-text-primary: #313131; /* NVIDIA gray dark 2 */ - --color-text-secondary: #757575; /* NVIDIA gray */ - --color-text-tertiary: #a7a7a7; /* NVIDIA gray light 1 */ - --color-text-inverse: #ffffff; - - --color-bg-primary: #ffffff; - --color-bg-secondary: #f9fafb; - --color-bg-tertiary: #f3f4f6; - --color-bg-inverse: #111827; - - --color-border-primary: #e0e0e0; /* NVIDIA gray light 2 */ - --color-border-secondary: #a7a7a7; /* NVIDIA gray light 1 */ - --color-border-focus: var(--color-brand); - - --color-surface: #ffffff; - --color-surface-hover: #f9fafb; - --color-surface-active: #f3f4f6; - - /* Interactive states */ - --color-hover: rgba(var(--color-brand-rgb), 0.1); - --color-active: rgba(var(--color-brand-rgb), 0.2); - --color-focus: rgba(var(--color-brand-rgb), 0.3); - - /* Semantic status colors (light) */ - --color-success: #10b981; --color-success-rgb: 16, 185, 129; - --color-info: #3b82f6; --color-info-rgb: 59, 130, 246; - --color-warning: #f59e0b; --color-warning-rgb: 245, 158, 11; - --color-danger: #ef4444; --color-danger-rgb: 239, 68, 68; - --color-note: #6366f1; --color-note-rgb: 99, 102, 241; - --color-tip: #22c55e; --color-tip-rgb: 34, 197, 94; - --color-security: #a855f7; --color-security-rgb: 168, 85, 247; - --color-snack: #ec4899; --color-snack-rgb: 236, 72, 153; - - /* HTTP method colors (light) */ - --http-get-bg: #22c55e; --http-get-text: #ffffff; - --http-post-bg: #3b82f6; --http-post-text: #ffffff; - --http-put-bg: #f59e0b; --http-put-text: #ffffff; - --http-patch-bg: #8b5cf6; --http-patch-text: #ffffff; - --http-delete-bg: #ef4444; --http-delete-text: #ffffff; - --http-head-bg: #6b7280; --http-head-text: #ffffff; - --http-options-bg: #9333ea; --http-options-text: #ffffff; - - /* Response status colors (light) */ - --status-2xx-bg: #22c55e; --status-2xx-text: #ffffff; - --status-3xx-bg: #3b82f6; --status-3xx-text: #ffffff; - --status-4xx-bg: #f59e0b; --status-4xx-text: #ffffff; - --status-5xx-bg: #ef4444; --status-5xx-text: #ffffff; - --status-dxx-bg: #6b7280; --status-dxx-text: #ffffff; - - /* Schema type badge colors (light) */ - --type-string-bg: rgba(34, 197, 94, 0.1); --type-string-text: #059669; - --type-number-bg: rgba(59, 130, 246, 0.1); --type-number-text: #2563eb; - --type-integer-bg: rgba(59, 130, 246, 0.1); --type-integer-text: #2563eb; - --type-boolean-bg: rgba(168, 85, 247, 0.1); --type-boolean-text: #7c3aed; - --type-array-bg: rgba(245, 158, 11, 0.1); --type-array-text: #d97706; - --type-object-bg: rgba(239, 68, 68, 0.1); --type-object-text: #dc2626; - --type-null-bg: rgba(107, 114, 128, 0.1); --type-null-text: #4b5563; -} - -.dark { - --primary-gradient-color: rgba(118, 185, 0, 0.3); - --secondary-gradient-color: #0f0f0f; - - /* Semantic Color System for Dark Mode - NVIDIA Theme */ - --color-text-primary: #f9fafb; - --color-text-secondary: #d1d5db; - --color-text-tertiary: #9ca3af; - --color-text-inverse: #111827; - - --color-bg-primary: #0f0f0f; - --color-bg-secondary: #1a1a1a; - --color-bg-tertiary: #262626; - --color-bg-inverse: #ffffff; - - --color-border-primary: #313131; /* NVIDIA gray dark 2 */ - --color-border-secondary: #4b4b4b; /* NVIDIA gray dark 1 */ - --color-border-focus: var(--color-brand); - - --color-surface: #1a1a1a; - --color-surface-hover: #262626; - --color-surface-active: #313131; /* NVIDIA gray dark 2 */ - - /* Interactive states for dark mode */ - --color-hover: rgba(var(--color-brand-rgb), 0.2); - --color-active: rgba(var(--color-brand-rgb), 0.3); - --color-focus: rgba(var(--color-brand-rgb), 0.4); - - /* HTTP method colors (dark) */ - --http-get-bg: #059669; --http-get-text: #ffffff; - --http-post-bg: #2563eb; --http-post-text: #ffffff; - --http-put-bg: #d97706; --http-put-text: #ffffff; - --http-patch-bg: #7c3aed; --http-patch-text: #ffffff; - --http-delete-bg: #dc2626; --http-delete-text: #ffffff; - --http-head-bg: #4b5563; --http-head-text: #ffffff; - --http-options-bg: #7c3aed; --http-options-text: #ffffff; - - /* Response status colors (dark) */ - --status-2xx-bg: #059669; --status-2xx-text: #ffffff; - --status-3xx-bg: #2563eb; --status-3xx-text: #ffffff; - --status-4xx-bg: #d97706; --status-4xx-text: #111827; - --status-5xx-bg: #dc2626; --status-5xx-text: #ffffff; - --status-dxx-bg: #4b5563; --status-dxx-text: #ffffff; - - /* Schema type badge colors (dark) */ - --type-string-bg: rgba(34, 197, 94, 0.15); --type-string-text: #10b981; - --type-number-bg: rgba(59, 130, 246, 0.15); --type-number-text: #3b82f6; - --type-integer-bg: rgba(59, 130, 246, 0.15); --type-integer-text: #3b82f6; - --type-boolean-bg: rgba(168, 85, 247, 0.15); --type-boolean-text: #8b5cf6; - --type-array-bg: rgba(245, 158, 11, 0.15); --type-array-text: #f59e0b; - --type-object-bg: rgba(239, 68, 68, 0.15); --type-object-text: #ef4444; - --type-null-bg: rgba(107, 114, 128, 0.15); --type-null-text: #9ca3af; -} \ No newline at end of file diff --git a/assets/css/colors-opensource.css b/assets/css/colors-opensource.css deleted file mode 100644 index 1d39c1f..0000000 --- a/assets/css/colors-opensource.css +++ /dev/null @@ -1,128 +0,0 @@ -:root { - --primary-gradient-color: #ffffff; - --secondary-gradient-color: rgba(138, 171, 193, 0.5); - - /* HPE Brand Colors */ - --color-brand: #8ab5c1; /*primary color*/ - --color-brand-rgb: 138, 181, 193; /*RGB values for alpha transparency*/ - --color-brand-1: rgba(131, 122, 117, 0.667); /*secondary color*/ - --color-brand-2: #acc18a; /*tertiary color*/ - --color-brand-3: #86a6cf; /*note color*/ - --color-brand-4: #ADD9F4; /*tip color */ - --color-brand-5: #dbd985; /*security color */ - --color-brand-6: #d4ac84; /*warning color */ - --color-brand-7: #F3B3A6; /*danger color */ - - /* Semantic Color System for Light Mode */ - --color-text-primary: #111827; - --color-text-secondary: #6b7280; - --color-text-tertiary: #9ca3af; - --color-text-inverse: #ffffff; - - --color-bg-primary: #ffffff; - --color-bg-secondary: #f9fafb; - --color-bg-tertiary: #f3f4f6; - --color-bg-inverse: #111827; - - --color-border-primary: #e5e7eb; - --color-border-secondary: #d1d5db; - --color-border-focus: var(--color-brand); - - --color-surface: #ffffff; - --color-surface-hover: #f9fafb; - --color-surface-active: #f3f4f6; - - /* Interactive states */ - --color-hover: rgba(var(--color-brand-rgb), 0.1); - --color-active: rgba(var(--color-brand-rgb), 0.2); - --color-focus: rgba(var(--color-brand-rgb), 0.3); - - /* Semantic status colors (light) */ - --color-success: #10b981; --color-success-rgb: 16, 185, 129; - --color-info: #3b82f6; --color-info-rgb: 59, 130, 246; - --color-warning: #f59e0b; --color-warning-rgb: 245, 158, 11; - --color-danger: #ef4444; --color-danger-rgb: 239, 68, 68; - --color-note: #6366f1; --color-note-rgb: 99, 102, 241; - --color-tip: #22c55e; --color-tip-rgb: 34, 197, 94; - --color-security: #a855f7; --color-security-rgb: 168, 85, 247; - --color-snack: #ec4899; --color-snack-rgb: 236, 72, 153; - - /* HTTP method colors (light) */ - --http-get-bg: #22c55e; --http-get-text: #ffffff; - --http-post-bg: #3b82f6; --http-post-text: #ffffff; - --http-put-bg: #f59e0b; --http-put-text: #ffffff; - --http-patch-bg: #8b5cf6; --http-patch-text: #ffffff; - --http-delete-bg: #ef4444; --http-delete-text: #ffffff; - --http-head-bg: #6b7280; --http-head-text: #ffffff; - --http-options-bg: #9333ea; --http-options-text: #ffffff; - - /* Response status colors (light) */ - --status-2xx-bg: #22c55e; --status-2xx-text: #ffffff; - --status-3xx-bg: #3b82f6; --status-3xx-text: #ffffff; - --status-4xx-bg: #f59e0b; --status-4xx-text: #ffffff; - --status-5xx-bg: #ef4444; --status-5xx-text: #ffffff; - --status-dxx-bg: #6b7280; --status-dxx-text: #ffffff; - - /* Schema type badge colors (light) */ - --type-string-bg: rgba(34, 197, 94, 0.1); --type-string-text: #059669; - --type-number-bg: rgba(59, 130, 246, 0.1); --type-number-text: #2563eb; - --type-integer-bg: rgba(59, 130, 246, 0.1); --type-integer-text: #2563eb; - --type-boolean-bg: rgba(168, 85, 247, 0.1); --type-boolean-text: #7c3aed; - --type-array-bg: rgba(245, 158, 11, 0.1); --type-array-text: #d97706; - --type-object-bg: rgba(239, 68, 68, 0.1); --type-object-text: #dc2626; - --type-null-bg: rgba(107, 114, 128, 0.1); --type-null-text: #4b5563; -} - -.dark { - --primary-gradient-color: rgba(138, 152, 193, 0.3); - --secondary-gradient-color: #1a1a1a; - - /* Semantic Color System for Dark Mode - Open Source Theme */ - --color-text-primary: #f9fafb; - --color-text-secondary: #d1d5db; - --color-text-tertiary: #9ca3af; - --color-text-inverse: #111827; - - --color-bg-primary: #1a1a1a; - --color-bg-secondary: #2a2a2a; - --color-bg-tertiary: #3a3a3a; - --color-bg-inverse: #ffffff; - - --color-border-primary: #3a3a3a; - --color-border-secondary: #4a4a4a; - --color-border-focus: var(--color-brand); - - --color-surface: #2a2a2a; - --color-surface-hover: #3a3a3a; - --color-surface-active: #4a4a4a; - - /* Interactive states for dark mode */ - --color-hover: rgba(var(--color-brand-rgb), 0.2); - --color-active: rgba(var(--color-brand-rgb), 0.3); - --color-focus: rgba(var(--color-brand-rgb), 0.4); - - /* HTTP method colors (dark) */ - --http-get-bg: #059669; --http-get-text: #ffffff; - --http-post-bg: #2563eb; --http-post-text: #ffffff; - --http-put-bg: #d97706; --http-put-text: #ffffff; - --http-patch-bg: #7c3aed; --http-patch-text: #ffffff; - --http-delete-bg: #dc2626; --http-delete-text: #ffffff; - --http-head-bg: #4b5563; --http-head-text: #ffffff; - --http-options-bg: #7c3aed; --http-options-text: #ffffff; - - /* Response status colors (dark) */ - --status-2xx-bg: #059669; --status-2xx-text: #ffffff; - --status-3xx-bg: #2563eb; --status-3xx-text: #ffffff; - --status-4xx-bg: #d97706; --status-4xx-text: #111827; - --status-5xx-bg: #dc2626; --status-5xx-text: #ffffff; - --status-dxx-bg: #4b5563; --status-dxx-text: #ffffff; - - /* Schema type badge colors (dark) */ - --type-string-bg: rgba(34, 197, 94, 0.15); --type-string-text: #10b981; - --type-number-bg: rgba(59, 130, 246, 0.15); --type-number-text: #3b82f6; - --type-integer-bg: rgba(59, 130, 246, 0.15); --type-integer-text: #3b82f6; - --type-boolean-bg: rgba(168, 85, 247, 0.15); --type-boolean-text: #8b5cf6; - --type-array-bg: rgba(245, 158, 11, 0.15); --type-array-text: #f59e0b; - --type-object-bg: rgba(239, 68, 68, 0.15); --type-object-text: #ef4444; - --type-null-bg: rgba(107, 114, 128, 0.15); --type-null-text: #9ca3af; -} diff --git a/assets/css/colors.css b/assets/css/colors.css deleted file mode 100644 index ad78b78..0000000 --- a/assets/css/colors.css +++ /dev/null @@ -1,129 +0,0 @@ -:root { - --primary-gradient-color: #ffffff; - --secondary-gradient-color: rgb(138, 193, 149, 0.500); - - /* Default Brand Colors */ - --color-brand: #8ac195; /*primary color*/ - --color-brand-rgb: 138, 193, 149; /*RGB values for alpha transparency*/ - --color-brand-1: rgba(131, 122, 117, 0.667); /*secondary color*/ - --color-brand-2: #acc18a; /*tertiary color*/ - --color-brand-3: #86a6cf; /*note color*/ - --color-brand-4: #ADD9F4; /*tip color */ - --color-brand-5: #dbd985; /*security color */ - --color-brand-6: #d4ac84; /*warning color */ - --color-brand-7: #F3B3A6; /*danger color */ - - /* Semantic Color System for Light Mode */ - --color-text-primary: #111827; - --color-text-secondary: #6b7280; - --color-text-tertiary: #9ca3af; - --color-text-inverse: #ffffff; - - --color-bg-primary: #ffffff; - --color-bg-secondary: #f9fafb; - --color-bg-tertiary: #f3f4f6; - --color-bg-inverse: #111827; - - --color-border-primary: #e5e7eb; - --color-border-secondary: #d1d5db; - --color-border-focus: var(--color-brand); - - --color-surface: #ffffff; - --color-surface-hover: #f9fafb; - --color-surface-active: #f3f4f6; - - /* Interactive states */ - --color-hover: rgba(var(--color-brand-rgb), 0.1); - --color-active: rgba(var(--color-brand-rgb), 0.2); - --color-focus: rgba(var(--color-brand-rgb), 0.3); - - /* Semantic status colors (light) */ - --color-success: #10b981; --color-success-rgb: 16, 185, 129; - --color-info: #3b82f6; --color-info-rgb: 59, 130, 246; - --color-warning: #f59e0b; --color-warning-rgb: 245, 158, 11; - --color-danger: #ef4444; --color-danger-rgb: 239, 68, 68; - /* Extended status aliases */ - --color-note: #6366f1; --color-note-rgb: 99, 102, 241; - --color-tip: #22c55e; --color-tip-rgb: 34, 197, 94; - --color-security: #a855f7; --color-security-rgb: 168, 85, 247; - --color-snack: #ec4899; --color-snack-rgb: 236, 72, 153; - - /* HTTP method colors (light) */ - --http-get-bg: #22c55e; --http-get-text: #ffffff; - --http-post-bg: #3b82f6; --http-post-text: #ffffff; - --http-put-bg: #f59e0b; --http-put-text: #ffffff; - --http-patch-bg: #8b5cf6; --http-patch-text: #ffffff; - --http-delete-bg: #ef4444; --http-delete-text: #ffffff; - --http-head-bg: #6b7280; --http-head-text: #ffffff; - --http-options-bg: #9333ea; --http-options-text: #ffffff; - - /* Response status colors (light) */ - --status-2xx-bg: #22c55e; --status-2xx-text: #ffffff; - --status-3xx-bg: #3b82f6; --status-3xx-text: #ffffff; - --status-4xx-bg: #f59e0b; --status-4xx-text: #ffffff; - --status-5xx-bg: #ef4444; --status-5xx-text: #ffffff; - --status-dxx-bg: #6b7280; --status-dxx-text: #ffffff; - - /* Schema type badge colors (light) */ - --type-string-bg: rgba(34, 197, 94, 0.1); --type-string-text: #059669; - --type-number-bg: rgba(59, 130, 246, 0.1); --type-number-text: #2563eb; - --type-integer-bg: rgba(59, 130, 246, 0.1); --type-integer-text: #2563eb; - --type-boolean-bg: rgba(168, 85, 247, 0.1); --type-boolean-text: #7c3aed; - --type-array-bg: rgba(245, 158, 11, 0.1); --type-array-text: #d97706; - --type-object-bg: rgba(239, 68, 68, 0.1); --type-object-text: #dc2626; - --type-null-bg: rgba(107, 114, 128, 0.1); --type-null-text: #4b5563; -} - -.dark { - --primary-gradient-color: rgb(138, 193, 149, 0.300); - --secondary-gradient-color: #111827; - - /* Semantic Color System for Dark Mode */ - --color-text-primary: #f9fafb; - --color-text-secondary: #d1d5db; - --color-text-tertiary: #9ca3af; - --color-text-inverse: #111827; - - --color-bg-primary: #111827; - --color-bg-secondary: #1f2937; - --color-bg-tertiary: #374151; - --color-bg-inverse: #ffffff; - - --color-border-primary: #374151; - --color-border-secondary: #4b5563; - --color-border-focus: var(--color-brand); - - --color-surface: #1f2937; - --color-surface-hover: #374151; - --color-surface-active: #4b5563; - - /* Interactive states for dark mode */ - --color-hover: rgba(var(--color-brand-rgb), 0.2); - --color-active: rgba(var(--color-brand-rgb), 0.3); - --color-focus: rgba(var(--color-brand-rgb), 0.4); - - /* HTTP method colors (dark) */ - --http-get-bg: #059669; --http-get-text: #ffffff; - --http-post-bg: #2563eb; --http-post-text: #ffffff; - --http-put-bg: #d97706; --http-put-text: #ffffff; - --http-patch-bg: #7c3aed; --http-patch-text: #ffffff; - --http-delete-bg: #dc2626; --http-delete-text: #ffffff; - --http-head-bg: #4b5563; --http-head-text: #ffffff; - --http-options-bg: #7c3aed; --http-options-text: #ffffff; - - /* Response status colors (dark) */ - --status-2xx-bg: #059669; --status-2xx-text: #ffffff; - --status-3xx-bg: #2563eb; --status-3xx-text: #ffffff; - --status-4xx-bg: #d97706; --status-4xx-text: #111827; - --status-5xx-bg: #dc2626; --status-5xx-text: #ffffff; - --status-dxx-bg: #4b5563; --status-dxx-text: #ffffff; - - /* Schema type badge colors (dark) */ - --type-string-bg: rgba(34, 197, 94, 0.15); --type-string-text: #10b981; - --type-number-bg: rgba(59, 130, 246, 0.15); --type-number-text: #3b82f6; - --type-integer-bg: rgba(59, 130, 246, 0.15); --type-integer-text: #3b82f6; - --type-boolean-bg: rgba(168, 85, 247, 0.15); --type-boolean-text: #8b5cf6; - --type-array-bg: rgba(245, 158, 11, 0.15); --type-array-text: #f59e0b; - --type-object-bg: rgba(239, 68, 68, 0.15); --type-object-text: #ef4444; - --type-null-bg: rgba(107, 114, 128, 0.15); --type-null-text: #9ca3af; -} \ No newline at end of file diff --git a/assets/css/components/README.md b/assets/css/components/README.md deleted file mode 100644 index 8d27e45..0000000 --- a/assets/css/components/README.md +++ /dev/null @@ -1,76 +0,0 @@ -# CSS Components and Architecture Map - -This project uses a hybrid approach: -- Architecture layer (tokens, systems): `assets/css/architecture/` -- Component layer (thin semantic classes): `assets/css/components/` -- Tailwind utilities for layout/spacing/typography/states - -## Where things live -- Architecture - - `animation-system.css`: timing, easing, transforms - - `layout-foundations.css`: spacing scale, radius, z-index, max-widths, layout tokens - - Rails and gaps: `--left-rail-width`, `--right-rail-width`, `--layout-gap-*` - - Content width: `--max-width-content` - - Grid/card: `--grid-card-min` - - Glass tokens: `--tile-glass-blur`, `--tile-glass-saturate` - - Hooks and presets: - - `main.layout-shell[data-has-right-rail="false"]` adjusts gaps and `--max-width-content` - - `.layout-density--compact` / `.layout-density--comfortable` -- Components - - `tiles.css`, `child-links.css`, `article-header.css`, etc. - - New utility classes (declared in `assets/css/src/input.css` under `@layer components`): - - `.layout-shell`: 3-column shell controlled by tokens - - `.grid-autofit`: responsive auto-fit grid using `--grid-card-min` - - `.page-container`: sets `max-width: var(--max-width-content)` - -## Using layout tokens -- Site-wide defaults (config/_default/params.yaml): -```yaml -layout: - rightRail: true - leftRailWidth: 18rem - rightRailWidth: 22rem - density: comfortable # or compact - skeleton: false -``` -- Per-page override (front matter): -```yaml -layoutConfig: - rightRail: false - leftRailWidth: 20rem - density: compact - skeleton: true -``` - -## Template blocks and utilities -- Blocks in `layouts/_default/baseof.html`: - - `head-extra`, `pre-content`, `post-content`, `scripts`, `page-header`, `list`, `home` -- Utilities (partials): - - `utils/layout-config.html`: merges site/page layout config - - `utils/right-rail.html`: decides if right rail should render - - `utils/page-kind.html`: `{ isHome, isSection, isTaxonomy, isTerm, isSingle }` - - `utils/title-guard.html`: show H1 if content doesn’t start with `# ` - - `utils/meta.html`: normalized SEO meta dict - - `utils/breadcrumbs-data.html`: data for breadcrumbs - -## Conventions -- Prefer Tailwind utilities for one-off layout, spacing, states -- Create component classes only when reused or when selectors are complex -- Comment out lines when replacing existing code (no `*-new` suffixes) -- Never edit generated CSS (`assets/css/main.css`); use source files - -## Examples -- Adaptive grid in a template: -```html -
â€Ļ
-``` -- Shell usage in base template: -```html -
â€Ļ
-``` -- Page override via front matter: -```yaml -layoutConfig: - rightRail: false - density: compact -``` \ No newline at end of file diff --git a/assets/css/components/article-header.css b/assets/css/components/article-header.css deleted file mode 100644 index cd6f915..0000000 --- a/assets/css/components/article-header.css +++ /dev/null @@ -1,600 +0,0 @@ -/* Article Header Component - Parent container managing breadcrumbs and metadata */ - -.article-header { - position: relative; - margin-bottom: 1.5rem; -} - -/* Navigation container - holds breadcrumbs and toggle button */ -.article-header__navigation { - display: flex; - align-items: center; - justify-content: space-between; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - border-radius: 0.75rem; - /* padding: 1rem 1.25rem; */ - padding: 0.5rem 0.75rem; - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - background: var(--glass-bg); - box-shadow: var(--glass-shadow); - transition: background-color var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard); -} - -/* Reduced hover effect intentionally disabled to keep things airy */ - -/* Actions Container - holds copy page and metadata toggle */ -.article-header__actions { - display: flex; - align-items: center; - gap: 0.75rem; -} - -/* Copy Page Component Styles */ -.article-header__copy-page { - position: relative; -} - -.article-header__copy-toggle { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1rem; - border-radius: 0.625rem; - background: var(--color-surface); - color: var(--color-text-primary); - border: 1px solid var(--color-border-primary); - font-size: 0.875rem; - font-weight: 500; - cursor: pointer; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - font-family: var(--font-brand); -} - -.article-header__copy-toggle:hover { - background: var(--color-bg-secondary); - border-color: var(--color-brand); - color: var(--color-brand); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); -} - -.article-header__copy-toggle:focus { - outline: 2px solid rgba(var(--color-brand-rgb), 0.5); - outline-offset: 2px; -} - -/* Copy Page Dropdown Styles */ -.article-header__copy-dropdown { - position: absolute; - right: 0; - margin-top: 0.5rem; - width: 14rem; - /* background: var(--color-surface); */ - background: var(--glass-bg); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - border-radius: 0.5rem; - /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); */ - box-shadow: var(--glass-shadow); - z-index: 999; - overflow: hidden; - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); -} - -.dark .article-header__copy-dropdown { - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2); -} - -.article-header__copy-dropdown[data-state="hidden"] { - display: none; -} - -.article-header__copy-dropdown-content { - padding: 0.25rem; - /* Elevate glass on inner wrapper to ensure effect covers menu content */ - background: var(--glass-bg); - border: 1px solid var(--glass-border-color); - border-radius: 0.75rem; - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - box-shadow: var(--glass-shadow); -} - -/* Dropdown Menu Items */ -.copy-page-menu-item { - width: 100%; - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.5rem 0.75rem; - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-primary); - background: transparent; - border: none; - border-radius: 0.375rem; - cursor: pointer; - transition: all 0.2s ease; - text-decoration: none; -} - -.copy-page-menu-item:hover { - background: var(--color-surface-hover); - color: var(--color-brand); -} - -.copy-page-menu-item:focus { - outline: 2px solid rgba(var(--color-brand-rgb), 0.5); - outline-offset: -2px; -} - -.copy-page-menu-item svg { - width: 1rem; - height: 1rem; - flex-shrink: 0; - color: var(--color-text-secondary); - transition: color 0.2s ease; -} - -.copy-page-menu-item:hover svg { - color: var(--color-brand); -} - -/* Menu Separator */ -.copy-page-separator { - margin: 0.25rem 0; - border: 0; - border-top: 1px solid var(--color-border-primary); -} - -/* Menu Section Header */ -.copy-page-section-header { - padding: 0.25rem 0.75rem; - font-size: 0.75rem; - font-weight: 600; - color: var(--color-text-tertiary); - text-transform: uppercase; - letter-spacing: 0.05em; - background: var(--color-bg-tertiary); - margin: 0.25rem 0; -} - -/* Icon Styles */ -.article-header__copy-icon, -.article-header__copy-arrow { - width: 1rem; - height: 1rem; - flex-shrink: 0; - color: var(--color-text-secondary); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -.article-header__copy-toggle:hover .article-header__copy-icon, -.article-header__copy-toggle:hover .article-header__copy-arrow { - color: var(--color-brand); -} - -/* Dropdown arrow rotation */ -.article-header__copy-toggle[aria-expanded="true"] .article-header__copy-arrow { - transform: rotate(180deg); -} - -/* Copy feedback states */ -.copy-page-menu-item.copying { - background: var(--color-brand); - color: var(--color-text-inverse); -} - -.copy-page-menu-item.copying svg { - color: var(--color-text-inverse); -} - -.copy-page-menu-item.success { - background: var(--color-brand-5); - color: var(--color-text-inverse); -} - -.copy-page-menu-item.success svg { - color: var(--color-text-inverse); -} - -.copy-page-menu-item.error { - background: var(--color-brand-7); - color: var(--color-text-inverse); -} - -.copy-page-menu-item.error svg { - color: var(--color-text-inverse); -} - -.article-header__copy-text { - white-space: nowrap; -} - -.article-header__copy-icon, -.article-header__copy-arrow { - width: 1rem; - height: 1rem; - transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -.article-header__copy-toggle[aria-expanded="true"] .article-header__copy-arrow { - transform: rotate(180deg); -} - -.article-header__copy-dropdown { - position: absolute; - right: 0; - top: 100%; - margin-top: 0.5rem; - width: 14rem; - /* background: var(--color-surface); */ - background: var(--glass-bg); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - border-radius: 0.75rem; - /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--glass-shadow); - z-index: 50; - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - overflow: hidden; -} - -.article-header__copy-dropdown .p-1 { - padding: 0.25rem; -} - -/* Stronger glassmorphism for dropdown readability over underlying text */ -.article-header__copy-dropdown { - /* Locally override glass tokens for this component */ - --glass-blur: 14px; - --glass-saturate: 1.25; - --glass-bg: rgba(255, 255, 255, 0.72); - --glass-border-color: rgba(255, 255, 255, 0.32); - --glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); - - /* Ensure it visually floats above overlapping content */ - z-index: 1000; - background-clip: padding-box; - /* Let inner content own the visual surface to avoid double borders */ - background: transparent; - border: none; -} - -.dark .article-header__copy-dropdown { - --glass-bg: rgba(17, 17, 17, 0.72); - --glass-border-color: rgba(255, 255, 255, 0.18); - --glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); -} - -/* Responsive adjustments */ -@media (max-width: 768px) { - .article-header__actions { - gap: 0.5rem; - } - - .article-header__copy-text { - display: none; - } - - .article-header__copy-dropdown { - width: 12rem; - right: -2rem; - } -} - -/* Metadata Toggle Button */ -.article-header__metadata-toggle { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1rem; - border-radius: 0.625rem; - background: var(--color-brand); - color: var(--color-text-inverse); - border: none; - font-size: 0.875rem; - font-weight: 500; - cursor: pointer; - transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), - transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), - box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; - box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); - font-family: var(--font-brand); -} - -.article-header__metadata-toggle:before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(255, 255, 255, 0.2) 0%, - transparent 50%, - rgba(255, 255, 255, 0.1) 100% - ); - opacity: 0; - transition: opacity 0.2s ease; - pointer-events: none; -} - -.article-header__metadata-toggle:hover { - background: var(--color-brand-1); - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.4); -} - -.article-header__metadata-toggle:hover:before { - opacity: 1; -} - -.article-header__metadata-toggle:focus { - outline: 2px solid rgba(var(--color-brand-rgb), 0.5); - outline-offset: 2px; -} - -.article-header__metadata-toggle:active { - transform: translateY(0); -} - -.article-header__toggle-text { - white-space: nowrap; -} - -.article-header__toggle-icon { - width: 1rem; - height: 1rem; - transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Rotate icon when expanded */ -.article-header__metadata-toggle[aria-expanded="true"] .article-header__toggle-icon { - transform: rotate(180deg); -} - -/* Metadata Panel */ -.article-header__metadata-panel { - max-height: 0; - overflow: hidden; - margin-top: 1rem; - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - opacity: 0; - transform: translateY(-10px); -} - -.article-header__metadata-panel[aria-hidden="false"] { - max-height: 200px; /* More reasonable max height for metadata */ - opacity: 1; - transform: translateY(0); -} - -/* Enhanced UX styles for horizontal metadata flow within article header */ -.article-header__metadata-panel .metadata { - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: 0.75rem; - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - margin-top: 0.75rem; -} - -.article-header__metadata-panel .metadata__flow { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 0.75rem; - padding: 1rem 1.25rem; -} - -.article-header__metadata-panel .metadata__item { - display: flex; - align-items: center; - gap: 0.5rem; - border-radius: 0.5rem; - padding: 0.5rem 0.75rem; - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - color: var(--color-text-secondary); - position: relative; - overflow: hidden; - font-size: 0.875rem; - line-height: 1.4; - font-weight: 400; - white-space: nowrap; -} - -.article-header__metadata-panel .metadata__item:before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 90deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 100% - ); - opacity: 0; - transition: opacity 0.2s ease; - pointer-events: none; -} - -.article-header__metadata-panel .metadata__item:hover { - background-color: var(--color-surface-hover); - color: var(--color-brand); - transform: translateX(4px); - padding-left: calc(0.75rem + 2px); - border-left: 2px solid var(--color-brand); -} - -.article-header__metadata-panel .metadata__item:hover:before { - opacity: 1; -} - -/* Secondary metadata items (like last modified) */ -.article-header__metadata-panel .metadata__item--secondary { - color: var(--color-text-tertiary); - font-size: 0.8125rem; -} - -.article-header__metadata-panel .metadata__item--secondary:hover { - color: var(--color-text-secondary); -} - -/* Metadata separators removed - clean horizontal flow */ - -/* Override global SVG styles for metadata icons - very specific targeting */ -.article-header__metadata-panel .metadata .metadata__icon, -.article-header__metadata-panel .metadata__icon, -.article-header__metadata-panel svg { - height: 1.25rem !important; - width: 1.25rem !important; - max-height: 1.25rem !important; - max-width: 1.25rem !important; - min-height: 1.25rem !important; - min-width: 1.25rem !important; - flex-shrink: 0 !important; - display: inline-block !important; -} - -/* Mobile responsive styles */ -@media (max-width: 768px) { - .article-header__metadata-panel .metadata__flow { - padding: 0.75rem 1rem; - gap: 0.5rem; - flex-direction: column; - align-items: flex-start; - } - - .article-header__metadata-panel .metadata__item { - font-size: 0.8125rem; - padding: 0.375rem 0.5rem; - width: 100%; - } - - /* Separators removed - no longer needed */ - - .article-header__metadata-panel .metadata .metadata__icon, - .article-header__metadata-panel .metadata__icon, - .article-header__metadata-panel svg { - height: 1rem !important; - width: 1rem !important; - max-height: 1rem !important; - max-width: 1rem !important; - min-height: 1rem !important; - min-width: 1rem !important; - } -} - -/* Additional responsive styles for navigation */ -@media (max-width: 768px) { - .article-header__navigation { - flex-direction: column; - gap: 1rem; - align-items: stretch; - } - - .article-header__metadata-toggle { - justify-content: center; - width: 100%; - } -} - -/* Loading State */ -.article-header.loading .article-header__metadata-toggle { - pointer-events: none; - opacity: 0.7; -} - -.article-header.loading .article-header__toggle-icon { - animation: spin 1s linear infinite; -} - -@keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -/* Focus states for accessibility */ -.article-header__metadata-toggle:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - border-radius: 0.625rem; -} - -/* High contrast mode support */ -@media (prefers-contrast: high) { - .article-header__navigation { - border-width: 2px; - } - - .article-header__metadata-toggle { - border: 2px solid var(--color-brand); - } -} - -/* Reduced motion support */ -@media (prefers-reduced-motion: reduce) { - .article-header__metadata-panel, - .article-header__toggle-icon { - transition: none; - } - - .article-header__navigation:hover { - transform: none; - } -} - -/* Fix stacking context issues when dropdown is open */ -body:has(.article-header__copy-dropdown:not(.hidden)) h1[id] { - position: static; -} - -body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { - display: none; -} - -/* :has() Article Header Enhancements */ - -/* Breadcrumb navigation with interactive states */ -.article-header:has(.breadcrumb__current[aria-expanded="true"]) .article-header__navigation { - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - var(--color-surface) 100% - ); - border-color: rgba(var(--color-brand-rgb), 0.2); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.08), - 0 0 0 1px rgba(var(--color-brand-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} - -/* Enhanced metadata panel visibility */ -.article-header:has(.article-header__metadata-panel[aria-hidden="false"]) { - margin-bottom: 2.5rem; -} \ No newline at end of file diff --git a/assets/css/components/article/page-resources.css b/assets/css/components/article/page-resources.css deleted file mode 100644 index 01ceb17..0000000 --- a/assets/css/components/article/page-resources.css +++ /dev/null @@ -1,8 +0,0 @@ -/* Page Resources component minor rules */ - -/* Hide resources block in print to reduce clutter */ -@media print { - [data-component="article-page-resources"] { display: none; } -} - - diff --git a/assets/css/components/article/related-content.css b/assets/css/components/article/related-content.css deleted file mode 100644 index b4478d2..0000000 --- a/assets/css/components/article/related-content.css +++ /dev/null @@ -1,332 +0,0 @@ -/* Related Content component styles migrated from page-enhancements.css */ - -.related-content { - position: relative; - background: var(--glass-bg); - border-radius: 0.75rem; - border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - padding: 1.25rem; - transition: background-color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - box-shadow: var(--glass-shadow); -} - -.related-content__header { - border-bottom: 1px solid var(--glass-border-color); - padding-bottom: 0.75rem; - margin-bottom: 1rem; -} - -.related-content__header h2 { - margin: 0; - color: var(--color-text-primary); - font-weight: 600; -} - -/* View Toggle Buttons */ -.related-content__view-toggle { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.5rem; - border-radius: 0.5rem; - background-color: var(--color-surface); - color: var(--color-text-secondary); - border: 1px solid var(--color-border-primary); - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - cursor: pointer; - min-width: 2.25rem; - min-height: 2.25rem; -} - -.related-content__view-toggle:hover { - background-color: var(--color-surface-hover); - color: var(--color-text-primary); - border-color: var(--color-border-secondary); - transform: translateY(-1px); -} - -.related-content__view-toggle.active { - background-color: var(--color-brand); - color: var(--color-text-inverse); - border-color: var(--color-brand); - box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); -} - -.related-content__view-toggle:focus { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} - -.related-content__collapse-toggle { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.5rem; - border-radius: 0.5rem; - background-color: var(--color-surface); - color: var(--color-text-secondary); - border: 1px solid var(--color-border-primary); - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - cursor: pointer; - min-width: 2.25rem; - min-height: 2.25rem; -} - -.related-content__collapse-toggle:hover { - background-color: var(--color-surface-hover); - color: var(--color-text-primary); - border-color: var(--color-border-secondary); - transform: translateY(-1px); -} - -.related-content__collapse-toggle[data-collapsed="true"] svg { - transform: rotate(180deg); -} - -.related-content__collapse-toggle:focus { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} - -.related-content__container[data-collapsed="true"] { - display: none; -} - -/* Compact View Styles */ -.related-content__view--compact .related-content__item { - position: relative; - background: var(--glass-bg); - border: 1px solid var(--glass-border-color); - border-radius: 0.5rem; - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - overflow: hidden; - box-shadow: var(--glass-shadow); -} - -.related-content__view--compact .related-content__item::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 90deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 100% - ); - opacity: 0; - transition: opacity 0.2s ease; - pointer-events: none; -} - -.related-content__view--compact .related-content__item:hover { - border-color: rgba(var(--color-brand-rgb), 0.45); - background: var(--color-surface-hover); - transform: translateY(-1px); - box-shadow: var(--elevation-2); -} - -.related-content__view--compact .related-content__item:hover::before { - opacity: 1; -} - -.related-content__view--compact .related-content__item a { - position: relative; - z-index: 1; - text-decoration: none; - color: inherit; -} - -.related-content__view--compact .related-content__item a:hover { - text-decoration: none; -} - -.related-content__view--compact .related-content__item .font-medium { - color: var(--color-text-primary); - transition: color 0.2s ease; -} - -.related-content__view--compact .related-content__item:hover .font-medium { - color: var(--color-brand); -} - -/* Enhanced Card View Styles */ -.related-content__card { - position: relative; - background: var(--glass-bg); - border-radius: 0.75rem; - border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - overflow: hidden; - box-shadow: var(--glass-shadow); -} - -.related-content__card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.03) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} - -.related-content__card:hover { - transform: translateY(-3px); - border-color: rgba(var(--color-brand-rgb), 0.45); - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), var(--elevation-brand-subtle); -} - -.related-content__card:hover::before { - opacity: 1; -} - -.related-content__card:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - transform: translateY(-2px); -} - -.related-content__card a { - position: relative; - z-index: 1; - text-decoration: none; - color: inherit; - display: block; -} - -.related-content__card a:hover { - text-decoration: none; -} - -.related-content__card .text-base { - color: var(--color-text-primary); - transition: color 0.2s ease; -} - -.related-content__card:hover .text-base { - color: var(--color-brand); -} - -.related-content__card .text-gray-600 { - color: var(--color-text-secondary); -} - -.related-content__card .text-gray-500 { - color: var(--color-text-tertiary); -} - -/* Dark mode enhancements */ -.dark .related-content { - border-color: var(--color-border-secondary); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.dark .related-content__view-toggle, -.dark .related-content__collapse-toggle { - border-color: var(--color-border-secondary); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.dark .related-content__view-toggle:hover, -.dark .related-content__collapse-toggle:hover { - border-color: var(--color-border-primary); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08); -} - -.dark .compact-view .compact-item { - border-color: var(--color-border-secondary); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); -} - -.dark .compact-view .compact-item:hover { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 8px rgba(var(--color-brand-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08); -} - -.dark .resource-card-compact { - border-color: var(--color-border-secondary); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.dark .resource-card-compact:hover { - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(var(--color-brand-rgb), 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -/* Improved responsive behavior */ -@media (max-width: 768px) { - .related-content { - padding: 1rem; - margin-top: 1.5rem; - } - - .related-header { - flex-direction: column; - gap: 0.75rem; - align-items: flex-start; - } - - .related-content__view--compact .related-content__item { - padding: 0.75rem; - } - - .related-content__view--compact .related-content__item time { - display: none; - } - - .related-content__card { - padding: 1rem; - } - - .related-content__view--cards .grid { - grid-template-columns: 1fr; - } - - .related-content__view--compact .related-content__item:hover, - .related-content__card:hover { - transform: translateY(-1px); - } -} - -/* High contrast mode support */ -@media (prefers-contrast: high) { - .related-content { border-width: 2px; } - .related-content__view-toggle, .related-content__collapse-toggle { border-width: 2px; } - .related-content__view--compact .related-content__item { border-width: 2px; } - .related-content__card { border-width: 2px; } -} - -/* Animation for view transitions */ -.related-content__view--compact, .related-content__view--cards { - animation: fadeIn 0.3s ease-in-out; -} - -@keyframes fadeIn { - from { opacity: 0; transform: translateY(10px); } - to { opacity: 1; transform: translateY(0); } -} - -/* Print styles */ -@media print { - .related-content { display: none; } -} - - diff --git a/assets/css/components/breadcrumbs.css b/assets/css/components/breadcrumbs.css deleted file mode 100644 index dbb47d0..0000000 --- a/assets/css/components/breadcrumbs.css +++ /dev/null @@ -1,308 +0,0 @@ -/* Breadcrumbs Navigation Component - Pure navigation styling */ - -.breadcrumb { - flex: 1; - min-width: 0; -} - -.breadcrumb__list { - display: flex; - flex-wrap: wrap; - align-items: center; - font-size: 0.875rem; - line-height: 1.25rem; - margin: 0; - padding: 0; - list-style: none; -} - -.breadcrumb__item { - display: flex; - align-items: center; -} - -.breadcrumb__link { - position: relative; - display: inline-flex; - align-items: center; - border-radius: var(--radius-lg); - /* padding: 0.5rem 0.75rem; */ - padding: 0.25rem 0.5rem; - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - background-color: transparent; - color: var(--color-text-secondary); - text-decoration: none; - font-weight: 500; - overflow: hidden; -} - -.breadcrumb__link:before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.03) 100% - ); - opacity: 0; - transition: opacity 0.2s ease; - pointer-events: none; -} - -.breadcrumb__link:hover { - color: var(--color-brand); - /* background-color: var(--color-surface-hover); */ - /* transform: var(--transform-lift-subtle); */ - /* box-shadow: var(--elevation-4); */ -} - -.breadcrumb__link:hover:before { - opacity: 1; -} - -.breadcrumb__link:focus { - outline: 2px solid transparent; - outline-offset: 2px; - color: var(--color-brand); - background-color: var(--color-surface-hover); - box-shadow: - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); /* Enhanced double focus ring */ -} - -.breadcrumb__separator { - margin-left: 0.75rem; - margin-right: 0.75rem; - font-size: 1.125rem; - line-height: 1.75rem; - color: var(--color-text-tertiary); - transition: - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - font-weight: 300; -} - -.breadcrumb:hover .breadcrumb__separator { - color: var(--color-brand); - transform: scale(1.1); -} - -.breadcrumb__current { - display: inline-flex; - align-items: center; - border-radius: var(--radius-lg); - /* padding: 0.5rem 0.75rem; */ - padding: 0.25rem 0.5rem; - font-weight: 600; - /* background-color: var(--color-brand); */ - /* color: var(--color-text-inverse); */ - background: var(--glass-bg); - color: var(--color-text-primary); - border: 1px solid var(--glass-border-color); - position: relative; - overflow: hidden; -} - -/* Clickable current breadcrumb for metadata toggle */ -.breadcrumb__current--clickable { - cursor: pointer; - transition: color 0.2s ease, background-color 0.2s ease; - border: none; - gap: 0.5rem; - font-family: inherit; - font-size: inherit; - line-height: inherit; -} - -.breadcrumb__current--clickable:hover { - background-color: var(--color-surface-hover); -} - -.breadcrumb__current--clickable:focus { - outline: 2px solid transparent; - outline-offset: 2px; - box-shadow: - 0 0 0 2px var(--color-text-inverse), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.5); -} - -.breadcrumb__current--clickable:active { - transform: translateY(0); -} - -.breadcrumb__metadata-icon { - width: 1rem; - height: 1rem; - opacity: 0.8; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -.breadcrumb__current--clickable:hover .breadcrumb__metadata-icon { - opacity: 1; - transform: scale(1.1); -} - -.breadcrumb__current--clickable[aria-expanded="true"] .breadcrumb__metadata-icon { - opacity: 1; - transform: rotate(180deg); -} - -.breadcrumb__current:before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(255, 255, 255, 0.2), - transparent 50%, - rgba(255, 255, 255, 0.1) - ); - pointer-events: none; -} - -/* Entrance Animation */ -.breadcrumb__current, -.breadcrumb__link { - animation: breadcrumb-enter 0.3s ease-out; - animation-fill-mode: both; -} - -@keyframes breadcrumb-enter { - 0% { - opacity: 0; - transform: translateX(-10px); - } - 100% { - opacity: 1; - transform: translateX(0); - } -} - -/* Responsive Design */ -@media (max-width: 768px) { - .breadcrumb__list { - font-size: 0.75rem; - line-height: 1rem; - } - - .breadcrumb__link, - .breadcrumb__current { - padding: 0.375rem 0.5rem; - } - - .breadcrumb__metadata-icon { - width: 0.875rem; - height: 0.875rem; - } - - .breadcrumb__separator { - margin-left: 0.5rem; - margin-right: 0.5rem; - font-size: 1rem; - } -} - -/* High contrast mode support */ -@media (prefers-contrast: high) { - .breadcrumb__link { - border: 1px solid transparent; - } - - .breadcrumb__link:hover, - .breadcrumb__link:focus { - border-color: var(--color-brand); - } - - .breadcrumb__current { - border: 2px solid var(--color-brand); - } - - .breadcrumb__current--clickable:hover, - .breadcrumb__current--clickable:focus { - border: 2px solid var(--color-text-inverse); - } -} - -/* Reduced motion support */ -@media (prefers-reduced-motion: reduce) { - .breadcrumb__link, - .breadcrumb__separator, - .breadcrumb__current--clickable, - .breadcrumb__metadata-icon { - transition: none; - } - - .breadcrumb__current, - .breadcrumb__link { - animation: none; - } - - .breadcrumb__link:hover, - .breadcrumb__current--clickable:hover { - transform: none; - } - - .breadcrumb:hover .breadcrumb__separator { - transform: none; - } - - .breadcrumb__current--clickable:hover .breadcrumb__metadata-icon, - .breadcrumb__current--clickable[aria-expanded="true"] .breadcrumb__metadata-icon { - transform: none; - } -} - -/* ========================================================================== - :has() Breadcrumb Component Enhancements - ========================================================================== */ - -/* Breadcrumb container awareness of metadata panel state */ -.breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) { - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 100% - ); - border-radius: var(--radius-lg); - margin: -0.25rem; - padding: 0.25rem; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Enhanced separator styling when metadata is expanded */ -.breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) .breadcrumb__separator { - color: var(--color-brand); - transform: scale(1.2); -} - -/* Interactive breadcrumb links when metadata is open */ -.breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) .breadcrumb__link { - background-color: rgba(var(--color-brand-rgb), 0.05); - border-radius: 0.375rem; -} - -.breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) .breadcrumb__link:hover { - background-color: rgba(var(--color-brand-rgb), 0.15); - transform: var(--transform-lift-medium); - box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.2); -} - -/* Hover context awareness */ -.breadcrumb:has(.breadcrumb__link:hover) { - background: rgba(var(--color-surface), 0.5); - border-radius: var(--radius-lg); - transition: all 0.2s ease; -} - -.breadcrumb:has(.breadcrumb__link:hover) .breadcrumb__current { - transform: scale(1.02); - box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); -} \ No newline at end of file diff --git a/assets/css/components/buttons.css b/assets/css/components/buttons.css deleted file mode 100644 index 9cdb5b6..0000000 --- a/assets/css/components/buttons.css +++ /dev/null @@ -1,328 +0,0 @@ -/* Buttons Component - Enhanced button system with NVIDIA styling */ - -/* Enhanced Button System */ -.btn { - @apply inline-flex items-center justify-center px-4 py-2 - font-medium focus:outline-none focus:ring-2 focus:ring-offset-2; - border-radius: var(--radius-button); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard); - min-height: 2.5rem; - text-decoration: none; - cursor: pointer; - position: relative; - overflow: hidden; -} - -.btn:disabled { - @apply opacity-50 cursor-not-allowed; -} - -.btn--primary { - background-color: var(--color-brand); - color: var(--color-text-inverse); - --tw-ring-color: var(--color-brand); -} - -.btn--primary:hover:not(:disabled) { - background-color: var(--color-brand-1); - transform: var(--transform-lift-subtle); - box-shadow: var(--elevation-hover-2); -} - -.btn--secondary { - background-color: var(--color-surface); - color: var(--color-text-primary); - border: 1px solid var(--color-border-primary); - --tw-ring-color: var(--color-brand); -} - -.btn--secondary:hover:not(:disabled) { - background-color: var(--color-surface-hover); - border-color: var(--color-brand); - transform: var(--transform-lift-subtle); -} - -.btn--ghost { - background-color: transparent; - color: var(--color-text-secondary); - --tw-ring-color: var(--color-brand); -} - -.btn--ghost:hover:not(:disabled) { - background-color: var(--color-surface-hover); - color: var(--color-text-primary); -} - -.btn--danger { - background-color: var(--color-brand-7); - color: var(--color-text-inverse); - --tw-ring-color: var(--color-brand-7); -} - -.btn--danger:hover:not(:disabled) { - /* background-color: #dc2626; */ - background-color: var(--feedback-error); - transform: var(--transform-lift-subtle); -} - -.btn--sm { - /* @apply px-3 py-1 text-sm; */ - @apply text-sm; - min-height: 2rem; - min-width: 2rem; - padding: 0.375rem 0.5rem; /* tighter, more square */ -} - -.btn--lg { - @apply px-6 py-3 text-lg; - min-height: 3rem; -} - -.btn__icon { - /* @apply w-4 h-4 mr-2; */ - width: 1rem; - height: 1rem; - margin-right: 0.375rem; - display: inline-block; - vertical-align: middle; -} - -/* Icon-only small buttons: remove right margin for centering */ -.btn--sm .btn__icon:only-child { - margin-right: 0; -} - -.btn__icon--right { - @apply w-4 h-4 ml-2 mr-0; -} - -/* Enhanced loading state */ -.btn--loading { - @apply opacity-75 cursor-wait; -} - -.btn--loading::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 1rem; - height: 1rem; - margin: -0.5rem 0 0 -0.5rem; - border: 2px solid transparent; - border-top-color: currentColor; - border-radius: 50%; - animation: spin 1s linear infinite; -} - -/* Topbar Button Component */ -.topbar__button { - position: relative; - padding: 0.5rem; - border-radius: var(--radius-lg); - min-width: 2.25rem; - min-height: 2.25rem; - background-color: var(--color-surface); - border: 1px solid var(--color-border-primary); - color: var(--color-text-secondary); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; -} - -.topbar__button::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: radial-gradient(circle at center, rgba(var(--color-brand-rgb), 0.1) 0%, transparent 70%); - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} - -.topbar__button:hover { - background-color: var(--color-surface-hover); - border-color: var(--color-brand); - color: var(--color-text-primary); - transform: var(--transform-lift-subtle); - /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--elevation-hover-2); -} - -.topbar__button:hover::before { - opacity: 1; -} - -.topbar__button:active { - transform: translateY(0); - /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--elevation-1); -} - -.topbar__button img { - width: 1.125rem; - height: 1.125rem; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - filter: brightness(0.8); - flex-shrink: 0; -} - -.topbar__button:hover img { - filter: brightness(1); - transform: scale(1.1); -} - -/* Legacy toggle-btn support for backward compatibility */ -.toggle-btn { - position: relative; - padding: 0.5rem; - border-radius: var(--radius-lg); - min-width: 2.25rem; - min-height: 2.25rem; - background-color: var(--color-surface); - border: 1px solid var(--color-border-primary); - color: var(--color-text-secondary); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - --tw-ring-color: var(--color-brand); -} - -.toggle-btn:focus { - outline: 2px solid transparent; - outline-offset: 2px; - box-shadow: 0 0 0 2px var(--color-brand); -} - -.toggle-btn::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: radial-gradient( - circle at center, - rgba(var(--color-brand-rgb), 0.1) 0%, - transparent 70% - ); - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} - -.toggle-btn:hover { - background-color: var(--color-surface-hover); - border-color: var(--color-brand); - color: var(--color-text-primary); - transform: var(--transform-lift-subtle); - /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--elevation-hover-2); -} - -.toggle-btn:hover::before { - opacity: 1; -} - -.toggle-btn:active { - transform: translateY(0); - /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--elevation-1); -} - -.toggle-btn--active { - background-color: var(--color-brand); - color: var(--color-text-inverse); - border-color: var(--color-brand); -} - -.toggle-btn--active:hover { - background-color: var(--color-brand-1); - color: var(--color-text-inverse); -} - -.toggle-btn img { - width: 1.125rem !important; /* Properly sized icons */ - height: 1.125rem !important; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - filter: brightness(0.8); - flex-shrink: 0; /* Prevent icon compression */ -} - -.toggle-btn:hover img { - filter: brightness(1); - transform: scale(1.1); -} - -.toggle-btn--active img { - filter: brightness(1) invert(1); -} - -/* Button Ripple Effects */ -.ripple { - position: absolute !important; - border-radius: 50%; - background: rgba(255, 255, 255, 0.3); - transform: scale(0); - /* ✅ FIXED: Use animation tokens for ripple effect */ - animation: ripple-animation var(--timing-slow) linear; - pointer-events: none; - z-index: 1; - /* Ensure it doesn't affect layout */ - top: 0; - left: 0; - width: 0; - height: 0; -} - -.dark .ripple { - background: rgba(255, 255, 255, 0.2); -} - -/* ✅ KEYFRAME: Ripple animation using animation tokens */ -@keyframes ripple-animation { - to { - transform: scale(4); - opacity: var(--opacity-hidden); - } -} - -/* Ensure buttons have proper positioning for ripple containment */ -button, .btn { - position: relative; - overflow: hidden; -} \ No newline at end of file diff --git a/assets/css/components/cards.css b/assets/css/components/cards.css deleted file mode 100644 index 180ac30..0000000 --- a/assets/css/components/cards.css +++ /dev/null @@ -1,429 +0,0 @@ -/* Cards Component - Resource cards, content metadata, and generic card styles */ - -/* Base Card Styles */ -html:not(.no-transitions) .card { - position: relative; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: var(--radius-card); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard), - background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard); - overflow: hidden; - /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); -} - -.card { - position: relative; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: var(--radius-card); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - overflow: hidden; - /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); -} - -.card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} - -/* Enhanced hover states - Use architectural classes instead */ -.card { - /* Apply .interact-dramatic class to card elements in HTML instead of this CSS */ -} - -.card:hover::before { - opacity: 1; -} - -/* Resource Card Styles */ -.card--resource { - position: relative; - background: var(--glass-bg); - border-radius: var(--radius-card); - border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - overflow: hidden; - box-shadow: var(--glass-shadow); - /* padding: 1.5rem; */ - padding: 1rem; - margin-bottom: 1rem; -} - -.card--resource h3 { - color: var(--color-text-primary); - font-weight: 600; - font-size: 1.125rem; - line-height: 1.3; - margin-bottom: 0.75rem; - transition: color 0.2s ease; -} - -.card--resource:hover h3 { - color: var(--color-brand); -} - -.card--resource p { - color: var(--color-text-secondary); - line-height: 1.6; - font-size: 0.875rem; - margin-bottom: 1rem; -} - -.card--resource a { - color: var(--color-brand); - text-decoration: none; - font-weight: 500; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - position: relative; -} - -.card--resource a::after { - content: ''; - position: absolute; - bottom: -2px; - left: 0; - width: 0; - height: 2px; - background: var(--color-brand); - /* transition: width 0.3s ease; */ - transition: width var(--timing-medium) var(--easing-standard); -} - -.card--resource a:hover::after { - width: 100%; -} - -.card--resource .icon { - width: 1.5rem; - height: 1.5rem; - margin-bottom: 0.75rem; - filter: brightness(0.8); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} - -.card--resource:hover .icon { - filter: brightness(1); - transform: scale(1.05); -} - -/* Content Metadata Styles */ -.content-metadata { - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: var(--radius-card); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - padding: 1rem 1.25rem; - font-size: 0.875rem; - color: var(--color-text-secondary); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: - 0 2px 8px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: flex; - align-items: center; - gap: 0.75rem; - flex-wrap: wrap; -} - -.content-metadata:hover { - border-color: var(--color-brand); - color: var(--color-text-primary); -} - -.content-metadata .icon { - width: 1rem; - height: 1rem; - flex-shrink: 0; - opacity: 0.7; - transition: opacity 0.2s ease; -} - -.content-metadata:hover .icon { - opacity: 1; -} - -.content-metadata time, -.content-metadata span { - white-space: nowrap; -} - -/* Article Card Styles */ -.article-card { - position: relative; - background: var(--glass-bg); - border-radius: var(--radius-card); - border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - overflow: hidden; - box-shadow: var(--glass-shadow); - padding: 1.5rem; - margin-bottom: 1.5rem; - display: flex; - flex-direction: column; - height: 100%; -} - -.article-card .card-header { - display: flex; - align-items: flex-start; - gap: 1rem; - margin-bottom: 1rem; -} - -.article-card .card-icon { - width: 2rem; - height: 2rem; - flex-shrink: 0; - filter: brightness(0.8); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} - -.article-card:hover .card-icon { - filter: brightness(1); - transform: scale(1.05); -} - -.article-card .card-title { - color: var(--color-text-primary); - font-weight: 600; - font-size: 1.125rem; - line-height: 1.3; - margin: 0; - transition: color 0.2s ease; -} - -.article-card:hover .card-title { - color: var(--color-brand); -} - -.article-card .card-description { - color: var(--color-text-secondary); - line-height: 1.6; - font-size: 0.875rem; - margin-bottom: 1rem; - flex: 1; -} - -.article-card .card-meta { - color: var(--color-text-tertiary); - font-size: 0.75rem; - display: flex; - align-items: center; - gap: 0.5rem; - margin-top: auto; - padding-top: 1rem; - border-top: 1px solid var(--color-border-primary); -} - -/* Interactive Card States */ -.card-interactive { - cursor: pointer; - user-select: none; -} - -.card-interactive:active { - transform: var(--transform-press-down); -} - -/* Focus states for accessibility */ -.card:focus-within, -.resource-card:focus-within, -.article-card:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - transform: var(--transform-lift-medium); -} - -/* Responsive adjustments */ -@media (max-width: 768px) { - .resource-card, - .article-card { - padding: 1rem; - margin-bottom: 1rem; - } - - .card:hover, - .resource-card:hover, - .article-card:hover { - transform: var(--transform-lift-medium); - } - - .content-metadata { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } -} - -/* Dark mode enhancements */ -.dark .card, -.dark .resource-card, -.dark .content-metadata, -.dark .article-card { - border-color: var(--color-border-secondary); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.dark .card:hover, -.dark .resource-card:hover, -.dark .article-card:hover { - box-shadow: - 0 12px 28px rgba(0, 0, 0, 0.4), - 0 0 20px rgba(var(--color-brand-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -/* Animation improvements */ -.card, -.resource-card, -.article-card { - animation: card-enter 0.4s ease-out; - animation-fill-mode: both; -} - -@keyframes card-enter { - from { - opacity: 0; - transform: translateY(20px) scale(0.95); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -/* Card grid layouts */ -.card-grid { - display: grid; - gap: 1.5rem; -} - -.card-grid .card, -.card-grid .resource-card, -.card-grid .article-card { - height: 100%; - display: flex; - flex-direction: column; -} - -/* Stagger animation for card grids */ -.card-grid .card:nth-child(1), -.card-grid .resource-card:nth-child(1), -.card-grid .article-card:nth-child(1) { animation-delay: 0s; } -.card-grid .card:nth-child(2), -.card-grid .resource-card:nth-child(2), -.card-grid .article-card:nth-child(2) { animation-delay: 0.1s; } -.card-grid .card:nth-child(3), -.card-grid .resource-card:nth-child(3), -.card-grid .article-card:nth-child(3) { animation-delay: 0.2s; } -.card-grid .card:nth-child(4), -.card-grid .resource-card:nth-child(4), -.card-grid .article-card:nth-child(4) { animation-delay: 0.3s; } - -/* :has() Content-Aware Card Layouts */ - -/* Cards with images get different padding */ -.card:has(.card__image) { - padding-top: 0; -} - -.card:has(.card__image) .card__content { - padding-top: 1.5rem; -} - -/* Cards with icons get enhanced layout */ -.card:has(.card__icon) .card__title { - margin-left: 3rem; - position: relative; -} - -.card:has(.card__icon) .card__content { - padding-left: 1rem; -} - -/* Resource cards with descriptions get enhanced spacing */ -.card--resource:has(.card__description) { - min-height: 180px; -} - -.card--resource:has(.card__description) .card__footer { - margin-top: auto; - border-top: 1px solid var(--color-border-primary); - padding-top: 1rem; -} - -/* Cards with actions get enhanced bottom padding */ -.card:has(.card__actions) { - padding-bottom: 1rem; -} - -.card:has(.card__actions) .card__content { - padding-bottom: 2rem; -} - -/* Interactive card states based on content */ -.card:has(a:hover) { - transform: var(--transform-lift-and-scale); - /* box-shadow: - 0 12px 30px rgba(0, 0, 0, 0.12), - 0 4px 16px rgba(0, 0, 0, 0.08); */ - box-shadow: - var(--elevation-hover-2), - var(--elevation-brand-subtle); - border-color: rgba(var(--color-brand-rgb), 0.3); -} \ No newline at end of file diff --git a/assets/css/components/chat.css b/assets/css/components/chat.css deleted file mode 100644 index af4dacd..0000000 --- a/assets/css/components/chat.css +++ /dev/null @@ -1,534 +0,0 @@ -/* Chat Component - Enhanced chat interface with premium styling */ - -/* Chat Header */ -.chat__header { - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - border-radius: 0.75rem 0.75rem 0 0; /* Top corners rounded to match design system */ -} - -/* Chat header icon styling for proper dark mode */ -.chat__header-icon { - filter: brightness(0) saturate(100%) invert(42%) sepia(15%) saturate(566%) hue-rotate(202deg) brightness(96%) contrast(87%); -} - -.dark .chat__header-icon { - filter: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(593%) hue-rotate(202deg) brightness(91%) contrast(92%); -} - -/* Danger button variant for delete action */ -.topbar__button--danger:hover { - background-color: rgba(239, 68, 68, 0.1) !important; - border-color: rgb(239, 68, 68) !important; - color: rgb(239, 68, 68) !important; -} - -.topbar__button--danger:hover img { - filter: brightness(0) saturate(100%) invert(35%) sepia(96%) saturate(2067%) hue-rotate(346deg) brightness(89%) contrast(94%) !important; -} - -/* Chat Container - Clean transparent design */ -#chatContainer { - background: transparent; - border: none; - box-shadow: none; - border-radius: 0.75rem; /* Add consistent border radius */ - /* margin-right: 1.5rem; Align with page container padding */ - /* Replaced: remove right margin on wide screens to avoid pinching */ - margin-top: 1rem; /* Match the pageContainer's top padding to align with content start */ -} - -/* On xl+, let chat use full sidebar column width */ -@screen xl { - #chatContainer { - margin-right: 0; - } -} - -/* Enhanced Chat Interface - Clean transparent design */ -.chat__controls { - background: transparent; - border: none; - border-radius: 0 0 0.75rem 0.75rem; /* Bottom corners rounded to match container */ -} - -.chat__form { - @apply w-full; -} - -.chat__input { - @apply focus:outline-none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - border-color var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard); - font-family: var(--font-brand); - line-height: 1.4; -} - -.chat__input:hover { - border-color: var(--color-brand); - box-shadow: var(--elevation-4); -} - -.chat__input:focus { - border-color: var(--color-brand); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.1), - 0 0 0 3px rgba(var(--color-brand-rgb), 0.1); -} - -/* Old styling moved to enhanced section below */ - -/* Smooth transitions for chat container */ -#chatContainer { - /* ✅ FIXED: Use animation tokens for consistent timing */ - /* transition (was medium for all) */ - transition: - width var(--timing-medium) var(--easing-smooth), - max-width var(--timing-medium) var(--easing-smooth), - /* slower transform and shadow for more graceful feel */ - box-shadow var(--timing-slow) var(--easing-smooth), - transform var(--timing-slow) var(--easing-smooth), - border-radius var(--timing-slow) var(--easing-standard), - /* include background/border transitions for softer state change */ - background-color var(--timing-medium) var(--easing-smooth), - border-color var(--timing-medium) var(--easing-smooth), - backdrop-filter var(--timing-medium) var(--easing-smooth); - transform-origin: top right; - will-change: width, transform, box-shadow; -} - -/* Expanded Chat State - Enhanced Liquid Glass */ -.chat-expanded { - /* Lighter translucent surface */ - background: var(--glass-bg); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - border: 1px solid var(--glass-border-color); - border-left-width: 3px; - /* box-shadow: 0 18px 60px rgba(0, 0, 0, 0.08), 0 8px 28px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.18); */ - box-shadow: var(--glass-shadow); - transform: translateY(-2px); - overflow: visible; - display: flex; - flex-direction: column; -} - -/* Dark theme tuning: slightly lighter sheet */ -.dark .chat-expanded { - background: var(--glass-bg); - border-color: var(--glass-border-color); -} - -/* Ensure messages area scrolls within viewport when expanded */ -.chat-expanded #chat-messages { - flex: 1 1 auto; - min-height: 0; /* required for flex children to allow overflow */ - overflow-y: auto; - max-height: none; /* use container max-height instead */ -} - -/* Modal overlay for expanded chat */ -.chat-overlay { - position: fixed; - inset: 0; - background: rgba(0,0,0,0.22); - opacity: 0; - transition: opacity var(--timing-medium) var(--easing-smooth); - z-index: 50; /* below chat container (which uses 60) */ -} - -.chat-overlay.visible { - opacity: 1; -} - -/* Enhanced input styling for expanded state */ -.chat-expanded .chat__input { - @apply text-base; - font-size: 15px; /* Slightly larger for better UX */ - line-height: 1.5; -} - -/* Micro-interaction for expand button */ -.chat__header button { - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard); -} - -.chat__header button:hover { - transform: scale(1.1); - background-color: var(--color-surface-hover); -} - -.chat__header button:active { - transform: scale(0.95); -} - -/* Enhanced focus states */ -.chat-expanded .chat__input:focus { - box-shadow: - 0 0 0 3px rgba(var(--color-brand-rgb), 0.12), - 0 4px 20px rgba(0, 0, 0, 0.1); - border-color: var(--color-brand); -} - -/* Subtle animation for chat messages in expanded state */ -.chat-expanded .chat__messages { - /* ✅ FIXED: Use animation tokens */ - animation: subtle-fade-in var(--timing-medium) var(--easing-standard) var(--reveal-stagger-delay) both; -} - -@keyframes subtle-fade-in { - from { - opacity: 0.8; - transform: translateY(4px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* Liquid Glass Hover Effect */ -#chatContainer:not(.chat-expanded):hover { - background: var(--glass-bg); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - border-color: var(--glass-border-color); - /* transform: translateX(-1px); */ - box-shadow: var(--glass-shadow); -} - -/* Auto-resize textarea styling with liquid glass focus */ -.chat-input { - overflow-y: hidden; - scrollbar-width: none; - -ms-overflow-style: none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard); -} - -.chat-input::-webkit-scrollbar { - display: none; -} - -.chat-input:focus { - background: rgba(255, 255, 255, 0.08) !important; - /* backdrop-filter: blur(12px) !important; */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important; - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important; - border-color: rgba(255, 255, 255, 0.15) !important; - box-shadow: - 0 0 0 2px rgba(var(--color-brand-rgb), 0.1), - 0 4px 12px rgba(0, 0, 0, 0.06); -} - -/* Enhanced send button styling */ -#sendButton { - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard), - filter var(--timing-fast) var(--easing-standard); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} - -/* :has() Chat Interface Enhancements */ - -/* Chat container responds to input focus (no scale to avoid clipping) */ -#chatContainer:has(.chat__input:focus) { - transform: translateY(-1px); - box-shadow: - 0 12px 40px rgba(0, 0, 0, 0.15), - 0 0 0 3px rgba(var(--color-brand-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.2); - border-color: var(--color-brand); - overflow: visible; -} - -/* Match header with lighter sheet while expanded */ -.chat-expanded .chat__header { - background: rgba(255, 255, 255, 0.08) !important; - border-bottom: 1px solid rgba(255, 255, 255, 0.14); -} -.dark .chat-expanded .chat__header { - background: rgba(255, 255, 255, 0.05) !important; - border-bottom-color: rgba(255, 255, 255, 0.12); -} - -/* Enhanced expanded state with input focus */ -.chat-expanded:has(.chat__input:focus) { - border-left-width: 4px; - border-color: var(--color-brand); - background: rgba(255, 255, 255, 0.15); -} - -/* Chat form with content gets enhanced styling */ -#chatContainer:has(.chat__input:not(:placeholder-shown)) .chat__header { - background: linear-gradient(135deg, - rgba(var(--color-brand-rgb), 0.1) 0%, - rgba(var(--color-brand-rgb), 0.05) 100%); - border-bottom: 1px solid rgba(var(--color-brand-rgb), 0.2); -} - -/* Send button activation based on input content */ -#chatContainer:has(.chat__input:not(:placeholder-shown)) #sendButton { - background-color: var(--color-brand) !important; - color: var(--color-text-inverse) !important; - transform: scale(1.05); - box-shadow: - 0 4px 12px rgba(var(--color-brand-rgb), 0.3), - 0 2px 8px rgba(0, 0, 0, 0.1); -} - -#sendButton:not(:disabled) { - background-color: var(--color-brand) !important; - color: var(--color-text-inverse) !important; -} - -#sendButton:not(:disabled):hover { - transform: scale(1.1); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); - filter: brightness(1.1); -} - -#sendButton:not(:disabled):active { - transform: scale(0.95); - filter: brightness(0.9); -} - -#sendButton:disabled { - background-color: var(--color-bg-secondary) !important; - color: var(--color-text-tertiary) !important; -} - -/* Chat input improvements */ -.chat__input:focus { - box-shadow: - 0 0 0 3px rgba(var(--color-brand-rgb), 0.1), - 0 4px 12px rgba(0, 0, 0, 0.1); - border-color: var(--color-brand) !important; -} - -.chat__input::placeholder { - color: var(--color-text-tertiary); -} - -/* Header button hover effects with enhanced micro-interactions */ -.chat__header button:hover svg { - transform: scale(1.15) rotate(2deg); - transition: transform var(--timing-fast) var(--easing-standard); -} - -/* Smooth state transitions for expand button icon */ -.chat__header button svg { - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: transform var(--timing-medium) var(--easing-standard); -} - -/* Chat bubble improvements - tighter spacing and better hierarchy */ -.chat-bubble { - @apply p-3 rounded-xl shadow-sm relative max-w-none; /* Reduced padding from p-4 to p-3 */ - word-wrap: break-word; - word-break: break-word; - overflow-wrap: break-word; - hyphens: auto; - white-space: pre-wrap; - line-height: 1.5; /* Slightly tighter line height */ - font-family: var(--font-brand); - border-radius: 1rem 1rem 1rem 0.25rem; /* Consistent rounded corners with tail */ -} - -.chat-bubble--user { - @apply ml-6; /* Reduced margin */ - background-color: var(--color-brand); - color: var(--color-text-inverse); - border-radius: 1rem 1rem 0.25rem 1rem; /* User tail on right */ - box-shadow: var(--elevation-4); -} - -.chat-bubble--bot { - @apply mr-6; /* Reduced margin */ - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border: 1px solid var(--color-border-primary); - color: var(--color-text-primary); - border-radius: 1rem 1rem 1rem 0.25rem; /* Bot tail on left */ - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -} - -/* Enhanced Chat Messages */ -#chat-messages { - @apply flex flex-col space-y-3 p-4; /* Tighter spacing */ - max-height: calc(100vh - 12rem); - overflow-y: auto; - scroll-behavior: smooth; -} - -.chat-bubble--error { - @apply mr-6; /* Consistent with other bubbles */ - background: linear-gradient( - 135deg, - rgba(239, 68, 68, 0.1) 0%, - rgba(239, 68, 68, 0.05) 100% - ); - border: 1px solid rgba(239, 68, 68, 0.2); - color: var(--color-text-primary); - border-radius: 1rem 1rem 1rem 0.25rem; /* Consistent tail */ -} - -/* Chat message formatting */ -.chat-bubble p { - @apply mb-3 last:mb-0; - word-wrap: break-word; - overflow-wrap: break-word; -} - -.chat-bubble code { - @apply px-2 py-1 rounded text-sm; - background-color: rgba(var(--color-brand-rgb), 0.1); - color: var(--color-brand); - font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; - word-break: break-all; -} - -.chat-bubble pre { - @apply p-3 rounded-lg overflow-x-auto text-sm my-3; - background-color: var(--color-bg-tertiary); - border: 1px solid var(--color-border-primary); -} - -.chat-bubble pre code { - @apply p-0; - background: none; - color: var(--color-text-primary); -} - -/* Chat message animations */ -.chat-bubble { - /* ✅ FIXED: Use animation tokens */ - animation: chat-message-enter var(--timing-medium) var(--easing-standard); - animation-fill-mode: both; -} - -@keyframes chat-message-enter { - from { - opacity: 0; - transform: translateY(10px) scale(0.95); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -/* Enhanced typing indicator */ -.typing-indicator { - @apply flex items-center space-x-2 p-4 rounded-xl mr-8; - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border: 1px solid var(--color-border-primary); -} - -.typing-indicator::after { - content: ''; - display: inline-block; - width: 4px; - height: 4px; - border-radius: 50%; - background-color: var(--color-text-secondary); - animation: typing-dot 1.4s infinite; -} - -.typing-indicator::before { - content: ''; - display: inline-block; - width: 4px; - height: 4px; - border-radius: 50%; - background-color: var(--color-text-secondary); - /* ✅ FIXED: Use animation tokens for stagger */ - animation: typing-dot 1.4s infinite var(--reveal-batch-delay); - margin-right: 4px; -} - -@keyframes typing-dot { - 0%, 60%, 100% { - opacity: 0.3; - transform: scale(1); - } - 30% { - opacity: 1; - transform: scale(1.2); - } -} - -/* Chat pair container - tighter spacing */ -.chat-pair { - @apply space-y-3; /* Slightly increased for better breathing room */ - position: relative; - margin-bottom: 1rem; -} - -/* Improved delete button styling aligned with design system */ -.chat-delete { - @apply absolute -top-1 -right-1 w-5 h-5 - rounded-full flex items-center justify-center text-xs - opacity-0 group-hover:opacity-100 - focus:outline-none focus:ring-2 focus:ring-offset-1; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - opacity var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard); - background-color: var(--color-surface); - border: 1px solid var(--color-border-primary); - color: var(--color-text-secondary); - font-size: 0.75rem; - line-height: 1; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - /* backdrop-filter: blur(8px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -} - -.chat-delete:hover { - background-color: rgba(239, 68, 68, 0.1); - border-color: rgb(239, 68, 68); - color: rgb(239, 68, 68); - transform: scale(1.1); - box-shadow: 0 4px 8px rgba(239, 68, 68, 0.2); -} - -.chat-delete:active { - transform: scale(0.95); - /* ✅ FIXED: Use animation tokens */ - animation: delete-shake var(--timing-medium) var(--easing-standard); -} - -.chat-pair:hover .chat-delete { - opacity: 1; -} - -/* Delete shake animation */ -@keyframes delete-shake { - 0%, 100% { transform: scale(0.95) rotate(0deg); } - 25% { transform: scale(0.95) rotate(-2deg); } - 75% { transform: scale(0.95) rotate(2deg); } -} \ No newline at end of file diff --git a/assets/css/components/child-links.css b/assets/css/components/child-links.css deleted file mode 100644 index 95c35f0..0000000 --- a/assets/css/components/child-links.css +++ /dev/null @@ -1,131 +0,0 @@ -/* Child Links Component - Flexbox layout approach */ - -.child-links-container { - /* Position directly beneath description with consistent spacing */ - margin-top: 0.75rem; - padding-top: 0; -} - -.child-links-list { - display: flex; - flex-wrap: wrap; - list-style: none; - padding: 0; - margin: 0; - gap: 0.5rem; - align-items: flex-start; -} - -.child-link-item { - margin: 0; - padding: 0; -} - -.child-link-pill { - display: inline-block; - font-size: 0.75rem; - padding: 0.25rem 0.75rem; - border-radius: 9999px; - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - border: 1px solid var(--color-border-primary); - background-color: var(--color-bg-secondary); - color: var(--color-text-secondary); - text-decoration: none; - white-space: nowrap; - line-height: 1.4; -} - -.child-link-pill:hover { - color: var(--color-brand); - border-color: var(--color-brand); - background-color: var(--color-hover); - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} - -.child-link-pill:focus { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} - -/* Simplest approach: Main link fills most space, child links follow naturally */ -.grid .tile { - display: flex; - flex-direction: column; - position: relative; -} - -.grid .tile > a { - /* Main link fills available space for maximum clickability */ - flex: 1; - display: flex; - flex-direction: column; - margin-bottom: 0.75rem; /* Space for child links */ -} - -.grid .tile .space-y-3 { - display: flex; - flex-direction: column; - height: 100%; -} - -.grid .tile .space-y-3 > p { - /* Description takes only the space it needs */ - flex: 0 0 auto; -} - -/* Child links sit naturally after main content area */ -.grid .tile .child-links-container { - flex: 0 0 auto; - margin-top: 0; - padding-top: 0; -} - -/* Dark mode support */ -.dark .child-link-pill { - border-color: var(--color-border-secondary); - background-color: var(--color-surface); -} - -.dark .child-link-pill:hover { - background-color: var(--color-brand); - color: var(--color-text-inverse); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); -} - -/* Responsive adjustments */ -@media (max-width: 768px) { - .child-links-container { - padding-top: 0.5rem; - } - - .child-link-pill { - font-size: 0.7rem; - padding: 0.2rem 0.6rem; - } -} - -/* Animation for child links appearance */ -.child-link-item { - animation: child-link-appear 0.3s ease-out; - animation-fill-mode: both; -} - -.child-link-item:nth-child(1) { animation-delay: 0.1s; } -.child-link-item:nth-child(2) { animation-delay: 0.15s; } -.child-link-item:nth-child(3) { animation-delay: 0.2s; } -.child-link-item:nth-child(4) { animation-delay: 0.25s; } -.child-link-item:nth-child(5) { animation-delay: 0.3s; } -.child-link-item:nth-child(6) { animation-delay: 0.35s; } -.child-link-item:nth-child(7) { animation-delay: 0.4s; } - -@keyframes child-link-appear { - from { - opacity: 0; - transform: translateY(10px) scale(0.9); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} \ No newline at end of file diff --git a/assets/css/components/code.css b/assets/css/components/code.css deleted file mode 100644 index 128fea7..0000000 --- a/assets/css/components/code.css +++ /dev/null @@ -1,96 +0,0 @@ -/* Code Blocks - align with header/tabs glass surface and tokens */ - -.code-block-enhanced { - background: var(--glass-bg); - border-radius: 0.75rem; - border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - box-shadow: var(--glass-shadow); - overflow: hidden; -} - -/* Light mode: strengthen wrapper border for visibility */ -@media (prefers-color-scheme: light) { - .code-block-enhanced { - border-color: var(--color-border-primary); - } -} - -.code-block-enhanced .code-header { - display: flex; - justify-content: space-between; - align-items: center; - gap: 0.75rem; - padding: 0.5rem 0.75rem; - background: var(--glass-bg); - border-bottom: 1px solid var(--glass-border-color); -} - -/* Light mode: strengthen header divider similar to article header */ -@media (prefers-color-scheme: light) { - .code-block-enhanced .code-header { - border-bottom-color: var(--color-border-primary); - } -} - -.code-block-enhanced .code-language { - color: var(--color-text-secondary); - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.04em; - font-size: 0.75rem; -} - -.code-block-enhanced .code-actions .btn { - border-radius: 0.5rem; -} - -.code-block-enhanced .code-actions .btn.btn--ghost { - background: var(--glass-bg); - border: 1px solid var(--glass-border-color); -} - -.code-block-enhanced .code-actions .btn.btn--ghost:hover { - background: var(--color-surface-hover); - color: var(--color-brand); - border-color: rgba(var(--color-brand-rgb), 0.35); -} - -.code-block-enhanced .code-content { - background: transparent; -} - -.code-block-enhanced .code-content .highlight, -.code-block-enhanced .code-content .highlight pre, -.code-block-enhanced .code-content pre, -.code-block-enhanced .code-content code { - background: transparent; -} - -.code-block-enhanced .code-content pre { - margin: 0; - padding: 0.75rem 1rem; -} - -.code-block-enhanced .code-content code { - display: block; -} - -/* Dark mode glow tuning aligns with header action glow */ -@media (prefers-color-scheme: dark) { - .code-block-enhanced { - box-shadow: var(--elevation-4); - } -} - -/* Copy button icon alignment and sizing - Ensure the single SVG icon in the copy button is visually centered and consistent */ -.code-block-enhanced .code-actions .copy-code .btn__icon { - margin-right: 0; /* no trailing space for icon-only buttons */ - width: 1rem; /* enforce square icon */ - height: 1rem; - display: block; /* remove inline alignment quirks */ -} - - diff --git a/assets/css/components/collapse.css b/assets/css/components/collapse.css deleted file mode 100644 index 8025efe..0000000 --- a/assets/css/components/collapse.css +++ /dev/null @@ -1,461 +0,0 @@ -/* Enhanced Collapse Component - Modern collapsible content with animations */ - -/* ========================================================================== - Base Collapse Component - ========================================================================== */ - -.collapse { - position: relative !important; - margin: 1.5rem 0 !important; - border-radius: 1rem !important; - overflow: hidden !important; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard) !important; - animation: collapse-enter var(--timing-medium) var(--easing-standard) !important; - animation-fill-mode: both !important; - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; - visibility: visible !important; - display: block !important; -} - -.collapse:hover { - transform: translateY(-2px) !important; - box-shadow: - 0 8px 24px rgba(0, 0, 0, 0.12), - 0 0 20px rgba(var(--color-brand-rgb), 0.08), - inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; -} - -/* ========================================================================== - Collapse Header (Trigger) - ========================================================================== */ - -.collapse__header { - position: relative; - cursor: pointer; - padding: 1.25rem 1.5rem; - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border: 1px solid var(--color-border-primary); - border-radius: 1rem; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - border-color var(--timing-medium) var(--easing-standard), - background var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard); - display: flex; - align-items: center; - gap: 1rem; - user-select: none; -} - -.collapse__header::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - transition: opacity var(--timing-medium) var(--easing-standard); - pointer-events: none; - border-radius: inherit; -} - -.collapse__header:hover::before { - opacity: 1; -} - -.collapse__header:hover { - border-color: var(--color-brand); - background: linear-gradient( - 135deg, - var(--color-surface-hover) 0%, - var(--color-bg-tertiary) 100% - ); -} - -.collapse.expanded .collapse__header { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - border-bottom-color: transparent; -} - -/* ========================================================================== - Collapse Icon - ========================================================================== */ - -.collapse__icon-wrapper { - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - width: 2rem; - height: 2rem; - border-radius: 0.5rem; - background: rgba(var(--color-brand-rgb), 0.1); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -.collapse__header:hover .collapse__icon-wrapper { - background: rgba(var(--color-brand-rgb), 0.15); - transform: scale(1.05); -} - -.collapse__icon { - width: 1.25rem; - height: 1.25rem; - transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); - stroke: var(--color-brand); - stroke-width: 2.5; - filter: drop-shadow(0 1px 2px rgba(var(--color-brand-rgb), 0.3)); -} - -.collapse.expanded .collapse__icon { - transform: rotate(90deg); -} - -/* ========================================================================== - Collapse Content - ========================================================================== */ - -.collapse__content-wrapper { - flex: 1; - min-width: 0; -} - -.collapse__title { - margin: 0 0 0.25rem 0; - font-family: var(--font-family-brand); - font-size: 1.125rem; - font-weight: 600; - line-height: 1.4; - color: var(--color-text-primary); - transition: all 0.2s ease; -} - -.collapse__header:hover .collapse__title { - color: var(--color-brand); - transform: translateX(2px); -} - -.collapse__description { - margin: 0; - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-secondary); - transition: color 0.2s ease; -} - -.collapse__header:hover .collapse__description { - color: var(--color-text-primary); -} - -/* ========================================================================== - Collapse Body (Collapsible Content) - ========================================================================== */ - -.collapse__body { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-top: none; - border-bottom-left-radius: 1rem; - border-bottom-right-radius: 1rem; - - /* Height-based collapse (consistent with all components) */ - max-height: 0; - opacity: 0; - overflow: hidden; - - /* Configure collapse behavior via CSS custom properties */ - --collapse-height-collapsed: 0; - --collapse-height-expanded: 2000px; - --collapse-opacity-collapsed: 0; - --collapse-opacity-expanded: 1; - --collapse-overflow-collapsed: hidden; - --collapse-overflow-expanded: visible; - --collapse-padding-collapsed: 0; - --collapse-padding-expanded: 1.5rem; - /* ✅ FIXED: Use animation tokens */ - --collapse-timing: var(--timing-medium); - --collapse-easing: var(--easing-standard); -} - -/* ✅ MIGRATED: Class-based to data-attribute system */ -.collapse[data-collapse-state="expanded"] .collapse__body, -.collapse.expanded .collapse__body { - border-color: var(--color-brand); -} - -.collapse__body-content { - /* ✅ FIXED: Use animation tokens */ - transition: transform var(--timing-medium) var(--easing-standard); - transform: translateY(-10px); -} - -/* ✅ MIGRATED: Support both class-based and data-attribute systems */ -.collapse[data-collapse-state="expanded"] .collapse__body-content, -.collapse.expanded .collapse__body-content { - transform: translateY(0); -} - -/* Enhanced content styling */ -.collapse__body-content > *:first-child { - margin-top: 0; -} - -.collapse__body-content > *:last-child { - margin-bottom: 0; -} - -.collapse__body-content p { - line-height: 1.6; - color: var(--color-text-primary); - margin-bottom: 1rem; -} - -.collapse__body-content code { - background: rgba(var(--color-brand-rgb), 0.1); - border-radius: 0.375rem; - padding: 0.125rem 0.375rem; - font-size: 0.875rem; - font-family: var(--font-family-mono); - color: var(--color-brand); -} - -.collapse__body-content pre { - background: var(--color-bg-tertiary); - border-radius: 0.5rem; - padding: 1rem; - margin: 1rem 0; - overflow-x: auto; - border: 1px solid var(--color-border-primary); -} - -/* ========================================================================== - Status Variants - ========================================================================== */ - -/* Info variant */ -.collapse--info .collapse__header { - background: linear-gradient( - 135deg, - rgba(59, 130, 246, 0.05) 0%, - rgba(59, 130, 246, 0.02) 100% - ); - border-color: rgba(59, 130, 246, 0.2); -} - -.collapse--info .collapse__icon-wrapper { - background: rgba(59, 130, 246, 0.1); -} - -.collapse--info .collapse__icon { - stroke: #3b82f6; -} - -.collapse--info .collapse__header:hover .collapse__title { - color: #1d4ed8; -} - -/* Warning variant */ -.collapse--warning .collapse__header { - background: linear-gradient( - 135deg, - rgba(245, 158, 11, 0.05) 0%, - rgba(245, 158, 11, 0.02) 100% - ); - border-color: rgba(245, 158, 11, 0.2); -} - -.collapse--warning .collapse__icon-wrapper { - background: rgba(245, 158, 11, 0.1); -} - -.collapse--warning .collapse__icon { - stroke: #f59e0b; -} - -.collapse--warning .collapse__header:hover .collapse__title { - color: #d97706; -} - -/* Danger variant */ -.collapse--danger .collapse__header { - background: linear-gradient( - 135deg, - rgba(239, 68, 68, 0.05) 0%, - rgba(239, 68, 68, 0.02) 100% - ); - border-color: rgba(239, 68, 68, 0.2); -} - -.collapse--danger .collapse__icon-wrapper { - background: rgba(239, 68, 68, 0.1); -} - -.collapse--danger .collapse__icon { - stroke: #ef4444; -} - -.collapse--danger .collapse__header:hover .collapse__title { - color: #dc2626; -} - -/* Success variant */ -.collapse--success .collapse__header { - background: linear-gradient( - 135deg, - rgba(34, 197, 94, 0.05) 0%, - rgba(34, 197, 94, 0.02) 100% - ); - border-color: rgba(34, 197, 94, 0.2); -} - -.collapse--success .collapse__icon-wrapper { - background: rgba(34, 197, 94, 0.1); -} - -.collapse--success .collapse__icon { - stroke: #22c55e; -} - -.collapse--success .collapse__header:hover .collapse__title { - color: #15803d; -} - -/* ========================================================================== - Animations - ========================================================================== */ - -@keyframes collapse-enter { - 0% { - opacity: 0; - transform: translateY(10px) scale(0.98); - } - 100% { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -/* ========================================================================== - Responsive Design - ========================================================================== */ - -@media (max-width: 768px) { - .collapse { - margin: 1rem 0; - border-radius: 0.75rem; - } - - .collapse__header { - padding: 1rem; - border-radius: 0.75rem; - gap: 0.75rem; - } - - .collapse.expanded .collapse__body { - padding: 1rem; - } - - .collapse__title { - font-size: 1rem; - } - - .collapse__description { - font-size: 0.8125rem; - } - - .collapse__icon-wrapper { - width: 1.75rem; - height: 1.75rem; - } - - .collapse__icon { - width: 1rem; - height: 1rem; - } -} - -/* ========================================================================== - Dark Mode Support - ========================================================================== */ - -@media (prefers-color-scheme: dark) { - .collapse__body-content code { - background: rgba(255, 255, 255, 0.1); - } -} - -/* ✅ DATA-ATTRIBUTE INTEGRATION - * ======================================================================= - * Integration with the Universal Component State Management System - * This allows collapse components to work with both class-based legacy - * and modern data-attribute approaches - */ - -/* Data-attribute collapsed state */ -.collapse[data-collapse-state="collapsed"] .collapse__body, -.collapse__body[data-collapse-state="collapsed"] { - max-height: var(--collapse-height-collapsed); - opacity: var(--collapse-opacity-collapsed); - overflow: hidden; - padding: var(--collapse-padding-collapsed); - transition: - max-height var(--collapse-timing) var(--collapse-easing), - opacity var(--collapse-timing) var(--collapse-easing), - padding var(--collapse-timing) var(--collapse-easing); -} - -/* Data-attribute transitioning state */ -.collapse[data-collapse-state="transitioning"] .collapse__body { - overflow: hidden; /* Prevent content spillage during animation */ - pointer-events: none; /* Prevent interaction during transition */ -} - -/* Data-attribute expanded state */ -.collapse[data-collapse-state="expanded"] .collapse__body, -.collapse__body[data-collapse-state="expanded"] { - max-height: var(--collapse-height-expanded); - opacity: var(--collapse-opacity-expanded); - overflow: var(--collapse-overflow-expanded); - padding: var(--collapse-padding-expanded); - transition: - max-height var(--collapse-timing) var(--collapse-easing), - opacity var(--collapse-timing) var(--collapse-easing), - padding var(--collapse-timing) var(--collapse-easing); -} - -/* Icon rotation for data-attribute system */ -.collapse[data-collapse-state="expanded"] .collapse__icon { - transform: rotate(180deg); -} - -/* Enhanced accessibility for data-attribute system */ -.collapse[data-collapse-state] .collapse__header { - /* Ensure proper ARIA attributes are communicated visually */ -} - -.collapse[data-collapse-state="expanded"] .collapse__header[aria-expanded="true"] { - /* Visual confirmation of expanded state */ - border-color: var(--color-brand); -} - -/* Migration helper - components can use either system */ -.collapse:not([data-collapse-state]) { - /* Legacy class-based system continues to work */ -} \ No newline at end of file diff --git a/assets/css/components/glossary.css b/assets/css/components/glossary.css deleted file mode 100644 index a9dcfe5..0000000 --- a/assets/css/components/glossary.css +++ /dev/null @@ -1,278 +0,0 @@ -/* Glossary Component - Enhanced UX for glossary entries and navigation */ - -/* Base Glossary Entry Styles */ -.glossary-entry { - position: relative; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: var(--radius-xl); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - overflow: hidden; - /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - margin-bottom: 1rem; -} - -.glossary-entry::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} - -/* Enhanced hover states */ -.glossary-entry:hover { - border-color: var(--color-brand); - /* box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 0 20px rgba(var(--color-brand-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15); */ -} - -.glossary-entry:hover::before { - opacity: 1; -} - -/* Focus states for accessibility */ -.glossary-entry:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - transform: translateY(-2px); -} - -/* Glossary entry content */ -.glossary-entry a { - display: block; - color: inherit; - text-decoration: none; - width: 100%; - position: relative; - z-index: 2; -} - -.glossary-entry h2 { - color: var(--color-text-primary); - font-weight: 700; - font-size: 1.25rem; - line-height: 1.3; - margin-bottom: 0.5rem; - transition: color 0.2s ease; - position: relative; -} - -.glossary-entry:hover h2 { - color: var(--color-brand); -} - -.glossary-entry h2::after { - content: ''; - position: absolute; - bottom: -2px; - left: 0; - width: 0; - height: 2px; - background: linear-gradient( - 90deg, - var(--color-brand) 0%, - rgba(var(--color-brand-rgb), 0.5) 100% - ); - transition: width 0.3s ease; -} - -.glossary-entry:hover h2::after { - width: 100%; -} - -/* Glossary entry descriptions */ -.glossary-entry p { - color: var(--color-text-secondary); - line-height: 1.6; - font-size: 0.95rem; - margin: 0; - transition: color 0.2s ease; -} - -.glossary-entry:hover p { - color: var(--color-text-primary); -} - -/* Glossary letter headers */ -.glossary-entry + h1 { - color: var(--color-text-primary); - font-size: 2rem; - font-weight: 800; - margin: 3rem 0 1.5rem 0; - padding-bottom: 0.5rem; - border-bottom: 3px solid var(--color-brand); - position: relative; -} - -.glossary-entry + h1 a { - color: inherit; - text-decoration: none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} - -.glossary-entry + h1 a:hover { - color: var(--color-brand); - transform: translateX(4px); -} - -/* First letter styling for glossary headers */ -h1[id] { - color: var(--color-text-primary); - font-size: 2rem; - font-weight: 800; - margin: 3rem 0 1.5rem 0; - padding-bottom: 0.5rem; - border-bottom: 3px solid var(--color-brand); - position: relative; - scroll-margin-top: var(--header-offset, 64px); -} - -h1[id] a { - color: inherit; - text-decoration: none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: inline-block; -} - -h1[id] a:hover { - color: var(--color-brand); - transform: translateX(4px); -} - -h1[id]::before { - content: ''; - position: absolute; - bottom: -3px; - left: 0; - width: 100%; - height: 3px; - background: linear-gradient( - 90deg, - var(--color-brand) 0%, - rgba(var(--color-brand-rgb), 0.3) 70%, - transparent 100% - ); -} - -/* Glossary container */ -#enteries-container { - padding: 1rem 0; -} - -/* Responsive adjustments */ -@media (max-width: 768px) { - .glossary-entry { - margin-bottom: 1rem; - padding: 1rem; - } - - .glossary-entry:hover { - transform: translateY(-2px); - } - - h1[id] { - font-size: 1.5rem; - margin: 2rem 0 1rem 0; - } -} - -/* Dark mode enhancements */ -.dark .glossary-entry { - border-color: var(--color-border-secondary); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.dark .glossary-entry:hover { - box-shadow: - 0 12px 28px rgba(0, 0, 0, 0.4), - 0 0 20px rgba(var(--color-brand-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -/* Animation improvements */ -.glossary-entry { - animation: glossary-enter 0.4s ease-out; - animation-fill-mode: both; -} - -@keyframes glossary-enter { - from { - opacity: 0; - transform: translateY(20px) scale(0.98); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -/* Stagger animation for multiple entries */ -.glossary-entry:nth-child(odd) { animation-delay: 0s; } -.glossary-entry:nth-child(even) { animation-delay: 0.1s; } - -/* Glossary navigation enhancements */ -.glossary-nav { - position: sticky; - top: 2rem; - /* background: var(--color-surface); */ - background: var(--glass-bg); - border-radius: var(--radius-xl); - padding: 1rem; - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - margin-bottom: 2rem; -} - -.glossary-nav a { - display: inline-block; - padding: 0.5rem; - margin: 0.25rem; - border-radius: var(--radius-lg); - color: var(--color-text-secondary); - text-decoration: none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - font-weight: 500; -} - -.glossary-nav a:hover { - background-color: var(--color-brand); - color: var(--color-text-inverse); - transform: translateY(-1px); -} \ No newline at end of file diff --git a/assets/css/components/navigation-api.css b/assets/css/components/navigation-api.css deleted file mode 100644 index a4c3d1f..0000000 --- a/assets/css/components/navigation-api.css +++ /dev/null @@ -1,174 +0,0 @@ -/* Navigation API Endpoint Styling */ -/* Enhanced styling for API endpoints in the main navigation sidebar */ - -/* ========================================================================== - API Endpoint Items - ========================================================================== */ - -.api-endpoint-item { - display: flex; - align-items: center; - gap: 0.5rem; - width: 100%; -} - -/* ========================================================================== - HTTP Method Badges - ========================================================================== */ - -.http-method-badge { - display: inline-block; - padding: 0.125rem 0.375rem; - font-size: 0.6875rem; - font-weight: 600; - text-transform: uppercase; - border-radius: 0.25rem; - min-width: 3rem; - text-align: center; - letter-spacing: 0.025em; - flex-shrink: 0; -} - -/* GET - Green */ -/* Old hex-based method colors commented out in favor of tokens per themes/milodocs/init */ -/* .http-method-badge--get { background: #10b981; color: white; } */ -.http-method-badge--get { background: var(--http-get-bg); color: var(--http-get-text); } - -/* POST - Blue */ -/* .http-method-badge--post { background: #3b82f6; color: white; } */ -.http-method-badge--post { background: var(--http-post-bg); color: var(--http-post-text); } - -/* PUT - Orange */ -/* .http-method-badge--put { background: #f59e0b; color: white; } */ -.http-method-badge--put { background: var(--http-put-bg); color: var(--http-put-text); } - -/* PATCH - Purple */ -/* .http-method-badge--patch { background: #8b5cf6; color: white; } */ -.http-method-badge--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } - -/* DELETE - Red */ -/* .http-method-badge--delete { background: #ef4444; color: white; } */ -.http-method-badge--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } - -/* HEAD, OPTIONS - Gray */ -/* .http-method-badge--head, .http-method-badge--options { background: #6b7280; color: white; } */ -.http-method-badge--head, -.http-method-badge--options { background: var(--http-head-bg); color: var(--http-head-text); } - -/* ========================================================================== - API Endpoint Path and Summary - ========================================================================== */ - -.api-endpoint-path { - font-weight: 500; - color: var(--color-text-primary); - font-size: 0.8125rem; - line-height: 1.3; - word-break: break-all; - flex: 1; -} - -.api-endpoint-summary { - display: block; - font-size: 0.75rem; - color: var(--color-text-tertiary); - line-height: 1.3; - margin-top: 0.25rem; - font-weight: 400; - font-style: italic; -} - -/* ========================================================================== - Enhanced Sidebar Item Styling for API Endpoints - ========================================================================== */ - -/* Make API endpoint links have more vertical space */ -.sidebar__link:has(.api-endpoint-item) { - padding: 0.75rem; - align-items: flex-start; -} - -/* Ensure the text wrapper takes full width */ -.sidebar__text:has(.api-endpoint-item) { - width: 100%; -} - -/* ========================================================================== - Hover and Active States - ========================================================================== */ - -/* Hover states are implicitly handled by dark-mode tokens; leaving hover overrides minimal */ -.sidebar__link:hover .http-method-badge--get { background: var(--http-get-bg); } - -.sidebar__link:hover .http-method-badge--post { background: var(--http-post-bg); } - -.sidebar__link:hover .http-method-badge--put { background: var(--http-put-bg); } - -.sidebar__link:hover .http-method-badge--patch { background: var(--http-patch-bg); } - -.sidebar__link:hover .http-method-badge--delete { background: var(--http-delete-bg); } - -.sidebar__link:hover .http-method-badge--head, -.sidebar__link:hover .http-method-badge--options { background: var(--http-head-bg); } - -/* Active state enhancements */ -.sidebar__link--active .api-endpoint-path { - color: var(--color-brand-primary); - font-weight: 600; -} - -.sidebar__link--active .api-endpoint-summary { - color: var(--color-text-secondary); -} - -/* ========================================================================== - Responsive Design - ========================================================================== */ - -@media (max-width: 768px) { - .http-method-badge { - min-width: 2.5rem; - font-size: 0.625rem; - padding: 0.125rem 0.25rem; - } - - .api-endpoint-path { - font-size: 0.75rem; - } - - .api-endpoint-summary { - font-size: 0.6875rem; - } - - .sidebar__link:has(.api-endpoint-item) { - padding: 0.5rem; - } -} - -/* ========================================================================== - Dark Mode Support - ========================================================================== */ - -/* Dark mode handled via CSS variables in :root/.dark */ - -/* ========================================================================== - Focus States for Accessibility - ========================================================================== */ - -.sidebar__link:focus-visible:has(.api-endpoint-item) { - outline: 2px solid var(--color-brand-primary); - outline-offset: 2px; -} - -/* ========================================================================== - Animation and Transitions - ========================================================================== */ - -.http-method-badge { - transition: background-color 0.15s ease; -} - -.api-endpoint-path, -.api-endpoint-summary { - transition: color 0.15s ease; -} \ No newline at end of file diff --git a/assets/css/components/navigation.css b/assets/css/components/navigation.css deleted file mode 100644 index cc4e906..0000000 --- a/assets/css/components/navigation.css +++ /dev/null @@ -1,4 +0,0 @@ -/* Navigation Component - Modular navigation system with NVIDIA styling */ - -/* Import modular navigation components */ -@import './navigation/index.css'; \ No newline at end of file diff --git a/assets/css/components/navigation/README.md b/assets/css/components/navigation/README.md deleted file mode 100644 index fb6a684..0000000 --- a/assets/css/components/navigation/README.md +++ /dev/null @@ -1,104 +0,0 @@ -# Navigation Module System - -This directory contains the modularized navigation components for the NVIDIA Hugo theme. The navigation system has been broken down into logical, reusable modules for better maintainability and organization. - -## Structure - -``` -navigation/ -├── index.css # Main import file for all navigation modules -├── base.css # Container queries, shared foundations, and base nav styling -├── chat-toc-toggle.css # Interactive toggle between chat and table of contents -├── sidebar.css # Main navigation sidebar with responsive behavior -├── topbar.css # Horizontal navigation bar with CSS Grid layout -├── toc.css # Table of Contents navigation (inline and sidebar) -├── dropdown.css # Dropdown menus for navigation links -└── README.md # This documentation file -``` - -## Module Descriptions - -### `base.css` -- Container query definitions for responsive behavior -- Shared navigation link styling and animations -- Base nested content styling using the animation system -- Expand toggle button styling -- Focus states and accessibility features - -### `chat-toc-toggle.css` -- Interactive toggle component for switching between chat and TOC views -- Hover states, active states, and focus accessibility -- Ripple effects and smooth transitions -- Initialization handling - -### `sidebar.css` -- Main navigation sidebar container styling -- Responsive behavior (desktop sticky, mobile overlay) -- LinkTree component styling -- Sidebar item hierarchy (levels 1-4 and default) -- Mobile header and close button styling -- Dark mode background overrides - -### `topbar.css` -- Horizontal navigation bar using CSS Grid layout -- Responsive grid areas: logo, navigation, search, controls -- Mobile-first responsive behavior -- Logo, navigation links, search, and controls styling - -### `toc.css` -- Table of Contents styling for both inline and sidebar variants -- TOC link styling with hover states and active indicators -- Heading level variations (h1, h2, h3) -- Smooth scrolling progress indicator -- Enhanced animations and responsive adjustments -- Dark mode background overrides - -### `dropdown.css` -- Dropdown menu styling for navigation links -- Backdrop filter and shadow effects -- Hover and focus states -- Smooth show/hide animations -- Positioning and arrow indicators - -## Usage - -### Importing the Complete System -```css -@import 'navigation/index.css'; -``` - -### Importing Individual Modules -```css -@import 'navigation/base.css'; -@import 'navigation/topbar.css'; -@import 'navigation/sidebar.css'; -/* etc. */ -``` - -## Key Features - -- **Modular Architecture**: Each component is self-contained and can be imported individually -- **Responsive Design**: Uses container queries for advanced responsive behavior -- **Animation System Integration**: Leverages the theme's animation tokens for consistency -- **Accessibility**: Enhanced focus states and ARIA-compliant interactions -- **Dark Mode Support**: Proper theme integration with dark mode overrides -- **Performance Optimized**: Specific transition properties to avoid layout thrashing - -## Dependencies - -- CSS Custom Properties (CSS Variables) for theming -- Animation system tokens (`--timing-*`, `--easing-*`, `--collapse-*`) -- Tailwind CSS utilities (via `@apply` directives) -- Container query support - -## Maintenance Notes - -- When adding new navigation components, create a new module file and add it to `index.css` -- Follow the existing naming conventions: `.component-name__element--modifier` -- Use the shared animation tokens from the animation system -- Ensure responsive behavior uses container queries where appropriate -- Test accessibility features (focus states, keyboard navigation) when making changes - -## Migration from Monolithic File - -The original `navigation.css` file has been refactored into this modular system. The main file now simply imports `navigation/index.css`, ensuring backward compatibility while providing the benefits of modular architecture. \ No newline at end of file diff --git a/assets/css/components/navigation/base.css b/assets/css/components/navigation/base.css deleted file mode 100644 index 3d9fe01..0000000 --- a/assets/css/components/navigation/base.css +++ /dev/null @@ -1,120 +0,0 @@ -/* Navigation Base - Container queries and shared navigation foundations */ - -/* ======================================== - Container Query Context - ======================================== */ - -.sidebar-container, -.topbar, -.chat-toc-toggle { - container-type: inline-size; -} - -.sidebar-container { - container-name: sidebar; - container-type: inline-size; -} - -.topbar { - container-name: topbar; -} - -.chat-toc-toggle { - container-name: toggle; -} - -/* Base navigation link styling */ -.nav-link { - position: relative; - padding: 0.5rem 0.75rem; - border-radius: var(--radius-md); - font-weight: 400; - font-size: 0.875rem; - line-height: 1.2; - min-height: 2.25rem; - color: var(--color-text-primary); - text-decoration: none; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard); - white-space: nowrap; - overflow: hidden; /* Essential for ripple containment */ - display: flex; - align-items: center; - cursor: pointer; -} - -/* Enhanced focus states for nav-links */ -.nav-link:focus { - outline: 2px solid transparent; - outline-offset: 2px; - box-shadow: - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.2); /* Double focus ring */ -} - -.nav-link::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.03) 100% - ); - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} - -.nav-link:hover, -.nav-link:focus { - color: var(--color-brand); - /* Removed transform and background for cleaner minimal look */ -} - -.nav-link:hover::before, -.nav-link:focus::before { - opacity: 0.5; /* More subtle hover effect */ -} - -/* Base nested content styling - use new animation system */ -.nested-content { - /* Use animation bridge collapse system instead of display:none */ - max-height: var(--collapse-height-collapsed); - opacity: var(--collapse-opacity-collapsed); - overflow: hidden; - transition: - max-height var(--collapse-timing) var(--collapse-easing), - opacity var(--collapse-timing) var(--collapse-easing); -} - -/* Enhanced hover states - use animation tokens for consistency */ -.nested-content a:hover { - transform: translateX(4px); - transition: transform var(--timing-fast) var(--easing-standard); -} - -/* Expand toggle button - use animation tokens */ -.expand-toggle { - padding: 0.25rem; - border-radius: var(--radius-base); - color: var(--color-text-secondary); - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard); -} - -.expand-toggle:hover { - background-color: var(--color-surface-hover); - color: var(--color-brand); -} - -.expand-toggle svg { - transition: transform var(--timing-fast) var(--easing-standard); -} \ No newline at end of file diff --git a/assets/css/components/navigation/chat-toc-toggle.css b/assets/css/components/navigation/chat-toc-toggle.css deleted file mode 100644 index eec2e6b..0000000 --- a/assets/css/components/navigation/chat-toc-toggle.css +++ /dev/null @@ -1,129 +0,0 @@ -/* Chat/TOC Toggle Component - Interactive toggle between chat and table of contents */ - -/* Chat/TOC Toggle Component */ -.chat-toc-toggle { - display: flex; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.375rem; - overflow: hidden; - box-shadow: var(--elevation-4); - height: 2.25rem; - min-width: 72px; /* Ensure minimum visibility */ - - /* Prevent flash during initialization */ - opacity: 1; - transition: opacity var(--timing-instant) var(--easing-standard); - - /* Enhance visibility */ - position: relative; -} - -.chat-toc-toggle.initialized { - opacity: 1; - animation: none; /* Cancel fallback animation */ -} - -@keyframes fallback-show { - to { opacity: 1; } -} - -.chat-toc-toggle__option { - position: relative; - display: flex; - align-items: center; - justify-content: center; - padding: 0.5rem; - min-width: 2.25rem; - min-height: 2.25rem; - border: none; - background: transparent; - color: var(--color-text-secondary); - cursor: pointer; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard); - overflow: hidden; -} - -.chat-toc-toggle__option:hover { - background: var(--color-surface-hover); - color: var(--color-text-primary); - transform: var(--transform-lift-subtle); - box-shadow: 0 4px 8px color-mix(in srgb, black 10%, transparent); -} - -.chat-toc-toggle__option--active { - background: var(--color-brand); - color: var(--color-text-inverse); -} - -.chat-toc-toggle__option--active:hover { - background: var(--color-brand-1); - transform: var(--transform-lift-subtle); -} - -.chat-toc-toggle__icon { - width: 1.125rem; - height: 1.125rem; - flex-shrink: 0; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard); - filter: brightness(0.8); -} - -.chat-toc-toggle__option:hover .chat-toc-toggle__icon { - filter: brightness(1); - transform: scale(1.1); -} - -.chat-toc-toggle__option--active .chat-toc-toggle__icon { - filter: brightness(0) invert(1); -} - -.chat-toc-toggle__option--active:hover .chat-toc-toggle__icon { - filter: brightness(0) invert(1); - transform: scale(1.1); -} - -/* Focus states for accessibility */ -.chat-toc-toggle__option:focus { - outline: 2px solid transparent; - outline-offset: 2px; - box-shadow: 0 0 0 2px var(--color-brand); - z-index: 1; -} - -/* Ripple effect on click */ -.chat-toc-toggle__option::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: radial-gradient( - circle at center, - color-mix(in srgb, var(--color-brand) 10%, transparent) 0%, - transparent 70% - ); - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} - -.chat-toc-toggle__option:hover::before { - opacity: 1; -} - -.chat-toc-toggle__option:active::before { - opacity: 1; -} - -.chat-toc-toggle__option:active { - transform: translateY(0); - box-shadow: 0 2px 4px color-mix(in srgb, black 10%, transparent); -} \ No newline at end of file diff --git a/assets/css/components/navigation/dropdown.css b/assets/css/components/navigation/dropdown.css deleted file mode 100644 index f4f857c..0000000 --- a/assets/css/components/navigation/dropdown.css +++ /dev/null @@ -1,82 +0,0 @@ -/* Dropdown Navigation - Dropdown menus for navigation links */ - -.topbar__dropdown { - @apply absolute left-0 mt-2 w-52 rounded-xl overflow-hidden - shadow-xl p-2 transition-all duration-300; - /* background-color: var(--color-surface); */ - background: var(--glass-bg); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - opacity: 0; - visibility: hidden; - transform: translateY(-10px) scale(0.95); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 20px rgba(var(--color-brand-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); -} - -.group:hover .topbar__dropdown { - @apply block; - opacity: 1; - visibility: visible; - transform: translateY(0) scale(1); -} - -.topbar__dropdown::before { - content: ''; - position: absolute; - top: -6px; - left: 20px; - width: 12px; - height: 12px; - /* background-color: var(--color-surface); */ - background: var(--glass-bg); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - border-bottom: none; - border-right: none; - transform: rotate(45deg); - z-index: -1; -} - -.topbar__dropdown-link { - @apply flex items-center px-4 py-3 text-sm rounded-lg - transition-all duration-200 focus:outline-none focus:ring-2 - relative overflow-hidden; - color: var(--color-text-primary); - --tw-ring-color: var(--color-brand); - text-decoration: none; - margin: 2px 0; -} - -.topbar__dropdown-link::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 90deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 100% - ); - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} - -.topbar__dropdown-link:hover, -.topbar__dropdown-link:focus { - background-color: var(--color-surface-hover); - color: var(--color-brand); - transform: translateX(4px); - border-inline-start: 3px solid var(--color-brand); - padding-inline-start: calc(1rem - 3px); -} - -.topbar__dropdown-link:hover::before, -.topbar__dropdown-link:focus::before { - opacity: 1; -} \ No newline at end of file diff --git a/assets/css/components/navigation/index.css b/assets/css/components/navigation/index.css deleted file mode 100644 index 082a274..0000000 --- a/assets/css/components/navigation/index.css +++ /dev/null @@ -1,10 +0,0 @@ -/* Navigation Module - Main import file for all navigation components */ - -/* Import all navigation modules in proper order */ -@import './base.css'; -@import './chat-toc-toggle.css'; -@import './sidebar.css'; -@import './topbar.css'; -@import './toc.css'; -@import './dropdown.css'; -@import './language-switcher.css'; \ No newline at end of file diff --git a/assets/css/components/navigation/language-switcher.css b/assets/css/components/navigation/language-switcher.css deleted file mode 100644 index 910153d..0000000 --- a/assets/css/components/navigation/language-switcher.css +++ /dev/null @@ -1,18 +0,0 @@ -/* Language Switcher transitions migrated from page-enhancements.css */ - -.language-switcher .hidden { - opacity: 0; - transform: translateY(-8px); - transition: opacity 0.2s ease-out, transform 0.2s ease-out; -} - -.language-switcher .block { - opacity: 1; - transform: translateY(0); -} - -@media (max-width: 640px) { - .language-switcher { position: relative; } -} - - diff --git a/assets/css/components/navigation/sidebar.css b/assets/css/components/navigation/sidebar.css deleted file mode 100644 index 18edd99..0000000 --- a/assets/css/components/navigation/sidebar.css +++ /dev/null @@ -1,343 +0,0 @@ -/* Sidebar Navigation - Main navigation sidebar with responsive behavior */ - -/* Sidebar Container Styling */ -.sidebar, -.sidebar-container { - background-color: transparent; - color: var(--color-text-primary); - border-inline-end: none; - /* Enable named container for container queries in this file */ - container-type: inline-size; - container-name: sidebar; -} - -/* Desktop sidebar styling */ -/* -@container sidebar (min-width: 768px) { - .sidebar, - .sidebar-container { - background-color: transparent; - border-inline-end: none; - transform: translateX(0) !important; - position: sticky !important; - display: flex !important; - } -} -*/ - -/* FALLBACK: Media query for desktop sidebar visibility */ -/* -@media (min-width: 768px) { - .sidebar-container { - transform: translateX(0) !important; - position: sticky !important; - display: flex !important; - } -} -*/ - -/* Mobile sidebar styling */ -@container sidebar (max-width: 767px) { - .sidebar-container { - /* Ensure it starts hidden on mobile */ - position: fixed; - z-index: 40; - width: 20rem; /* w-80 equivalent */ - height: 100vh; - top: 0; - left: 0; - transform: translateX(-100%); - /* ✅ FIXED: Use animation tokens */ - transition: transform var(--timing-medium) var(--easing-standard); - } - - .sidebar.translate-x-0, - .sidebar-container.translate-x-0 { - transform: translateX(0) !important; - } -} - -/* Mobile Header Styling - Force hide on desktop */ -.sidebar-header { - border-bottom: none; - background-color: transparent; - color: var(--color-text-primary); - display: flex; -} - -/* Force hide sidebar header on desktop */ -@container sidebar (min-width: 768px) { - .sidebar__header, - .sidebar-header { - display: none !important; - } -} - -/* Fallback: Hide mobile navigation elements on desktop */ -@media (min-width: 768px) { - .sidebar__header, - .sidebar-header { - display: none !important; - } - - [data-component="navigation-mobile-toggle"] { - display: none !important; - } -} - -/* Ensure sidebar starts hidden on mobile */ -@container sidebar (max-width: 767px) { - .sidebar:not(.translate-x-0), - .sidebar-container:not(.translate-x-0) { - transform: translateX(-100%) !important; - } -} - -.sidebar__close-button, -.sidebar-close-btn { - color: var(--color-text-secondary); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard); - border: none; - background: transparent; - cursor: pointer; -} - -.sidebar__close-button:hover, -.sidebar-close-btn:hover { - background-color: var(--color-surface-hover); - color: var(--color-text-primary); - border-radius: var(--radius-lg); -} - -.sidebar__close-button:focus, -.sidebar-close-btn:focus { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} - -/* LinkTree Styling */ -[data-link-tree], -#linkTree { - background-color: transparent; - color: var(--color-text-primary); - width: 100%; -} - -/* Desktop linkTree padding adjustment */ -@container sidebar (min-width: 768px) { - [data-link-tree], - #linkTree { - padding-inline-start: 4px; /* Add space for focus ring to prevent clipping */ - padding-inline-end: 0; - } -} - -/* Mobile linkTree styling */ -@container sidebar (max-width: 767px) { - [data-link-tree], - #linkTree { - padding: 1rem; - } -} - -/* Prevent layout shift during initialization */ -/* -#linkTree:not(.initialized) { - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); -} -*/ - -[data-link-tree].initialized, -#linkTree.initialized { - opacity: 1; -} - -/* Robust expansion using :has() based on aria-expanded (fallback if JS state desyncs) */ -li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="true"]) > .nested-content { - max-height: var(--collapse-height-expanded); - opacity: var(--collapse-opacity-expanded); - overflow: visible; -} - -li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested-content { - max-height: var(--collapse-height-collapsed); - opacity: var(--collapse-opacity-collapsed); - overflow: hidden; -} - -/* Allow interaction inside nested content while its parent is transitioning */ -.nested-content[data-collapse-state="transitioning"] { - /* Override global pattern that disables all pointer events during transitions */ - pointer-events: auto; -} - -/* ✅ NEW ANIMATION SYSTEM - Use data attributes for consistent behavior */ -/* Ensure animations only work after initialization */ -[data-link-tree].initialized .nested-content[data-collapse-state="expanded"], -#linkTree.initialized .nested-content[data-collapse-state="expanded"] { - max-height: var(--collapse-height-expanded); - opacity: var(--collapse-opacity-expanded); - overflow: visible; /* Allow content to be fully visible */ -} - -[data-link-tree].initialized .nested-content[data-collapse-state="collapsed"], -#linkTree.initialized .nested-content[data-collapse-state="collapsed"] { - max-height: var(--collapse-height-collapsed); - opacity: var(--collapse-opacity-collapsed); - overflow: hidden; -} - -[data-link-tree].initialized .nested-content[data-collapse-state="transitioning"], -#linkTree.initialized .nested-content[data-collapse-state="transitioning"] { - overflow: hidden; /* Prevent content spillage during animation */ -} - -/* Sidebar Navigation Components - Cohesive Design */ -.sidebar__item { - @apply flex items-center rounded-md transition-all duration-200; - background-color: transparent; - margin: 1px 0; -} - -.sidebar__item:hover { - background-color: var(--color-surface-hover); -} - -.sidebar__link { - @apply flex items-center flex-grow p-2 transition-all duration-200 - focus:outline-none focus:ring-2 rounded-l-md; - color: var(--color-text-primary); - text-decoration: none; - --tw-ring-color: var(--color-brand); - min-height: 2.5rem; /* Consistent touch target */ -} - -.sidebar__link:hover, -.sidebar__link:focus { - color: var(--color-brand); -} - -.sidebar__link--active { - color: var(--color-brand); - background-color: var(--color-hover); -} - -.sidebar__icon { - /* Reduced icon size for tighter look */ - /* @apply w-5 h-5 mr-3 flex-shrink-0; */ - @apply w-4 h-4 mr-3 flex-shrink-0; -} - -.sidebar__text { - @apply flex-grow; -} - -.sidebar__expander { - @apply p-2 transition-all duration-200 focus:outline-none focus:ring-2 - rounded-r-md flex items-center justify-center; - color: var(--color-text-secondary); - min-width: 2.5rem; - min-height: 2.5rem; - --tw-ring-color: var(--color-brand); -} - -.sidebar__expander:hover, -.sidebar__expander:focus { - color: var(--color-brand); - background-color: var(--color-surface-active); -} - -.sidebar__chevron { - @apply w-4 h-4 transition-transform duration-200; -} - -/* Level-specific styling */ -.sidebar__item--level-1 .sidebar__text { - /* Step down one size from text-lg and slightly reduce weight */ - /* @apply text-lg font-brand font-bold; */ - @apply text-base font-semibold; - font-family: "NVIDIA", "Arial", "Helvetica", sans-serif; -} - -.sidebar__item--level-1 { - @apply mb-1; -} - -.sidebar__item--level-2 { - @apply ml-4; -} - -.sidebar__item--level-2 .sidebar__text { - /* Step down one size from text-base */ - /* @apply font-normal text-base; */ - @apply font-normal text-sm; -} - -.sidebar__item--level-3 { - @apply ml-6; -} - -.sidebar__item--level-3 .sidebar__text { - /* Step down one size from text-sm */ - /* @apply font-light text-sm; */ - @apply font-light text-xs; -} - -.sidebar__item--level-4 { - @apply ml-8; -} - -.sidebar__item--level-4 .sidebar__text { - /* Step down one size from text-sm */ - /* @apply text-sm; */ - @apply text-xs; -} - -.sidebar__item--level-default { - @apply ml-10; -} - -.sidebar__item--level-default .sidebar__text { - @apply text-xs; -} - -/* Ensure text-brand utility works with sidebar items */ -.sidebar__link.text-brand { - color: var(--color-brand) !important; -} - -/* Enhanced active state for the whole item */ -.sidebar__item:has(.sidebar__link--active) { - background-color: var(--color-hover); - /* box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.2); */ - box-shadow: var(--elevation-brand-subtle); -} - -/* Performance hints for hover states (localize former global rules) */ -.sidebar:has(.sidebar__item:hover), -.sidebar-container:has(.sidebar__item:hover) { - will-change: transform; - contain: layout; -} - -/* Right Sidebar Styling - Remove background in dark mode */ -#sidebar-right { - background: transparent; -} - -.dark #sidebar-right { - background: transparent !important; - background-color: transparent !important; -} - -/* Remove chat controls background in dark mode */ -.dark .chat-controls { - background: transparent !important; - background-color: transparent !important; - border: none !important; - box-shadow: none !important; -} \ No newline at end of file diff --git a/assets/css/components/navigation/toc.css b/assets/css/components/navigation/toc.css deleted file mode 100644 index b5c3825..0000000 --- a/assets/css/components/navigation/toc.css +++ /dev/null @@ -1,229 +0,0 @@ -/* Table of Contents (TOC) - Navigation within content and sidebar TOC */ - -/* Enhanced TOC Styling */ -.toc { - @apply rounded-lg p-6 mb-8; - background: transparent; - border: none; - box-shadow: none; -} - -.toc-header { - @apply flex items-center mb-4 pb-3; - border: none; - color: var(--color-text-primary); -} - -.toc-content a { - @apply inline-block py-2 px-3 rounded-lg transition-all duration-200; - color: var(--color-text-secondary); - text-decoration: none; -} - -.toc-content a:hover { - background-color: var(--color-surface-hover); - color: var(--color-brand); - transform: translateX(4px); -} - -/* Enhanced Right Sidebar TOC */ -.toc { - @apply p-6 text-sm; - background: transparent; - border-radius: var(--radius-xl); - color: var(--color-text-primary); -} - -.toc__nav { - position: relative; -} - -.toc__nav::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 3px; - height: 100%; - background: linear-gradient( - to bottom, - var(--color-brand) 0%, - rgba(var(--color-brand-rgb), 0.3) 50%, - transparent 100% - ); - border-radius: 2px; -} - -.toc ul { - @apply list-none pl-4 space-y-1; - margin: 0; -} - -.toc ul ul { - @apply pl-4 mt-2 border-l; - border-color: color-mix(in srgb, var(--color-border-primary) 20%, transparent); -} - -/* TOC Link Styling */ -.toc-link { - @apply block py-2 px-3 rounded-lg transition-all duration-200 - relative overflow-hidden; - color: var(--color-text-secondary); - text-decoration: none; - line-height: 1.4; - font-weight: 400; - cursor: pointer; /* Ensure ripple-ready */ -} - -.toc-link::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 90deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 100% - ); - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} - -.toc-link:hover { - background-color: var(--color-surface-hover); - color: var(--color-brand); - transform: translateX(4px); - padding-inline-start: calc(0.75rem + 2px); - border-inline-start: 2px solid var(--color-brand); -} - -.toc-link:hover::before { - opacity: 1; -} - -.toc-link:focus { - outline: 2px solid transparent; - outline-offset: 2px; - color: var(--color-brand); - /* box-shadow: - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); */ /* Enhanced double focus ring */ - box-shadow: - var(--elevation-brand-focus), - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); -} - -/* Reading progress bar animation */ -#progress-bar { - transition: width 0.3s ease-out; -} - -/* Heading Level Variations */ -.toc-link--h1 { - font-weight: 600; - /* Slightly reduce H1 TOC size for a lighter hierarchy */ - /* font-size: 0.95em; */ - font-size: 0.9em; - color: var(--color-text-primary); -} - -.toc-link--h2 { - font-weight: 500; - color: var(--color-brand); - opacity: 0.9; -} - -.toc-link--h3 { - /* Slightly reduce H3 TOC size in tandem with sidebar tightening */ - /* font-size: 0.85em; */ - font-size: 0.8em; - color: var(--color-text-tertiary); - font-weight: 400; -} - -/* Active state styling */ -.toc-link.active { - background-color: var(--color-brand); - color: var(--color-text-inverse); - font-weight: 500; - transform: translateX(2px); - /* box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); */ - box-shadow: var(--elevation-brand-subtle); -} - -.toc-link.active::before { - background: linear-gradient( - 90deg, - rgba(255, 255, 255, 0.2) 0%, - transparent 100% - ); - opacity: 1; -} - -/* Smooth scrolling indicator */ -.toc-progress { - position: absolute; - top: 0; - left: 0; - width: 2px; - height: 0%; - background-color: var(--color-brand); - transition: height var(--timing-medium) var(--easing-standard); - border-radius: 1px; -} - -/* Enhanced animations */ -.toc { - /* ✅ FIXED: Use animation tokens */ - animation: toc-enter var(--timing-medium) var(--easing-standard); - animation-fill-mode: both; -} - -@keyframes toc-enter { - from { - opacity: 0; - transform: translateX(20px) scale(0.95); - } - to { - opacity: 1; - transform: translateX(0) scale(1); - } -} - -/* Responsive adjustments */ -@container (max-width: 1024px) { - .toc { - @apply p-4 text-xs; - } - - .toc-link { - @apply py-1.5 px-2; - } -} - -/* Remove TOC sidebar background in dark mode */ -.dark .toc { - background: transparent !important; -} - -/* Enhanced active state context */ -.toc:has(.toc-link.active) .toc__nav::before { - opacity: 1; - transform: scaleY(1.1); - background: linear-gradient( - to bottom, - var(--color-brand) 0%, - rgba(var(--color-brand-rgb), 0.5) 50%, - transparent 100% - ); -} - -/* Localized performance hint for hover state */ -.toc:has(.toc-link:hover) { - will-change: transform; - contain: layout; -} \ No newline at end of file diff --git a/assets/css/components/navigation/topbar.css b/assets/css/components/navigation/topbar.css deleted file mode 100644 index d35a6f0..0000000 --- a/assets/css/components/navigation/topbar.css +++ /dev/null @@ -1,140 +0,0 @@ -/* Topbar Navigation - Main horizontal navigation bar with responsive grid layout */ - -/* Clean CSS Grid Topbar Layout */ -.topbar { - position: sticky; - top: 0; - z-index: 50; - /* background-color: var(--color-bg-primary); */ - /* border-bottom: 1px solid var(--color-border-primary); */ - background: var(--glass-bg); - border-bottom: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard); - - /* CSS Grid Layout */ - display: grid; - grid-template-columns: auto 1fr auto auto; - grid-template-areas: "logo navigation search controls"; - align-items: center; - gap: 1rem; - /* padding: 0.75rem 1.5rem; */ - padding: 0.5rem 0.75rem; - /* min-height: 4rem; */ - min-height: 3rem; - box-shadow: var(--glass-shadow); -} - -/* Grid Areas */ -.topbar__logo { - grid-area: logo; - display: flex; - align-items: center; - flex-shrink: 0; -} - -.topbar__logo-link { - display: flex; - align-items: center; - text-decoration: none; - transition: opacity var(--timing-fast) var(--easing-standard); -} - -.topbar__logo-link:hover { - opacity: 0.8; -} - -.topbar__logo-image { - width: 1.25rem; - height: 1.25rem; - object-fit: contain; -} - -.topbar__navigation { - grid-area: navigation; - display: flex; - align-items: center; - gap: 0.75rem; - min-width: 0; /* Allow shrinking */ -} - -.topbar__search { - grid-area: search; - display: flex; - align-items: center; - justify-content: center; - min-width: 0; /* Allow shrinking */ -} - -.topbar__controls { - grid-area: controls; - display: flex; - align-items: center; - gap: 0.5rem; - flex-shrink: 0; -} - -/* Responsive Grid Layout */ -@container topbar (max-width: 1024px) { - .topbar { - grid-template-columns: auto auto 1fr auto; - grid-template-areas: "logo navigation search controls"; - gap: 0.75rem; - padding: 0.5rem 1rem; - } -} - -@container topbar (max-width: 768px) { - .topbar { - grid-template-columns: auto 1fr auto; - grid-template-areas: "logo search controls"; - gap: 0.5rem; - padding: 0.5rem 0.5rem; - min-height: 2.75rem; - } - - /* Hide navigation on mobile - it should be in a hamburger menu */ - .topbar__navigation { - display: none; - } -} - -/* Updated Navigation Links for Grid Layout */ -.topbar__links { - display: flex; - align-items: center; - gap: 0.5rem; /* Tighter spacing for minimal look */ - font-family: var(--font-brand); - font-weight: 300; - font-size: 0.875rem; - color: var(--color-text-primary); -} - -/* Hide navigation links on mobile */ -@container (max-width: 768px) { - .topbar__link { - display: none; /* Hidden on mobile, shown via hamburger menu */ - } -} - -/* Topbar links */ -.topbar__link { - display: inline-flex; - align-items: center; - gap: 0.375rem; - padding: 0.25rem 0.5rem; - color: var(--color-text-primary); - text-decoration: none; - transition: color var(--timing-fast) var(--easing-standard); -} - -.topbar__link:hover, -.topbar__link:focus-visible { - color: var(--color-brand); - outline: none; -} \ No newline at end of file diff --git a/assets/css/components/next-prev.css b/assets/css/components/next-prev.css deleted file mode 100644 index 32abdfa..0000000 --- a/assets/css/components/next-prev.css +++ /dev/null @@ -1,313 +0,0 @@ -/* Next-Prev Navigation Component - Enhanced UX for page navigation */ - -/* Base Navigation Container */ -[data-component="article-next-prev"] { - margin-top: 2rem; - margin-bottom: 1rem; - position: relative; -} - -/* Next-Prev Navigation Link Base Styles - Scoped to avoid topbar conflicts */ -[data-component="article-next-prev"] .article-next-prev__link { - position: relative; - display: flex; - align-items: center; - padding: 1.25rem; - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - color: var(--color-text-primary); - text-decoration: none; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard); - overflow: hidden; - min-height: 4rem; - box-shadow: - 0 2px 8px rgba(0, 0, 0, 0.04), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -[data-component="article-next-prev"] .article-next-prev__link::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(var(--color-brand-rgb), 0.04); - opacity: 0; - transition: opacity 0.2s ease; - pointer-events: none; -} - -/* Navigation Link Hover States */ -[data-component="article-next-prev"] .article-next-prev__link:hover { - border-color: var(--color-brand); - transform: translateY(-2px); - box-shadow: - 0 8px 20px rgba(0, 0, 0, 0.1), - 0 2px 8px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} - -[data-component="article-next-prev"] .article-next-prev__link:hover::before { - opacity: 1; -} - -[data-component="article-next-prev"] .article-next-prev__link:hover div > div[class*="font-medium"], -[data-component="article-next-prev"] .article-next-prev__link:hover .article-next-prev__title { - color: var(--color-brand) !important; -} - -[data-component="article-next-prev"] .article-next-prev__link:hover svg { - color: var(--color-brand); - transform: translateX(2px); -} - -/* Previous link - align icon to left, slide left on hover */ -[data-component="article-next-prev"] .article-next-prev__link:hover:has(svg[class*="mr-"]) svg { - transform: translateX(-2px); -} - -/* Navigation Link Typography */ -[data-component="article-next-prev"] .article-next-prev__link .text-xs { - color: var(--color-text-tertiary); - font-size: 0.75rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; - transition: color 0.2s ease; -} - -/* Target the title content specifically, avoiding Tailwind utility classes */ -[data-component="article-next-prev"] .article-next-prev__link div > div[class*="font-medium"], -[data-component="article-next-prev"] .article-next-prev__title { - color: var(--color-text-primary) !important; - font-size: 0.9375rem !important; - font-weight: 600 !important; - line-height: 1.3 !important; - transition: color 0.2s ease !important; - font-family: var(--font-brand) !important; -} - -[data-component="article-next-prev"] .article-next-prev__link:hover .text-xs { - color: var(--color-text-secondary); -} - -/* SVG Icons */ -[data-component="article-next-prev"] .article-next-prev__link svg { - color: var(--color-text-secondary); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard); - flex-shrink: 0; -} - -/* Disabled Navigation Links */ -[data-component="article-next-prev"] .article-next-prev__link--disabled { - background: linear-gradient( - 135deg, - var(--color-bg-secondary) 0%, - rgba(var(--color-surface), 0.5) 100% - ); - border-color: var(--color-border-secondary); - color: var(--color-text-tertiary); - cursor: not-allowed; - pointer-events: none; - opacity: 0.6; -} - -[data-component="article-next-prev"] .article-next-prev__link--disabled svg { - color: var(--color-text-tertiary); - opacity: 0.5; -} - -[data-component="article-next-prev"] .article-next-prev__link--disabled .text-xs, -[data-component="article-next-prev"] .article-next-prev__link--disabled div > div[class*="font-medium"] { - color: var(--color-text-tertiary) !important; -} - -/* Focus States for Accessibility */ -[data-component="article-next-prev"] .article-next-prev__link:focus { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} - -[data-component="article-next-prev"] .article-next-prev__link:focus-visible { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} - -/* Enhanced Visual Hierarchy */ -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"] { - border-left: 3px solid transparent; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - border-left-color var(--timing-fast) var(--easing-standard); -} - -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"] { - border-right: 3px solid transparent; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - border-right-color var(--timing-fast) var(--easing-standard); -} - -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"]:hover { - border-left-color: var(--color-brand); -} - -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"]:hover { - border-right-color: var(--color-brand); -} - -/* Responsive Adjustments */ -@media (max-width: 768px) { - [data-component="article-next-prev"] { - margin-top: 1.5rem; - } - - [data-component="article-next-prev"] .article-next-prev__link { - padding: 1rem; - min-height: 3.5rem; - } - - [data-component="article-next-prev"] .article-next-prev__link div > div[class*="font-medium"], - [data-component="article-next-prev"] .article-next-prev__title { - font-size: 0.875rem !important; - } - - [data-component="article-next-prev"] .article-next-prev__link .text-xs { - font-size: 0.6875rem; - } - - [data-component="article-next-prev"] .article-next-prev__link svg { - width: 1rem; - height: 1rem; - } -} - -@media (max-width: 480px) { - [data-component="article-next-prev"] { - flex-direction: column; - gap: 0.75rem; - } - - [data-component="article-next-prev"] .article-next-prev__link { - padding: 0.875rem; - min-height: 3rem; - flex: none; - } - - [data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"] { - border-left: none; - border-top: 3px solid transparent; - } - - [data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"] { - border-right: none; - border-bottom: 3px solid transparent; - } - - [data-component="article-next-prev"] .nav-link[aria-label*="Previous"]:hover { - border-left-color: transparent; - border-top-color: var(--color-brand); - } - - [data-component="article-next-prev"] .nav-link[aria-label*="Next"]:hover { - border-right-color: transparent; - border-bottom-color: var(--color-brand); - } -} - -/* Dark Mode Enhancements */ -.dark [data-component="article-next-prev"] .article-next-prev__link { - background: linear-gradient( - 135deg, - rgba(var(--color-surface), 0.8) 0%, - rgba(var(--color-bg-secondary), 0.6) 100% - ); - border-color: var(--color-border-secondary); - box-shadow: - 0 2px 8px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.dark [data-component="article-next-prev"] .article-next-prev__link:hover { - box-shadow: - 0 8px 20px rgba(0, 0, 0, 0.3), - 0 2px 8px rgba(var(--color-brand-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.dark [data-component="article-next-prev"] .article-next-prev__link--disabled { - background: linear-gradient( - 135deg, - rgba(var(--color-bg-secondary), 0.4) 0%, - rgba(var(--color-surface), 0.2) 100% - ); - border-color: rgba(var(--color-border-secondary), 0.5); -} - -/* Animation Enhancements */ -[data-component="article-next-prev"] .article-next-prev__link { - animation: nav-link-enter 0.3s ease-out; - animation-fill-mode: both; -} - -@keyframes nav-link-enter { - from { - opacity: 0; - transform: translateY(10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* Stagger animation for prev/next pair */ -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"] { animation-delay: 0s; } -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"] { animation-delay: 0.1s; } - -/* Loading state placeholders */ -[data-component="article-next-prev"] .article-next-prev__link--loading { - background: linear-gradient(90deg, - var(--color-surface) 25%, - var(--color-bg-secondary) 50%, - var(--color-surface) 75%); - background-size: 200% 100%; - animation: nav-link-loading 2s infinite; -} - -@keyframes nav-link-loading { - 0% { background-position: 200% 0; } - 100% { background-position: -200% 0; } -} - -/* Print styles */ -@media print { - [data-component="article-next-prev"] .article-next-prev__link { - border: 1px solid #ccc; - box-shadow: none; - background: white; - } - - [data-component="article-next-prev"] .nav-link svg { - display: none; - } -} \ No newline at end of file diff --git a/assets/css/components/notebook.css b/assets/css/components/notebook.css deleted file mode 100644 index f3c5fd9..0000000 --- a/assets/css/components/notebook.css +++ /dev/null @@ -1,1241 +0,0 @@ -/** - * Notebook Component Styles - * Modern, accessible styling for Jupyter notebook rendering - * Aligned with site-wide design system for consistency - * - * Features: - * - Unified code block styling with article content - * - Consistent button components across the site - * - Aligned typography and spacing patterns - * - Semantic color system integration - * - Performance optimizations for theme switching - * - Simplified container structure (reduced nesting) - * - Container queries for true responsive behavior - * - CSS logical properties for internationalization - */ - -/* ======================================== - Container Query Context - ======================================== */ - -.notebook { - container-type: inline-size; - container-name: notebook; -} - -/* ======================================== - Core Notebook Container (consolidated into .notebook__cells) - ======================================== */ - -/* ======================================== - Progressive Cell Visibility - ======================================== */ - -/* Notebook cell wrapper functionality merged into .notebook-cell */ -.notebook-cell.notebook-cell-wrapper { - /* CSS containment for performance isolation */ - contain: layout style paint; - /* No transitions on wrapper to avoid layout issues */ -} - -.notebook-cell--hidden { - /* ✅ FIXED: Use animation tokens instead of display: none */ - max-height: 0; - opacity: 0; - overflow: hidden; - transition: - max-height var(--timing-medium) var(--easing-standard), - opacity var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard); - transform: translateY(20px); -} - -.notebook-cell--revealing { - /* ✅ FIXED: Use animation tokens for smooth transitions */ - max-height: var(--collapse-height-expanded, 2000px); - opacity: 1; - transform: translateY(0); - transition: - max-height var(--timing-medium) var(--easing-standard), - opacity var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard); -} - -@keyframes revealCell { - to { - opacity: 1; - transform: translateY(0); - } -} - -/* ======================================== - Notebook Header - ======================================== */ - -.notebook__header { - padding: 1.5rem 2rem; - border-bottom: 1px solid var(--color-border-primary); - background: var(--color-surface); - margin-bottom: 1rem; -} - -/* Hide header if it's empty */ -.notebook__header:empty { - display: none; -} - -.notebook__title { - font-size: 1.875rem; - font-weight: 700; - color: var(--color-text-primary); - margin: 0 0 0.5rem 0; - line-height: 1.2; -} - -.notebook__description { - color: var(--color-text-secondary); - font-size: 1.125rem; - margin: 0; - line-height: 1.5; -} - -.notebook__metadata { - display: flex; - gap: 1rem; - margin-top: 1rem; - flex-wrap: wrap; -} - -.notebook__metadata-item { - /* Align with site button/badge patterns */ - display: flex; - align-items: center; - gap: 0.25rem; - padding: 0.25rem 0.5rem; - background: var(--color-surface); - color: var(--color-text-secondary); - border-radius: 0.375rem; /* Match site border radius */ - border: 1px solid var(--color-border-primary); - font-size: 0.875rem; - font-weight: 500; -} - -/* ======================================== - Notebook Cells Container - ======================================== */ - -.notebook__cells { - /* Simplified container - no shadow since cells have their own */ - max-width: 100%; - margin: 0 auto; - padding: 0; - - /* Layout for cells */ - display: flex; - flex-direction: column; - gap: 0.75rem; - - /* Performance optimizations */ - contain: layout style; -} - -/* Density variants based on data-view attribute */ -[data-view="compact"] .notebook__cells { - gap: 0.25rem; /* Much tighter cell spacing */ - padding: 0.25rem; /* Minimal container padding */ -} - -[data-view="comfortable"] .notebook__cells { - gap: 2rem; /* More spacious cell spacing */ - padding: 2rem; /* Generous container padding */ -} - -/* Reduce space for first cell */ -.notebook__cells > .notebook-cell-wrapper:first-child .notebook-cell.collapse { - margin-top: 0; -} - -/* ======================================== - Individual Cell Styling (extends existing collapse) - ======================================== */ - -.notebook-cell.collapse { - /* Notebook-specific styling for cells */ - background: var(--glass-bg); - border: 1px solid var(--glass-border-color); - margin: 0 !important; - --collapse-padding-expanded: 0; -} - -/* ======================================== - Cell Headers (extends existing collapse headers) - ======================================== */ - -.notebook-cell__header.collapse__header { - /* Notebook-specific header styling: narrower, glassmorphism */ - padding: 0.5rem 0.75rem; - background: var(--glass-bg); - border-color: var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - box-shadow: var(--glass-shadow); -} - -/* Chevron/icon rotation synced to ARIA for notebook cells */ -.notebook-cell .collapse__header .collapse__icon { - transform: rotate(0deg); -} -.notebook-cell .collapse__header[aria-expanded="true"] .collapse__icon { - transform: rotate(90deg) !important; -} - -/* Compact cell headers */ -[data-view="compact"] .notebook-cell__header.collapse__header { - padding: 0.375rem 0.75rem; /* Much more compact header padding */ -} - -[data-view="comfortable"] .notebook-cell__header.collapse__header { - padding: 1.5rem 2.5rem; /* More generous header padding */ -} - -.notebook-cell__type { - display: flex; - align-items: center; - gap: 0.75rem; -} - -.notebook-cell__type-icon { - width: 1.25rem; - height: 1.25rem; - opacity: 0.8; - color: var(--color-brand); -} - -.notebook-cell__type-text { - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0; -} - -.notebook-cell__execution-indicator { - font-size: 0.875rem; - font-weight: 400; - color: var(--color-text-secondary); - font-family: theme('fontFamily.mono'); - margin-inline-start: 0.5rem; -} - -/* Cell numbering - Jupyter style */ -.notebook-cell__number { - font-size: 0.75rem; - font-weight: 500; - color: var(--color-text-tertiary); - font-family: theme('fontFamily.mono'); - background: var(--color-bg-secondary); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; - border: 1px solid var(--color-border-secondary); - min-width: 2rem; - text-align: center; - display: inline-flex; - align-items: center; - justify-content: center; -} - -.notebook-cell--code .notebook-cell__number { - background: rgba(var(--color-brand-3-rgb, 59, 130, 246), 0.1); - color: var(--color-brand-3); - border-color: rgba(var(--color-brand-3-rgb, 59, 130, 246), 0.2); -} - -.notebook-cell--markdown .notebook-cell__number { - background: color-mix(in srgb, rgb(134, 239, 172) 10%, transparent); - color: #059669; - border-color: color-mix(in srgb, rgb(134, 239, 172) 20%, transparent); -} - -/* Execution status indicators */ -.notebook-cell__status { - font-size: 0.75rem; - font-weight: 500; - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; - font-family: theme('fontFamily.mono'); -} - -.notebook-cell__status--executed { - background: color-mix(in srgb, rgb(34, 197, 94) 10%, transparent); - color: #059669; - border: 1px solid color-mix(in srgb, rgb(34, 197, 94) 20%, transparent); -} - -.notebook-cell__status--pending { - background: color-mix(in srgb, rgb(251, 191, 36) 10%, transparent); - color: #d97706; - border: 1px solid color-mix(in srgb, rgb(251, 191, 36) 20%, transparent); -} - -.notebook-cell__status--error { - background: color-mix(in srgb, rgb(239, 68, 68) 10%, transparent); - color: #dc2626; - border: 1px solid color-mix(in srgb, rgb(239, 68, 68) 20%, transparent); -} - -/* ======================================== - Cell Content (extends existing collapse body) - ======================================== */ - -.notebook-cell .collapse__body-content { - padding: 0; -} - -/* Notebook cell body: align borders/background with glass style and avoid brand/green accents */ -.notebook-cell .collapse__body { - background: var(--glass-bg); - border-color: var(--glass-border-color); - /* Ensure body animates using data attributes on itself or parent */ - --collapse-padding-expanded: 0.75rem; -} - -.notebook-cell.collapse[data-collapse-state="expanded"] .collapse__body, -.notebook-cell.collapse.expanded .collapse__body { - border-color: var(--glass-border-color); -} - -/* Render Markdown cells as normal article content (less chrome) */ -.notebook-cell--markdown.collapse { - background: transparent; - border: none; - box-shadow: none !important; - transform: none !important; -} -.notebook-cell--markdown.collapse:hover { - box-shadow: none !important; - transform: none !important; -} -.notebook-cell--markdown .notebook-cell__header { - display: none; -} -.notebook-cell--markdown .collapse__body { - background: transparent; - border: none; -} -.notebook-cell--markdown .collapse__body-content { - padding: 0; -} - -/* Compact cell content */ -[data-view="compact"] .notebook-cell .collapse__body-content { - padding: 0.5rem; /* Much more compact cell content */ -} - -[data-view="comfortable"] .notebook-cell .collapse__body-content { - padding: 2.5rem; /* More generous cell content padding */ -} - -/* ======================================== - Markdown Cells - ======================================== */ - -.notebook-cell--markdown .notebook-cell__type-icon { - color: #059669; -} - -.notebook-cell__markdown-content { - line-height: 1.7; -} - -.notebook-cell__markdown-content h1, -.notebook-cell__markdown-content h2, -.notebook-cell__markdown-content h3, -.notebook-cell__markdown-content h4, -.notebook-cell__markdown-content h5, -.notebook-cell__markdown-content h6 { - /* Align with global heading styles from input.css */ - margin-top: 0; - margin-bottom: 1rem; - color: var(--color-text-primary); - font-weight: 700; - word-wrap: break-word; -} - -.notebook-cell__markdown-content h1 { font-size: 1.875rem; font-weight: 900; } -.notebook-cell__markdown-content h2 { font-size: 1.5rem; } -.notebook-cell__markdown-content h3 { font-size: 1.25rem; } -.notebook-cell__markdown-content h4 { font-size: 1.125rem; } -.notebook-cell__markdown-content h5 { font-size: 1rem; } -.notebook-cell__markdown-content h6 { font-size: 0.875rem; } - -.notebook-cell__markdown-content p { - /* Match #articleContent spacing pattern */ - margin: 0.75rem 0; - color: var(--color-text-primary); -} - -.notebook-cell__markdown-content p:last-child { - margin-bottom: 0; -} - -.notebook-cell__markdown-content ul, -.notebook-cell__markdown-content ol { - /* Match #articleContent list patterns */ - margin: 0.75rem 0; - padding-inline-start: 1.5rem; -} - -.notebook-cell__markdown-content ul { - list-style-type: disc; - margin-inline-start: 1.5rem; -} - -.notebook-cell__markdown-content strong { - /* Match #articleContent strong styling */ - font-family: var(--font-family-brand); - font-weight: 600; -} - -.notebook-cell__markdown-content code { - /* Align with #articleContent code:not(pre code) styling */ - padding: 0.25rem; - border-radius: 0.25rem; - font-size: 0.75rem; - font-weight: 300; - background-color: var(--color-bg-secondary); - color: var(--color-brand-1); - font-family: var(--font-family-mono, RobotoMono, monospace); -} - -/* Dark mode support for inline code */ -.dark .notebook-cell__markdown-content code { - color: var(--color-brand); -} - -/* ======================================== - Code Cells - ======================================== */ - -.notebook-cell--code .notebook-cell__type-icon { - color: var(--color-brand-3); /* Uses semantic color system */ -} - -/* Notebook code cells now use .code-block-enhanced with proper corner radius handling */ - -/* Fix border radius for code blocks with headers */ -.code-block-enhanced .code-header { - border-radius: 0.75rem 0.75rem 0 0; /* Only top corners rounded */ -} - -.code-block-enhanced .code-content { - border-radius: 0 0 0.75rem 0.75rem; /* Only bottom corners rounded */ -} - -/* Target the actual highlighted code element that has the background */ -.code-block-enhanced .code-content .highlight { - border-radius: 0 0 0.75rem 0.75rem; /* Only bottom corners rounded */ -} - -.code-block-enhanced .code-content .highlight pre { - border-radius: 0 0 0.75rem 0.75rem; /* Only bottom corners rounded */ -} - -/* Copy button styling handled by .code-block-enhanced */ - -/* ======================================== - Cell Outputs - ======================================== */ - -.notebook-cell__outputs { - margin-top: 0.5rem; - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -/* Compact output spacing */ -[data-view="compact"] .notebook-cell__outputs { - margin-top: 0.5rem; - gap: 0.375rem; -} - -[data-view="comfortable"] .notebook-cell__outputs { - margin-top: 1.5rem; - gap: 1rem; -} - -.notebook-cell__output { - border-radius: theme('borderRadius.lg'); - overflow: hidden; - border: 1px solid var(--color-border-primary); - background: var(--color-surface); -} - -/* Stream Output */ -.notebook-cell__output--stream { - background: var(--color-bg-secondary); - color: #4ade80; - padding: 1rem; - font-family: theme('fontFamily.mono'); - font-size: 0.875rem; - line-height: 1.5; -} - -.notebook-cell__output--stream pre { - margin: 0; - padding: 0; - background: transparent; - color: inherit; - white-space: pre-wrap; - word-break: break-word; -} - -/* Execute Result Output */ -.notebook-cell__output--execute-result { - padding: 1rem; -} - -.notebook-cell__output--execute-result .html-output { - margin-bottom: 1rem; -} - -.notebook-cell__output--execute-result .html-output:last-child { - margin-bottom: 0; -} - -.notebook-cell__output--execute-result .text-output { - font-family: theme('fontFamily.mono'); - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-primary); - margin: 0; - padding: 0; - background: transparent; - white-space: pre-wrap; - word-break: break-word; -} - -/* Display Data Output */ -.notebook-cell__output--display-data { - padding: 1rem; -} - -.notebook-cell__output--display-data img { - max-width: 100%; - height: auto; - aspect-ratio: auto; /* Preserve natural ratio but allow override */ - object-fit: contain; - border-radius: theme('borderRadius.md'); - box-shadow: theme('boxShadow.sm'); -} - -/* For plots and charts, maintain square aspect ratio */ -.notebook-cell__output--display-data img[alt*="plot"], -.notebook-cell__output--display-data img[alt*="chart"], -.notebook-cell__output--display-data img[alt*="graph"] { - aspect-ratio: 4 / 3; -} - -/* Error Output */ -.notebook-cell__output--error { - background: #7f1d1d; - color: #fee2e2; - border-color: #b91c1c; - padding: 1rem; -} - -.notebook-cell__error-name { - font-weight: 700; - font-size: 1rem; - margin-bottom: 0.5rem; - color: #fca5a5; -} - -.notebook-cell__error-value { - margin-bottom: 1rem; - font-weight: 500; - line-height: 1.5; -} - -.notebook-cell__error-traceback { - font-family: theme('fontFamily.mono'); - font-size: 0.875rem; - line-height: 1.4; - opacity: 0.9; -} - -.notebook-cell__traceback-line { - padding: 0.125rem 0; - border-inline-start: 2px solid #ef4444; - padding-inline-start: 0.75rem; - margin: 0.25rem 0; -} - -/* Collapsible outputs for long content */ -.notebook-cell__output--collapsible { - position: relative; -} - -.notebook-cell__output-toggle { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1rem; - background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border-primary); - cursor: pointer; - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-secondary); - transition: all 0.2s ease; -} - -.notebook-cell__output-toggle:hover { - background: var(--color-bg-tertiary); - color: var(--color-text-primary); -} - -.notebook-cell__output-toggle-icon { - width: 1rem; - height: 1rem; - transition: transform var(--timing-fast) var(--easing-standard); -} - -.notebook-cell__output--collapsed .notebook-cell__output-toggle-icon { - transform: rotate(-90deg); -} - -.notebook-cell__output-content { - transition: all 0.3s ease; -} - -.notebook-cell__output--collapsed .notebook-cell__output-content { - /* ✅ FIXED: Use height-based collapse for smooth animation */ - max-height: 0; - opacity: 0; - overflow: hidden; - transition: - max-height var(--timing-medium) var(--easing-standard), - opacity var(--timing-medium) var(--easing-standard); -} - -.notebook-cell__output-preview { - padding: 0.75rem 1rem; - background: var(--color-bg-secondary); - color: var(--color-text-secondary); - font-size: 0.875rem; - font-family: theme('fontFamily.mono'); - border-bottom: 1px solid var(--color-border-primary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -/* Output size indicators */ -.notebook-cell__output-size { - font-size: 0.75rem; - color: var(--color-text-tertiary); - margin-inline-start: auto; -} - -/* ======================================== - Raw Cells - ======================================== */ - -.notebook-cell--raw .notebook-cell__type-icon { - color: #9333ea; -} - -.notebook-cell__raw-content { - background: var(--color-bg-secondary); - border-radius: theme('borderRadius.md'); - padding: 1rem; - border: 1px solid var(--color-border-primary); -} - -.notebook-cell__raw-content pre { - margin: 0; - font-family: theme('fontFamily.mono'); - font-size: 0.875rem; - line-height: 1.5; - white-space: pre-wrap; - word-break: break-word; -} - -.notebook-cell__raw-content code { - background: transparent; - padding: 0; - color: var(--color-text-primary); -} - -/* ======================================== - Density Toggle and Navigation - ======================================== */ - -.notebook__toolbar { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.75rem 1rem; - background: var(--color-surface); - border-bottom: 1px solid var(--color-border-primary); - gap: 1rem; - flex-wrap: wrap; -} - -.notebook__density-toggle { - display: flex; - align-items: center; - gap: 0.25rem; - background: var(--color-bg-secondary); - border-radius: 0.5rem; - padding: 0.25rem; - border: 1px solid var(--color-border-primary); -} - -.notebook__density-btn { - padding: 0.375rem 0.75rem; - font-size: 0.75rem; - font-weight: 500; - border: none; - background: transparent; - color: var(--color-text-secondary); - border-radius: 0.25rem; - cursor: pointer; - transition: all 0.2s ease; - min-width: 4rem; - text-align: center; -} - -.notebook__density-btn:hover { - background: var(--color-bg-tertiary); - color: var(--color-text-primary); -} - -.notebook__density-btn--active { - background: var(--color-brand); - color: white; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -} - -.notebook__cell-counter { - font-size: 0.875rem; - color: var(--color-text-secondary); - font-family: theme('fontFamily.mono'); -} - -.notebook__actions { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.notebook__nav-btn { - padding: 0.5rem; - border: 1px solid var(--color-border-primary); - background: var(--color-surface); - color: var(--color-text-secondary); - border-radius: 0.375rem; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - justify-content: center; -} - -.notebook__nav-btn:hover { - background: var(--color-bg-secondary); - color: var(--color-text-primary); - border-color: var(--color-border-secondary); -} - -.notebook__nav-btn svg { - width: 1rem; - height: 1rem; -} - -/* Cell outline/navigation */ -.notebook__outline { - position: fixed; - top: 50%; - right: 1rem; - transform: translateY(-50%); - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - padding: 0.75rem; - box-shadow: var(--elevation-6); - max-height: 60vh; - overflow-y: auto; - width: 200px; - z-index: 50; - opacity: 0; - visibility: hidden; - transition: all 0.3s ease; -} - -.notebook__outline--visible { - opacity: 1; - visibility: visible; -} - -.notebook__outline-item { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.375rem 0.5rem; - font-size: 0.75rem; - color: var(--color-text-secondary); - cursor: pointer; - border-radius: 0.25rem; - transition: all 0.2s ease; - text-decoration: none; -} - -.notebook__outline-item:hover { - background: var(--color-bg-secondary); - color: var(--color-text-primary); -} - -.notebook__outline-item--active { - background: var(--color-brand); - color: white; -} - -.notebook__outline-icon { - width: 0.75rem; - height: 0.75rem; - flex-shrink: 0; -} - -/* ======================================== - Loading States and Performance Indicators - ======================================== */ - -.notebook__performance-notice { - margin-bottom: 1.5rem; -} - -.notebook-cell-wrapper { - /* Wrapper for lazy-loaded cells */ - margin-bottom: 0; -} - -.notebook-cell--lazy { - /* Hidden cells waiting to be loaded */ - display: none; -} - -.notebook-load-trigger { - display: flex; - align-items: center; - justify-content: center; - padding: 2rem; - color: var(--color-text-secondary); - font-size: 0.875rem; - border-top: 1px solid var(--color-border-primary); - margin-top: 2rem; -} - -.loading-indicator { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.notebook-completion-indicator { - display: flex; - align-items: center; - justify-content: center; - padding: 1.5rem; - color: var(--color-text-secondary); - font-size: 0.875rem; - border-top: 1px solid var(--color-border-primary); - margin-top: 2rem; - background: var(--color-surface); - border-radius: theme('borderRadius.lg'); -} - -/* ======================================== - Light Mode Enhancements - ======================================== */ - -/* Light mode styles handled in .notebook__cells */ - -.notebook-cell.collapse { - /* Light mode cell styling */ - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); - /* Add theme transition only to cells that need it */ - transition: var(--transition-elevation); -} - -.notebook-cell.collapse:hover { - /* Enhanced light mode hover */ - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06); - transform: translateY(-1px); -} - -/* Light mode styling handled by .code-block-enhanced */ - -.notebook-cell__output--stream { - /* Stream output styling with consistent colors */ - background: var(--color-bg-inverse); - color: var(--color-brand-2); -} - -.notebook-cell__output--error { - /* Error output styling with semantic colors */ - background: rgba(var(--color-brand-7-rgb, 243, 179, 166), 0.1); - color: var(--color-brand-7); - border-color: rgba(var(--color-brand-7-rgb, 243, 179, 166), 0.3); -} - -.notebook-cell__output--error .notebook-cell__error-name { - color: var(--color-brand-7); - font-weight: 600; -} - -.notebook-cell__traceback-line { - border-inline-start-color: var(--color-brand-7); -} - -/* ======================================== - Dark Theme Support - ======================================== */ - -/* Dark mode handled by individual cell shadows */ - -.dark .notebook-cell.collapse { - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); -} - -.dark .notebook-cell.collapse:hover { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); -} - -/* Dark mode styling handled by .code-block-enhanced */ - -.dark .notebook-cell__output--error { - background: rgba(var(--color-brand-7-rgb, 243, 179, 166), 0.2); - color: var(--color-text-primary); - border-color: var(--color-brand-7); -} - -.dark .notebook-cell__output--error .notebook-cell__error-name { - color: var(--color-brand-7); -} - -.dark .notebook-cell__traceback-line { - border-inline-start-color: var(--color-brand-7); -} - -/* ======================================== - Container Query Responsive Design - ======================================== */ - -@container notebook (max-width: 768px) { - .notebook__cells { - margin: 0; - padding: 0; - } - - .notebook__header { - padding: 1rem 1.5rem; - } - - .notebook__title { - font-size: 1.5rem; - } - - .notebook__description { - font-size: 1rem; - } - - .notebook__cells { - gap: 0; - } - - .notebook-cell .collapse__body-content { - padding: 0; - } - - /* Compact mode on mobile should be even more compact */ - [data-view="compact"] .notebook__cells { - padding: 0; - gap: 0; - } - - [data-view="compact"] .notebook-cell .collapse__body-content { - padding: 0; - } - - /* Mobile code block styling handled by .code-block-enhanced */ - - .notebook__performance-notice { - margin: 0 1rem 1.5rem; - } - - /* Hide outline on mobile */ - .notebook__outline { - display: none; - } - - /* Stack toolbar on mobile */ - .notebook__toolbar { - flex-direction: column; - align-items: stretch; - gap: 0.75rem; - } - - .notebook__actions { - justify-content: center; - } -} - -@container notebook (max-width: 480px) { - .notebook__metadata { - flex-direction: column; - gap: 0.5rem; - } - - .notebook-cell__header.collapse__header { - padding: 0.75rem 1rem; - } - - .notebook-cell .collapse__body-content { - padding: 0.75rem; - } - - /* Print code block styling handled by .code-block-enhanced */ - - .notebook-cell__type-text { - font-size: 0.875rem; - } - - .notebook__performance-notice { - margin: 0 0.75rem 1rem; - } -} - -/* ======================================== - Print Styles - ======================================== */ - -@media print { - .notebook__cells { - border: 1px solid #ccc; - break-inside: avoid; - margin: 0; - } - - .notebook-cell .copy-code, - .collapse__icon-wrapper, - .notebook__performance-notice, - .notebook-load-trigger, - .notebook-completion-indicator { - display: none !important; - } - - /* ✅ FIXED: Use standard collapse behavior with animation tokens */ - .notebook-cell .collapse__body { - max-height: var(--collapse-height-collapsed); - opacity: var(--collapse-opacity-collapsed); - overflow: hidden; - transition: - max-height var(--collapse-timing) var(--collapse-easing), - opacity var(--collapse-timing) var(--collapse-easing); - } - - .notebook-cell .collapse__body.expanded { - max-height: var(--collapse-height-expanded); - opacity: var(--collapse-opacity-expanded); - } - - .notebook-cell { - break-inside: avoid; - page-break-inside: avoid; - box-shadow: none; - border: 1px solid #ddd; - margin-bottom: 1rem; - } - - .notebook-cell__outputs { - break-inside: avoid; - } - - /* Print code styling handled by .code-block-enhanced */ - - .notebook-cell__output--stream { - background: #f0f0f0 !important; - color: #333 !important; - } -} - -/* ======================================== - Accessibility Enhancements - ======================================== */ - -@media (prefers-reduced-motion: reduce) { - .notebook-cell, - .notebook-cell__toggle, - .notebook-cell__copy-btn, - .notebook-cell__toggle-icon { - transition: none; - } -} - -@media (prefers-contrast: high) { - .notebook__cells { - --notebook-border: #111827; - --cell-border: #1f2937; - --cell-hover-border: #1d4ed8; - --cell-active-border: #2563eb; - } - - .dark .notebook__cells { - --notebook-border: #f3f4f6; - --cell-border: #d1d5db; - --cell-hover-border: #93c5fd; - --cell-active-border: #60a5fa; - } -} - -/* ======================================== - Animation Keyframes - ======================================== */ - -@keyframes notebook-cell-enter { - from { - opacity: 0; - transform: translateY(1rem); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes copy-success { - 0%, 100% { transform: scale(1); } - 50% { transform: scale(1.1); } -} - -@keyframes copy-error { - 0%, 100% { transform: translateX(0); } - 25% { transform: translateX(-0.25rem); } - 75% { transform: translateX(0.25rem); } -} - -/* ======================================== - Entry Animations - ======================================== */ - -.notebook-cell { - animation: notebook-cell-enter 0.4s ease-out; - animation-delay: calc(var(--cell-index, 0) * 0.1s); - animation-fill-mode: both; -} - -.notebook-cell__copy-btn--success { - animation: copy-success 0.3s ease-out; -} - -.notebook-cell__copy-btn--error { - animation: copy-error 0.3s ease-out; -} - -/* ======================================== - :has() Notebook Component Enhancements - ======================================== */ - -/* Notebook cells with error states get enhanced styling */ -.notebook-cell:has(.notebook-cell__error-name) { - border-inline-start: 4px solid var(--color-danger); - background: linear-gradient( - 90deg, - color-mix(in srgb, rgb(239, 68, 68) 5%, transparent) 0%, - transparent 50% - ); - margin-inline-start: -1rem; - padding-inline-start: calc(1rem - 4px); -} - -.notebook-cell:has(.notebook-cell__error-name) .collapse__icon-wrapper { - background: var(--color-danger); - color: white; - border-radius: 50%; -} - -/* Cells with outputs get enhanced spacing */ -.notebook-cell:has(.notebook-cell__outputs) { - margin-bottom: 2rem; - border-bottom: 1px solid var(--color-border-secondary); - padding-bottom: 1.5rem; -} - -.notebook-cell:has(.notebook-cell__outputs) .notebook-cell__outputs { - background: var(--color-surface); - border-radius: 0.5rem; - padding: 1rem; - margin-top: 1rem; -} - -/* Interactive notebook cells on hover */ -.notebook-cell:has(.notebook-cell__copy-btn) { - transition: all 0.2s ease; -} - -.notebook-cell:has(.notebook-cell__copy-btn:hover) { - background: rgba(var(--color-brand-rgb), 0.02); - border-radius: 0.5rem; - margin: 0.5rem 0; - padding: 0.5rem; -} - -/* Notebook with metadata gets enhanced header */ -.notebook:has(.notebook__metadata) .notebook__header { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border-radius: 0.75rem 0.75rem 0 0; -} - -/* Enhanced notebook title when description is present */ -.notebook__header:has(.notebook__description) .notebook__title { - margin-bottom: 1rem; - font-size: 2.25rem; -} - -/* ======================================== - Modern CSS Features Summary - ======================================== */ - -/* - * This notebook component showcases modern CSS techniques: - * - * ✅ Container Queries: - * - Responsive behavior based on container size, not viewport - * - @container notebook (max-width: 768px) replaces @media queries - * - * ✅ CSS Logical Properties: - * - margin-inline-start/end for better internationalization - * - border-inline-start for RTL language support - * - padding-inline-start for semantic spacing - * - * ✅ Modern Color Functions: - * - color-mix() for alpha blending instead of rgba() - * - More semantic and maintainable color mixing - * - * ✅ Aspect Ratio: - * - aspect-ratio property for consistent image display - * - object-fit: contain for proper image scaling - * - * ✅ Advanced Pseudo-classes: - * - :has() for parent selector functionality - * - :focus-visible for keyboard navigation - * - :focus-within for container focus states - * - * Browser Support: Modern features with graceful fallbacks - * Performance: CSS containment for layout isolation - */ \ No newline at end of file diff --git a/assets/css/components/notice.css b/assets/css/components/notice.css deleted file mode 100644 index 2dbe480..0000000 --- a/assets/css/components/notice.css +++ /dev/null @@ -1,257 +0,0 @@ -/* Enhanced Notice Component */ - -/* Base Enhanced Notice Styles */ -.notice { - position: relative; - margin-top: 1.5rem; - margin-bottom: 1.5rem; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-medium) var(--easing-standard), - opacity var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - border-radius: var(--radius-lg); - overflow: hidden; - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* ✅ FIXED: Use animation tokens */ - animation: notice-enter var(--timing-medium) var(--easing-standard); - animation-fill-mode: both; -} - -/* Removed legacy overrides that zeroed out spacing and styles */ - -/* Enhanced Notice Container */ -.notice__container { - display: flex; - align-items: flex-start; - padding: 0.875rem 1rem; - position: relative; -} - -/* Enhanced Notice Icon */ -.notice__icon-wrapper { - margin-right: 1rem; - flex-shrink: 0; - position: relative; - margin-top: 0.125rem; -} - -.notice__icon { - height: 1.25rem; - width: 1.25rem; - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 0.2s; - filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); -} - -/* Enhanced Notice Content */ -.notice__content { - min-width: 0; - flex: 1 1 0%; -} - -.notice__title { - margin-bottom: 0.25rem; - font-family: "NVIDIA", Arial, Helvetica, sans-serif; - font-size: 1rem; - line-height: 1.5rem; - font-weight: 600; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 0.2s; - line-height: 1.3; -} - -.notice__text { - font-size: 0.875rem; - line-height: 1.25rem; - line-height: 1.625; - color: var(--color-text-primary); - font-family: var(--font-brand); -} - -.notice__text p { - margin-bottom: 0.5rem; -} - -.notice__text p:last-child { - margin-bottom: 0; -} - -.notice__text strong { - font-weight: 600; -} - -.notice__text code { - border-radius: var(--radius-base); - padding: 0.125rem 0.375rem; - font-size: 0.75rem; - line-height: 1rem; - background-color: rgba(0, 0, 0, 0.1); - font-family: var(--font-family-mono, monospace); -} - -/* Notice Type Variations */ - -/* Info Notice */ -/* Old hex-based colors commented in favor of tokens */ -/* .notice--info { ... } */ -.notice--info { - background: linear-gradient( - 135deg, - rgba(var(--color-info-rgb), 0.1) 0%, - rgba(var(--color-info-rgb), 0.05) 100% - ) !important; - border: 1px solid rgba(var(--color-info-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-info-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} - -.notice--info .notice__title { color: var(--color-info); } - -.notice--info .notice__icon { - filter: drop-shadow(0 1px 2px rgba(59, 130, 246, 0.3)); -} - -/* Note Notice */ -.notice--note { - background: linear-gradient( - 135deg, - rgba(var(--color-note-rgb), 0.1) 0%, - rgba(var(--color-note-rgb), 0.05) 100% - ) !important; - border: 1px solid rgba(var(--color-note-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-note-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} - -.notice--note .notice__title { color: var(--color-note); } - -.notice--note .notice__icon { - filter: drop-shadow(0 1px 2px rgba(99, 102, 241, 0.3)); -} - -/* Tip Notice */ -.notice--tip { - background: linear-gradient( - 135deg, - rgba(var(--color-tip-rgb), 0.1) 0%, - rgba(var(--color-tip-rgb), 0.05) 100% - ) !important; - border: 1px solid rgba(var(--color-tip-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-tip-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} - -.notice--tip .notice__title { color: var(--color-tip); } - -.notice--tip .notice__icon { - filter: drop-shadow(0 1px 2px rgba(34, 197, 94, 0.3)); -} - -/* Warning Notice */ -.notice--warning { - background: linear-gradient( - 135deg, - rgba(var(--color-warning-rgb), 0.1) 0%, - rgba(var(--color-warning-rgb), 0.05) 100% - ) !important; - border: 1px solid rgba(var(--color-warning-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-warning-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} - -.notice--warning .notice__title { color: var(--color-warning); } - -.notice--warning .notice__icon { - filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.3)); -} - -/* Danger Notice */ -.notice--danger { - background: linear-gradient( - 135deg, - rgba(var(--color-danger-rgb), 0.1) 0%, - rgba(var(--color-danger-rgb), 0.05) 100% - ) !important; - border: 1px solid rgba(var(--color-danger-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-danger-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} - -.notice--danger .notice__title { color: var(--color-danger); } - -.notice--danger .notice__icon { - filter: drop-shadow(0 1px 2px rgba(239, 68, 68, 0.3)); -} - -/* Security Notice */ -.notice--security { - background: linear-gradient( - 135deg, - rgba(var(--color-security-rgb), 0.1) 0%, - rgba(var(--color-security-rgb), 0.05) 100% - ) !important; - border: 1px solid rgba(var(--color-security-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-security-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} - -.notice--security .notice__title { color: var(--color-security); } - -.notice--security .notice__icon { - filter: drop-shadow(0 1px 2px rgba(168, 85, 247, 0.3)); -} - -/* Snack Notice */ -.notice--snack { - background: linear-gradient( - 135deg, - rgba(var(--color-snack-rgb), 0.1) 0%, - rgba(var(--color-snack-rgb), 0.05) 100% - ) !important; - border: 1px solid rgba(var(--color-snack-rgb), 0.2) !important; - box-shadow: - 0 4px 12px rgba(var(--color-snack-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; -} - -.notice--snack .notice__title { color: var(--color-snack); } - -.notice--snack .notice__icon { - filter: drop-shadow(0 1px 2px rgba(236, 72, 153, 0.3)); -} - -/* Hover Effects */ -/* Subtle hover only when interactive content is inside */ -.notice:has(a:hover) .notice__icon { transform: scale(1.03); } - -/* Entrance Animation */ -@keyframes notice-enter { - 0% { - opacity: 0; - transform: translateY(10px) scale(0.98); - } - 100% { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -/* Dark mode code styling */ -@media (prefers-color-scheme: dark) { - .notice__text code { - background-color: rgba(255, 255, 255, 0.1); - } -} - -/* Remove heavy :has() spacing shifts; container layout handles alignment */ \ No newline at end of file diff --git a/assets/css/components/object-model.css b/assets/css/components/object-model.css deleted file mode 100644 index fb7b0c4..0000000 --- a/assets/css/components/object-model.css +++ /dev/null @@ -1,156 +0,0 @@ -@layer components { - /* Object Model Component */ - [data-component="object-model"] { - /* Align nested option text with summary text start: px-3 + chevron(1rem) + gap(0.5rem) */ - --om-pad-x: 0rem; /* no outer horizontal padding on rows */ - --om-chevron: 1rem; /* h-4 w-4 */ - --om-gap: 0.5rem; /* gap-2 */ - --om-indent: calc(var(--om-pad-x) + var(--om-chevron) + var(--om-gap)); - } - .object-model__title, - .object-model__heading { - scroll-margin-top: var(--header-offset); - } - - .object-model__heading, - .object-model__subheading { - color: var(--color-text-primary); - } - - /* Token-based badge for section headings (replaces hard-coded bg classes) */ - .object-model__heading-badge { - display: inline-block; - padding: 0.25rem 0.5rem; /* px-2 py-1 */ - border-radius: 0.5rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - color: var(--color-text-primary); - } - - .object-model__intro-text, - .object-model__summary { - color: var(--color-text-primary); - } - - .object-model__list { - /* Borderless, airy list; separation via spacing and summary hover */ - background: transparent; - border: 0; - box-shadow: none; - overflow: visible; - color: var(--color-text-primary); - list-style: none; - padding-left: 0; - } - - /* Ensure inner text inherits proper token-based colors */ - .object-model__item, - .object-model__field, - .object-model__options { - color: inherit; - } - - .object-model__details { - /* Remove default marker for consistent chevron */ - } - .object-model__details > summary::-webkit-details-marker { - display: none; - } - .object-model__details > summary { - list-style: none; - } - - /* Fine tune nested lists */ - .object-model__options { - /* Use only the explicit padding from markup; remove UA list padding/indent */ - list-style: none; - padding-inline-start: 0; - margin-left: 0.5em; - padding-left: var(--om-indent); - padding-top: 0.25rem; /* tighter attach under summary */ - } - - /* Override global article nested list indent for this component only */ - .article-content[data-component="object-model"] .object-model__list li, - .article-content[data-component="object-model"] .object-model__list li li { - margin-left: 0; - padding-left: 0; - } - - /* Ensure summary row has clear focus ring */ - .object-model__summary-row { - @apply rounded-md outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:focus-visible:ring-indigo-400; - } - - .object-model__summary-row:hover { - background-color: rgba(var(--color-brand-rgb), 0.03); - } - - /* Ensure names/descriptions use token text colors automatically */ - .object-model__name { - color: var(--color-text-primary); - } - .object-model__description { - color: var(--color-text-primary); - } - - .object-model__chevron { - color: var(--color-text-secondary); - } - .object-model__dash { - color: var(--color-border-primary); - } - - /* Option items typography */ - /* Keys and values color tokens */ - .object-model__option-key code { - color: var(--color-text-primary); - font-weight: 600; /* add visual weight to keys */ - } - .object-model__option-value, - .object-model__option-value p, - .object-model__option-value a { - color: var(--color-text-primary); - } - .object-model__option-value { display: inline; margin-left: 0.375rem; } - .object-model__option-value p { display: inline; margin: 0; } - .object-model__option-value a:hover { color: var(--color-brand); } - - /* Option item in normal inline flow (avoid flex to prevent text splitting into multiple flex items) */ - .object-model__option-item { - display: block; - padding: 0.125rem 0; - font-size: 0.875rem; /* text-sm */ - line-height: 1.45; - } - .object-model__option-key { - color: var(--color-text-secondary); - white-space: nowrap; - } - .object-model__option-value { - color: var(--color-text-primary); - } - - /* Strong label variant (for legacy markup without key/value wrappers) */ - .object-model__option-item > strong { - margin-right: 0.375rem; - font-weight: 600; - } - .object-model__option-item code { - white-space: nowrap; - } - - /* Compact spacing for rows in dense lists */ - .object-model__row, - .object-model__summary-row { - @apply py-1.5 md:py-2; - } - - .object-model__details:not([open]) .object-model__summary-row { box-shadow: none; } - .object-model__details[open] .object-model__summary-row { box-shadow: none; } - - /* Soft separation between items without borders */ - .object-model__item + .object-model__item { margin-top: 0.25rem; } -} - - diff --git a/assets/css/components/openapi/base.css b/assets/css/components/openapi/base.css deleted file mode 100644 index c8bb45f..0000000 --- a/assets/css/components/openapi/base.css +++ /dev/null @@ -1,47 +0,0 @@ -/* OpenAPI Base Container & Section Headers */ - -/* ========================================================================== - OpenAPI Base Container - ========================================================================== */ - -.openapi-spec { - max-width: none; - margin: 0; - padding: 0; -} - -.openapi-content { - display: flex; - flex-direction: column; - gap: 3rem; -} - -/* ========================================================================== - Section Headers - ========================================================================== */ - -.section-header { - margin-bottom: 2rem; - text-align: center; -} - -.section-title { - font-family: var(--font-family-brand); - font-size: 2.5rem; - font-weight: 700; - color: var(--color-text-primary); - margin: 0 0 0.5rem 0; - background: linear-gradient(135deg, var(--color-brand), var(--color-accent)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.section-description { - font-size: 1.125rem; - color: var(--color-text-secondary); - margin: 0; - max-width: 600px; - margin-left: auto; - margin-right: auto; -} \ No newline at end of file diff --git a/assets/css/components/openapi/code-examples.css b/assets/css/components/openapi/code-examples.css deleted file mode 100644 index 2d16e00..0000000 --- a/assets/css/components/openapi/code-examples.css +++ /dev/null @@ -1,115 +0,0 @@ -/* OpenAPI Code Examples */ - -/* ========================================================================== - Code Examples - ========================================================================== */ - -.code-examples { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 1rem; - overflow: hidden; -} - -.code-tabs-nav { - display: flex; - background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border-primary); -} - -.code-tab { - background: transparent; - border: none; - padding: 0.75rem 1rem; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-secondary); - cursor: pointer; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; - border-bottom: 3px solid transparent; -} - -.code-tab:hover, -.code-tab--active { - color: var(--color-brand); - background: rgba(var(--color-brand-rgb), 0.05); - border-bottom-color: var(--color-brand); -} - -.code-tabs-content { - position: relative; -} - -.code-tab-panel { - display: none; -} - -.code-tab-panel--active { - display: block; -} - -.code-example { - position: relative; -} - -.code-example-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.625rem 1rem; - background: var(--color-bg-tertiary); - border-bottom: 1px solid var(--color-border-primary); -} - -.code-example-title { - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); -} - -.copy-button { - display: flex; - align-items: center; - justify-content: center; - width: 1.75rem; - height: 1.75rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.375rem; - color: var(--color-text-secondary); - cursor: pointer; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; -} - -.copy-button:hover { - background: var(--color-brand); - border-color: var(--color-brand); - color: var(--color-text-inverse); -} - -.copy-button svg { - width: 0.95rem; - height: 0.95rem; -} - -.code-example pre { - margin: 0; - padding: 0.875rem 1rem; - background: var(--color-bg-code); - overflow-x: auto; -} - -.code-example code { - font-family: var(--font-family-mono); - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-code); -} diff --git a/assets/css/components/openapi/components.css b/assets/css/components/openapi/components.css deleted file mode 100644 index d13b719..0000000 --- a/assets/css/components/openapi/components.css +++ /dev/null @@ -1,316 +0,0 @@ -/* OpenAPI Components */ - -/* ========================================================================== - Components Section - ========================================================================== */ - -.openapi-components { - padding: 2rem 0; -} - -.components-section { - margin-bottom: 3rem; -} - -.components-section:last-child { - margin-bottom: 0; -} - -.components-section-title { - font-size: 1.5rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0 0 1.5rem 0; - padding-bottom: 0.5rem; - border-bottom: 2px solid var(--color-border-primary); -} - -.components-list { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.component-item { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - overflow: hidden; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease, - box-shadow 0.2s ease; -} - -.component-item:hover { - border-color: var(--color-brand); - box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.1); -} - -.component-header { - padding: 1rem 1.5rem; - display: flex; - align-items: center; - gap: 1rem; - cursor: pointer; - transition: background-color 0.2s ease; -} - -.component-header:hover { - background: var(--color-bg-secondary); -} - -.component-icon { - width: 1.5rem; - height: 1.5rem; - color: var(--color-brand); - flex-shrink: 0; -} - -.component-name { - flex: 1; - min-width: 0; -} - -.component-name h4 { - margin: 0 0 0.25rem 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); -} - -.component-type { - display: flex; - align-items: center; - gap: 0.375rem; -} - -.component-toggle { - width: 1.5rem; - height: 1.5rem; - color: var(--color-text-secondary); - flex-shrink: 0; -} - -.component-toggle .chevron { - width: 1rem; - height: 1rem; - transition: transform var(--timing-fast) var(--easing-standard); -} - -.component-header[aria-expanded="true"] .chevron { - transform: rotate(90deg); -} - -.component-details { - border-top: 1px solid var(--color-border-primary); - - /* Height-based collapse (consistent with all components) */ - max-height: 0; - opacity: 0; - overflow: hidden; - padding: 0; - - /* Configure collapse behavior */ - --collapse-height-collapsed: 0; - --collapse-height-expanded: 3000px; /* Large for complex schemas */ - --collapse-opacity-collapsed: 0; - --collapse-opacity-expanded: 1; - --collapse-overflow-collapsed: hidden; - --collapse-overflow-expanded: visible; - --collapse-padding-collapsed: 0; - --collapse-padding-expanded: 1.5rem; - --collapse-timing: 0.3s; - --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Remove old class-based approach - component-states.css handles this */ - -/* Legacy styles removed - component-states.css now handles all collapse behavior */ - -@keyframes schema-expand { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* ========================================================================== - :has() Content-Aware Components Enhancements - ========================================================================== */ - -/* Components section adapts based on content type and count */ -.openapi-components:has(.components-section[data-section-type="schemas"]) { - --primary-section: schemas; -} - -.openapi-components:has(.components-section[data-section-type="parameters"]) { - --secondary-section: parameters; -} - -/* Enhanced styling for sections with many items */ -.components-section:has([data-item-count^="1"]) .components-section-title::after, -.components-section:has([data-item-count^="2"]) .components-section-title::after, -.components-section:has([data-item-count^="3"]) .components-section-title::after { - content: " (" attr(data-item-count) ")"; - color: var(--color-text-secondary); - font-size: 0.875rem; - font-weight: 400; -} - -/* ========================================================================== - Enhanced Schema Expansion States with :has() - ========================================================================== */ - -/* Component items with expanded content */ -.component-item:has(.component-details.expanded) { - border-color: var(--color-brand); - box-shadow: 0 4px 16px rgba(var(--color-brand-rgb), 0.15); - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); -} - -.component-item:has(.component-details.expanded) .component-header { - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - border-bottom: 1px solid rgba(var(--color-brand-rgb), 0.1); -} - -/* Enhanced chevron rotation for expanded state */ -.component-item:has(.component-details.expanded) .chevron { - transform: rotate(90deg); - color: var(--color-brand); -} - -/* Schema-specific expanded state styling */ -.component-item[data-component="component-schema"]:has(.component-details.expanded) { - border-left: 4px solid var(--color-brand); -} - -.component-item[data-component="component-schema"]:has(.component-details.expanded) .component-name h4 { - color: var(--color-brand); - font-weight: 700; -} - -/* Complex schemas (with many properties) get enhanced styling when expanded */ -.component-item[data-property-count^="1"]:has(.component-details.expanded), -.component-item[data-property-count^="2"]:has(.component-details.expanded), -.component-item[data-property-count^="3"]:has(.component-details.expanded) { - border-left: 4px solid var(--color-accent); -} - -.component-item[data-property-count^="1"]:has(.component-details.expanded) .component-name h4, -.component-item[data-property-count^="2"]:has(.component-details.expanded) .component-name h4, -.component-item[data-property-count^="3"]:has(.component-details.expanded) .component-name h4 { - color: var(--color-accent); -} - -/* Required schemas get special highlighting when expanded */ -.component-item[data-has-required="true"]:has(.component-details.expanded) .component-header { - background: linear-gradient( - 135deg, - rgba(var(--color-warning-rgb), 0.08) 0%, - rgba(var(--color-warning-rgb), 0.03) 100% - ); -} - -/* Different schema types get unique expanded styling */ -.component-item[data-schema-type="array"]:has(.component-details.expanded) { - border-left-color: var(--color-success); -} - -.component-item[data-schema-type="object"]:has(.component-details.expanded) { - border-left-color: var(--color-brand); -} - -.component-item[data-schema-type="string"]:has(.component-details.expanded) { - border-left-color: var(--color-info); -} - -/* Schema-specific enhancements */ -.component-item[data-component="component-schema"]:has([data-has-properties="true"]) { - border-left: 3px solid var(--color-brand); -} - -.component-item[data-component="component-schema"]:has([data-has-required="true"]) .component-header { - background: rgba(var(--color-accent-rgb), 0.05); -} - -.component-item[data-schema-type="object"]:has([data-property-count]) .component-name::after { - content: " (" attr(data-property-count) " properties)"; - color: var(--color-text-secondary); - font-size: 0.75rem; - font-weight: 400; -} - -.component-item[data-schema-type="array"] .component-header { - background: linear-gradient(135deg, rgba(var(--color-info-rgb), 0.05), rgba(var(--color-accent-rgb), 0.05)); -} - -.component-item[data-schema-type="string"] .component-icon { - color: var(--color-accent); -} - -/* Parameter-specific enhancements */ -.component-item[data-component="component-parameter"][data-param-required="true"] { - border-left: 3px solid var(--color-accent); -} - -.component-item[data-component="component-parameter"][data-param-required="true"] .component-header { - background: rgba(var(--color-accent-rgb), 0.08); -} - -.component-item[data-param-in="path"] .component-header { - background: linear-gradient(135deg, rgba(var(--color-danger-rgb), 0.05), rgba(var(--color-danger-rgb), 0.05)); -} - -.component-item[data-param-in="query"] .component-header { - background: linear-gradient(135deg, rgba(var(--color-info-rgb), 0.05), rgba(var(--color-info-rgb), 0.05)); -} - -.component-item[data-param-in="header"] .component-header { - background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.05), rgba(var(--color-accent-rgb), 0.05)); -} - -/* Enhanced hover effects based on content */ -.component-item:has([data-has-description="true"]):hover { - transform: translateY(-2px); - box-shadow: - 0 4px 12px rgba(var(--color-brand-rgb), 0.15), - 0 2px 4px rgba(0, 0, 0, 0.08); -} - -/* Responsive adaptations */ -.components-section:has(.component-item:nth-child(n+10)) { - --large-section: true; -} - -.components-section:has(.component-item:nth-child(n+10)) .components-list { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 1rem; -} - -/* Section with only one item gets special treatment */ -.components-section:has(.component-item:only-child) .component-item { - max-width: 600px; - margin: 0 auto; -} - -/* Enhanced focus states for accessibility */ -.component-item:has(.component-header:focus-visible) { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} diff --git a/assets/css/components/openapi/endpoints.css b/assets/css/components/openapi/endpoints.css deleted file mode 100644 index 808bf0f..0000000 --- a/assets/css/components/openapi/endpoints.css +++ /dev/null @@ -1,425 +0,0 @@ -/* OpenAPI Endpoints */ - -/* ========================================================================== - Endpoints Section - ========================================================================== */ - -.openapi-endpoints { - padding: 2rem 0; -} - -/* Endpoint Groups */ -.endpoint-group { - margin-bottom: 2rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - overflow: hidden; -} - -.endpoint-group-header { - padding: 1rem 1.5rem; - background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border-primary); - cursor: pointer; - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: flex; - align-items: center; - justify-content: space-between; -} - -.endpoint-group-header:hover { - background: var(--color-bg-tertiary); -} - -.endpoint-group-title { - display: flex; - align-items: center; - gap: 0.75rem; -} - -.endpoint-group-title h3 { - margin: 0; - font-size: 1.25rem; - font-weight: 600; - color: var(--color-text-primary); -} - -.endpoint-count { - background: rgba(var(--color-brand-rgb), 0.1); - color: var(--color-brand); - padding: 0.25rem 0.75rem; - border-radius: 1rem; - font-size: 0.8rem; - font-weight: 500; -} - -.endpoint-group-toggle { - display: flex; - align-items: center; - justify-content: center; - width: 1.5rem; - height: 1.5rem; -} - -.endpoint-group-toggle .chevron { - width: 1rem; - height: 1rem; - transition: transform var(--timing-fast) var(--easing-standard); -} - -.endpoint-group-header[aria-expanded="true"] .chevron { - transform: rotate(90deg); -} - -.endpoint-group-content { - /* Use height-based collapse (consistent with response-details) */ - max-height: 0; - opacity: 0; - overflow: hidden; - padding: 0; - - /* Configure collapse behavior */ - --collapse-height-collapsed: 0; - --collapse-height-expanded: 3000px; /* Larger for endpoint lists */ - --collapse-opacity-collapsed: 0; - --collapse-opacity-expanded: 1; - --collapse-overflow-collapsed: hidden; - --collapse-overflow-expanded: visible; - --collapse-padding-collapsed: 0; - --collapse-padding-expanded: 0; - --collapse-timing: 0.3s; - --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Remove old class-based approach - component-states.css handles this */ - -/* Endpoint Items within Groups */ -.endpoint-item { - background: var(--color-surface); - border: none; - border-bottom: 1px solid var(--color-border-primary); - border-radius: 0; - margin-bottom: 0; - overflow: hidden; - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} - -.endpoint-item:last-child { - border-bottom: none; -} - -.endpoint-item:hover { - background: var(--color-bg-secondary); -} - -/* Endpoint Header */ -.endpoint-header { - padding: 0.75rem 1rem; - display: flex; - align-items: center; - gap: 0.75rem; - cursor: pointer; - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} - -/* Keyboard focus visibility */ -.endpoint-group-header:focus-visible, -.endpoint-header:focus-visible { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - border-radius: 0.5rem; -} - -.endpoint-header:hover { - background: var(--color-bg-secondary); -} - -.endpoint-header__method { - flex-shrink: 0; -} - -.endpoint-header__path { - flex: 1; - min-width: 0; -} - -.endpoint-header__summary { - flex: 2; - min-width: 0; -} - -.endpoint-header__meta { - flex-shrink: 0; - display: flex; - align-items: center; - gap: 0.5rem; -} - -.endpoint-header__toggle { - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - width: 1.5rem; - height: 1.5rem; -} - -.endpoint-path { - font-family: var(--font-family-mono); - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); -} - -.endpoint-summary { - font-size: 0.875rem; - color: var(--color-text-primary); - font-weight: 500; -} - -.endpoint-operation-id { - font-size: 0.75rem; - color: var(--color-text-secondary); -} - -.operation-id-label { - font-weight: 500; -} - -.endpoint-tags { - display: flex; - gap: 0.375rem; -} - -.endpoint-tag { - background: rgba(var(--color-brand-rgb), 0.1); - color: var(--color-brand); - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 500; -} - -/* HTTP Method Badges */ -.http-method { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.375rem 0.75rem; - border-radius: 0.375rem; - font-size: 0.75rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; - min-width: 4rem; -} - -/* Old hex-based method colors commented out in favor of tokens per themes/milodocs/init */ -/* .http-method--get { background: #22c55e; color: white; } -.http-method--post { background: #3b82f6; color: white; } -.http-method--put { background: #f59e0b; color: white; } -.http-method--patch { background: #8b5cf6; color: white; } -.http-method--delete { background: #ef4444; color: white; } -.http-method--head { background: #6b7280; color: white; } -.http-method--options { background: #9333ea; color: white; } */ - -.http-method--get { background: var(--http-get-bg); color: var(--http-get-text); } -.http-method--post { background: var(--http-post-bg); color: var(--http-post-text); } -.http-method--put { background: var(--http-put-bg); color: var(--http-put-text); } -.http-method--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } -.http-method--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } -.http-method--head { background: var(--http-head-bg); color: var(--http-head-text); } -.http-method--options { background: var(--http-options-bg); color: var(--http-options-text); } - -/* Endpoint Details */ -.endpoint-details { - display: none; - padding: 1.5rem; - background: var(--color-surface); - border-top: 1px solid var(--color-border-primary); -} - -.endpoint-details.expanded { - display: block; -} - -.endpoint-section { - margin-bottom: 2rem; -} - -.endpoint-section:last-child { - margin-bottom: 0; -} - -.endpoint-section h4 { - margin: 0 0 1rem 0; - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); - display: flex; - align-items: center; - gap: 0.5rem; -} - -.endpoint-description { - font-size: 1rem; - line-height: 1.6; - color: var(--color-text-primary); - margin-bottom: 1.5rem; -} - -/* Chevron Icon */ -.chevron { - width: 1rem; - height: 1rem; - transition: transform var(--timing-fast) var(--easing-standard); -} - -.endpoint-header[aria-expanded="true"] .chevron { - transform: rotate(90deg); -} - -/* ========================================================================== - :has() Content-Aware Endpoints Enhancements - ========================================================================== */ - -/* API endpoint viewer adapts based on content type */ -.openapi-spec[data-viewer-type="endpoint"]:has([data-has-parameters="true"]) { - --has-params: true; -} - -.openapi-spec[data-viewer-type="endpoint"]:has([data-has-request-body="true"]) { - --has-body: true; -} - -.openapi-spec[data-viewer-type="endpoint"]:has([data-has-responses="true"]) { - --has-responses: true; -} - -/* Method-specific styling enhancements */ -.openapi-spec[data-method="GET"]:has([data-has-parameters="true"]) .api-endpoint-header { - border-left: 4px solid rgba(var(--color-info-rgb), 0.5); -} - -.openapi-spec[data-method="POST"]:has([data-has-request-body="true"]) .api-endpoint-header { - border-left: 4px solid rgba(var(--color-success-rgb), 0.5); -} - -.openapi-spec[data-method="PUT"]:has([data-has-request-body="true"]) .api-endpoint-header { - border-left: 4px solid rgba(var(--color-warning-rgb), 0.5); -} - -.openapi-spec[data-method="DELETE"]:has([data-has-responses="true"]) .api-endpoint-header { - border-left: 4px solid rgba(var(--color-danger-rgb), 0.5); -} - -/* Enhanced endpoint header based on content */ -.api-endpoint-header:has([data-has-summary="true"]):has([data-has-description="true"]) { - padding: 2rem 1.5rem; - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); -} - -/* Endpoint item adapts based on available sections */ -.endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) { - --sections: comprehensive; - border: 2px solid var(--color-border-primary); - border-radius: 1rem; - background: var(--color-surface); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); -} - -.endpoint-item:has([data-has-security="true"]) { - border-left: 3px solid var(--color-accent); -} - -.endpoint-item:has([data-has-examples="true"]) .endpoint-details { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); -} - -/* Parameter count indicators */ -.endpoint-item[data-parameter-count]:not([data-parameter-count="0"])::before { - content: attr(data-parameter-count) " params"; - position: absolute; - top: 0.5rem; - right: 0.5rem; - background: rgba(var(--color-brand-rgb), 0.1); - color: var(--color-brand); - font-size: 0.75rem; - padding: 0.25rem 0.5rem; - border-radius: 1rem; - font-weight: 500; -} - -/* Response count indicators */ -.endpoint-item[data-response-count]:not([data-response-count="0"])::after { - content: attr(data-response-count) " responses"; - position: absolute; - top: 2.5rem; - right: 0.5rem; - background: rgba(var(--color-accent-rgb), 0.1); - color: var(--color-accent); - font-size: 0.75rem; - padding: 0.25rem 0.5rem; - border-radius: 1rem; - font-weight: 500; -} - -/* Endpoint group with many endpoints gets grid layout */ -.endpoint-group:has(.endpoint-item:nth-child(n+6)) .endpoint-group-content { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); - gap: 1rem; -} - -/* Enhanced hover effects for content-rich endpoints */ -.endpoint-item:has([data-has-examples="true"]):hover { - transform: translateY(-2px); - box-shadow: - var(--elevation-hover-2), - var(--elevation-brand-subtle); -} - -/* Responsive adaptations for endpoints */ -@media (max-width: 768px) { - .endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) { - border-radius: 0.5rem; - margin: 0.5rem 0; - } - - .endpoint-item[data-parameter-count]:not([data-parameter-count="0"])::before, - .endpoint-item[data-response-count]:not([data-response-count="0"])::after { - position: static; - display: inline-block; - margin: 0.25rem; - } -} - -/* Reduced motion: remove transitions for interactive rows/headers */ -@media (prefers-reduced-motion: reduce) { - .endpoint-group-header, - .endpoint-item, - .endpoint-header { - transition: none !important; - } -} diff --git a/assets/css/components/openapi/header.css b/assets/css/components/openapi/header.css deleted file mode 100644 index ceda1be..0000000 --- a/assets/css/components/openapi/header.css +++ /dev/null @@ -1,307 +0,0 @@ -/* OpenAPI Header */ - -/* ========================================================================== - OpenAPI Header - ========================================================================== */ - -.openapi-header { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border: 2px solid var(--color-border-primary); - border-radius: 1.5rem; - padding: 2rem; - margin-bottom: 2rem; - position: relative; - overflow: hidden; -} - -.openapi-header::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-accent-rgb), 0.05) 100% - ); - pointer-events: none; -} - -.openapi-header__meta { - display: flex; - align-items: center; - gap: 1rem; - margin-bottom: 1rem; - position: relative; -} - -.openapi-header__badge { - display: inline-flex; - align-items: center; - padding: 0.5rem 1rem; - background: rgba(var(--color-brand-rgb, 59, 130, 246), 0.1); - border: 1px solid rgba(var(--color-brand-rgb, 59, 130, 246), 0.2); - border-radius: 2rem; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-brand, #3b82f6); - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; -} - -.openapi-header__badge:hover { - background: rgba(var(--color-brand-rgb, 59, 130, 246), 0.15); - border-color: rgba(var(--color-brand-rgb, 59, 130, 246), 0.3); - transform: translateY(-1px); -} - -/* Version Badge */ -.openapi-header__badge--version { - background: rgba(var(--color-accent-rgb, 139, 92, 246), 0.1); - border-color: rgba(var(--color-accent-rgb, 139, 92, 246), 0.2); - color: var(--color-accent, #8b5cf6); -} - -.openapi-header__badge--version:hover { - background: rgba(var(--color-accent-rgb, 139, 92, 246), 0.15); - border-color: rgba(var(--color-accent-rgb, 139, 92, 246), 0.3); -} - -/* API Type Badge */ -.openapi-header__badge--type[data-api-type="REST"] { - background: rgba(var(--color-info-rgb), 0.1); - border-color: rgba(var(--color-info-rgb), 0.2); - color: var(--color-info); -} - -.openapi-header__badge--type[data-api-type="GraphQL"] { - background: rgba(var(--color-danger-rgb), 0.1); - border-color: rgba(var(--color-danger-rgb), 0.2); - color: var(--color-danger); -} - -/* Maturity Badge */ -.openapi-header__badge--maturity[data-maturity="stable"] { - background: rgba(var(--color-success-rgb), 0.1); - border-color: rgba(var(--color-success-rgb), 0.2); - color: var(--color-success); -} - -.openapi-header__badge--maturity[data-maturity="beta"] { - background: rgba(var(--color-warning-rgb), 0.1); - border-color: rgba(var(--color-warning-rgb), 0.2); - color: var(--color-warning); -} - -.openapi-header__badge--maturity[data-maturity="alpha"] { - background: rgba(var(--color-danger-rgb), 0.1); - border-color: rgba(var(--color-danger-rgb), 0.2); - color: var(--color-danger); -} - -/* Stability Badge */ -.openapi-header__badge--stability { - background: rgba(var(--color-security-rgb), 0.1); - border-color: rgba(var(--color-security-rgb), 0.2); - color: var(--color-security); -} - -.openapi-version { - font-family: var(--font-family-mono); -} - -.openapi-header__version { - display: inline-flex; - align-items: center; - padding: 0.5rem 1rem; - background: rgba(var(--color-accent-rgb), 0.1); - border: 1px solid rgba(var(--color-accent-rgb), 0.2); - border-radius: 2rem; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-accent); -} - -.api-version { - font-family: var(--font-family-mono); -} - -.openapi-header__version-stat { - min-width: auto; - flex: none; - min-height: auto; - padding: 0.5rem 1rem; -} - -.openapi-header__version-stat .overview-stat__value { - font-family: var(--font-family-mono); - font-size: 0.875rem; -} - -.openapi-header__title { - font-family: var(--font-family-brand); - font-size: 3rem; - font-weight: 800; - margin: 0 0 1rem 0; - color: var(--color-text-primary); - position: relative; -} - -.openapi-header__summary { - font-size: 1.25rem; - color: var(--color-text-secondary); - margin-bottom: 1rem; - position: relative; -} - -.openapi-header__description { - font-size: 1rem; - line-height: 1.6; - color: var(--color-text-primary); - margin-bottom: 1.5rem; - position: relative; -} - -.openapi-header__info { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 2rem; - position: relative; -} - -.openapi-contact, -.openapi-license, -.openapi-terms { - background: rgba(255, 255, 255, 0.5); - padding: 1.5rem; - border-radius: 1rem; - border: 1px solid var(--color-border-primary); -} - -.openapi-contact h3, -.openapi-license h3, -.openapi-terms h3 { - margin: 0 0 1rem 0; - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); -} - -.contact-name, -.contact-email, -.contact-url, -.license-name, -.terms-link { - margin-bottom: 0.5rem; -} - -.contact-email a, -.contact-url a, -.license-name a, -.terms-link a { - color: var(--color-brand); - text-decoration: none; - transition: color 0.2s ease; -} - -.contact-email a:hover, -.contact-url a:hover, -.license-name a:hover, -.terms-link a:hover { - color: var(--color-accent); - text-decoration: underline; -} - -/* ========================================================================== - :has() Content-Aware Header Enhancements - ========================================================================== */ - -/* Header with description gets enhanced layout */ -.openapi-header:has(.openapi-header__description) { - padding-bottom: 2.5rem; -} - -.openapi-header:has(.openapi-header__description) .openapi-header__title { - margin-bottom: 1.25rem; -} - -/* Header without info section is more compact */ -.openapi-header:not(:has(.openapi-header__info *)) .openapi-header__description { - margin-bottom: 0; -} - -/* Meta section adapts based on version presence */ -.openapi-header__meta:has(.openapi-header__version-stat) { - gap: 1.5rem; - align-items: stretch; -} - -/* Info section adapts to number of sections */ -.openapi-header__info:has(.openapi-contact:only-child) { - grid-template-columns: 1fr; - max-width: 400px; -} - -.openapi-header__info:has(.openapi-contact + .openapi-license:not(+ *)) { - grid-template-columns: repeat(2, 1fr); -} - -.openapi-header__info:has(.openapi-contact + .openapi-license + .openapi-terms) { - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); -} - -/* Enhanced contact styling based on available info */ -.openapi-contact:has(.contact-email):has(.contact-url) { - background: linear-gradient(135deg, rgba(var(--color-brand-rgb), 0.05), rgba(var(--color-accent-rgb), 0.05)); - border-color: rgba(var(--color-brand-rgb), 0.15); -} - -.openapi-contact:has(.contact-name) h3 { - color: var(--color-brand); -} - -/* License with URL gets enhanced styling */ -.openapi-license:has(a) .license-name a { - color: var(--color-brand); - font-weight: 600; - text-decoration: none; - transition: all 0.2s ease; -} - -.openapi-license:has(a) .license-name a:hover { - color: var(--color-accent); - text-decoration: underline; -} - -/* Header with full info gets enhanced spacing */ -.openapi-header:has(.openapi-contact):has(.openapi-license):has(.openapi-terms) { - padding: 2.5rem; -} - -/* Responsive adaptations using :has() */ -@media (max-width: 768px) { - .openapi-header:has(.openapi-header__info) { - padding: 1.5rem; - } - - .openapi-header__info:has(.openapi-contact + .openapi-license + .openapi-terms) { - grid-template-columns: 1fr; - gap: 1rem; - } - - .openapi-header__meta:has(.openapi-header__version-stat) { - flex-direction: column; - gap: 0.75rem; - align-items: flex-start; - } -} \ No newline at end of file diff --git a/assets/css/components/openapi/index.css b/assets/css/components/openapi/index.css deleted file mode 100644 index 5c416e1..0000000 --- a/assets/css/components/openapi/index.css +++ /dev/null @@ -1,18 +0,0 @@ -/* OpenAPI Component - Modular imports */ - -@import "./base.css"; -@import "./header.css"; -@import "./overview.css"; -@import "./servers.css"; -@import "./navigation.css"; -@import "./sidebar.css"; -@import "./pages.css"; -@import "./single.css"; -@import "./endpoints.css"; -@import "./parameters.css"; -@import "./responses.css"; -@import "./schemas.css"; -@import "./code-examples.css"; -@import "./components.css"; -@import "./security.css"; -@import "./responsive.css"; \ No newline at end of file diff --git a/assets/css/components/openapi/navigation.css b/assets/css/components/openapi/navigation.css deleted file mode 100644 index 133d87b..0000000 --- a/assets/css/components/openapi/navigation.css +++ /dev/null @@ -1,124 +0,0 @@ -/* OpenAPI Navigation */ - -/* ========================================================================== - Endpoints Navigation - ========================================================================== */ - -.endpoints-nav { - margin-bottom: 2rem; - padding: 1.5rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 1rem; -} - -.endpoints-nav__section { - margin-bottom: 1.5rem; -} - -.endpoints-nav__section:last-child { - margin-bottom: 0; -} - -.endpoints-nav__header { - font-weight: 600; - color: var(--color-text-primary); - margin-bottom: 1rem; -} - -.endpoints-nav__tags, -.endpoints-nav__methods { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; -} - -.endpoints-nav__search { - position: relative; -} - -.endpoint-search { - width: 100%; - padding: 0.75rem 2rem 0.75rem 0.75rem; - font-size: 0.875rem; - border-radius: 0.5rem; - border: 1px solid var(--color-border-primary); - background: var(--color-surface); - color: var(--color-text-primary); - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - box-shadow 0.2s ease; -} - -.endpoint-search:focus { - outline: none; - border-color: var(--color-brand); - box-shadow: 0 0 0 2px rgba(var(--color-brand-rgb), 0.2); -} - -.search-icon { - position: absolute; - right: 0.5rem; - top: 50%; - transform: translateY(-50%); - width: 1rem; - height: 1rem; - color: var(--color-text-secondary); -} - -.tag-filter, -.method-filter { - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 2rem; - padding: 0.5rem 1rem; - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-secondary); - cursor: pointer; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; -} - -.tag-filter:hover, -.tag-filter--active { - background: var(--color-brand); - border-color: var(--color-brand); - color: var(--color-text-inverse); -} - -.method-filter:hover, -.method-filter--active { - border-color: var(--color-brand); - color: var(--color-brand); -} - -/* Method-specific colors */ -/* Old hex-based method filter colors commented out in favor of tokens per themes/milodocs/init */ -/* .method-filter--get { border-color: #22c55e; color: #22c55e; } -.method-filter--post { border-color: #3b82f6; color: #3b82f6; } -.method-filter--put { border-color: #f59e0b; color: #f59e0b; } -.method-filter--patch { border-color: #8b5cf6; color: #8b5cf6; } -.method-filter--delete { border-color: #ef4444; color: #ef4444; } */ - -.method-filter--get { border-color: var(--http-get-bg); color: var(--http-get-bg); } -.method-filter--post { border-color: var(--http-post-bg); color: var(--http-post-bg); } -.method-filter--put { border-color: var(--http-put-bg); color: var(--http-put-bg); } -.method-filter--patch { border-color: var(--http-patch-bg); color: var(--http-patch-bg); } -.method-filter--delete { border-color: var(--http-delete-bg); color: var(--http-delete-bg); } - -/* .method-filter--get.method-filter--active { background: #22c55e; border-color: #22c55e; color: white; } */ -.method-filter--get.method-filter--active { background: var(--http-get-bg); border-color: var(--http-get-bg); color: var(--http-get-text); } -/* .method-filter--post.method-filter--active { background: #3b82f6; border-color: #3b82f6; color: white; } */ -.method-filter--post.method-filter--active { background: var(--http-post-bg); border-color: var(--http-post-bg); color: var(--http-post-text); } -/* .method-filter--put.method-filter--active { background: #f59e0b; border-color: #f59e0b; color: white; } */ -.method-filter--put.method-filter--active { background: var(--http-put-bg); border-color: var(--http-put-bg); color: var(--http-put-text); } -/* .method-filter--patch.method-filter--active { background: #8b5cf6; border-color: #8b5cf6; color: white; } */ -.method-filter--patch.method-filter--active { background: var(--http-patch-bg); border-color: var(--http-patch-bg); color: var(--http-patch-text); } -/* .method-filter--delete.method-filter--active { background: #ef4444; border-color: #ef4444; color: white; } */ -.method-filter--delete.method-filter--active { background: var(--http-delete-bg); border-color: var(--http-delete-bg); color: var(--http-delete-text); } \ No newline at end of file diff --git a/assets/css/components/openapi/overview.css b/assets/css/components/openapi/overview.css deleted file mode 100644 index 2b099b8..0000000 --- a/assets/css/components/openapi/overview.css +++ /dev/null @@ -1,439 +0,0 @@ -/* OpenAPI Overview - Modern Info-Dense Layout */ - -/* ========================================================================== - Overview Section - ========================================================================== */ - -.openapi-overview { - padding: 1.5rem 0; - margin-bottom: 1rem; -} - -/* Header */ -.overview-header { - margin-bottom: 1.5rem; - text-align: left; -} - -.overview-title { - font-family: var(--font-family-brand); - font-size: 1.75rem; - font-weight: 700; - color: var(--color-text-primary); - margin: 0 0 0.25rem 0; -} - -/* Enhanced gradient text with fallback */ -@supports (background-clip: text) or (-webkit-background-clip: text) { - .overview-title { - background: linear-gradient(135deg, var(--color-brand, #3b82f6), var(--color-accent, #8b5cf6)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - color: transparent; - } -} - -.overview-subtitle { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin: 0; - opacity: 0.8; -} - -/* Content Container */ -.overview-content { - display: flex; - flex-direction: column; - gap: 1.5rem; -} - -/* ========================================================================== - Stats Bar - Horizontal info-dense layout - ========================================================================== */ - -.overview-stats { - display: flex; - flex-wrap: wrap; - gap: 0.75rem; - align-items: stretch; -} - -.overview-stat { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.75rem 1rem; - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - transition: - background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), - border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), - color 0.2s cubic-bezier(0.4, 0, 0.2, 1), - transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), - box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); - min-height: 60px; - position: relative; - overflow: hidden; - flex: 1; - min-width: 140px; -} - -.overview-stat::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(var(--color-brand-rgb), 0.03); - opacity: 0; - transition: opacity 0.2s ease; -} - -.overview-stat:hover { - transform: translateY(-2px); - border-color: var(--color-brand); - box-shadow: var(--elevation-hover-2); -} - -.overview-stat:hover::before { - opacity: 1; -} - -/* Stat Icon - Container-based sizing following theme patterns */ -.overview-stat__icon { - width: 1.25rem; - height: 1.25rem; - color: var(--color-text-secondary); - flex-shrink: 0; - transition: color 0.2s ease; - display: flex; - align-items: center; - justify-content: center; -} - -/* SVG naturally fills container */ -.overview-stat__icon svg { - width: 100%; - height: 100%; - display: block; -} - -.overview-stat:hover .overview-stat__icon { - color: var(--color-brand); -} - -/* Stat Content */ -.overview-stat__content { - display: flex; - flex-direction: column; - gap: 0.125rem; - min-width: 0; - flex: 1; -} - -.overview-stat__label { - font-size: 0.75rem; - font-weight: 500; - color: var(--color-text-tertiary); - text-transform: uppercase; - letter-spacing: 0.025em; - line-height: 1; -} - -.overview-stat__value { - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - line-height: 1.2; - word-break: break-word; -} - -/* Stat Variants */ -.overview-stat--primary { - background: linear-gradient(135deg, var(--color-brand), var(--color-accent)); - color: var(--color-text-inverse); - border-color: transparent; -} - -.overview-stat--primary .overview-stat__icon, -.overview-stat--primary .overview-stat__label, -.overview-stat--primary .overview-stat__value { - color: currentColor; -} - -.overview-stat--primary .overview-stat__label { - opacity: 0.8; -} - -.overview-stat--primary:hover { - transform: translateY(-3px); - box-shadow: - 0 8px 20px rgba(var(--color-brand-rgb), 0.25), - 0 4px 8px rgba(0, 0, 0, 0.1); -} - -/* ========================================================================== - Description Section - ========================================================================== */ - -.overview-description { - padding: 1rem 1.25rem; - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - border-left: 3px solid var(--color-brand); -} - -.overview-description p { - margin: 0; - color: var(--color-text-secondary); - line-height: 1.6; - font-size: 0.875rem; -} - -/* ========================================================================== - Documentation Links - ========================================================================== */ - -.overview-documentation { - margin-top: 0.5rem; -} - -.overview-documentation__title { - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0 0 1rem 0; -} - -.overview-documentation__grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 0.75rem; - margin-top: 1.5rem; -} - -.overview-doc-link { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.875rem 1rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - text-decoration: none; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease, - box-shadow 0.2s ease; - position: relative; - overflow: hidden; -} - -.overview-doc-link::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(var(--color-brand-rgb), 0.03); - opacity: 0; - transition: opacity 0.2s ease; -} - -.overview-doc-link:hover { - transform: translateY(-2px); - border-color: var(--color-brand); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); -} - -.overview-doc-link:hover::before { - opacity: 1; -} - -.overview-doc-link__icon { - width: 1.125rem; - height: 1.125rem; - color: var(--color-text-secondary); - flex-shrink: 0; - transition: color 0.2s ease; - display: flex; - align-items: center; - justify-content: center; -} - -/* SVG naturally fills container */ -.overview-doc-link__icon svg { - width: 100%; - height: 100%; - display: block; -} - -.overview-doc-link:hover .overview-doc-link__icon { - color: var(--color-brand); -} - -.overview-doc-link__content { - display: flex; - flex-direction: column; - gap: 0.125rem; - flex: 1; - min-width: 0; -} - -.overview-doc-link__title { - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-primary); - line-height: 1.3; - transition: color 0.2s ease; -} - -.overview-doc-link:hover .overview-doc-link__title { - color: var(--color-brand); -} - -.overview-doc-link__description { - font-size: 0.75rem; - color: var(--color-text-tertiary); - line-height: 1.4; -} - -.overview-doc-link__arrow { - width: 1rem; - height: 1rem; - color: var(--color-text-tertiary); - flex-shrink: 0; - transition: - color 0.2s ease, - transform 0.2s ease; - display: flex; - align-items: center; - justify-content: center; -} - -/* SVG naturally fills container */ -.overview-doc-link__arrow svg { - width: 100%; - height: 100%; - display: block; -} - -.overview-doc-link:hover .overview-doc-link__arrow { - color: var(--color-brand); - transform: translateX(2px) translateY(-2px); -} - -/* ========================================================================== - Responsive Design - ========================================================================== */ - -@media (max-width: 768px) { - .overview-stats { flex-direction: column; gap: 0.5rem; } - - .overview-stat { min-width: unset; } - - .overview-documentation__grid { grid-template-columns: 1fr; } - - .overview-title { font-size: 1.5rem; } -} - -@media (max-width: 480px) { - .overview-stat { - gap: 0.5rem; - padding: 0.625rem 0.75rem; - min-height: 50px; - } - - .overview-stat__icon { - width: 1rem; - height: 1rem; - } - - .overview-doc-link { - gap: 0.5rem; - padding: 0.75rem; - } -} - -/* ========================================================================== - :has() Content-Aware Overview Enhancements - ========================================================================== */ - -/* Overview with documentation gets enhanced layout */ -.openapi-overview:has(.overview-documentation) { - padding-bottom: 2rem; -} - -.openapi-overview:has(.overview-documentation) .overview-stats { - margin-bottom: 2rem; -} - -/* Stats container adapts based on number of stats */ -.overview-stats:has(.overview-stat:nth-child(4)) { - grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); -} - -.overview-stats:has(.overview-stat:nth-child(3)) { - grid-template-columns: repeat(3, 1fr); -} - -.overview-stats:has(.overview-stat:nth-child(2)) { - grid-template-columns: repeat(2, 1fr); -} - -/* Enhanced hover effects for overview with documentation */ -.openapi-overview:has(.overview-documentation) .overview-stat:hover { - transform: translateY(-3px); - box-shadow: var(--elevation-hover-4); -} - -/* Documentation section gets enhanced styling when stats are present */ -.openapi-overview:has(.overview-stats) .overview-documentation { - border-top: 1px solid var(--color-border-primary); - padding-top: 1.5rem; - margin-top: 1.5rem; -} - -/* Single stat gets special treatment */ -.overview-stats:has(.overview-stat:only-child) .overview-stat { - max-width: 300px; - margin: 0 auto; -} - -/* API type specific enhancements */ -[data-api-type="REST"] .overview-stat--secondary { - background: linear-gradient(135deg, rgba(var(--color-info-rgb), 0.1), rgba(var(--color-security-rgb), 0.1)); - border-color: rgba(var(--color-info-rgb), 0.2); -} - -[data-api-type="GraphQL"] .overview-stat--secondary { - background: linear-gradient(135deg, rgba(var(--color-danger-rgb), 0.1), rgba(var(--color-warning-rgb), 0.1)); - border-color: rgba(var(--color-danger-rgb), 0.2); -} - -/* Maturity-based styling */ -[data-maturity="stable"] .overview-stat--accent { - background: linear-gradient(135deg, rgba(var(--color-success-rgb), 0.1), rgba(var(--color-success-rgb), 0.1)); - border-color: rgba(var(--color-success-rgb), 0.2); -} - -[data-maturity="beta"] .overview-stat--accent { - background: linear-gradient(135deg, rgba(var(--color-warning-rgb), 0.1), rgba(var(--color-warning-rgb), 0.1)); - border-color: rgba(var(--color-warning-rgb), 0.2); -} - -[data-maturity="alpha"] .overview-stat--warning { - background: linear-gradient(135deg, rgba(var(--color-danger-rgb), 0.1), rgba(var(--color-danger-rgb), 0.1)); - border-color: rgba(var(--color-danger-rgb), 0.2); -} diff --git a/assets/css/components/openapi/pages.css b/assets/css/components/openapi/pages.css deleted file mode 100644 index 1528d28..0000000 --- a/assets/css/components/openapi/pages.css +++ /dev/null @@ -1,313 +0,0 @@ -/* OpenAPI Generated Pages Styles */ -/* Styling for API overview, tag, and endpoint pages generated by content adapter */ - -/* ========================================================================== - API Overview Page - ========================================================================== */ - -.api-overview .api-endpoint-groups { - margin: 2rem 0; -} - -.endpoint-groups-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: 1.5rem; - margin-top: 1.5rem; -} - -.card--endpoint-group { - padding: 1.5rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease, - box-shadow 0.2s ease; -} - -.card--endpoint-group:hover { - border-color: var(--color-brand-primary); - box-shadow: var(--elevation-hover-2); -} - -.card--endpoint-group h3 { - margin: 0 0 0.5rem 0; - font-size: 1.125rem; - font-weight: 600; -} - -.card--endpoint-group h3 a { - color: var(--color-text-primary); - text-decoration: none; -} - -.card--endpoint-group h3 a:hover { - color: var(--color-brand-primary); -} - -.card--endpoint-group p { - margin: 0 0 1rem 0; - color: var(--color-text-secondary); - font-size: 0.875rem; - line-height: 1.5; -} - -.endpoint-count { - font-size: 0.75rem; - color: var(--color-text-tertiary); - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -/* ========================================================================== - API Tag Page - ========================================================================== */ - -.api-tag-header { - margin-bottom: 2rem; - padding-bottom: 1.5rem; - border-bottom: 1px solid var(--color-border-light); -} - -.api-tag-breadcrumb { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin-bottom: 0.5rem; -} - -.api-tag-breadcrumb a { - color: var(--color-brand-primary); - text-decoration: none; -} - -.api-tag-breadcrumb a:hover { - text-decoration: underline; -} - -.api-tag-header h1 { - margin: 0 0 0.5rem 0; - font-size: 2rem; - font-weight: 700; - color: var(--color-text-primary); -} - -.api-tag-description { - margin: 0; - color: var(--color-text-secondary); - font-size: 1rem; - line-height: 1.6; -} - -.card--endpoint-summary { - padding: 1.25rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - margin-bottom: 1rem; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease, - box-shadow 0.2s ease; -} - -.card--endpoint-summary:hover { - border-color: var(--color-brand-border); - box-shadow: var(--elevation-hover-1); -} - -.endpoint-summary-header { - display: flex; - align-items: flex-start; - gap: 1rem; -} - -.endpoint-summary-info { - flex: 1; -} - -.endpoint-summary-info h3 { - margin: 0 0 0.5rem 0; - font-size: 1rem; - font-weight: 600; -} - -.endpoint-summary-info h3 a { - color: var(--color-text-primary); - text-decoration: none; - font-family: var(--font-mono, monospace); -} - -.endpoint-summary-info h3 a:hover { - color: var(--color-brand-primary); -} - -.endpoint-summary-description { - margin: 0; - color: var(--color-text-secondary); - font-size: 0.875rem; - line-height: 1.5; -} - -/* ========================================================================== - API Endpoint Page - ========================================================================== */ - -.api-endpoint-header { - margin-bottom: 2rem; - padding-bottom: 1.5rem; - border-bottom: 1px solid var(--color-border-light); -} - -.api-endpoint-breadcrumb { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin-bottom: 1rem; -} - -.api-endpoint-breadcrumb a { - color: var(--color-brand-primary); - text-decoration: none; -} - -.api-endpoint-breadcrumb a:hover { - text-decoration: underline; -} - -.endpoint-title-section { - margin-top: 1rem; -} - -.endpoint-method-path { - display: flex; - align-items: center; - gap: 0.75rem; - margin-bottom: 0.75rem; -} - -.endpoint-path { - font-family: var(--font-mono, monospace); - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); - background: var(--color-surface-alt); - padding: 0.375rem 0.75rem; - border-radius: 0.375rem; - border: 1px solid var(--color-border-primary); -} - -.api-endpoint-header h1 { - margin: 0 0 0.75rem 0; - font-size: 1.875rem; - font-weight: 700; - color: var(--color-text-primary); - line-height: 1.3; -} - -.endpoint-description { - margin: 0; - color: var(--color-text-secondary); - font-size: 1rem; - line-height: 1.6; -} - -/* ========================================================================== - Method Badges (Enhanced) - ========================================================================== */ - -.method-badge { - display: inline-block; - padding: 0.25rem 0.75rem; - font-size: 0.75rem; - font-weight: 700; - text-transform: uppercase; - border-radius: 0.375rem; - letter-spacing: 0.025em; - flex-shrink: 0; - min-width: 4rem; - text-align: center; -} - -/* Old hex-based method colors commented out in favor of tokens per themes/milodocs/init */ -/* .method-badge--get { background: #10b981; color: white; } */ -.method-badge--get { background: var(--http-get-bg); color: var(--http-get-text); } - -/* .method-badge--post { background: #3b82f6; color: white; } */ -.method-badge--post { background: var(--http-post-bg); color: var(--http-post-text); } - -/* .method-badge--put { background: #f59e0b; color: white; } */ -.method-badge--put { background: var(--http-put-bg); color: var(--http-put-text); } - -/* .method-badge--patch { background: #8b5cf6; color: white; } */ -.method-badge--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } - -/* .method-badge--delete { background: #ef4444; color: white; } */ -.method-badge--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } - -/* .method-badge--head, .method-badge--options { background: #6b7280; color: white; } */ -.method-badge--head, -.method-badge--options { - background: var(--http-head-bg); - color: var(--http-head-text); -} - -/* ========================================================================== - Page Content Integration - ========================================================================== */ - -.page-content { - margin-top: 2rem; - padding-top: 2rem; - border-top: 1px solid var(--color-border-light); -} - -.page-content h2:first-child { - margin-top: 0; -} - -/* ========================================================================== - Responsive Design - ========================================================================== */ - -@media (max-width: 768px) { - .endpoint-groups-grid { - grid-template-columns: 1fr; - gap: 1rem; - } - - .endpoint-group-card { - padding: 1rem; - } - - .endpoint-summary-header { - flex-direction: column; - gap: 0.75rem; - } - - .endpoint-method-path { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } - - .endpoint-path { - font-size: 1rem; - word-break: break-all; - } - - .api-endpoint-header h1 { - font-size: 1.5rem; - } -} - -/* ========================================================================== - Dark Mode Adjustments - ========================================================================== */ - -/* Dark mode handled via CSS variables in :root/.dark */ \ No newline at end of file diff --git a/assets/css/components/openapi/parameters.css b/assets/css/components/openapi/parameters.css deleted file mode 100644 index 932dcee..0000000 --- a/assets/css/components/openapi/parameters.css +++ /dev/null @@ -1,200 +0,0 @@ -/* OpenAPI Parameters */ - -/* ========================================================================== - Parameters - ========================================================================== */ - -.parameters-container { - display: flex; - flex-direction: column; - gap: 2rem; -} - -.parameters-section { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - overflow: hidden; -} - -.parameters-section-header { - padding: 1rem 1.5rem; - background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border-primary); -} - -.parameters-section-title { - margin: 0; - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); -} - -/* Parameter Group Headers */ -.parameter-group-header { - padding: 0.75rem 1rem; - background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border-primary); - cursor: pointer; - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: flex; - align-items: center; - justify-content: space-between; -} - -.parameter-group-header:hover { - background: var(--color-bg-tertiary); -} - -.parameter-group-title { - margin: 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - display: flex; - align-items: center; - gap: 0.5rem; -} - -.parameter-count { - background: rgba(var(--color-brand-rgb), 0.1); - color: var(--color-brand); - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 500; -} - -.parameter-group-toggle { - display: flex; - align-items: center; - justify-content: center; - width: 1.25rem; - height: 1.25rem; -} - -.parameter-group-toggle .chevron { - width: 0.875rem; - height: 0.875rem; - transition: transform var(--timing-fast) var(--easing-standard); -} - -.parameter-group-header[aria-expanded="true"] .chevron { - transform: rotate(90deg); -} - -.parameter-list { - /* Height-based collapse (consistent with all components) */ - max-height: 0; - opacity: 0; - overflow: hidden; - padding: 0; - - /* Configure collapse behavior */ - --collapse-height-collapsed: 0; - --collapse-height-expanded: 1500px; /* Good for parameter lists */ - --collapse-opacity-collapsed: 0; - --collapse-opacity-expanded: 1; - --collapse-overflow-collapsed: hidden; - --collapse-overflow-expanded: visible; - --collapse-padding-collapsed: 0; - --collapse-padding-expanded: 1rem; - --collapse-timing: 0.3s; - --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Remove old class-based approach - component-states.css handles this */ - -.parameters-list { - padding: 0; -} - -.parameter-item { - padding: 1rem 1.5rem; - border-bottom: 1px solid var(--color-border-primary); - transition: background-color 0.2s ease; -} - -.parameter-item:last-child { - border-bottom: none; -} - -.parameter-item:hover { - background: var(--color-bg-secondary); -} - -.parameter-item--required { - border-left: 4px solid var(--color-brand); -} - -.parameter-header { - display: flex; - align-items: flex-start; - justify-content: space-between; - margin-bottom: 0.75rem; -} - -.parameter-name { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.parameter-name code { - font-family: var(--font-family-mono); - font-weight: 600; - color: var(--color-brand); - background: rgba(var(--color-brand-rgb), 0.1); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - font-size: 0.875rem; -} - -.parameter-required { - background: rgba(var(--color-danger-rgb), 0.1); - color: var(--color-danger); - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 600; -} - -.parameter-type { - display: flex; - align-items: center; - gap: 0.375rem; -} - -.parameter-description { - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-secondary); - margin-bottom: 0.75rem; -} - -.parameter-constraints { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; -} - -.constraint-item { - background: var(--color-bg-tertiary); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - font-size: 0.75rem; - color: var(--color-text-secondary); -} - -.constraint-label { - font-weight: 600; -} - -.constraint-value { - font-family: var(--font-family-mono); - color: var(--color-brand); -} diff --git a/assets/css/components/openapi/responses.css b/assets/css/components/openapi/responses.css deleted file mode 100644 index a21bd90..0000000 --- a/assets/css/components/openapi/responses.css +++ /dev/null @@ -1,213 +0,0 @@ -/* OpenAPI Responses */ - -/* ========================================================================== - Response Sections - ========================================================================== */ - -.responses-container { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.response-item { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - overflow: hidden; -} - -.response-header { - padding: 0.75rem 1rem; - background: var(--color-bg-secondary); - cursor: pointer; - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: flex; - align-items: center; - justify-content: space-between; -} - -.response-header:hover { - background: var(--color-bg-tertiary); -} - -.response-status { - display: flex; - align-items: center; - gap: 0.75rem; - flex: 1; -} - -.response-toggle { - display: flex; - align-items: center; - justify-content: center; - width: 1.25rem; - height: 1.25rem; -} - -.response-toggle .chevron { - width: 0.875rem; - height: 0.875rem; - transition: transform var(--timing-fast) var(--easing-standard); -} - -.response-header[aria-expanded="true"] .chevron { - transform: rotate(90deg); -} - -.response-details { - border-top: 1px solid var(--color-border-primary); - - /* Use height-based collapse (not display-based) for smooth animations */ - --collapse-height-collapsed: 0; - --collapse-height-expanded: 2000px; - --collapse-opacity-collapsed: 0; - --collapse-opacity-expanded: 1; - --collapse-overflow-collapsed: hidden; - --collapse-overflow-expanded: visible; - --collapse-padding-collapsed: 0; - --collapse-padding-expanded: 1rem; - --collapse-timing: 0.3s; - --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); - - /* Start collapsed */ - max-height: 0; - opacity: 0; - overflow: hidden; - padding: 0; -} - - - -.response-description { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin: 0; -} - -/* Status Code Badges */ -.status-code { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.25rem 0.75rem; - border-radius: 0.375rem; - font-size: 0.8rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; - min-width: 3rem; -} - -/* Old hex-based status colors commented out in favor of tokens per themes/milodocs/init */ -/* .status-code--2xx { background: #22c55e; color: white; } -.status-code--3xx { background: #3b82f6; color: white; } -.status-code--4xx { background: #f59e0b; color: white; } -.status-code--5xx { background: #ef4444; color: white; } -.status-code--dxx { background: #6b7280; color: white; } */ - -.status-code--2xx { background: var(--status-2xx-bg); color: var(--status-2xx-text); } -.status-code--3xx { background: var(--status-3xx-bg); color: var(--status-3xx-text); } -.status-code--4xx { background: var(--status-4xx-bg); color: var(--status-4xx-text); } -.status-code--5xx { background: var(--status-5xx-bg); color: var(--status-5xx-text); } -.status-code--dxx { background: var(--status-dxx-bg); color: var(--status-dxx-text); } - -/* Response Content */ -.response-content { - margin-top: 1rem; -} - -.response-content h6 { - margin: 0 0 0.75rem 0; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.response-media-type { - margin-bottom: 1rem; - padding: 0.75rem; - background: var(--color-bg-tertiary); - border-radius: 0.375rem; - border: 1px solid var(--color-border-primary); -} - -.media-type-label { - font-family: var(--font-family-mono); - font-size: 0.8rem; - font-weight: 600; - color: var(--color-brand); - margin-bottom: 0.5rem; -} - -.response-schema { - margin-top: 0.75rem; -} - -/* Response Headers */ -.response-headers { - margin-bottom: 1rem; -} - -.response-headers h6 { - margin: 0 0 0.75rem 0; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); -} - -.headers-list { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.header-item { - padding: 0.5rem 0.75rem; - background: var(--color-bg-tertiary); - border-radius: 0.25rem; - border: 1px solid var(--color-border-primary); -} - -.header-name { - display: flex; - align-items: center; - gap: 0.5rem; - margin-bottom: 0.25rem; -} - -.header-name code { - font-family: var(--font-family-mono); - font-size: 0.8rem; - font-weight: 600; - color: var(--color-brand); -} - -.header-required { - background: rgba(var(--color-danger-rgb), 0.1); - color: var(--color-danger); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; - font-size: 0.7rem; - font-weight: 600; - text-transform: uppercase; -} - -.header-description { - font-size: 0.8rem; - color: var(--color-text-secondary); - margin-bottom: 0.25rem; -} - -.header-type { - display: flex; - align-items: center; - gap: 0.25rem; -} \ No newline at end of file diff --git a/assets/css/components/openapi/responsive.css b/assets/css/components/openapi/responsive.css deleted file mode 100644 index eddc2c6..0000000 --- a/assets/css/components/openapi/responsive.css +++ /dev/null @@ -1,151 +0,0 @@ -/* OpenAPI Responsive Styles */ - -/* ========================================================================== - Responsive & Mobile - ========================================================================== */ - -@media (max-width: 768px) { - .openapi-header { - padding: 2rem 1.5rem; - } - - .openapi-header__title { - font-size: 2rem; - } - - .openapi-header__info { - grid-template-columns: 1fr; - gap: 1rem; - } - - .section-title { - font-size: 2rem; - } - - .overview-grid { - grid-template-columns: 1fr; - gap: 1rem; - } - - .endpoints-nav { - padding: 1rem; - } - - .endpoints-nav__tags, - .endpoints-nav__methods { - gap: 0.375rem; - } - - .tag-filter, - .method-filter { - padding: 0.375rem 0.75rem; - font-size: 0.8rem; - } - - .endpoint-header { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - padding: 1rem; - } - - .endpoint-header__method { - align-self: flex-start; - } - - .endpoint-header__toggle { - position: absolute; - top: 1rem; - right: 1rem; - } - - .endpoint-details { - padding: 1rem; - } - - .property-item { - grid-template-columns: 1fr; - gap: 0.5rem; - } - - .code-tabs-nav { - flex-wrap: wrap; - } - - .code-tab { - padding: 0.75rem 1rem; - font-size: 0.8rem; - } - - .code-example-header { - padding: 0.75rem 1rem; - } - - .parameters-section-header, - .parameter-item { - padding: 0.75rem 1rem; - } -} - -@media (max-width: 480px) { - .openapi-header { - padding: 1.5rem 1rem; - } - - .openapi-header__title { - font-size: 1.75rem; - } - - .section-title { - font-size: 1.75rem; - } - - .overview-stat { - gap: 0.5rem; - padding: 0.625rem 0.75rem; - min-height: 50px; - } - - .overview-stat__icon { - width: 1rem; - height: 1rem; - } - - .overview-doc-link { - gap: 0.5rem; - padding: 0.75rem; - } - - .endpoint-header { - padding: 0.75rem; - } - - .endpoint-details { - padding: 0.75rem; - } -} - -/* ========================================================================== - Print Styles - ========================================================================== */ - -@media print { - .openapi-spec { - background: white !important; - color: black !important; - } - - .endpoint-details { - display: block !important; - } - - .code-tab-panel { - display: block !important; - } - - .endpoints-nav, - .copy-button, - .endpoint-header__toggle { - display: none !important; - } -} diff --git a/assets/css/components/openapi/schemas.css b/assets/css/components/openapi/schemas.css deleted file mode 100644 index 825d2c0..0000000 --- a/assets/css/components/openapi/schemas.css +++ /dev/null @@ -1,552 +0,0 @@ -/* OpenAPI Schemas */ - -/* ========================================================================== - Schemas - ========================================================================== */ - -.schema-container { - background: transparent; - border: none; - border-left: 2px solid var(--color-border-primary); - border-radius: 0; - padding: 0.5rem 0 0.5rem 0.75rem; - margin: 0.5rem 0; -} - -.schema-container[data-level="0"] { - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 0.375rem; - padding: 0.75rem; - border-left: none; -} - -.schema-container[data-level="1"] { - margin-left: 1rem; - border-left: 3px solid var(--color-brand); -} - -.schema-container[data-level="2"] { - margin-left: 2rem; - border-left: 3px solid var(--color-accent); -} - -.schema-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 0.5rem; -} - -.schema-title { - margin: 0; - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); -} - -.schema-type-info { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.type-nullable, -.type-readonly, -.type-writeonly { - background: rgba(var(--color-text-secondary-rgb, 107, 114, 128), 0.1); - color: var(--color-text-secondary); - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 500; -} - -.schema-description { - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-secondary); - margin-bottom: 1rem; -} - -.schema-constraints { - display: flex; - flex-wrap: wrap; - gap: 1rem; - margin-bottom: 1.5rem; - padding: 1rem; - background: var(--color-bg-tertiary); - border-radius: 0.5rem; - border: 1px solid var(--color-border-secondary); -} - -.schema-properties { - margin-bottom: 1.5rem; -} - -.schema-properties h6 { - margin: 0 0 1rem 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - padding: 0.5rem 0; - border-bottom: 1px solid var(--color-border-primary); -} - -.properties-list { - display: flex; - flex-direction: column; - gap: 0; - border: 1px solid var(--color-border-primary); - border-radius: 0.375rem; - overflow: hidden; -} - -.property-item { - background: var(--color-surface); - border: none; - border-bottom: 1px solid var(--color-border-primary); - border-radius: 0; - padding: 1rem 0.75rem; - display: flex; - flex-direction: column; - gap: 0.5rem; - position: relative; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; -} - -.property-item:last-child { - border-bottom: none; -} - -.property-item:hover { - background: var(--color-bg-secondary); - transform: translateX(2px); -} - -.property-item--required { - border-left: 3px solid var(--color-brand); -} - -.property-header { - margin-bottom: 0; - display: flex; - align-items: center; - gap: 0.375rem; -} - -.property-name { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.property-name code { - font-family: var(--font-family-mono); - font-weight: 600; - color: var(--color-brand); - background: rgba(var(--color-brand-rgb), 0.1); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - font-size: 0.875rem; -} - -.property-required { - background: rgba(var(--color-danger-rgb), 0.1); - color: var(--color-danger); - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 600; -} - -.property-schema { - margin-left: 0; -} - -/* Enhanced property information layout */ -.property-meta { - display: flex; - align-items: center; - gap: 0.75rem; - margin-top: 0.25rem; -} - -.property-type { - display: flex; - align-items: center; - gap: 0.375rem; -} - -.property-type .type-badge { - font-size: 0.75rem; - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.025em; -} - -.property-format { - font-size: 0.75rem; - color: var(--color-text-secondary); - background: var(--color-bg-secondary); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; -} - -.property-description { - margin-top: 0.5rem; - font-size: 0.875rem; - color: var(--color-text-secondary); - line-height: 1.4; -} - -.property-constraints { - margin-top: 0.5rem; - display: flex; - flex-wrap: wrap; - gap: 0.5rem; -} - -.property-constraint { - font-size: 0.75rem; - color: var(--color-text-secondary); - background: var(--color-bg-secondary); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - border: 1px solid var(--color-border-secondary); -} - -/* Enhanced constraint styling */ -.constraint-modifier { - font-size: 0.7rem; - color: var(--color-warning); - font-style: italic; - margin-left: 0.25rem; -} - -/* Array schema styling */ -.schema-array-info { - margin-bottom: 1.5rem; -} - -.schema-array-info h6 { - margin: 0 0 1rem 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - padding: 0.5rem 0; - border-bottom: 1px solid var(--color-border-primary); -} - -.array-constraints { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-bottom: 1rem; -} - -.array-constraints .constraint { - display: flex; - align-items: center; - gap: 0.25rem; - font-size: 0.875rem; - background: var(--color-bg-secondary); - padding: 0.5rem 0.75rem; - border-radius: 0.375rem; - border: 1px solid var(--color-border-secondary); -} - -.array-item-schema { - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - padding: 1rem; - margin-top: 0.5rem; -} - -/* Enhanced schema composition styling */ -.schema-composition { - margin-bottom: 1.5rem; -} - -.schema-composition h6 { - margin: 0 0 1rem 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - padding: 0.5rem 0; - border-bottom: 1px solid var(--color-border-primary); -} - -.composition-list { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.composition-item { - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - padding: 1rem; - position: relative; -} - -.composition-index { - font-size: 0.875rem; - font-weight: 600; - color: var(--color-brand); - margin-bottom: 0.5rem; - text-transform: uppercase; - letter-spacing: 0.025em; -} - -/* ========================================================================== - :has() Content-Aware Schema Enhancements - ========================================================================== */ - -/* Schema containers adapt based on content type and complexity */ -.schema-container:has(.schema-properties) { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - rgba(var(--color-brand-rgb), 0.01) 100% - ); - border-left: 3px solid rgba(var(--color-brand-rgb), 0.3); -} - -.schema-container:has(.schema-array-info) { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - rgba(var(--color-success-rgb), 0.01) 100% - ); - border-left: 3px solid rgba(var(--color-success-rgb), 0.3); -} - -.schema-container:has(.schema-composition) { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - rgba(var(--color-accent-rgb), 0.01) 100% - ); - border-left: 3px solid rgba(var(--color-accent-rgb), 0.3); -} - -/* Schema properties section enhances based on property count */ -.schema-properties:has(.properties-list .property-item:nth-child(n+5)) { - border: 2px solid rgba(var(--color-brand-rgb), 0.1); - border-radius: 0.5rem; - padding: 1rem; - background: rgba(var(--color-brand-rgb), 0.02); -} - -.schema-properties:has(.properties-list .property-item:nth-child(n+10)) { - border-color: rgba(var(--color-accent-rgb), 0.2); - background: rgba(var(--color-accent-rgb), 0.03); -} - -/* Properties adapt to required field density */ -.properties-list:has(.property-item--required:nth-child(n+3)) { - border-left: 4px solid var(--color-warning); - padding-left: 0.5rem; -} - -/* Individual property items enhance based on content */ -.property-item:has(.property-constraints) { - border-left: 2px solid rgba(var(--color-info-rgb), 0.4); - background: rgba(var(--color-info-rgb), 0.02); -} - -.property-item:has(.property-meta .property-format) { - border-left-color: rgba(var(--color-accent-rgb), 0.4); - background: rgba(var(--color-accent-rgb), 0.02); -} - -/* Schema constraints section adapts to constraint complexity */ -.schema-constraints:has(.constraint:nth-child(n+3)) { - background: rgba(var(--color-bg-secondary-rgb), 0.5); - border: 1px solid var(--color-border-secondary); - border-radius: 0.5rem; - padding: 1rem; -} - -.schema-constraints:has(.constraint-modifier) { - border-left: 3px solid var(--color-warning); -} - -/* Array info enhances based on constraints */ -.schema-array-info:has(.array-constraints .constraint:nth-child(n+2)) { - border: 1px solid rgba(var(--color-success-rgb), 0.2); - border-radius: 0.5rem; - padding: 1rem; - background: rgba(var(--color-success-rgb), 0.02); -} - -/* Schema composition gets enhanced styling */ -.schema-composition:has(.composition-item:nth-child(n+3)) { - border: 2px solid rgba(var(--color-accent-rgb), 0.2); - border-radius: 0.75rem; - padding: 1.5rem; - background: rgba(var(--color-accent-rgb), 0.02); -} - -/* Nested schema containers get reduced visual weight */ -.schema-container[data-level="1"]:has(.schema-properties) { - background: rgba(var(--color-bg-secondary-rgb), 0.3); - border-left-width: 2px; -} - -.schema-container[data-level="2"]:has(.schema-properties) { - background: rgba(var(--color-bg-secondary-rgb), 0.2); - border-left-width: 1px; -} - -/* Type-specific enhancements */ -.schema-header:has(.type-badge--object) + .schema-constraints, -.schema-header:has(.type-badge--object) + * .schema-constraints { - border-top: 2px solid rgba(var(--color-brand-rgb), 0.1); -} - -.schema-header:has(.type-badge--array) + .schema-array-info { - border-top: 2px solid rgba(var(--color-success-rgb), 0.1); -} - -.schema-header:has(.type-badge--string) + .schema-constraints { - border-top: 2px solid rgba(var(--color-info-rgb), 0.1); -} - -/* Reference schemas get special styling */ -.schema-container:has(.schema-ref) { - background: linear-gradient( - 135deg, - rgba(var(--color-accent-rgb), 0.05) 0%, - var(--color-surface) 100% - ); - border: 1px dashed rgba(var(--color-accent-rgb), 0.3); -} - -/* Error and debug styling adaptations */ -.schema-container:has(.schema-ref-error) { - background: rgba(var(--color-danger-rgb), 0.05); - border: 1px solid rgba(var(--color-danger-rgb), 0.2); -} - -/* Schema References */ -.schema-ref { - margin: 0.5rem 0; - padding: 0.5rem; - background: rgba(var(--color-brand-rgb), 0.05); - border-left: 3px solid var(--color-brand); - border-radius: 0 0.25rem 0.25rem 0; -} - -.ref-header { - display: flex; - align-items: center; - gap: 0.5rem; - margin-bottom: 0.5rem; -} - -.ref-label { - font-size: 0.75rem; - font-weight: 600; - color: var(--color-text-secondary); - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.ref-name { - font-family: var(--font-family-mono); - font-size: 0.875rem; - font-weight: 600; - color: var(--color-brand); -} - -.schema-ref-error { - padding: 0.75rem; - background: rgba(239, 68, 68, 0.05); - border: 1px solid rgba(239, 68, 68, 0.2); - border-radius: 0.375rem; - margin: 0.5rem 0; -} - -.schema-ref-error .error-message { - color: var(--color-danger); - font-weight: 500; - margin-bottom: 0.5rem; -} - -.debug-info { - font-size: 0.75rem; - color: var(--color-text-secondary); - background: var(--color-bg-tertiary); - padding: 0.5rem; - border-radius: 0.25rem; - margin-top: 0.5rem; -} - -.debug-info p { - margin: 0.25rem 0; -} - -.debug-info code { - font-family: var(--font-family-mono); - background: rgba(0, 0, 0, 0.1); - padding: 0.125rem 0.25rem; - border-radius: 0.125rem; -} - -/* Array and Object Indicators */ -.schema-array-items, -.schema-object-properties { - margin-top: 0.75rem; -} - -.schema-array-items h6, -.schema-object-properties h6 { - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-secondary); - margin-bottom: 0.5rem; -} - -/* Type Badges */ -.type-badge { - display: inline-block; - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 600; - text-transform: lowercase; -} - -/* Old hex-based type colors commented out in favor of tokens per themes/milodocs/init */ -/* .type-badge--string { background: rgba(34, 197, 94, 0.1); color: #059669; } -.type-badge--number, -.type-badge--integer { background: rgba(59, 130, 246, 0.1); color: #2563eb; } -.type-badge--boolean { background: rgba(168, 85, 247, 0.1); color: #7c3aed; } -.type-badge--array { background: rgba(245, 158, 11, 0.1); color: #d97706; } -.type-badge--object { background: rgba(239, 68, 68, 0.1); color: #dc2626; } -.type-badge--null { background: rgba(107, 114, 128, 0.1); color: #4b5563; } */ - -.type-badge--string { background: var(--type-string-bg); color: var(--type-string-text); } -.type-badge--number { background: var(--type-number-bg); color: var(--type-number-text); } -.type-badge--integer { background: var(--type-integer-bg); color: var(--type-integer-text); } -.type-badge--boolean { background: var(--type-boolean-bg); color: var(--type-boolean-text); } -.type-badge--array { background: var(--type-array-bg); color: var(--type-array-text); } -.type-badge--object { background: var(--type-object-bg); color: var(--type-object-text); } -.type-badge--null { background: var(--type-null-bg); color: var(--type-null-text); } - -.type-format { - font-size: 0.75rem; - color: var(--color-text-secondary); - font-style: italic; - margin-left: 0.25rem; -} \ No newline at end of file diff --git a/assets/css/components/openapi/security.css b/assets/css/components/openapi/security.css deleted file mode 100644 index ded7b98..0000000 --- a/assets/css/components/openapi/security.css +++ /dev/null @@ -1,132 +0,0 @@ -/* OpenAPI Security */ - -/* ========================================================================== - Security Section - ========================================================================== */ - -.openapi-security { - padding: 2rem 0; -} - -.security-requirements { - display: flex; - flex-direction: column; - gap: 1.5rem; -} - -.security-requirement { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - padding: 1.5rem; -} - -.security-scheme { - display: flex; - align-items: flex-start; - gap: 1rem; - margin-bottom: 1rem; -} - -.security-scheme:last-child { - margin-bottom: 0; -} - -.security-icon { - width: 2rem; - height: 2rem; - background: rgba(var(--color-brand-rgb), 0.1); - border-radius: 0.5rem; - display: flex; - align-items: center; - justify-content: center; - color: var(--color-brand); - flex-shrink: 0; -} - -.security-info { - flex: 1; - min-width: 0; -} - -.security-name { - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0 0 0.5rem 0; -} - -.security-type { - display: inline-block; - background: rgba(var(--color-accent-rgb), 0.1); - color: var(--color-accent); - padding: 0.25rem 0.75rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - margin-bottom: 0.75rem; -} - -.security-description { - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-secondary); - margin-bottom: 1rem; -} - -.security-scopes { - margin-top: 1rem; -} - -.security-scopes h5 { - margin: 0 0 0.5rem 0; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); -} - -.scopes-list { - display: flex; - flex-wrap: wrap; - gap: 0.375rem; -} - -.scope-item { - background: var(--color-bg-secondary); - color: var(--color-text-primary); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - font-size: 0.75rem; - font-weight: 500; - border: 1px solid var(--color-border-primary); -} - -.security-details { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 1rem; - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid var(--color-border-primary); -} - -.security-detail { - font-size: 0.875rem; -} - -.security-detail strong { - color: var(--color-text-primary); - display: block; - margin-bottom: 0.25rem; -} - -.security-detail code { - font-family: var(--font-family-mono); - background: rgba(var(--color-brand-rgb), 0.1); - color: var(--color-brand); - padding: 0.125rem 0.25rem; - border-radius: 0.125rem; - font-size: 0.8rem; -} diff --git a/assets/css/components/openapi/servers.css b/assets/css/components/openapi/servers.css deleted file mode 100644 index 1e0d808..0000000 --- a/assets/css/components/openapi/servers.css +++ /dev/null @@ -1,103 +0,0 @@ -/* OpenAPI Servers */ - -/* ========================================================================== - Servers Section - ========================================================================== */ - -.openapi-servers { - padding: 2rem 0; -} - -.servers-list { - display: flex; - flex-direction: column; - gap: 1.5rem; -} - -.server-item { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 1rem; - padding: 2rem; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease, - box-shadow 0.2s ease; -} - -.server-item:hover { - border-color: var(--color-brand); - box-shadow: 0 4px 16px rgba(var(--color-brand-rgb), 0.1); -} - -.server-url { - font-family: var(--font-family-mono); - font-size: 1.125rem; - font-weight: 600; - color: var(--color-brand); - margin-bottom: 1rem; - word-break: break-all; -} - -.server-description { - font-size: 1rem; - line-height: 1.6; - color: var(--color-text-secondary); - margin-bottom: 1.5rem; -} - -.server-variables { - margin-top: 1.5rem; -} - -.server-variables h4 { - margin: 0 0 1rem 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); -} - -.variables-list { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.variable-item { - background: var(--color-bg-secondary); - padding: 1rem; - border-radius: 0.5rem; - border: 1px solid var(--color-border-primary); -} - -.variable-name { - font-family: var(--font-family-mono); - font-weight: 600; - color: var(--color-brand); - margin-bottom: 0.5rem; -} - -.variable-description { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin-bottom: 0.5rem; -} - -.variable-default { - font-size: 0.875rem; - color: var(--color-text-primary); -} - -.variable-default strong { - color: var(--color-text-primary); -} - -.variable-default code { - font-family: var(--font-family-mono); - background: rgba(var(--color-brand-rgb), 0.1); - padding: 0.125rem 0.25rem; - border-radius: 0.125rem; - color: var(--color-brand); -} diff --git a/assets/css/components/openapi/sidebar.css b/assets/css/components/openapi/sidebar.css deleted file mode 100644 index b1a09b6..0000000 --- a/assets/css/components/openapi/sidebar.css +++ /dev/null @@ -1,336 +0,0 @@ -/* OpenAPI Sidebar Styles */ -/* Inspired by Mintlify's clean, hierarchical design */ - -/* ========================================================================== - OpenAPI Sidebar Base - ========================================================================== */ - -.openapi-sidebar-section { - margin-bottom: 2rem; - padding-bottom: 1.5rem; - border-bottom: 1px solid var(--color-border-light); -} - -.openapi-sidebar-section:last-child { - border-bottom: none; -} - -.openapi-sidebar-header { - margin-bottom: 1rem; -} - -.openapi-sidebar-title { - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0 0 0.25rem 0; - line-height: 1.4; -} - -.openapi-sidebar-version { - display: inline-block; - padding: 0.125rem 0.5rem; - background: var(--color-brand-primary); - color: white; - font-size: 0.75rem; - font-weight: 500; - border-radius: 0.375rem; - margin-left: 0.5rem; -} - -.openapi-sidebar-description { - font-size: 0.875rem; - color: var(--color-text-secondary); - line-height: 1.5; - margin: 0.5rem 0 0 0; -} - -/* ========================================================================== - Navigation Links - ========================================================================== */ - -.openapi-sidebar-nav { - list-style: none; - margin: 0; - padding: 0; -} - -.openapi-sidebar-nav-item { - margin-bottom: 0.25rem; -} - -.openapi-sidebar-link { - display: flex; - align-items: center; - padding: 0.5rem 0.75rem; - color: var(--color-text-secondary); - text-decoration: none; - border-radius: 0.5rem; - font-size: 0.875rem; - font-weight: 500; - transition: - background-color 0.15s ease, - border-color 0.15s ease, - color 0.15s ease, - transform 0.15s ease, - box-shadow 0.15s ease; - border: 1px solid transparent; -} - -.openapi-sidebar-link:hover { - color: var(--color-text-primary); - background: var(--color-surface-hover); -} - -.openapi-sidebar-link--active { - color: var(--color-brand-primary); - background: var(--color-brand-background); - border-color: var(--color-brand-border); - font-weight: 600; -} - -.openapi-sidebar-link-text { - flex: 1; -} - -/* ========================================================================== - Section Headers - ========================================================================== */ - -.openapi-sidebar-section-header { - margin-bottom: 1rem; -} - -.openapi-sidebar-section-header h4 { - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -/* ========================================================================== - Tag Groups - ========================================================================== */ - -.openapi-sidebar-endpoints { - list-style: none; - margin: 0; - padding: 0; -} - -.openapi-sidebar-tag-group { - margin-bottom: 1rem; -} - -.openapi-sidebar-tag-header { - display: flex; - align-items: center; - margin-bottom: 0.5rem; -} - -.openapi-sidebar-tag-toggle { - display: flex; - align-items: center; - justify-content: center; - width: 1.25rem; - height: 1.25rem; - padding: 0; - margin-right: 0.5rem; - background: none; - border: none; - color: var(--color-text-secondary); - cursor: pointer; - border-radius: 0.25rem; - transition: - background-color 0.15s ease, - color 0.15s ease, - transform 0.15s ease; -} - -.openapi-sidebar-tag-toggle:hover { - color: var(--color-text-primary); - background: var(--color-surface-hover); -} - -.openapi-sidebar-chevron { - width: 0.875rem; - height: 0.875rem; - transition: transform 0.15s ease; -} - -.openapi-sidebar-tag-toggle--expanded .openapi-sidebar-chevron { - transform: rotate(90deg); -} - -.openapi-sidebar-tag-name { - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); - text-transform: capitalize; -} - -/* ========================================================================== - Endpoints List - ========================================================================== */ - -.openapi-sidebar-endpoints-list { - list-style: none; - margin: 0; - padding: 0; - overflow: hidden; - transition: max-height 0.15s ease, opacity 0.15s ease; -} - -.openapi-sidebar-endpoints-list--expanded { - /* Animation handled by display property changes in JS */ -} - -.openapi-sidebar-endpoint { - margin-bottom: 0.125rem; -} - -.openapi-sidebar-endpoint-link { - display: flex; - align-items: flex-start; - padding: 0.5rem 0.75rem; - color: var(--color-text-secondary); - text-decoration: none; - border-radius: 0.375rem; - font-size: 0.8125rem; - transition: - background-color 0.15s ease, - border-color 0.15s ease, - color 0.15s ease, - transform 0.15s ease; - border: 1px solid transparent; - margin-left: 1.75rem; /* Indent under tag */ - gap: 0.5rem; -} - -.openapi-sidebar-endpoint-link:hover { - color: var(--color-text-primary); - background: var(--color-surface-hover); -} - -.openapi-sidebar-endpoint-link--active { - color: var(--color-brand-primary); - background: var(--color-brand-background); - border-color: var(--color-brand-border); - font-weight: 500; -} - -/* ========================================================================== - HTTP Method Badges - ========================================================================== */ - -.openapi-sidebar-method { - display: inline-block; - padding: 0.125rem 0.375rem; - font-size: 0.6875rem; - font-weight: 600; - text-transform: uppercase; - border-radius: 0.25rem; - min-width: 3rem; - text-align: center; - flex-shrink: 0; - letter-spacing: 0.025em; -} - -.openapi-sidebar-method--get { background: var(--http-get-bg); color: var(--http-get-text); } - -.openapi-sidebar-method--post { background: var(--http-post-bg); color: var(--http-post-text); } - -.openapi-sidebar-method--put { background: var(--http-put-bg); color: var(--http-put-text); } - -.openapi-sidebar-method--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } - -.openapi-sidebar-method--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } - -.openapi-sidebar-method--head, -.openapi-sidebar-method--options { background: var(--http-head-bg); color: var(--http-head-text); } - -/* ========================================================================== - Endpoint Details - ========================================================================== */ - -.openapi-sidebar-endpoint-path { - flex: 1; - font-weight: 500; - color: var(--color-text-primary); - line-height: 1.3; - word-break: break-all; -} - -.openapi-sidebar-endpoint-summary { - display: block; - font-size: 0.75rem; - color: var(--color-text-tertiary); - line-height: 1.3; - margin-top: 0.125rem; - font-weight: 400; -} - -/* ========================================================================== - Responsive Design - ========================================================================== */ - -@media (max-width: 768px) { - .openapi-sidebar-section { - margin-bottom: 1.5rem; - padding-bottom: 1rem; - } - - .openapi-sidebar-title { - font-size: 1rem; - } - - .openapi-sidebar-endpoint-link { - margin-left: 1.5rem; - padding: 0.375rem 0.5rem; - } - - .openapi-sidebar-method { - min-width: 2.5rem; - font-size: 0.625rem; - } -} - -/* ========================================================================== - Dark Mode Support - ========================================================================== */ - -@media (prefers-color-scheme: dark) { - .openapi-sidebar-version { background: var(--color-brand-primary-dark, var(--color-brand-primary)); } -} - -/* ========================================================================== - Focus States - ========================================================================== */ - -.openapi-sidebar-link:focus-visible, -.openapi-sidebar-endpoint-link:focus-visible, -.openapi-sidebar-tag-toggle:focus-visible { - outline: 2px solid var(--color-brand-primary); - outline-offset: 2px; -} - -/* ========================================================================== - Smooth Scrolling Enhancement - ========================================================================== */ - -html { - scroll-behavior: smooth; -} - -@media (prefers-reduced-motion: reduce) { - html { - scroll-behavior: auto; - } - - .openapi-sidebar-chevron, - .openapi-sidebar-endpoints-list { - transition: none; - } -} \ No newline at end of file diff --git a/assets/css/components/openapi/single.css b/assets/css/components/openapi/single.css deleted file mode 100644 index 20c5cf5..0000000 --- a/assets/css/components/openapi/single.css +++ /dev/null @@ -1,288 +0,0 @@ -/* - * OpenAPI Single Endpoint Page Styles - * Content-aware styling using :has() selectors - */ - -/* ============================================================================= - Base Single Page Layout - ============================================================================= */ - -.api-endpoint { - /* Content-aware layout adjustments */ - container-type: inline-size; - container-name: endpoint-page; -} - -/* Override the hidden default - single pages should show endpoint details */ -.api-endpoint .endpoint-details { - display: block; -} - -/* ============================================================================= - Header Enhancements with :has() - ============================================================================= */ - -/* Enhanced header when endpoint has both summary and description */ -.api-endpoint-header:has(.endpoint-description) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-brand-rgb), 0.02) 100%); - border-left: 4px solid rgba(var(--color-brand-rgb), 0.3); - padding: 2rem; - border-radius: 0.75rem; - margin-bottom: 2rem; -} - -/* Method-specific header styling */ -.api-endpoint-header:has(.method-badge--get) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(34, 197, 94, 0.02) 100%); - border-left-color: rgba(34, 197, 94, 0.3); -} - -.api-endpoint-header:has(.method-badge--post) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(59, 130, 246, 0.02) 100%); - border-left-color: rgba(59, 130, 246, 0.3); -} - -.api-endpoint-header:has(.method-badge--put) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(245, 158, 11, 0.02) 100%); - border-left-color: rgba(245, 158, 11, 0.3); -} - -.api-endpoint-header:has(.method-badge--delete) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(239, 68, 68, 0.02) 100%); - border-left-color: rgba(239, 68, 68, 0.3); -} - -.api-endpoint-header:has(.method-badge--patch) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(168, 85, 247, 0.02) 100%); - border-left-color: rgba(168, 85, 247, 0.3); -} - -/* ============================================================================= - Breadcrumb Enhancements - ============================================================================= */ - -.api-endpoint-breadcrumb { - margin-bottom: 1.5rem; - font-size: 0.875rem; - color: var(--color-text-muted); -} - -.api-endpoint-breadcrumb a { - color: var(--color-brand); - text-decoration: none; - transition: color 0.2s ease; -} - -.api-endpoint-breadcrumb a:hover { - color: var(--color-brand-dark); - text-decoration: underline; -} - -/* ============================================================================= - Content Area Enhancements with :has() - ============================================================================= */ - -/* Enhanced spacing for endpoints with multiple sections */ -.api-endpoint-content:has(.endpoint-section:nth-child(n+3)) { - display: grid; - gap: 2rem; -} - -/* Special layout for complex endpoints */ -.endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) { - container-type: inline-size; -} - -.endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) .endpoint-details { - display: grid; - gap: 2.5rem; -} - -/* Enhanced visual hierarchy for parameter-heavy endpoints */ -.endpoint-item:has([data-parameter-count]) { - /* Parameters count specific styling */ -} - -.endpoint-item:has([data-parameter-count="0"]) .endpoint-details { - /* Simplified layout for parameter-less endpoints */ - gap: 1.5rem; -} - -.endpoint-item:has([data-parameter-count^="1"]) .endpoint-section, -.endpoint-item:has([data-parameter-count^="2"]) .endpoint-section, -.endpoint-item:has([data-parameter-count^="3"]) .endpoint-section { - /* Enhanced styling for endpoints with 10+ parameters */ - border: 1px solid rgba(var(--color-border-rgb), 0.5); - border-radius: 0.5rem; - padding: 1.5rem; - background: rgba(var(--color-surface-rgb), 0.5); -} - -/* ============================================================================= - Section-Specific :has() Patterns - ============================================================================= */ - -/* Parameters Section */ -.endpoint-details:has(.endpoint-parameters) { - /* Enhanced layout when parameters are present */ -} - -.endpoint-details:has(.endpoint-parameters .parameter-item:nth-child(n+5)) { - /* Special handling for parameter-heavy endpoints */ - grid-template-columns: 1fr 1fr; - gap: 2rem; -} - -@container endpoint-page (max-width: 768px) { - .endpoint-details:has(.endpoint-parameters .parameter-item:nth-child(n+5)) { - grid-template-columns: 1fr; - } -} - -/* Request Body Section */ -.endpoint-details:has(.endpoint-request-body) .endpoint-section { - border-left: 3px solid rgba(var(--color-brand-rgb), 0.2); - padding-left: 1rem; -} - -/* Responses Section */ -.endpoint-details:has(.endpoint-responses) { - /* Enhanced styling when responses are present */ -} - -.endpoint-details:has(.endpoint-responses .response-item:nth-child(n+3)) { - /* Special handling for endpoints with many response types */ - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-success-rgb), 0.01) 100%); - border-radius: 0.75rem; - padding: 1.5rem; -} - -/* Security Section */ -.endpoint-details:has(.endpoint-security) { - /* Enhanced styling when security requirements are present */ - border-top: 1px solid rgba(var(--color-border-rgb), 0.3); - padding-top: 2rem; -} - -/* Code Examples Section */ -.endpoint-details:has(.endpoint-examples) { - /* Enhanced styling when code examples are present */ -} - -.endpoint-details:has(.endpoint-examples .example-tabs .tab-button:nth-child(n+4)) { - /* Special styling for endpoints with many code examples */ - background: rgba(var(--color-accent-rgb), 0.02); - border-radius: 0.5rem; - padding: 1rem; -} - -/* ============================================================================= - Method-Specific Page Styling - ============================================================================= */ - -/* GET endpoints - Success/data focused */ -.api-endpoint[data-method="GET"] { - --endpoint-accent: rgba(34, 197, 94, 0.1); -} - -.api-endpoint[data-method="GET"]:has([data-has-responses="true"]) { - background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); -} - -/* POST endpoints - Creation focused */ -.api-endpoint[data-method="POST"] { - --endpoint-accent: rgba(59, 130, 246, 0.1); -} - -.api-endpoint[data-method="POST"]:has([data-has-request-body="true"]) { - background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); -} - -/* PUT/PATCH endpoints - Update focused */ -.api-endpoint[data-method="PUT"], -.api-endpoint[data-method="PATCH"] { - --endpoint-accent: rgba(245, 158, 11, 0.1); -} - -.api-endpoint[data-method="PUT"]:has([data-has-request-body="true"]):has([data-has-responses="true"]), -.api-endpoint[data-method="PATCH"]:has([data-has-request-body="true"]):has([data-has-responses="true"]) { - background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); -} - -/* DELETE endpoints - Deletion focused */ -.api-endpoint[data-method="DELETE"] { - --endpoint-accent: rgba(239, 68, 68, 0.1); -} - -.api-endpoint[data-method="DELETE"]:has([data-has-responses="true"]) { - background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); -} - -/* ============================================================================= - Complexity-Based Styling - ============================================================================= */ - -/* Simple endpoints (no parameters, no request body) */ -.api-endpoint[data-has-parameters="false"][data-has-request-body="false"] { - /* Simplified, clean layout */ -} - -.api-endpoint[data-has-parameters="false"][data-has-request-body="false"] .endpoint-details { - gap: 1rem; -} - -/* Complex endpoints (has parameters, request body, and multiple responses) */ -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="1"]), -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="2"]), -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="3"]) { - /* Enhanced organization for complex endpoints */ -} - -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="1"]) .endpoint-details, -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="2"]) .endpoint-details, -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="3"]) .endpoint-details { - border: 1px solid rgba(var(--color-border-rgb), 0.2); - border-radius: 1rem; - padding: 2rem; - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-accent-rgb), 0.01) 100%); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); -} - -/* ============================================================================= - Responsive Enhancements - ============================================================================= */ - -@container endpoint-page (max-width: 768px) { - .api-endpoint-header:has(.endpoint-description) { - padding: 1.5rem; - margin-bottom: 1.5rem; - } - - .endpoint-details:has(.endpoint-parameters .parameter-item:nth-child(n+3)) { - grid-template-columns: 1fr; - } - - .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="1"]) .endpoint-details, - .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="2"]) .endpoint-details, - .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="3"]) .endpoint-details { - padding: 1rem; - } -} - -/* ============================================================================= - Accessibility Enhancements - ============================================================================= */ - -/* Enhanced focus styles for interactive elements */ -.api-endpoint:has(:focus-visible) { - /* Container styling when child elements have focus */ -} - -/* Reduced motion preferences */ -@media (prefers-reduced-motion: reduce) { - .api-endpoint-header:has(.endpoint-description), - .endpoint-details:has(.endpoint-responses .response-item:nth-child(n+3)) { - background: var(--color-surface); - transition: none; - } -} \ No newline at end of file diff --git a/assets/css/components/quicklinks.css b/assets/css/components/quicklinks.css deleted file mode 100644 index dbd3a1b..0000000 --- a/assets/css/components/quicklinks.css +++ /dev/null @@ -1,472 +0,0 @@ -/* Quicklinks Component - Enhanced UX for quickstart/feature tiles */ - -/* Base Quicklinks Container */ -.quicklinks { - margin-bottom: 1.5rem; - position: relative; -} - -.quicklinks--home { - padding-bottom: 1rem; -} - -/* Quicklinks Grid */ -.quicklinks__grid { - display: grid; - grid-template-columns: 1fr; - gap: 1.5rem; - - /* Responsive grid */ - @media (min-width: 768px) { - grid-template-columns: repeat(2, 1fr); - gap: 1.75rem; - } - - @media (min-width: 1280px) { - grid-template-columns: repeat(2, 1fr); - gap: 2rem; - } -} - -/* Quicklinks Item - Compact distinctive call-to-action card design */ -.quicklinks__item { - position: relative; - padding: 1.25rem; - display: flex; - flex-direction: column; - gap: 0.75rem; - min-height: 160px; - - /* Distinctive card styling - not like regular tiles */ - background: linear-gradient( - 145deg, - var(--color-surface) 0%, - rgba(var(--color-brand-rgb), 0.03) 50%, - var(--color-bg-secondary) 100% - ); - border: 2px solid var(--color-border-primary); - border-radius: var(--radius-card); - /* box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.06), - 0 1px 4px rgba(0, 0, 0, 0.04), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: - var(--elevation-2), - var(--elevation-outline), - inset 0 1px 0 rgba(255, 255, 255, 0.1); - - /* Accent border - distinctive feature */ - border-left: 3px solid var(--color-brand); - - /* Optimized transition for performance */ - transition: var(--transition-interactive); - overflow: hidden; /* Essential for ripple effects */ - cursor: pointer; -} - -.quicklinks__item::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(var(--color-brand-rgb), 0.06); - opacity: 0; - /* transition: opacity 0.2s ease; */ - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} - -.quicklinks__item:hover { - transform: translateY(-3px); - border-color: var(--color-brand); - border-left-color: var(--color-brand-2); - /* box-shadow: - 0 8px 20px rgba(0, 0, 0, 0.12), - 0 4px 8px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); */ - box-shadow: - var(--elevation-hover-2), - var(--elevation-brand-subtle), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} - -.quicklinks__item:hover::before { - opacity: 1; -} - -/* Quicklinks Header */ -.quicklinks__header { - display: flex; - align-items: flex-start; - gap: 0.5rem; - margin-bottom: 0.25rem; -} - -/* Quicklinks Icon - Compact design */ -.quicklinks__icon { - width: 1.5rem; - height: 1.5rem; - flex-shrink: 0; - padding: 0.25rem; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.1) 0%, - rgba(var(--color-brand-rgb), 0.05) 100% - ); - border-radius: var(--radius-lg); - border: 1px solid rgba(var(--color-brand-rgb), 0.2); - filter: brightness(0.9); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard); - margin-top: 0; -} - -.quicklinks__item:hover .quicklinks__icon { - background: linear-gradient( - 135deg, - var(--color-brand) 0%, - var(--color-brand-2) 100% - ); - border-color: var(--color-brand); - filter: brightness(1) saturate(1.2); - transform: scale(1.05); -} - -/* Target the actual SVG/image inside the icon container */ -.quicklinks__item:hover .quicklinks__icon img, -.quicklinks__item:hover .quicklinks__icon svg { - filter: brightness(0) invert(1); -} - -/* Quicklinks Title - Compact but prominent */ -.quicklinks__title { - color: var(--color-text-primary); - font-size: 1.125rem; - font-weight: 700; - font-family: var(--font-brand); - line-height: 1.3; - margin: 0; - /* transition: color 0.2s ease; */ - transition: color var(--timing-fast) var(--easing-standard); - position: relative; - letter-spacing: -0.025em; -} - -.quicklinks__item:hover .quicklinks__title { - color: var(--color-brand); -} - -.quicklinks__title::after { - content: ''; - position: absolute; - bottom: -2px; - left: 0; - width: 0; - height: 2px; - background: var(--color-brand); - border-radius: 1px; - /* transition: width 0.2s ease; */ - transition: width var(--timing-fast) var(--easing-standard); -} - -.quicklinks__item:hover .quicklinks__title::after { - width: 100%; -} - -/* Quicklinks Description */ -.quicklinks__description { - color: var(--color-text-secondary); - font-size: 0.8125rem; - line-height: 1.5; - margin: 0; - flex: 1; - /* transition: color 0.2s ease; */ - transition: color var(--timing-fast) var(--easing-standard); - font-family: var(--font-body); -} - -.quicklinks__item:hover .quicklinks__description { - color: var(--color-text-primary); -} - -/* Quicklinks Actions Container */ -.quicklinks__actions { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-top: auto; - padding-top: 0.5rem; - border-top: 1px solid var(--color-border-primary); - /* transition: border-color 0.2s ease; */ - transition: border-color var(--timing-fast) var(--easing-standard); -} - -.quicklinks__item:hover .quicklinks__actions { - border-color: var(--color-brand); -} - -/* Quicklinks Action Links - Compact CTA buttons */ -.quicklinks__link { - position: relative; - display: inline-flex; - align-items: center; - gap: 0.375rem; - padding: 0.5rem 0.875rem; - background: var(--color-brand); - border: 1px solid var(--color-brand); - border-radius: var(--radius-lg); - color: var(--color-text-inverse); - text-decoration: none; - font-size: 0.75rem; - font-weight: 600; - font-family: var(--font-brand); - text-transform: uppercase; - letter-spacing: 0.25px; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-fast) var(--easing-standard), - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard); - overflow: hidden; /* Enable ripple effects */ - cursor: pointer; - /* box-shadow: 0 2px 6px rgba(var(--color-brand-rgb), 0.25); */ - box-shadow: var(--elevation-brand-subtle); -} - -.quicklinks__link:hover { - background: var(--color-brand-2); - border-color: var(--color-brand-2); - transform: var(--transform-lift-subtle); - /* box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.35); */ - box-shadow: var(--elevation-brand-medium); -} - -.quicklinks__link:active { - transform: translateY(0); -} - -/* Enhanced focus states for accessibility */ -.quicklinks__link:focus { - outline: 2px solid transparent; - outline-offset: 2px; - /* box-shadow: - 0 2px 6px rgba(var(--color-brand-rgb), 0.25), - 0 0 0 2px var(--color-surface), - 0 0 0 4px var(--color-brand); */ /* Inverted double focus ring */ - box-shadow: - var(--elevation-brand-subtle), - 0 0 0 2px var(--color-surface), - 0 0 0 4px var(--color-brand); -} - -/* Enhanced focus for quicklinks items */ -.quicklinks__item:focus { - outline: 2px solid transparent; - outline-offset: 2px; - /* box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.06), - 0 1px 4px rgba(0, 0, 0, 0.04), - inset 0 1px 0 rgba(255, 255, 255, 0.1), - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.2); */ /* Double focus ring */ - box-shadow: - var(--elevation-2), - var(--elevation-outline), - inset 0 1px 0 rgba(255, 255, 255, 0.1), - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.2); -} - -/* External link indicator */ -.quicklinks__link[href^="http"]::after { - content: '↗'; - margin-left: 0.25rem; - font-size: 0.75em; - opacity: 0.7; - transition: opacity 0.2s ease; -} - -.quicklinks__link[href^="http"]:hover::after { - opacity: 1; -} - -/* Responsive adjustments */ -@media (max-width: 768px) { - .quicklinks__grid { - gap: 1.25rem; - } - - .quicklinks__item { - padding: 1rem; - min-height: 140px; - } - - .quicklinks__item:hover { - transform: var(--transform-lift-medium); - } - - .quicklinks__icon { - width: 1.375rem; - height: 1.375rem; - padding: 0.25rem; - } - - .quicklinks__title { - font-size: 1rem; - font-weight: 700; - } - - .quicklinks__description { - font-size: 0.75rem; - } - - .quicklinks__actions { - flex-direction: column; - gap: 0.375rem; - padding-top: 0.375rem; - } - - .quicklinks__link { - justify-content: center; - text-align: center; - padding: 0.5rem 0.75rem; - font-size: 0.6875rem; - } -} - -@media (max-width: 480px) { - .quicklinks__item { - padding: 0.875rem; - min-height: 120px; - gap: 0.5rem; - } - - .quicklinks__header { - gap: 0.375rem; - margin-bottom: 0.125rem; - } - - .quicklinks__icon { - width: 1.25rem; - height: 1.25rem; - padding: 0.1875rem; - } - - .quicklinks__title { - font-size: 0.9375rem; - } -} - -/* Dark mode enhancements */ -.dark .quicklinks__item { - background: linear-gradient( - 145deg, - rgba(var(--color-surface), 0.9) 0%, - rgba(var(--color-brand-rgb), 0.05) 50%, - rgba(var(--color-bg-secondary), 0.7) 100% - ); - border-color: var(--color-border-secondary); - /* box-shadow: - 0 8px 24px rgba(0, 0, 0, 0.3), - 0 2px 8px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.05); */ - box-shadow: - var(--elevation-8), - var(--elevation-2), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.dark .quicklinks__item:hover { - border-color: var(--color-brand); - /* box-shadow: - 0 25px 50px rgba(0, 0, 0, 0.4), - 0 8px 32px rgba(var(--color-brand-rgb), 0.3), - 0 0 40px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: - var(--elevation-hover-4), - var(--elevation-brand-medium), - var(--elevation-brand-glow), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.dark .quicklinks__icon { - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.15) 0%, - rgba(var(--color-brand-rgb), 0.08) 100% - ); - border-color: rgba(var(--color-brand-rgb), 0.3); -} - -.dark .quicklinks__item:hover .quicklinks__icon { - background: linear-gradient( - 135deg, - var(--color-brand) 0%, - var(--color-brand-2) 100% - ); - border-color: var(--color-brand); -} - -/* Target the actual SVG/image inside the icon container for dark mode */ -.dark .quicklinks__item:hover .quicklinks__icon img, -.dark .quicklinks__item:hover .quicklinks__icon svg { - filter: brightness(0) invert(1); -} - -/* Animation improvements - simplified for performance */ -.quicklinks__item { - animation: quicklinks-enter 0.3s ease-out; - animation-fill-mode: both; -} - -@keyframes quicklinks-enter { - from { - opacity: 0; - transform: translateY(15px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* Stagger animation for multiple items */ -.quicklinks__item:nth-child(1) { animation-delay: 0s; } -.quicklinks__item:nth-child(2) { animation-delay: 0.1s; } -.quicklinks__item:nth-child(3) { animation-delay: 0.2s; } -.quicklinks__item:nth-child(4) { animation-delay: 0.3s; } - -/* Loading state placeholders */ -.quicklinks--loading .quicklinks__item { - background: linear-gradient(90deg, - var(--color-surface) 25%, - var(--color-bg-secondary) 50%, - var(--color-surface) 75%); - background-size: 200% 100%; - animation: quicklinks-loading 2s infinite; -} - -@keyframes quicklinks-loading { - 0% { background-position: 200% 0; } - 100% { background-position: -200% 0; } -} - -/* Print styles */ -@media print { - .quicklinks__item { - break-inside: avoid; - border: 1px solid #ccc; - margin-bottom: 1rem; - } - - .quicklinks__link { - color: #000 !important; - text-decoration: underline; - } -} \ No newline at end of file diff --git a/assets/css/components/search.css b/assets/css/components/search.css deleted file mode 100644 index 6a63ef0..0000000 --- a/assets/css/components/search.css +++ /dev/null @@ -1,941 +0,0 @@ -/* Search Component - Sophisticated search interface with NVIDIA styling and complex grouping */ - -/* SOPHISTICATED SEARCH INPUT - Matching design system */ -.search-input { - position: relative; - z-index: 10; - width: 100%; - max-width: 24rem; - padding: 0.625rem 0.75rem 0.625rem 2.25rem; - border-radius: var(--radius-lg); - border: 1px solid var(--color-border-primary); - font-size: 0.875rem; - font-weight: 500; - /* background: var(--color-surface); */ - background: var(--glass-bg); - color: var(--color-text-primary); - font-family: var(--font-family-brand, inherit); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard); - /* box-shadow: - 0 1px 3px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - /* box-shadow: var(--elevation-1), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - - /* Search icon using brand color */ - /* Use currentColor for icon stroke; color is set via CSS variable for themeability */ - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21 21-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z'/%3e%3c/svg%3e"); - background-position: left 0.75rem center; - background-repeat: no-repeat; - background-size: 1.125rem 1.125rem; - color: var(--color-text-primary); -} - -.search-input:hover { - border-color: var(--color-brand); - background-color: var(--color-surface-hover); - transform: var(--transform-lift-subtle); - /* box-shadow: - 0 4px 8px rgba(0, 0, 0, 0.1), - 0 0 20px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); */ - /* box-shadow: var(--elevation-hover-2), var(--elevation-brand-subtle), inset 0 1px 0 rgba(255, 255, 255, 0.15); */ - box-shadow: var(--glass-shadow); -} - -.search-input:focus { - outline: 2px solid transparent; - outline-offset: 2px; - border-color: var(--color-brand); - background-color: var(--glass-bg); - transform: var(--transform-lift-subtle); - /* box-shadow: - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.15), - 0 4px 12px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.2); */ - /* box-shadow: 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15), var(--elevation-hover-2), inset 0 1px 0 rgba(255, 255, 255, 0.2); */ - box-shadow: 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15), var(--glass-shadow); -} - -.search-input::placeholder { - color: var(--color-text-tertiary); - font-style: italic; -} - -/* SOPHISTICATED SEARCH CONTAINER - Matching design system */ -.search-container { - position: relative; - border-radius: 0.875rem; - padding: 0.75rem; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border: 1px solid var(--glass-border-color); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - /* transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); */ - transition: - background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); -} - -.search-container::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - /* transition: opacity 0.3s ease; */ - transition: opacity var(--timing-medium) var(--easing-standard); - pointer-events: none; - border-radius: 0.875rem; -} - -.search-container:hover, -.search-container:focus-within { - border-color: var(--color-brand); - box-shadow: - 0 8px 24px rgba(0, 0, 0, 0.1), - 0 0 20px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} - -.search-container:hover::before, -.search-container:focus-within::before { - opacity: 1; -} - -/* SOPHISTICATED SEARCH RESULTS CONTAINER */ -#searchResultsContainer { - position: relative; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: 0.875rem; - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - /* animation: search-container-enter 0.5s cubic-bezier(0.4, 0, 0.2, 1); */ - animation: search-container-enter var(--timing-medium) var(--easing-standard); - animation-fill-mode: both; - overflow: hidden; -} - -#searchResultsContainer::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} - -#searchResultsContainer:hover::before { - opacity: 1; -} - -@keyframes search-container-enter { - from { - opacity: 0; - transform: translateY(20px) scale(0.95); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -/* SOPHISTICATED SEARCH HIT STYLING - Matching tiles and navigation patterns */ -.search-hit { - position: relative; - display: block; - text-decoration: none; - color: inherit; - margin-bottom: 0.75rem; - overflow: hidden; -} - -.search-hit-content { - position: relative; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: 0.875rem; - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - padding: 1.25rem; - /* transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); */ - transition: - background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - overflow: hidden; -} - -.search-hit-content::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - /* transition: opacity 0.3s ease; */ - transition: opacity var(--timing-medium) var(--easing-standard); - pointer-events: none; -} - -.search-hit-content::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, var(--color-brand), var(--color-brand-2)); - transform: scaleX(0); - /* transition: transform 0.3s ease; */ - transition: transform var(--timing-medium) var(--easing-standard); - transform-origin: left; -} - -.search-hit:hover .search-hit-content { - transform: var(--transform-lift-dramatic); - border-color: var(--color-brand); - /* box-shadow: - 0 12px 28px rgba(0, 0, 0, 0.12), - 0 0 20px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); */ - box-shadow: - var(--elevation-hover-2), - var(--elevation-brand-subtle), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} - -.search-hit:hover .search-hit-content::before { - opacity: 1; -} - -.search-hit:hover .search-hit-content::after { - transform: scaleX(1); -} - -/* Focus states for accessibility */ -.search-hit:focus-within .search-hit-content { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - transform: var(--transform-lift-medium); -} - -/* Search Hit Typography - Matching design system */ -.search-hit-header { - display: flex; - align-items: flex-start; - justify-content: space-between; - margin-bottom: 0.75rem; -} - -.search-hit-section { - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - color: var(--color-brand); - margin-bottom: 0.25rem; - transition: all 0.2s ease; -} - -.search-hit:hover .search-hit-section { - transform: translateX(2px); - color: var(--color-brand-1); -} - -.search-hit-title { - font-size: 1.125rem; - font-weight: 600; - line-height: 1.375; - color: var(--color-text-primary); - font-family: var(--font-family-brand, inherit); - margin: 0; - /* transition: color 0.2s ease; */ - transition: color var(--timing-fast) var(--easing-standard); -} - -.search-hit:hover .search-hit-title { - color: var(--color-brand); -} - -.search-hit-description { - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-secondary); - margin: 0.75rem 0; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.search-hit-metadata { - display: flex; - align-items: center; - justify-content: space-between; - font-size: 0.75rem; - color: var(--color-text-tertiary); - margin-top: 0.75rem; - padding-top: 0.75rem; - border-top: 1px solid var(--color-border-secondary); -} - -.search-hit-score { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.25rem 0.5rem; - background: var(--color-brand); - color: var(--color-text-inverse); - border-radius: 0.375rem; - font-size: 0.75rem; - font-weight: 600; - min-width: 3rem; - text-align: center; - transition: all 0.2s ease; - opacity: 0.8; -} - -.search-hit:hover .search-hit-score { - transform: scale(1.05); - opacity: 1; - background: var(--color-brand-1); -} - -/* SOPHISTICATED SEARCH SECTIONS */ -.search-section { - margin-bottom: 2rem; - border-radius: 0.875rem; - /* transition: all 0.3s ease; */ - transition: - background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); -} - -.search-section:hover { - transform: var(--transform-lift-medium); -} - -.search-section-header { - display: flex; - align-items: center; - margin-bottom: 1.5rem; - padding: 1rem; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: 0.75rem; - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -} - -.search-section-badge { - display: flex; - align-items: center; - justify-content: center; - width: 2rem; - height: 2rem; - border-radius: 50%; - background: linear-gradient(135deg, var(--color-brand), var(--color-brand-2)); - color: var(--color-text-inverse); - font-size: 0.875rem; - font-weight: 600; - margin-right: 0.75rem; - /* box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.2); */ - box-shadow: var(--elevation-brand-subtle); - transition: all 0.2s ease; -} - -.search-section:hover .search-section-badge { - transform: scale(1.1); - /* box-shadow: 0 4px 16px rgba(var(--color-brand-rgb), 0.3); */ - box-shadow: var(--elevation-brand-medium); -} - -.search-section-title { - font-size: 1.5rem; - font-weight: 700; - color: var(--color-text-primary); - font-family: var(--font-family-brand, inherit); - margin: 0; -} - -/* SOPHISTICATED PARENT GROUPS */ -.search-parent-group { - position: relative; - margin-bottom: 1.5rem; -} - -.search-parent-group h3 { - position: sticky; - top: 0; - z-index: 10; - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-secondary); - font-family: var(--font-family-brand, inherit); - margin: 0 -1rem 1rem -1rem; - padding: 0.75rem 1rem; - /* background: var(--color-surface); */ - background: var(--glass-bg); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - border-bottom: 1px solid var(--color-border-secondary); - border-radius: 0.5rem 0.5rem 0 0; -} - -/* SEARCH RESULTS HEADER */ -.search-results-header { - padding: 1.5rem; - margin-bottom: 1.5rem; - /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ - background: var(--glass-bg); - border-radius: 0.875rem; - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - border-left: 4px solid var(--color-brand); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* animation: slideInUp 0.6s ease-out; */ - animation: slideInUp var(--timing-slow) var(--easing-standard); -} - -.search-results-header h1 { - font-size: 1.25rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0 0 0.25rem 0; -} - -.search-results-header p { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin: 0; -} - -.search-stats { - text-align: right; -} - -.search-stats div { - font-size: 0.75rem; - color: var(--color-text-tertiary); -} - -/* SOPHISTICATED ANIMATIONS - Matching design system */ -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes slideInUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes pulse { - 0%, 100% { - opacity: 1; - } - 50% { - opacity: 0.7; - } -} - -/* Animation Classes */ -.animate-fadeIn { - /* animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1); */ - animation: fadeIn var(--timing-fast) var(--easing-standard); -} - -.animate-slideInUp { - /* animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1); */ - animation: slideInUp var(--timing-fast) var(--easing-standard); -} - -.animate-pulse { - /* animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; */ - animation: pulse var(--timing-slow) var(--easing-emphasized) infinite; -} - -/* Search Container Enhancements */ -.search-results-container { - transition: all 0.3s ease; -} - -.search-results-header { - animation: slideInUp 0.6s ease-out; -} - -/* Search Section Styling */ -.search-section { - border-radius: 12px; - transition: all 0.3s ease; -} - -.search-section:hover { - transform: var(--transform-lift-medium); -} - -/* Enhanced Search Hit Styling */ -.search-hit { - position: relative; - overflow: hidden; -} - -.search-hit-content { - position: relative; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - border: 1px solid var(--color-border, #e0e0e0); -} - -.search-hit:hover .search-hit-content { - border-color: var(--color-brand); - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.1), - 0 0 0 1px var(--color-brand-alpha, rgba(74, 144, 226, 0.1)); -} - -.search-hit-content::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, var(--color-brand), var(--color-brand-secondary, var(--color-brand))); - transform: scaleX(0); - transition: transform 0.3s ease; - transform-origin: left; -} - -.search-hit:hover .search-hit-content::before { - transform: scaleX(1); -} - -/* Search Hit Typography */ -.search-hit-title { - transition: color 0.2s ease; -} - -.search-hit:hover .search-hit-title { - color: var(--color-brand) !important; -} - -.search-hit-section { - transition: all 0.2s ease; -} - -.search-hit:hover .search-hit-section { - transform: translateX(2px); -} - -/* Search Score Badge */ -.search-hit-score { - transition: all 0.2s ease; - min-width: 45px; - text-align: center; -} - -.search-hit:hover .search-hit-score { - transform: scale(1.05); - opacity: 1 !important; -} - -/* SOPHISTICATED FILTER STYLING - Matching navigation patterns */ -#filterSelect { - position: relative; - /* background: var(--color-surface); */ - background: var(--glass-bg); - /* border: 1px solid var(--color-border-primary); */ - border: 1px solid var(--glass-border-color); - border-radius: var(--radius-lg); - padding: 0.5rem 0.75rem; - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-primary); - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - /* backdrop-filter: blur(10px); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--glass-shadow); - cursor: pointer; -} - -#filterSelect:hover { - background: var(--color-surface-hover); - border-color: var(--color-brand); - transform: var(--transform-lift-subtle); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); -} - -#filterSelect:focus { - outline: 2px solid transparent; - outline-offset: 2px; - border-color: var(--color-brand); - box-shadow: - 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); -} - -.filter-active { - background: var(--color-brand) !important; - color: var(--color-text-inverse) !important; - border-color: var(--color-brand) !important; - box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.25) !important; -} - -.filter-active:hover { - background: var(--color-brand-1) !important; - transform: var(--transform-lift-subtle); -} - -/* Filter container styling */ -#filterContainer { - position: relative; -} - -#filterContainer label { - display: block; - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-secondary); - margin-bottom: 0.5rem; -} - -/* UTILITY CLASSES */ -.line-clamp-2 { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.line-clamp-3 { - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.space-y-3 > * + * { - margin-top: 0.75rem; -} - -.space-x-4 > * + * { - margin-left: 1rem; -} - -.flex { - display: flex; -} - -.items-center { - align-items: center; -} - -.justify-between { - justify-content: space-between; -} - -.flex-1 { - flex: 1 1 0%; -} - -.font-medium { - font-weight: 500; -} - -/* SOPHISTICATED LOADING STATES */ -.search-loading { - position: relative; - padding: 2rem; - text-align: center; -} - -.search-loading::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 20px; - height: 20px; - margin: -10px 0 0 -10px; - border: 2px solid var(--color-border-primary); - border-top-color: var(--color-brand); - border-radius: 50%; - animation: spin 1s linear infinite; -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -.search-loading-text { - color: var(--color-text-secondary); - font-size: 0.875rem; - margin-top: 1rem; -} - - - -/* Focus Management */ -.search-hit:focus-within .search-hit-content { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} - -/* RESPONSIVE DESIGN */ -@media (max-width: 768px) { - .search-hit-content { - padding: 1rem; - } - - .search-hit-metadata { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } - - .search-results-header { - padding: 1rem; - } - - .search-results-header .flex { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } - - .search-section-header { - padding: 0.75rem; - } - - .search-section-badge { - width: 1.75rem; - height: 1.75rem; - font-size: 0.75rem; - } - - .search-section-title { - font-size: 1.25rem; - } - - .search-parent-group h3 { - font-size: 1rem; - padding: 0.5rem 0.75rem; - } -} - -/* PRINT STYLES */ -@media print { - .search-hit-content { - break-inside: avoid; - box-shadow: none; - border: 1px solid #000; - background: white; - } - - .search-hit-score, - .animate-fadeIn, - .animate-slideInUp { - display: none; - } - - .search-section-badge { - background: #000; - color: white; - } -} - -/* NO RESULTS AND ERROR STATES - Matching design system */ -.search-no-results, -.search-error { - text-align: center; - padding: 3rem 1.5rem; - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border-radius: 0.875rem; - border: 1px solid var(--color-border-primary); - animation: fadeIn 0.5s ease-out; -} - -.search-no-results .emoji, -.search-error .emoji { - font-size: 3rem; - margin-bottom: 1rem; - opacity: 0.6; - display: block; -} - -.search-no-results h2, -.search-error h2 { - font-size: 1.25rem; - font-weight: 600; - color: var(--color-text-secondary); - margin: 0 0 0.5rem 0; -} - -.search-no-results p, -.search-error p { - font-size: 0.875rem; - color: var(--color-text-tertiary); - margin: 0 0 1rem 0; -} - -.search-error button { - background: var(--color-brand); - color: var(--color-text-inverse); - border: none; - border-radius: var(--radius-lg); - padding: 0.5rem 1rem; - font-size: 0.875rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; -} - -.search-error button:hover { - background: var(--color-brand-1); - transform: var(--transform-lift-subtle); - box-shadow: 0 4px 8px rgba(var(--color-brand-rgb), 0.25); -} - -/* High Contrast Mode Support */ -@media (prefers-contrast: high) { - .search-hit-content { - border-width: 2px; - } - - .search-hit:hover .search-hit-content { - border-width: 3px; - } -} - -/* ACCESSIBILITY AND REDUCED MOTION SUPPORT */ -@media (prefers-reduced-motion: reduce) { - .search-hit-content, - .search-section, - .search-section-badge, - .animate-fadeIn, - .animate-slideInUp, - #searchResultsContainer { - animation: none; - transition: none; - } - - .search-hit:hover .search-hit-content, - .search-section:hover, - .search-section:hover .search-section-badge { - transform: none; - } -} - -/* HIGH CONTRAST MODE SUPPORT */ -@media (prefers-contrast: high) { - .search-hit-content, - .search-section-header, - .search-results-header { - border-width: 2px; - } - - .search-hit:hover .search-hit-content { - border-width: 3px; - } - - .search-section-badge { - border: 2px solid var(--color-text-primary); - } -} - -/* DARK MODE SUPPORT - All styles automatically work via CSS custom properties */ -/* The color system in colors.css handles dark mode via .dark class */ -/* No additional dark mode styles needed as we use semantic color variables */ - diff --git a/assets/css/components/tables.css b/assets/css/components/tables.css deleted file mode 100644 index a3fb209..0000000 --- a/assets/css/components/tables.css +++ /dev/null @@ -1,105 +0,0 @@ -/* Tables Component - BEM, dense, and glass variants aligned to design tokens */ - -@layer components { - /* - * Replacement policy: retire global element styles in favor of a semantic component API. - * Old global table selectors are intentionally removed to avoid leakage across the site. - */ - - /* Bridge default Markdown tables to component rules until all markup adopts .table */ - :where(.table, .article-content table) { - @apply w-full text-sm; - border-collapse: separate; - border-spacing: 0; - color: var(--color-text-primary); - } - - /* Container (enables horizontal scroll when needed) */ - .table__container { - @apply overflow-x-auto; - -webkit-overflow-scrolling: touch; - overflow-y: hidden; /* avoid clipping rounded headers within container */ - } - /* Ensure rounded headers aren't visually clipped when inside a scroll container */ - .table__container--rounded { border-radius: 0.75rem; } - /* Progressive enhancement: auto-round container if it has a rounded/glass table */ - .table__container:has(> .table.table--rounded), - .table__container:has(> .table.table--glass) { border-radius: 0.75rem; } - - /* Head */ - :where(.table__head, .article-content table thead) th { - @apply text-left font-semibold uppercase tracking-wide text-xs; - background-color: var(--color-surface-active); - color: var(--color-text-primary); - } - - /* Rows */ - :where(.table__row, .article-content table tbody tr) { - @apply align-top; - } - - /* Cells */ - :where(.table__cell, .article-content table th, .article-content table td) { - @apply px-3 py-1.5; - border-top: 1px solid var(--color-border-primary); - } - .table__cell--numeric { @apply text-right; } - .table__cell--wrap { @apply whitespace-normal; } - .table__cell--nowrap { @apply whitespace-nowrap; } - - /* Density variants */ - .table--dense .table__cell { @apply py-1; } - .table--compact .table__cell { @apply py-0.5; } - - /* Row states */ - .table :where(.table__row:hover) { background-color: var(--color-surface-hover); } - :where(.article-content table tbody tr:hover) { background-color: var(--color-surface-hover); } - .table--zebra .table__body > .table__row:nth-child(even) { background-color: var(--color-surface); } - /* Ensure hover wins over zebra striping */ - .table--zebra .table__body > .table__row:nth-child(even):hover { background-color: var(--color-surface-hover); } - - /* Pinned header (opt-in) */ - .table--sticky thead th { position: sticky; top: 0; z-index: 1; } - - /* Glass morphism (opt-in) */ - .table--glass { - @apply rounded-lg shadow-sm; - backdrop-filter: saturate(150%) blur(8px); - -webkit-backdrop-filter: saturate(150%) blur(8px); - /* Light: subtle translucent surface; Dark: stronger translucency */ - @apply bg-white/60 dark:bg-zinc-900/40; - border: 1px solid var(--color-border-primary); - } - - /* Inspired header: match code/tabs glass header visuals */ - .table--header-glass .table__head, - .table--glass .table__head { - background: var(--glass-bg); - border-bottom: 1px solid var(--glass-border-color); - overflow: hidden; /* ensure rounded corners show */ - } - .table--header-glass .table__head th, - .table--glass .table__head th { - @apply px-3 py-2 text-xs font-semibold uppercase tracking-wide; - background: var(--glass-bg); - border-top: none; /* avoid double border at the top */ - } - /* Subtle separators between header cells (like tabs nav) */ - .table--header-glass .table__head th + th, - .table--glass .table__head th + th { - border-left: 1px solid var(--glass-border-color); - } - /* Light mode: strengthen dividers for visibility */ - @media (prefers-color-scheme: light) { - .table--header-glass .table__head, - .table--glass .table__head { border-bottom-color: var(--color-border-primary); } - .table--header-glass .table__head th + th, - .table--glass .table__head th + th { border-left-color: var(--color-border-primary); } - } - /* Rounded top corners when using glass/rounded variant */ - .table--rounded .table__head th:first-child, - .table--glass .table__head th:first-child { border-top-left-radius: 0.75rem; } - .table--rounded .table__head th:last-child, - .table--glass .table__head th:last-child { border-top-right-radius: 0.75rem; } - .table--rounded .table__head { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; overflow: hidden; } -} \ No newline at end of file diff --git a/assets/css/components/tabs.css b/assets/css/components/tabs.css deleted file mode 100644 index 18bb629..0000000 --- a/assets/css/components/tabs.css +++ /dev/null @@ -1,261 +0,0 @@ -/* Unified Tabs Component CSS - * - Enhanced tabs ([data-component="tabs"], .tabs__*) - */ - -/* ========================== - Enhanced Tabs (BEM + data) - ========================== */ -[data-component="tabs"], -.tabs { - margin: 1.5rem 0; - border-radius: 1rem; - background: var(--glass-bg); - border: 1px solid var(--glass-border-color); - box-shadow: var(--glass-shadow); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - overflow: hidden; - position: relative; -} - -/* Light mode: strengthen overall container border for visibility */ -@media (prefers-color-scheme: light) { - [data-component="tabs"], - .tabs { - border-color: var(--color-border-primary); - } -} - -/* Header-aligned visuals are now the default */ - -/* Tab buttons container */ -[data-component="tabs"] [data-tab-id], -.tabs__nav { - background: var(--glass-bg); - border-bottom: 1px solid var(--glass-border-color); - padding: 0.5rem 0.5rem; - display: flex; - flex-wrap: wrap; - gap: 0.25rem; -} - -/* Light mode: strengthen nav divider for visibility */ -@media (prefers-color-scheme: light) { - [data-component="tabs"] [data-tab-id], - .tabs__nav { - border-bottom-color: var(--color-border-primary); - } -} - -/* Individual tab buttons */ -[data-component="tabs"] button[data-tab-option], -.tabs__button { - position: relative; - border-radius: 0.625rem; - font-weight: 600; - transition: - background-color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard); - border: 1px solid var(--glass-border-color); - cursor: pointer; - white-space: nowrap; - background: var(--glass-bg); - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - padding: 0.25rem 0.5rem; /* match breadcrumb */ -} - -/* Default (inactive) */ -[data-component="tabs"] button[data-tab-option]:not(.bg-brand), -.tabs__button:not(.bg-brand) { - background: var(--glass-bg) !important; - color: var(--color-text-primary) !important; - border-color: var(--glass-border-color); -} - -/* Light mode: increase inactive button border contrast */ -@media (prefers-color-scheme: light) { - [data-component="tabs"] button[data-tab-option]:not(.bg-brand), - .tabs__button:not(.bg-brand) { - border-color: var(--color-border-primary); - } -} - -/* Hover */ -[data-component="tabs"] button[data-tab-option]:not(.bg-brand):hover, -.tabs__button:not(.bg-brand):hover { - background: var(--color-surface-hover) !important; - color: var(--color-brand) !important; - border-color: rgba(var(--color-brand-rgb), 0.35); - transform: translateY(-1px); - box-shadow: var(--elevation-2); -} - -/* Active */ -[data-component="tabs"] button.bg-brand, -.tabs__button.bg-brand { - background: var(--color-brand) !important; - color: var(--color-text-inverse, #fff) !important; - border-color: var(--color-brand); - box-shadow: var(--elevation-brand-subtle); - transform: translateY(-1px); -} - -/* Subtle variant: revert to tinted-active style */ -[data-component="tabs"].tabs--subtle button.bg-brand, -.tabs.tabs--subtle .tabs__button.bg-brand { - background: - linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.06) 100% - ), - var(--glass-bg) !important; - color: var(--color-text-primary) !important; - border-color: rgba(var(--color-brand-rgb), 0.45); - box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.18), var(--elevation-2); -} - -/* Dark mode: increase active contrast by default */ -@media (prefers-color-scheme: dark) { - [data-component="tabs"] button.bg-brand, - .tabs__button.bg-brand { - background: var(--color-brand) !important; - color: var(--color-text-inverse, #fff) !important; - border-color: var(--color-brand); - box-shadow: var(--elevation-brand-medium); - } -} - -/* Focus */ -[data-component="tabs"] button[data-tab-option]:focus-visible, -.tabs__button:focus-visible { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - box-shadow: 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); -} - -/* Content container */ -[data-component="tabs"] .w-full, -.tabs__content { - min-height: 200px; - position: relative; - overflow: hidden; - border-top: 1px solid var(--glass-border-color); - transition: height var(--timing-medium) var(--easing-standard); - isolation: isolate; /* prevent child blends from darkening surface */ -} - -/* Panels */ -[data-component="tabs"] [data-tabcontent], -.tabs__panel { - padding: 1.25rem 1.5rem; - background: transparent; - position: absolute; - top: 0; - left: 0; - right: 0; - will-change: opacity, transform; - backface-visibility: hidden; - transform: var(--transform-slide-in-up); - opacity: 0; - visibility: hidden; - pointer-events: none; - transition: - opacity var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard), - visibility 0s linear var(--timing-medium); -} - -/* Visible panel */ -[data-component="tabs"] [data-tabcontent].is-active, -.tabs__panel.is-active { - opacity: 1; - transform: var(--transform-translate-none); - visibility: visible; - pointer-events: auto; - transition-delay: 0s, 0s, 0s; - animation: slideInUp var(--timing-medium) var(--easing-standard); -} - -/* Panel content spacing */ -[data-component="tabs"] [data-tabcontent] > *:first-child, -.tabs__panel > *:first-child { margin-top: 0; } -[data-component="tabs"] [data-tabcontent] > *:last-child, -.tabs__panel > *:last-child { margin-bottom: 0; } - -/* Smooth entrance */ -[data-component="tabs"] [data-tabcontent] *, -.tabs__panel * { transition: none; } - -/* Compact density variant */ -[data-component="tabs"].tabs--compact .tabs__nav, -.tabs.tabs--compact .tabs__nav { - padding: 0.25rem 0.25rem; - gap: 0.125rem; -} - -[data-component="tabs"].tabs--compact button[data-tab-option], -.tabs.tabs--compact .tabs__button { - padding: 0.375rem 0.5rem; - font-size: 0.875rem; -} - -/* Underline hover animation for inactive buttons */ -[data-component="tabs"] button[data-tab-option]:not(.bg-brand)::after, -.tabs__button:not(.bg-brand)::after { - content: ""; - position: absolute; - left: 0.5rem; right: 0.5rem; bottom: 0.25rem; - height: 2px; - background: rgba(var(--color-brand-rgb), 0.35); - transform: scaleX(0); - transform-origin: left center; - transition: transform var(--timing-medium) var(--easing-standard); -} - -[data-component="tabs"] button[data-tab-option]:not(.bg-brand):hover::after, -.tabs__button:not(.bg-brand):hover::after { transform: scaleX(1); } - -/* Responsive */ -@media (max-width: 640px) { - [data-component="tabs"] [data-tab-id], - .tabs__nav { flex-direction: column; align-items: stretch; } - [data-component="tabs"] button[data-tab-option], - .tabs__button { text-align: left; justify-content: flex-start; } - [data-component="tabs"] [data-tabcontent], - .tabs__panel { padding: 1.5rem; } -} - -/* Print */ -@media print { - [data-component="tabs"] [data-tab-id], - .tabs__nav { display: none; } - [data-component="tabs"] [data-tabcontent], - .tabs__panel { position: static !important; display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; page-break-inside: avoid; } - [data-component="tabs"] [data-tabcontent]:not(:first-of-type), - .tabs__panel:not(:first-of-type) { margin-top: 2rem; border-top: 1px solid var(--color-border-primary); padding-top: 2rem; } - [data-component="tabs"] [data-tabcontent]::before, - .tabs__panel::before { content: "Tab: " attr(data-tabcontent); display: block; font-weight: bold; margin-bottom: 1rem; color: var(--color-text-secondary); font-size: 0.875rem; text-transform: capitalize; } -} - -@media (prefers-color-scheme: dark) { - [data-component="tabs"], .tabs { box-shadow: var(--elevation-4); } - [data-component="tabs"] button.bg-brand, .tabs__button.bg-brand { box-shadow: var(--elevation-brand-medium); } -} - -@media (prefers-color-scheme: dark) { - [data-component="tabs"]::after, - .tabs::after { - background: linear-gradient( - to bottom, - rgba(0,0,0,0) 0%, - rgba(0,0,0,0.18) 55%, - rgba(0,0,0,0.28) 100% - ); - } -} - diff --git a/assets/css/components/tiles.css b/assets/css/components/tiles.css deleted file mode 100644 index df8d9e9..0000000 --- a/assets/css/components/tiles.css +++ /dev/null @@ -1,197 +0,0 @@ -/* Tiles Component - Interactive content cards with enhanced UX */ - -/* Base Tile Styles */ -.card--tile { - position: relative; - /* Use a CSS var for the base background so JS can layer gradients on hover */ - --tile-base-bg: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - background: var(--tile-base-bg); - border-radius: var(--radius-card); - border: 1px solid var(--color-border-primary); - /* backdrop-filter: blur(var(--tile-glass-blur)) saturate(var(--tile-glass-saturate)); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - transition: - transform var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard), - background var(--timing-medium) var(--easing-standard); - overflow: hidden; - /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - will-change: transform, filter; - isolation: isolate; -} - -.card--tile::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} - -/* Subtle inner highlight for glass edge */ -.card--tile::after { - content: ''; - position: absolute; - inset: 0; - pointer-events: none; - border-radius: inherit; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); -} - -.card--tile:hover::before { - opacity: 1; -} - -/* Focus states for accessibility */ -.card--tile:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - transform: var(--transform-lift-medium); -} - -/* Tile content spacing */ -.card--tile .space-y-3 > * + * { - margin-top: 0.75rem; -} - -.card--tile .space-y-2 > * + * { - margin-top: 0.5rem; -} - -/* Tile links - ensure they take full space */ -.card--tile a { - display: block; - color: inherit; - text-decoration: none; - position: relative; - z-index: 2; -} - -.card--tile a:hover { - color: inherit; -} - -/* Tile headers */ -.card--tile h3 { - color: var(--color-text-primary); - font-weight: 600; - line-height: 1.3; - margin-bottom: 0.5rem; - transition: color 0.2s ease; -} - -.card--tile:hover h3 { - color: var(--color-brand); -} - -/* Tile descriptions */ -.card--tile p { - color: var(--color-text-secondary); - line-height: 1.5; - font-size: 0.875rem; -} - -/* Tile icons */ -.card--tile .icon { - width: 1.5rem; - height: 1.5rem; - flex-shrink: 0; - transition: - filter var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - filter: brightness(0.8); -} - -.card--tile:hover .icon { - filter: brightness(1); - transform: scale(1.05); -} - -/* Tile tag/badge styles */ -.card--tile .inline-block { - background-color: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - color: var(--color-text-secondary); - font-size: 0.75rem; - padding: 0.25rem 0.75rem; - border-radius: 9999px; - transition: - filter var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: inline-block; - text-decoration: none; -} - -.card--tile .inline-block:hover { - background-color: var(--color-brand); - border-color: var(--color-brand); - color: var(--color-text-inverse); - transform: var(--transform-lift-subtle); -} - -/* Responsive adjustments */ -@media (max-width: 768px) { - .card--tile { - margin-bottom: 1rem; - } - - .card--tile:hover { - transform: var(--transform-lift-medium); - } -} - -/* Grid layout enhancements - simplified for child links component */ -.grid .card--tile { - height: 100%; -} - -/* Dark mode enhancements */ -.dark .card--tile { - border-color: var(--color-border-secondary); - /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); */ - box-shadow: var(--glass-shadow); -} - -.dark .card--tile:hover { box-shadow: var(--glass-shadow); } - -/* Animation improvements */ -.card--tile { - animation: card-tile-enter 0.4s ease-out; - animation-fill-mode: both; -} - -@keyframes card-tile-enter { - from { - opacity: 0; - transform: translateY(20px) scale(0.95); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -/* Stagger animation for grids */ -.grid .card--tile:nth-child(1) { animation-delay: 0s; } -.grid .card--tile:nth-child(2) { animation-delay: 0.1s; } -.grid .card--tile:nth-child(3) { animation-delay: 0.2s; } -.grid .card--tile:nth-child(4) { animation-delay: 0.3s; } -.grid .card--tile:nth-child(5) { animation-delay: 0.4s; } -.grid .card--tile:nth-child(6) { animation-delay: 0.5s; } \ No newline at end of file diff --git a/assets/css/components/toast.css b/assets/css/components/toast.css deleted file mode 100644 index b7638b9..0000000 --- a/assets/css/components/toast.css +++ /dev/null @@ -1,216 +0,0 @@ -/* Toast Notification Component - Dedicated CSS */ - -/* Enhanced Toast Styles */ -.toast-notification { - /* Enhanced backdrop blur for modern glass effect */ - /* backdrop-filter: blur(20px) saturate(180%); */ - -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - - /* Smooth shadow that matches notice components */ - /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ - box-shadow: var(--glass-shadow); - - /* Ensure proper font rendering */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - /* Base positioning and sizing */ - position: fixed; - top: 1.5rem; - right: 1.5rem; - z-index: var(--z-toast, 9999); - max-width: 20rem; - width: 100%; - transform: translateX(100%); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - transform var(--timing-slow) var(--easing-emphasized), - opacity var(--timing-slow) var(--easing-emphasized); - border-radius: 0.75rem; - overflow: hidden; - border: 1px solid; -} - -/* Toast content */ -.toast-notification__content { - display: flex; - align-items: flex-start; - padding: 1rem; - gap: 0.75rem; -} - -.toast-notification__icon { - flex-shrink: 0; - margin-top: 0.125rem; - width: 1.25rem; - height: 1.25rem; -} - -.toast-notification__message { - flex: 1; - min-width: 0; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 500; - font-family: "NVIDIA", Arial, Helvetica, sans-serif; -} - -.toast-notification__close { - flex-shrink: 0; - margin-left: 1rem; - color: rgba(156, 163, 175, 1); - transition: color 0.2s ease; - background: none; - border: none; - cursor: pointer; - padding: 0; - width: 1rem; - height: 1rem; -} - -.toast-notification__close:hover { - color: rgba(107, 114, 128, 1); -} - -/* Dark mode close button */ -.dark .toast-notification__close:hover { - color: rgba(209, 213, 219, 1); -} - -/* Type-specific styling */ -/* Old hex-based colors commented in favor of tokens */ -/* .toast-notification--success { ... } */ -.toast-notification--success { - background: linear-gradient( - 135deg, - rgba(var(--color-success-rgb), 0.1) 0%, - rgba(var(--color-success-rgb), 0.05) 100% - ); - border-color: rgba(var(--color-success-rgb), 0.2); - color: rgb(20, 83, 45); -} - -.toast-notification--success .toast-notification__icon { color: var(--color-success); } - -.dark .toast-notification--success { - color: rgb(187, 247, 208); -} - -.toast-notification--error { - background: linear-gradient( - 135deg, - rgba(var(--color-danger-rgb), 0.1) 0%, - rgba(var(--color-danger-rgb), 0.05) 100% - ); - border-color: rgba(var(--color-danger-rgb), 0.2); - color: rgb(127, 29, 29); -} - -.toast-notification--error .toast-notification__icon { color: var(--color-danger); } - -.dark .toast-notification--error { - color: rgb(254, 202, 202); -} - -.toast-notification--warning { - background: linear-gradient( - 135deg, - rgba(var(--color-warning-rgb), 0.1) 0%, - rgba(var(--color-warning-rgb), 0.05) 100% - ); - border-color: rgba(var(--color-warning-rgb), 0.2); - color: rgb(120, 53, 15); -} - -.toast-notification--warning .toast-notification__icon { color: var(--color-warning); } - -.dark .toast-notification--warning { - color: rgb(254, 215, 170); -} - -.toast-notification--info { - background: linear-gradient( - 135deg, - rgba(var(--color-info-rgb), 0.1) 0%, - rgba(var(--color-info-rgb), 0.05) 100% - ); - border-color: rgba(var(--color-info-rgb), 0.2); - color: rgb(30, 58, 138); -} - -.toast-notification--info .toast-notification__icon { color: var(--color-info); } - -.dark .toast-notification--info { - color: rgb(191, 219, 254); -} - -/* Animation states */ -.toast-notification--visible { - transform: translateX(0); -} - -.toast-notification--hiding { - transform: translateX(100%); - opacity: 0; - scale: 0.95; -} - -/* Enhanced animations */ -@keyframes toast-slide-in { - 0% { - transform: translateX(100%) scale(0.95); - opacity: 0; - } - 100% { - transform: translateX(0) scale(1); - opacity: 1; - } -} - -.toast-notification--entering { - animation: toast-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); -} - -/* Dark mode enhancements */ -.dark .toast-notification { - box-shadow: - 0 20px 25px -5px rgba(0, 0, 0, 0.4), - 0 10px 10px -5px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -/* Mobile responsiveness */ -@media (max-width: 640px) { - .toast-notification { - left: 1rem; - right: 1rem; - max-width: none; - transform: translateY(-100%); - } - - .toast-notification--visible { - transform: translateY(0); - } - - .toast-notification--hiding { - transform: translateY(-100%); - } - - @keyframes toast-slide-in { - 0% { - transform: translateY(-100%) scale(0.95); - opacity: 0; - } - 100% { - transform: translateY(0) scale(1); - opacity: 1; - } - } -} - -/* Stacking for multiple toasts */ -.toast-notification:nth-child(1) { z-index: 9999; } -.toast-notification:nth-child(2) { z-index: 9998; top: 5.5rem; } -.toast-notification:nth-child(3) { z-index: 9997; top: 9.5rem; } -.toast-notification:nth-child(4) { z-index: 9996; top: 13.5rem; } \ No newline at end of file diff --git a/assets/css/components/tutorial.css b/assets/css/components/tutorial.css deleted file mode 100644 index 87f08e1..0000000 --- a/assets/css/components/tutorial.css +++ /dev/null @@ -1,1290 +0,0 @@ -/* Tutorial Component - Enhanced tutorial system with modern UX patterns */ - -/* ========================================================================== - Tutorial Overview Components - ========================================================================== */ - -.tutorial-overview { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); - gap: 2rem; - margin: 2rem 0; - padding: 0 1rem; -} - -.tutorial-card { - position: relative; - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border-radius: 1rem; - border: 1px solid var(--color-border-primary); - padding: 2rem; - /* ✅ FIXED: Specific properties instead of transition: all */ - transition: - transform var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - box-shadow var(--timing-medium) var(--easing-standard); - overflow: hidden; - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.tutorial-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; -} - -.tutorial-card:hover { - transform: translateY(-8px); - border-color: var(--color-brand); - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.15), - 0 0 20px rgba(var(--color-brand-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); -} - -.tutorial-card:hover::before { - opacity: 1; -} - -.tutorial-card__header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 1rem; - flex-wrap: wrap; - gap: 0.5rem; -} - -.tutorial-card__badges { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; -} - -.tutorial-card__title { - color: var(--color-text-primary); - font-size: 1.5rem; - font-weight: 700; - line-height: 1.3; - margin: 1rem 0 0.75rem 0; - transition: color 0.2s ease; -} - -.tutorial-card:hover .tutorial-card__title { - color: var(--color-brand); -} - -.tutorial-card__description { - color: var(--color-text-secondary); - line-height: 1.6; - margin-bottom: 1.5rem; - font-size: 0.95rem; -} - -.tutorial-card__metadata { - margin-top: auto; - padding-top: 1rem; - border-top: 1px solid var(--color-border-primary); -} - -/* Tutorial Badges */ -.tutorial-badge { - display: inline-flex; - align-items: center; - padding: 0.375rem 0.875rem; - border-radius: 9999px; - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} - -.tutorial-badge--difficulty { - background: linear-gradient(135deg, var(--color-brand-3) 0%, var(--color-brand-2) 100%); - color: var(--color-text-inverse); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} - -.tutorial-badge--time { - background-color: var(--color-bg-tertiary); - color: var(--color-text-secondary); - border: 1px solid var(--color-border-secondary); -} - -.tutorial-badge--prerequisites { - background: linear-gradient(135deg, var(--color-brand-5) 0%, var(--color-brand-6) 100%); - color: var(--color-text-primary); -} - -/* Tutorial Progress Mini Display */ -.tutorial-progress-mini { - display: flex; - align-items: center; - gap: 1rem; - margin-bottom: 1rem; -} - -.progress-bar-mini { - flex: 1; - height: 6px; - background-color: var(--color-border-secondary); - border-radius: 3px; - overflow: hidden; - position: relative; -} - -.progress-bar-mini__fill { - height: 100%; - background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand-2) 100%); - border-radius: 3px; - transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; -} - -.progress-bar-mini__fill::after { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - width: 20px; - background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 100%); - animation: progress-shine 2s infinite; -} - -@keyframes progress-shine { - 0% { transform: translateX(-20px); opacity: 0; } - 50% { opacity: 1; } - 100% { transform: translateX(20px); opacity: 0; } -} - -.progress-text { - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-secondary); - white-space: nowrap; -} - -/* Tutorial Actions */ -.tutorial-actions { - display: flex; - justify-content: space-between; - align-items: center; - gap: 1rem; - flex-wrap: wrap; -} - -.tutorial-actions__primary { - display: flex; - gap: 0.75rem; -} - -.tutorial-actions__secondary { - display: flex; - gap: 0.5rem; -} - -.bookmark-tutorial { - position: relative; - transition: transform var(--timing-fast) var(--easing-standard); -} - -.bookmark-tutorial:hover { - transform: scale(1.1); -} - -.bookmark-tutorial.bookmarked .bookmark-icon { - fill: var(--color-brand); - transform: scale(1.1); -} - -/* ========================================================================== - Compact Progress Components (Primary) - ========================================================================== */ - -.tutorial-progress-compact { - background: var(--color-surface); - border-radius: 0.75rem; - border: 1px solid var(--color-border-primary); - padding: 1rem; - margin: 1rem 0; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); -} - -.tutorial-compact-header { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 0.75rem; - gap: 1rem; -} - -.tutorial-compact-info { - flex: 1; - min-width: 0; -} - -.tutorial-compact-breadcrumb { - display: flex; - align-items: center; - gap: 0.375rem; - margin-bottom: 0.375rem; - font-size: 0.875rem; -} - -.tutorial-parent-link { - color: var(--color-text-secondary); - text-decoration: none; - font-weight: 500; - transition: color 0.2s ease; - white-space: nowrap; -} - -.tutorial-parent-link:hover { - color: var(--color-brand); -} - -.breadcrumb-separator { - color: var(--color-text-tertiary); - flex-shrink: 0; - width: 1rem; - height: 1rem; -} - -.current-step-title { - color: var(--color-text-primary); - font-weight: 600; - font-size: 1rem; - line-height: 1.3; - margin: 0; -} - -.tutorial-compact-meta { - display: flex; - align-items: center; - gap: 0.75rem; - flex-wrap: wrap; - font-size: 0.875rem; -} - -.step-counter { - color: var(--color-text-secondary); - font-weight: 500; - white-space: nowrap; -} - -.progress-percentage { - color: var(--color-brand); - font-weight: 700; - white-space: nowrap; -} - -.time-estimate { - color: var(--color-text-secondary); - background: var(--color-bg-tertiary); - padding: 0.25rem 0.5rem; - border-radius: 0.375rem; - white-space: nowrap; - font-size: 0.8125rem; -} - -.tutorial-compact-actions { - display: flex; - gap: 0.375rem; - flex-shrink: 0; -} - -.btn-compact { - display: flex; - align-items: center; - justify-content: center; - width: 1.75rem; - height: 1.75rem; - border-radius: 0.375rem; - border: 1px solid var(--color-border-primary); - background: var(--color-surface); - color: var(--color-text-secondary); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard); - cursor: pointer; - flex-shrink: 0; -} - -.btn-compact:hover { - background: var(--color-surface-hover); - border-color: var(--color-brand); - color: var(--color-text-primary); -} - -.btn-compact svg { - width: 0.875rem; - height: 0.875rem; -} - -/* Compact Progress Bar */ -.tutorial-progress-bar { - position: relative; - margin-bottom: 0.75rem; -} - -.progress-track { - height: 3px; - background: var(--color-border-secondary); - border-radius: 2px; - overflow: hidden; - margin-bottom: 0.625rem; - position: relative; -} - -.progress-fill { - height: 100%; - background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand-2) 100%); - border-radius: 2px; - transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; -} - -.progress-fill::after { - content: ''; - position: absolute; - top: 0; - right: -8px; - bottom: 0; - width: 8px; - background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 100%); - animation: progress-shine 2s infinite; -} - -.step-dots { - display: flex; - justify-content: space-between; - align-items: center; - position: relative; -} - -.step-dot { - display: flex; - align-items: center; - justify-content: center; - width: 1.5rem; - height: 1.5rem; - border-radius: 50%; - font-size: 0.6875rem; - font-weight: 600; - text-decoration: none; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - position: relative; - z-index: 2; -} - -.step-dot.completed { - background: var(--color-brand); - color: var(--color-text-inverse); - box-shadow: 0 2px 4px rgba(var(--color-brand-rgb), 0.2); -} - -.step-dot.current { - background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 100%); - color: var(--color-text-inverse); - box-shadow: 0 2px 6px rgba(var(--color-brand-rgb), 0.3); - animation: pulse-gentle 2s infinite; -} - -.step-dot.pending { - background: var(--color-bg-tertiary); - color: var(--color-text-secondary); - border: 1px solid var(--color-border-secondary); -} - -.step-dot.pending:hover:not(.disabled) { - background: var(--color-surface-hover); - border-color: var(--color-brand); - transform: scale(1.1); -} - -.step-dot.disabled { - opacity: 0.5; - cursor: not-allowed; - pointer-events: none; -} - -.step-number { - font-size: 0.6875rem; - font-weight: 700; - line-height: 1; -} - -.step-dot svg { - width: 0.75rem; - height: 0.75rem; -} - -/* Expandable Progress Section */ -.tutorial-progress-expanded { - border-top: 1px solid var(--color-border-primary); - padding-top: 1rem; - margin-top: 1rem; -} - -.tutorial-steps-list { - display: grid; - gap: 0.75rem; -} - -.tutorial-step-item { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.5rem; - border-radius: 0.5rem; - transition: background-color 0.2s ease; -} - -.tutorial-step-item:hover { - background: var(--color-surface-hover); -} - -.tutorial-step-item.current { - background: var(--color-hover); -} - -.step-indicator-small { - display: flex; - align-items: center; - justify-content: center; - width: 1.5rem; - height: 1.5rem; - border-radius: 50%; - flex-shrink: 0; -} - -.step-indicator-small .current-indicator, -.step-indicator-small .pending-indicator { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.625rem; - font-weight: 700; - border-radius: 50%; -} - -.step-indicator-small .current-indicator { - background: var(--color-brand); - color: var(--color-text-inverse); -} - -.step-indicator-small .pending-indicator { - background: var(--color-bg-tertiary); - color: var(--color-text-secondary); -} - -.step-info-small { - flex: 1; - display: flex; - justify-content: space-between; - align-items: center; - gap: 1rem; -} - -.step-link { - color: var(--color-text-primary); - text-decoration: none; - font-size: 0.875rem; - font-weight: 500; - transition: color 0.2s ease; -} - -.step-link:hover { - color: var(--color-brand); -} - -.step-title-disabled { - color: var(--color-text-tertiary); - font-size: 0.875rem; - font-weight: 500; -} - -.step-time-small { - color: var(--color-text-tertiary); - font-size: 0.75rem; - background: var(--color-bg-tertiary); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; -} - -/* Compact Navigation */ -.tutorial-compact-nav { - display: flex; - justify-content: space-between; - align-items: center; - gap: 0.75rem; - border-top: 1px solid var(--color-border-primary); - padding-top: 0.75rem; - margin-top: 0.75rem; -} - -/* ========================================================================== - Enhanced Progress Navigation (Legacy) - ========================================================================== */ - -/* Legacy Progress Components (for backward compatibility) */ -.tutorial-progress { - background: var(--color-surface); - border-radius: 1rem; - border: 1px solid var(--color-border-primary); - padding: 2rem; - margin: 2rem 0; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); -} - -.tutorial-progress__header { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 2rem; - flex-wrap: wrap; - gap: 1rem; -} - -.tutorial-title { - color: var(--color-text-primary); - font-size: 1.75rem; - font-weight: 700; - margin: 0; - line-height: 1.2; -} - -.tutorial-meta { - display: flex; - align-items: center; - gap: 1rem; - flex-wrap: wrap; -} - -.time-remaining { - font-size: 0.875rem; - color: var(--color-text-secondary); - background-color: var(--color-bg-tertiary); - padding: 0.5rem 1rem; - border-radius: 0.5rem; - border: 1px solid var(--color-border-primary); -} - -/* Progress Track */ -.tutorial-progress__track { - position: relative; - margin: 3rem 0; -} - -.progress-line { - position: absolute; - top: 3rem; - left: 3rem; - right: 3rem; - height: 3px; - background-color: var(--color-border-secondary); - border-radius: 2px; - z-index: 1; -} - -.progress-line::after { - content: ''; - position: absolute; - top: 0; - left: 0; - height: 100%; - background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand-2) 100%); - border-radius: 2px; - width: var(--progress-width, 0%); - transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); - box-shadow: 0 0 10px rgba(var(--color-brand-rgb), 0.3); -} - -.tutorial-steps { - display: flex; - justify-content: space-between; - align-items: flex-start; - position: relative; - z-index: 2; - gap: 1rem; -} - -.tutorial-step { - display: flex; - flex-direction: column; - align-items: center; - max-width: 200px; - text-align: center; - flex: 1; - cursor: pointer; - transition: all 0.3s ease; -} - -.tutorial-step:hover { - transform: translateY(-2px); -} - -.tutorial-step.disabled { - cursor: not-allowed; - opacity: 0.6; -} - -.tutorial-step.disabled:hover { - transform: none; -} - -/* Step Indicators */ -.step-indicator { - width: 4rem; - height: 4rem; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 1rem; - position: relative; - transition: all 0.3s ease; - font-weight: 700; - font-size: 1.1rem; - border: 3px solid transparent; -} - -.step-icon--complete { - background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 100%); - color: var(--color-text-inverse); - box-shadow: 0 4px 15px rgba(var(--color-brand-rgb), 0.3); -} - -/* Checkmark handled by SVG, no need for ::before content */ - -.step-icon--current { - background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 100%); - color: var(--color-text-inverse); - animation: pulse-gentle 2s infinite; - box-shadow: 0 4px 20px rgba(var(--color-brand-rgb), 0.4); - border-color: var(--color-brand); -} - -.step-icon--pending { - background-color: var(--color-bg-tertiary); - color: var(--color-text-secondary); - border-color: var(--color-border-secondary); -} - -.step-icon--pending:hover { - background-color: var(--color-surface-hover); - border-color: var(--color-brand); -} - -@keyframes pulse-gentle { - 0%, 100% { - transform: scale(1); - box-shadow: 0 4px 20px rgba(var(--color-brand-rgb), 0.4), 0 0 0 0 rgba(var(--color-brand-rgb), 0.4); - } - 50% { - transform: scale(1.05); - box-shadow: 0 6px 25px rgba(var(--color-brand-rgb), 0.6), 0 0 0 15px rgba(var(--color-brand-rgb), 0); - } -} - -/* Step Content */ -.step-content { - min-height: 80px; - display: flex; - flex-direction: column; - justify-content: flex-start; -} - -.step-title { - color: var(--color-text-primary); - font-size: 1rem; - font-weight: 600; - margin: 0 0 0.5rem 0; - line-height: 1.3; -} - -.step-description { - color: var(--color-text-secondary); - font-size: 0.875rem; - line-height: 1.4; - margin: 0 0 0.5rem 0; -} - -.step-time { - color: var(--color-text-tertiary); - font-size: 0.75rem; - font-weight: 500; - background-color: var(--color-bg-tertiary); - padding: 0.25rem 0.5rem; - border-radius: 0.375rem; - display: inline-block; -} - -/* Progress Actions */ -.tutorial-progress__actions { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 2rem; - padding-top: 1.5rem; - border-top: 1px solid var(--color-border-primary); - gap: 1rem; -} - -/* ========================================================================== - Interactive Content Components - ========================================================================== */ - -/* Enhanced Code Blocks - Now used by render-codeblock.html */ -.code-block-enhanced { - background: var(--color-bg-tertiary); - border-radius: 0.75rem; - border: 1px solid var(--color-border-primary); - overflow: hidden; - margin: 1rem 0; - box-shadow: var(--glass-shadow); -} - -.code-content { - background: var(--color-bg-tertiary); -} - -.code-content pre { - margin: 0; - background: transparent; -} - -.code-content code { - background: transparent; - padding: 0.75rem; - display: block; - overflow-x: auto; -} - -/* Reduce default code font size; allow override via --code-font-size */ -.code-content pre, -.code-content code { - font-size: var(--code-font-size, 0.875rem); - line-height: 1.55; -} - -.code-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem 0.75rem; - background: var(--color-surface); - border-bottom: 1px solid var(--color-border-primary); -} - -.code-language { - font-size: 0.75rem; - font-weight: 600; - color: var(--color-text-secondary); - text-transform: uppercase; - letter-spacing: 0.05em; - background-color: var(--color-bg-tertiary); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; -} - -.code-actions { - display: flex; - gap: 0.375rem; -} - -.copy-code { - position: relative; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} - -.copy-code.copied { - background-color: var(--color-brand); - border-color: var(--color-brand); - color: var(--color-text-inverse); -} - - -/* Collapsible Sections */ -.tutorial-section { - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - margin: 1.5rem 0; - overflow: hidden; - background: var(--color-surface); -} - -.section-header { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - padding: 1.25rem 1.5rem; - background: none; - border: none; - cursor: pointer; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard); - text-align: left; -} - -.section-header:hover { - background-color: var(--color-surface-hover); -} - -.section-header[aria-expanded="true"] { - border-bottom: 1px solid var(--color-border-primary); -} - -.section-title { - color: var(--color-text-primary); - font-size: 1.125rem; - font-weight: 600; - margin: 0; - line-height: 1.3; -} - -.section-chevron { - width: 1.25rem; - height: 1.25rem; - color: var(--color-text-secondary); - transition: transform 0.3s ease; -} - -.section-header[aria-expanded="true"] .section-chevron { - transform: rotate(180deg); -} - -.section-content { - padding: 0 1.5rem; - max-height: 0; - opacity: 0; - overflow: hidden; - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - max-height var(--timing-medium) var(--easing-standard), - opacity var(--timing-medium) var(--easing-standard), - padding var(--timing-medium) var(--easing-standard); - /* Tutorial-specific customization */ - --collapse-height-expanded: 2500px; - --collapse-timing: var(--timing-slow); - --collapse-easing: var(--easing-emphasized); -} - -.section-content.expanded { - max-height: var(--collapse-height-expanded, 2500px); - opacity: 1; - padding: 1.5rem; -} - -/* Step Validation */ -.step-validation { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - padding: 1.5rem; - margin: 2rem 0; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); -} - -.validation-checklist h4 { - color: var(--color-text-primary); - font-size: 1.125rem; - font-weight: 600; - margin: 0 0 1rem 0; -} - -.validation-item { - display: flex; - align-items: center; - padding: 0.75rem 0; - cursor: pointer; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - padding var(--timing-fast) var(--easing-standard); - border-radius: 0.5rem; - margin-bottom: 0.5rem; -} - -.validation-item:hover { - background-color: var(--color-surface-hover); - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.validation-checkbox { - margin-right: 1rem; - width: 1.25rem; - height: 1.25rem; - accent-color: var(--color-brand); -} - -.validation-text { - color: var(--color-text-primary); - font-weight: 500; - line-height: 1.5; -} - -.validate-step { - margin-top: 1.5rem; - width: 100%; - transition: all 0.3s ease; -} - -.validate-step:disabled { - opacity: 0.5; - cursor: not-allowed; - transform: none; -} - -/* ========================================================================== - Responsive Design - ========================================================================== */ - -@media (max-width: 1024px) { - .tutorial-overview { - grid-template-columns: 1fr; - gap: 1.5rem; - padding: 0 0.5rem; - } - - .tutorial-card { - padding: 1.5rem; - } - - .tutorial-progress { - padding: 1.5rem; - } - - .tutorial-steps { - gap: 0.75rem; - } - - .tutorial-step { - max-width: 150px; - } - - .step-indicator { - width: 3rem; - height: 3rem; - font-size: 1rem; - } -} - -@media (max-width: 768px) { - .tutorial-overview { - padding: 0; - } - - .tutorial-card { - border-radius: 0.75rem; - margin: 0 0.5rem; - } - - .tutorial-card__header { - flex-direction: column; - align-items: flex-start; - gap: 0.75rem; - } - - /* Compact Progress Mobile */ - .tutorial-progress-compact { - margin: 0.75rem 0.5rem; - padding: 0.75rem; - border-radius: 0.5rem; - } - - .tutorial-compact-header { - flex-direction: column; - align-items: stretch; - gap: 0.75rem; - } - - .tutorial-compact-meta { - justify-content: space-between; - } - - .tutorial-compact-actions { - align-self: flex-end; - } - - .tutorial-compact-nav { - flex-direction: column; - gap: 0.75rem; - } - - .tutorial-compact-nav .btn { - width: 100%; - justify-content: center; - } - - .step-dots { - gap: 0.5rem; - overflow-x: auto; - padding: 0.25rem 0; - } - - .step-dot { - width: 1.5rem; - height: 1.5rem; - flex-shrink: 0; - } - - /* Legacy tutorial progress mobile */ - .tutorial-progress { - margin: 1rem 0.5rem; - padding: 1rem; - border-radius: 0.75rem; - } - - .tutorial-progress__header { - flex-direction: column; - align-items: flex-start; - gap: 1rem; - } - - .tutorial-title { - font-size: 1.5rem; - } - - .tutorial-meta { - width: 100%; - justify-content: space-between; - } - - /* Mobile Step Layout */ - .tutorial-steps { - flex-direction: column; - gap: 1.5rem; - align-items: stretch; - } - - .tutorial-step { - flex-direction: row; - max-width: none; - text-align: left; - align-items: center; - padding: 1rem; - background-color: var(--color-surface); - border-radius: 0.75rem; - border: 1px solid var(--color-border-primary); - } - - .step-indicator { - margin-bottom: 0; - margin-right: 1rem; - flex-shrink: 0; - width: 3rem; - height: 3rem; - } - - .step-content { - min-height: auto; - flex: 1; - } - - .progress-line { - display: none; /* Hide connecting line on mobile */ - } - - .tutorial-progress__actions { - flex-direction: column; - gap: 1rem; - } - - .tutorial-progress__actions .btn { - width: 100%; - justify-content: center; - } - - /* Mobile Code Blocks */ - .code-header { - padding: 0.75rem 1rem; - flex-direction: column; - align-items: flex-start; - gap: 0.75rem; - } - - .code-actions { - width: 100%; - justify-content: flex-end; - } - - /* Mobile Sections */ - .section-header { - padding: 1rem 1.25rem; - } - - .section-content.expanded { - padding: 1rem 1.25rem 1.5rem; - } - - /* Mobile Validation */ - .step-validation { - margin: 1.5rem 0.5rem; - padding: 1.25rem; - } -} - -@media (max-width: 480px) { - .tutorial-card { - margin: 0 0.25rem; - padding: 1.25rem; - } - - .tutorial-progress { - margin: 1rem 0.25rem; - padding: 0.75rem; - } - - .tutorial-title { - font-size: 1.25rem; - } - - .tutorial-step { - padding: 0.75rem; - } - - .step-indicator { - width: 2.5rem; - height: 2.5rem; - font-size: 0.9rem; - } - - .step-title { - font-size: 0.9rem; - } - - .step-description { - font-size: 0.8rem; - } -} - -/* ========================================================================== - Dark Mode Adjustments - ========================================================================== */ - -.dark .tutorial-card { - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.dark .tutorial-card:hover { - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.4), - 0 0 20px rgba(var(--color-brand-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.dark .tutorial-progress { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); -} - -.dark .code-block-enhanced { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); -} - -.dark .tutorial-section { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); -} - -.dark .step-validation { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); -} - -/* ========================================================================== - Accessibility Enhancements - ========================================================================== */ - -.tutorial-step:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - border-radius: 0.5rem; -} - -.section-header:focus { - outline: 2px solid var(--color-brand); - outline-offset: 2px; -} - -.validation-item:focus-within { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - border-radius: 0.5rem; -} - -/* Reduced motion preferences */ -@media (prefers-reduced-motion: reduce) { - .tutorial-card, - .tutorial-step, - .step-indicator, - .progress-bar-mini__fill, - .progress-line::after { - transition: none; - } - - .step-icon--current { - animation: none; - } - - .progress-bar-mini__fill::after { - animation: none; - } -} - -/* High contrast mode support */ -@media (prefers-contrast: high) { - .tutorial-card { - border-width: 2px; - } - - .tutorial-badge { - border: 1px solid currentColor; - } - - .step-indicator { - border-width: 2px; - } -} \ No newline at end of file diff --git a/assets/css/fonts-nvidia.css b/assets/css/fonts-nvidia.css deleted file mode 100644 index bde3533..0000000 --- a/assets/css/fonts-nvidia.css +++ /dev/null @@ -1,131 +0,0 @@ -/* NVIDIA Sans - for old browsers */ -@supports not (font-variation-settings: normal) { - @font-face { - font-family: "NVIDIA"; - src: local("NVIDIA Sans Light"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/NVIDIASans_W_Lt.woff2") format("woff2"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/NVIDIASans_W_Lt.woff") format("woff"); - font-weight: 300; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: "NVIDIA"; - src: local("NVIDIA Sans Regular"), - local("NVIDIA Sans"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/NVIDIASans_W_Rg.woff2") format("woff2"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/NVIDIASans_W_Rg.woff") format("woff"); - font-weight: 400; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: "NVIDIA"; - src: local("NVIDIA Sans Medium"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/NVIDIASans_W_Md.woff2") format("woff2"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/NVIDIASans_W_Md.woff") format("woff"); - font-weight: 500; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: "NVIDIA"; - src: local("NVIDIA Sans Bold"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/NVIDIASans_W_Bd.woff2") format("woff2"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/NVIDIASans_W_Bd.woff") format("woff"); - font-weight: 700; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: "RobotoMono"; - src: local("Roboto Mono Light"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/Roboto_Mono/static/RobotoMono-Light.ttf") format("truetype"); - font-weight: 300; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: "RobotoMono"; - src: local("Roboto Mono Regular"), - local("Roboto Mono"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/Roboto_Mono/static/RobotoMono-Regular.ttf") format("truetype"); - font-weight: 400; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: "RobotoMono"; - src: local("Roboto Mono Medium"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/Roboto_Mono/static/RobotoMono-Medium.ttf") format("truetype"); - font-weight: 500; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: "RobotoMono"; - src: local("Roboto Mono Bold"), - url("https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/Roboto_Mono/static/RobotoMono-Bold.ttf") format("truetype"); - font-weight: 700; - font-style: normal; - font-display: swap; - } -} - -/* NVIDIA Sans - for modern browsers (variable fonts) */ -@supports (font-variation-settings: normal) { - @font-face { - font-family: 'NVIDIA'; - src: local('NVIDIA Sans Variable'), - local('NVIDIA Sans'), - url('https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/var/NVIDIASansVF_W_Wght.woff2') format('woff2') tech('variations'), - url('https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/var/NVIDIASansVF_W_Wght.woff2') format('woff2-variations'); - font-weight: 100 1000; - font-stretch: 25% 151%; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: 'NVIDIA'; - src: local('NVIDIA Sans Variable Italic'), - local('NVIDIA Sans Italic'), - url('https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/var/NVIDIASansVF_Wght_W_Italic.woff2') format('woff2') tech('variations'), - url('https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/nvidia-sans/GLOBAL/var/NVIDIASansVF_Wght_W_Italic.woff2') format('woff2-variations'); - font-weight: 100 1000; - font-stretch: 25% 151%; - font-style: italic; - font-display: swap; - } - - @font-face { - font-family: 'RobotoMono'; - src: local('Roboto Mono Variable'), - local('Roboto Mono'), - url('https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/Roboto_Mono/RobotoMono-VariableFont_wght.ttf') format('truetype') tech('variations'), - url('https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/Roboto_Mono/RobotoMono-VariableFont_wght.ttf') format('truetype-variations'); - font-weight: 100 1000; - font-stretch: 25% 151%; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: 'RobotoMono'; - src: local('Roboto Mono Variable Italic'), - local('Roboto Mono Italic'), - url('https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/Roboto_Mono/RobotoMono-Italic-VariableFont_wght.ttf') format('truetype') tech('variations'), - url('https://images.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/fonts/Roboto_Mono/RobotoMono-Italic-VariableFont_wght.ttf') format('truetype-variations'); - font-weight: 100 1000; - font-stretch: 25% 151%; - font-style: italic; - font-display: swap; - } -} \ No newline at end of file diff --git a/assets/css/fonts-offline.css b/assets/css/fonts-offline.css deleted file mode 100644 index 77115c6..0000000 --- a/assets/css/fonts-offline.css +++ /dev/null @@ -1,15 +0,0 @@ -/* Offline-safe font stack: avoid external font files */ -:root { - --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; -} - -html, body, input, button, textarea, select { - font-family: var(--font-sans); -} - -code, pre, kbd, samp { - font-family: var(--font-mono); -} - - diff --git a/assets/css/fonts.css b/assets/css/fonts.css deleted file mode 100644 index d32e0b5..0000000 --- a/assets/css/fonts.css +++ /dev/null @@ -1,16 +0,0 @@ -/* Rubik Variable Font */ -@font-face { - font-family: 'Rubik'; - src: url('../fonts/Rubik-VariableFont_wght.ttf') format('truetype'); - font-weight: 300 900; /* Range of weights available in the variable font */ - font-display: swap; -} - -/* Rubik Italic Variable Font */ -@font-face { - font-family: 'Rubik'; - src: url('../fonts/Rubik-Italic-VariableFont_wght.ttf') format('truetype'); - font-style: italic; - font-weight: 300 900; /* Range of weights available in the variable font */ - font-display: swap; -} diff --git a/assets/css/main.css b/assets/css/main.css index 7516cb1..746ba98 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,2 +1,123 @@ +/* + * MiloDocs v4 - Clean Foundation + * Modern CSS framework built on Tailwind utilities + semantic components + */ + @import "tailwindcss"; -@source "hugo_stats.json"; + +/* Reset and base styles */ +@layer base { + /* Basic reset */ + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + /* Typography foundation */ + html { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + line-height: 1.6; + color: rgb(15 23 42); /* slate-900 */ + } + + body { + background-color: rgb(255 255 255); /* white */ + min-height: 100vh; + } + + /* Dark mode base */ + @media (prefers-color-scheme: dark) { + html { + color: rgb(248 250 252); /* slate-50 */ + } + + body { + background-color: rgb(15 23 42); /* slate-900 */ + } + } + + /* Basic content styling */ + h1, h2, h3, h4, h5, h6 { + font-weight: 600; + line-height: 1.25; + margin-bottom: 0.5rem; + } + + h1 { font-size: 2rem; } + h2 { font-size: 1.5rem; } + h3 { font-size: 1.25rem; } + h4 { font-size: 1.125rem; } + + p { + margin-bottom: 1rem; + } + + a { + color: rgb(59 130 246); /* blue-500 */ + text-decoration: none; + } + + a:hover { + text-decoration: underline; + } + + /* Dark mode links */ + @media (prefers-color-scheme: dark) { + a { + color: rgb(96 165 250); /* blue-400 */ + } + } +} + +/* Component layer - semantic classes */ +@layer components { + /* Layout containers */ + .layout-container { + @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8; + } + + .content-container { + @apply max-w-4xl mx-auto; + } + + /* Basic button component */ + .btn { + @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm; + @apply bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500; + } + + /* Navigation component */ + .nav-link { + @apply block px-3 py-2 rounded-md text-sm font-medium; + @apply text-slate-700 hover:text-slate-900 hover:bg-slate-100; + } + + @media (prefers-color-scheme: dark) { + .nav-link { + @apply text-slate-300 hover:text-slate-100 hover:bg-slate-800; + } + } + + /* Article content */ + .article-content { + @apply prose prose-slate max-w-none; + } + + @media (prefers-color-scheme: dark) { + .article-content { + @apply prose-invert; + } + } +} + +/* Utility layer - custom utilities */ +@layer utilities { + .text-balance { + text-wrap: balance; + } + + .focus-visible-ring { + @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2; + } +} \ No newline at end of file diff --git a/assets/js/components/article/Asciinema.js b/assets/js/components/article/Asciinema.js index 4b5fcb9..11465d8 100644 --- a/assets/js/components/article/Asciinema.js +++ b/assets/js/components/article/Asciinema.js @@ -31,7 +31,7 @@ class AsciinemaEmbed extends Component { if (isOffline) { // Offline fallback: provide a link to the recording URL if known const url = el.getAttribute('data-asciinema-url') || `https://asciinema.org/a/${id}`; - el.innerHTML = `
Asciinema embed unavailable offline. Open recording when online.
`; + el.innerHTML = `
Asciinema embed unavailable offline. Open recording when online.
`; return; } const script = document.createElement('script'); diff --git a/assets/js/components/chat/ChatBubbles.js b/assets/js/components/chat/ChatBubbles.js index fc20d6b..0e68406 100644 --- a/assets/js/components/chat/ChatBubbles.js +++ b/assets/js/components/chat/ChatBubbles.js @@ -47,7 +47,7 @@ export class ChatBubbles { */ createLoadingBubble() { const bubble = document.createElement('div'); - bubble.className = 'chat-bubble bot p-2 rounded-lg text-black font-regular text-sm is-loading'; + bubble.className = 'chat-bubble chat-bubble--bot is-loading'; // Use LoadingStateManager for consistent loading display const loaderId = showLoading(bubble, { diff --git a/assets/js/utils/CopyManager.js b/assets/js/utils/CopyManager.js index e1a92f1..38777f0 100644 --- a/assets/js/utils/CopyManager.js +++ b/assets/js/utils/CopyManager.js @@ -285,8 +285,8 @@ export class CopyManager { // Update button appearance button.textContent = options.successMessage; - button.classList.add('copy-button--success', 'bg-green-600'); - button.classList.remove('copy-button--error', 'bg-red-600', 'bg-zinc-600'); + button.classList.add('copy-button--success'); + button.classList.remove('copy-button--error'); // Reset after duration setTimeout(() => { @@ -306,8 +306,8 @@ export class CopyManager { // Update button appearance button.textContent = options.errorMessage; - button.classList.add('copy-button--error', 'bg-red-600'); - button.classList.remove('copy-button--success', 'bg-green-600', 'bg-zinc-600'); + button.classList.add('copy-button--error'); + button.classList.remove('copy-button--success'); // Reset after duration setTimeout(() => { diff --git a/enterprise_html_architecture.md b/enterprise_html_architecture.md new file mode 100644 index 0000000..398ee6c --- /dev/null +++ b/enterprise_html_architecture.md @@ -0,0 +1,431 @@ +# Enterprise Technical Documentation HTML Architecture + +## Design Goals + +### Enterprise Requirements +- **Multi-format content support**: Markdown, OpenAPI specs, Jupyter notebooks, code samples, API docs +- **Accessibility compliance**: WCAG 2.1 AA standard for enterprise customers +- **Internationalization ready**: RTL support, multiple languages +- **Developer experience**: Clean markup for theming, testing, automation +- **Performance**: Semantic HTML that's fast to parse and render +- **SEO optimized**: Proper structured data and meta information + +### Content Type Support +1. **Technical Articles** - In-depth documentation, tutorials, guides +2. **API Documentation** - OpenAPI specs with interactive examples +3. **Code Documentation** - Auto-generated from source code (Sphinx, pdoc) +4. **Jupyter Notebooks** - Interactive data science documentation +5. **Reference Materials** - Glossaries, command references, object models +6. **Tutorial Series** - Step-by-step learning paths +7. **Release Notes** - Version history and changelogs + +## Core HTML Patterns + +### 1. Document Structure (baseof.html) +```html + + + + + + + + {{/* SEO and meta */}} + {{ block "head" . }}{{ end }} + {{ block "head-extra" . }}{{ end }} + + + + + + + + {{ block "site-navigation" . }}{{ end }} + +
+
+ + {{ block "breadcrumbs" . }}{{ end }} + +
+ + +
+ {{ block "content" . }}{{ end }} +
+ + +
+
+
+ +
+ {{ block "site-footer" . }}{{ end }} +
+ + {{ block "scripts" . }}{{ end }} + + +``` + +### 2. Technical Article Pattern (single.html) +```html +{{ define "content" }} +
+ +
+
+ {{ with .Params.category }} + {{ . }} + {{ end }} + + {{ with .Date }} + + {{ end }} +
+ +

{{ .Title }}

+ + {{ with .Description }} +

{{ . }}

+ {{ end }} + + {{ with .Params.author }} + + {{ end }} + + {{ if .Params.toc }} + + {{ end }} +
+ +
+ {{ .Content }} +
+ +
+ {{ with .Params.tags }} +
+ Tags: + {{ range . }} + {{ . }} + {{ end }} +
+ {{ end }} + + {{ if .Params.lastmod }} +

+ Last updated: + +

+ {{ end }} +
+
+{{ end }} +``` + +### 3. API Documentation Pattern (openapi/single.html) +```html +{{ define "content" }} +
+ +
+

{{ .Title }}

+ + {{ with .Params.api_version }} + Version {{ . }} + {{ end }} + + {{ with .Description }} +

{{ . }}

+ {{ end }} +
+ + + +
+
+

Overview

+ {{ .Content }} +
+ +
+

Endpoints

+ {{ range .Params.endpoints }} +
+ +
+ {{ .method }} + {{ .path }} +
+ +
+

{{ .description }}

+ + {{ if .parameters }} +
+

Parameters

+ + + + + + + + + + + {{ range .parameters }} + + + + + + + {{ end }} + +
NameTypeRequiredDescription
{{ .name }}{{ .type }}{{ if .required }}Yes{{ else }}No{{ end }}{{ .description }}
+
+ {{ end }} + +
+

Examples

+
+ + +
+
+ 
{{ .examples.curl }}
+
+ + +
+
+
+
+
+ {{ end }} +
+
+
+{{ end }} +``` + +### 4. Jupyter Notebook Pattern (notebook/single.html) +```html +{{ define "content" }} +
+ +
+

{{ .Title }}

+ + {{ with .Params.kernel }} + Kernel: {{ . }} + {{ end }} + +
+ + + +
+
+ +
+ {{ range .Params.cells }} +
+ + {{ if eq .cell_type "markdown" }} +
+ {{ .source | markdownify }} +
+ {{ else if eq .cell_type "code" }} +
+ 
{{ .source }}
+
+ + {{ if .outputs }} +
+ {{ range .outputs }} + {{ if eq .output_type "stream" }} + 
{{ .text }}
+ {{ else if eq .output_type "display_data" }} +
+ {{ if .data.image }} + Output visualization + {{ else if .data.text }} + 
{{ .data.text }}
+ {{ end }} +
+ {{ end }} + {{ end }} +
+ {{ end }} + {{ end }} +
+ {{ end }} +
+
+{{ end }} +``` + +### 5. Navigation Patterns + +#### Primary Navigation (sidebar-left.html) +```html + +``` + +## Component Data Patterns + +### JavaScript Component Integration +```html + +
+ + + + +
+``` + +### Accessibility Standards +- Semantic HTML5 elements for structure +- ARIA labels and roles where needed +- Focus management for dynamic content +- Keyboard navigation support +- Screen reader announcements +- Color contrast compliance +- Reduced motion preferences + +### Performance Optimizations +- Semantic markup reduces CSS specificity needs +- Clean class names for efficient selectors +- Structured data for SEO +- Progressive enhancement ready +- Mobile-first responsive structure + +## Next Steps + +1. Create these core patterns as Hugo partials +2. Build the baseof.html foundation first +3. Implement each content type systematically +4. Add comprehensive accessibility testing +5. Layer on the CSS framework after HTML is perfect diff --git a/exampleSite/assets/css/components/buttons.css b/exampleSite/assets/css/components/buttons.css deleted file mode 100644 index 9cdb5b6..0000000 --- a/exampleSite/assets/css/components/buttons.css +++ /dev/null @@ -1,328 +0,0 @@ -/* Buttons Component - Enhanced button system with NVIDIA styling */ - -/* Enhanced Button System */ -.btn { - @apply inline-flex items-center justify-center px-4 py-2 - font-medium focus:outline-none focus:ring-2 focus:ring-offset-2; - border-radius: var(--radius-button); - /* ✅ FIXED: Use animation tokens and specific properties */ - transition: - background-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard), - box-shadow var(--timing-fast) var(--easing-standard); - min-height: 2.5rem; - text-decoration: none; - cursor: pointer; - position: relative; - overflow: hidden; -} - -.btn:disabled { - @apply opacity-50 cursor-not-allowed; -} - -.btn--primary { - background-color: var(--color-brand); - color: var(--color-text-inverse); - --tw-ring-color: var(--color-brand); -} - -.btn--primary:hover:not(:disabled) { - background-color: var(--color-brand-1); - transform: var(--transform-lift-subtle); - box-shadow: var(--elevation-hover-2); -} - -.btn--secondary { - background-color: var(--color-surface); - color: var(--color-text-primary); - border: 1px solid var(--color-border-primary); - --tw-ring-color: var(--color-brand); -} - -.btn--secondary:hover:not(:disabled) { - background-color: var(--color-surface-hover); - border-color: var(--color-brand); - transform: var(--transform-lift-subtle); -} - -.btn--ghost { - background-color: transparent; - color: var(--color-text-secondary); - --tw-ring-color: var(--color-brand); -} - -.btn--ghost:hover:not(:disabled) { - background-color: var(--color-surface-hover); - color: var(--color-text-primary); -} - -.btn--danger { - background-color: var(--color-brand-7); - color: var(--color-text-inverse); - --tw-ring-color: var(--color-brand-7); -} - -.btn--danger:hover:not(:disabled) { - /* background-color: #dc2626; */ - background-color: var(--feedback-error); - transform: var(--transform-lift-subtle); -} - -.btn--sm { - /* @apply px-3 py-1 text-sm; */ - @apply text-sm; - min-height: 2rem; - min-width: 2rem; - padding: 0.375rem 0.5rem; /* tighter, more square */ -} - -.btn--lg { - @apply px-6 py-3 text-lg; - min-height: 3rem; -} - -.btn__icon { - /* @apply w-4 h-4 mr-2; */ - width: 1rem; - height: 1rem; - margin-right: 0.375rem; - display: inline-block; - vertical-align: middle; -} - -/* Icon-only small buttons: remove right margin for centering */ -.btn--sm .btn__icon:only-child { - margin-right: 0; -} - -.btn__icon--right { - @apply w-4 h-4 ml-2 mr-0; -} - -/* Enhanced loading state */ -.btn--loading { - @apply opacity-75 cursor-wait; -} - -.btn--loading::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 1rem; - height: 1rem; - margin: -0.5rem 0 0 -0.5rem; - border: 2px solid transparent; - border-top-color: currentColor; - border-radius: 50%; - animation: spin 1s linear infinite; -} - -/* Topbar Button Component */ -.topbar__button { - position: relative; - padding: 0.5rem; - border-radius: var(--radius-lg); - min-width: 2.25rem; - min-height: 2.25rem; - background-color: var(--color-surface); - border: 1px solid var(--color-border-primary); - color: var(--color-text-secondary); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; -} - -.topbar__button::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: radial-gradient(circle at center, rgba(var(--color-brand-rgb), 0.1) 0%, transparent 70%); - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} - -.topbar__button:hover { - background-color: var(--color-surface-hover); - border-color: var(--color-brand); - color: var(--color-text-primary); - transform: var(--transform-lift-subtle); - /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--elevation-hover-2); -} - -.topbar__button:hover::before { - opacity: 1; -} - -.topbar__button:active { - transform: translateY(0); - /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--elevation-1); -} - -.topbar__button img { - width: 1.125rem; - height: 1.125rem; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - filter: brightness(0.8); - flex-shrink: 0; -} - -.topbar__button:hover img { - filter: brightness(1); - transform: scale(1.1); -} - -/* Legacy toggle-btn support for backward compatibility */ -.toggle-btn { - position: relative; - padding: 0.5rem; - border-radius: var(--radius-lg); - min-width: 2.25rem; - min-height: 2.25rem; - background-color: var(--color-surface); - border: 1px solid var(--color-border-primary); - color: var(--color-text-secondary); - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - --tw-ring-color: var(--color-brand); -} - -.toggle-btn:focus { - outline: 2px solid transparent; - outline-offset: 2px; - box-shadow: 0 0 0 2px var(--color-brand); -} - -.toggle-btn::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: radial-gradient( - circle at center, - rgba(var(--color-brand-rgb), 0.1) 0%, - transparent 70% - ); - opacity: 0; - transition: opacity var(--timing-fast) var(--easing-standard); - pointer-events: none; -} - -.toggle-btn:hover { - background-color: var(--color-surface-hover); - border-color: var(--color-brand); - color: var(--color-text-primary); - transform: var(--transform-lift-subtle); - /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--elevation-hover-2); -} - -.toggle-btn:hover::before { - opacity: 1; -} - -.toggle-btn:active { - transform: translateY(0); - /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ - box-shadow: var(--elevation-1); -} - -.toggle-btn--active { - background-color: var(--color-brand); - color: var(--color-text-inverse); - border-color: var(--color-brand); -} - -.toggle-btn--active:hover { - background-color: var(--color-brand-1); - color: var(--color-text-inverse); -} - -.toggle-btn img { - width: 1.125rem !important; /* Properly sized icons */ - height: 1.125rem !important; - /* ✅ FIXED: Specific properties for better performance */ - transition: - background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - filter: brightness(0.8); - flex-shrink: 0; /* Prevent icon compression */ -} - -.toggle-btn:hover img { - filter: brightness(1); - transform: scale(1.1); -} - -.toggle-btn--active img { - filter: brightness(1) invert(1); -} - -/* Button Ripple Effects */ -.ripple { - position: absolute !important; - border-radius: 50%; - background: rgba(255, 255, 255, 0.3); - transform: scale(0); - /* ✅ FIXED: Use animation tokens for ripple effect */ - animation: ripple-animation var(--timing-slow) linear; - pointer-events: none; - z-index: 1; - /* Ensure it doesn't affect layout */ - top: 0; - left: 0; - width: 0; - height: 0; -} - -.dark .ripple { - background: rgba(255, 255, 255, 0.2); -} - -/* ✅ KEYFRAME: Ripple animation using animation tokens */ -@keyframes ripple-animation { - to { - transform: scale(4); - opacity: var(--opacity-hidden); - } -} - -/* Ensure buttons have proper positioning for ripple containment */ -button, .btn { - position: relative; - overflow: hidden; -} \ No newline at end of file diff --git a/exampleSite/config/_default/hugo.yaml b/exampleSite/config/_default/hugo.yaml index 65b2450..e5fc5b5 100644 --- a/exampleSite/config/_default/hugo.yaml +++ b/exampleSite/config/_default/hugo.yaml @@ -20,22 +20,6 @@ imaging: build: useResourceCacheWhen: "fallback" writeStats: true - buildStats: - enable: true - cachebusters: - - source: 'assets/notwatching/hugo_stats\.json' - target: 'css' - - source: '(postcss|tailwind)\.config\.js' - target: 'css' - -# Module configuration for TailwindCSS v4 Hugo integration -module: - mounts: - - source: 'assets' - target: 'assets' - - disableWatch: true - source: 'hugo_stats.json' - target: 'assets/notwatching/hugo_stats.json' ## Misc enableGitInfo: true diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index 10655e6..9e339e7 100644 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -15,4 +15,4 @@ cascade: {{%prod%}} is a [Hugo](https://gohugo.io/) theme made for **documentation engineers** and **technical writers**, by one. - {{}} \ No newline at end of file + {{}} \ No newline at end of file diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index e0a8221..8e94ae9 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -4,7 +4,6 @@ "a", "article", "aside", - "blockquote", "body", "br", "button", @@ -18,23 +17,19 @@ "dl", "dt", "em", + "figure", "footer", "form", "h1", "h2", "h3", "h4", - "h5", - "h6", "head", "header", "hr", "html", "img", - "input", - "label", "li", - "line", "link", "main", "meta", @@ -42,9 +37,7 @@ "ol", "p", "path", - "polyline", "pre", - "rect", "script", "section", "span", @@ -64,77 +57,36 @@ "ul" ], "classes": [ - "-translate-x-full", - "2xl:grid-cols-3", - "2xl:max-w-5xl", - "2xl:max-w-7xl", - "2xl:px-12", "absolute", - "active", + "action-icon", + "action-text", "admonition", "admonition-title", - "animate-spin", - "antialiased", - "api-endpoint", - "api-endpoint-breadcrumb", - "api-endpoint-content", - "api-endpoint-groups", - "api-endpoint-header", - "api-endpoint-item", - "api-endpoint-path", - "api-overview", - "api-tag", - "api-tag-breadcrumb", - "api-tag-content", - "api-tag-description", - "api-tag-header", + "alternative-link", + "article-author", "article-content", + "article-date", "article-description", + "article-footer", "article-header", - "article-header__actions", - "article-header__copy-arrow", - "article-header__copy-dropdown", - "article-header__copy-dropdown-content", - "article-header__copy-icon", - "article-header__copy-page", - "article-header__copy-text", - "article-header__copy-toggle", - "article-header__metadata-panel", - "article-header__navigation", - "article-next-prev__link", - "article-next-prev__link--disabled", + "article-link", + "article-meta", + "article-modified", + "article-pagination", + "article-reading-time", + "article-status-warnings", + "article-summary", + "article-title", "ask-ai", - "badge-label", - "bg-bg-primary", - "bg-black", - "bg-brand", - "bg-opacity-50", - "bg-surface", - "bg-yellow-50", - "bg-zinc-100", "block", - "border", - "border-4", - "border-border-primary", - "border-brand", - "border-dotted", - "border-gray-100", - "border-gray-200", - "border-opacity-20", - "border-t", - "border-t-transparent", - "border-yellow-200", - "border-zinc-200", "bottom-[9px]", - "breadcrumb", + "breadcrumb-current", + "breadcrumb-item", + "breadcrumb-item--current", + "breadcrumb-link", + "breadcrumb-list", "breadcrumb-separator", - "breadcrumb__current", - "breadcrumb__current--clickable", - "breadcrumb__item", - "breadcrumb__link", - "breadcrumb__list", - "breadcrumb__metadata-icon", - "breadcrumb__separator", + "breadcrumbs", "btn", "btn--ghost", "btn--primary", @@ -143,11 +95,15 @@ "btn-compact", "btn__icon", "btn__icon--right", - "card", - "card--endpoint-group", - "card--endpoint-summary", - "card--resource", - "card--tile", + "card-action", + "card-content", + "card-date", + "card-footer", + "card-header", + "card-link", + "card-meta", + "card-summary", + "card-title", "caution", "chat", "chat-assistant-disclaimer-text", @@ -160,250 +116,156 @@ "chat__header-icon", "chat__input", "chat__messages", - "chevron", - "child-link-item", - "child-link-pill", - "child-links-container", - "child-links-list", "class", + "close-icon", "code-actions", "code-block-enhanced", "code-content", - "code-example", - "code-example-header", - "code-example-title", - "code-examples", "code-header", "code-language", - "code-tab", - "code-tab--active", - "code-tab-panel", - "code-tab-panel--active", - "code-tabs-content", - "code-tabs-nav", "collapse", - "collapse__body", - "collapse__body-content", - "collapse__content-wrapper", - "collapse__description", - "collapse__header", - "collapse__icon", - "collapse__icon-wrapper", - "collapse__title", + "collapse--default", + "collapse-content", + "collapse-description", + "collapse-header-content", + "collapse-icon", + "collapse-indicator", + "collapse-inner", + "collapse-summary", + "collapse-title", + "collapse-toggle", "completed", - "component-details", - "component-header", - "component-icon", - "component-item", - "component-name", - "component-toggle", - "component-type", - "components-list", - "components-section", - "components-section-title", - "container", - "copy-button", + "content-layout", + "content-nav", + "content-nav--primary", + "content-nav--secondary", + "content-primary", "copy-code", "copy-icon", - "copy-page-menu-item", - "copy-page-section-header", - "copy-page-separator", + "csv-action", + "csv-action--export", + "csv-action--fullscreen", + "csv-data-cell", + "csv-data-row", + "csv-header-row", + "csv-rows", + "csv-source", + "csv-table", + "csv-table-actions", + "csv-table-body", + "csv-table-container", + "csv-table-figure", + "csv-table-head", + "csv-table-header", + "csv-table-meta", "current", "current-indicator", "current-step-title", - "cursor-pointer", - "dark", - "dark:bg-gray-800", - "dark:bg-yellow-900/20", - "dark:border-gray-600", - "dark:border-gray-700", - "dark:border-yellow-800", - "dark:border-zinc-800", - "dark:hover:bg-gray-700", - "dark:text-gray-200", - "dark:text-gray-400", - "dark:text-yellow-200", - "dark:text-yellow-300", "desc", + "direction-icon", + "direction-text", "disabled", "disabled:cursor-not-allowed", "disabled:opacity-50", "document", "docutils", "duration-200", - "duration-300", - "duration-500", - "ease-in-out", - "endpoint-count", - "endpoint-details", - "endpoint-groups-grid", - "endpoint-item", - "endpoint-method-path", - "endpoint-path", - "endpoint-section", - "endpoint-summary-description", - "endpoint-summary-header", - "endpoint-summary-info", - "endpoint-title-section", - "endpoints-list", + "empty-state", + "error-action", + "error-action--primary", + "error-action--secondary", + "error-actions", + "error-code", + "error-content", + "error-description", + "error-header", + "error-help", + "error-help-list", + "error-help-title", + "error-nav-card", + "error-nav-card-description", + "error-nav-card-title", + "error-nav-grid", + "error-nav-title", + "error-navigation", + "error-page", + "error-title", + "error-visual", "expand-progress", + "featured-sections", + "featured-sections-title", "first", - "fixed", "flex", "flex-1", "flex-col", - "flex-grow", - "flex-shrink-0", - "focus-ring", "focus:outline-none", "font-bold", - "font-brand", - "font-light", - "font-medium", "font-semibold", + "footer-bottom", + "footer-content", + "footer-copyright", + "footer-section", + "footer-section--primary", + "footer-section-title", "frame-all", "gap-1", "gap-2", "gap-3", "gap-4", - "gap-6", - "glossary-entry", - "grid", + "glossary-breadcrumbs", "grid-all", - "grid-cols-1", - "grid-cols-[repeat(auto-fit,minmax(280px,1fr))]", "group", "group-hover:inline", - "group-hover:opacity-100", - "group-open:rotate-90", "grow", - "h-10", - "h-16", - "h-3", "h-3.5", "h-4", "h-5", - "h-6", "h-7", - "h-[calc(100vh-4rem)]", "h-[calc(100vh-5rem)]", - "h-[calc(100vh-6rem)]", - "h-full", - "h-screen", "halign-left", + "header-actions", + "hero-content", + "hero-description", + "hero-section", + "hero-title", "hidden", - "hide-scrollbar", "highlight", - "hit-target", - "hover:bg-gray-50", - "hover:border-brand", - "hover:opacity-100", - "hover:text-brand", - "http-method-badge", - "http-method-badge--get", + "homepage", "icon", "ident", - "inset-0", "items-center", "items-end", - "items-start", "justify-between", "justify-center", - "justify-end", "last", - "layout-density--comfortable", - "layout-density--compact", - "layout-shell", - "leading-relaxed", - "leading-tight", - "left-0", - "left-4", - "lg:grid-cols-2", - "lg:grid-cols-3", - "lg:mt-0", - "line-clamp-2", - "line-clamp-3", - "list-disc", - "list-inside", - "list-none", - "m-4", - "max-w-3xl", - "max-w-6xl", - "mb-1", - "mb-2", - "mb-3", - "mb-4", - "mb-6", - "md:block", - "md:flex-1", - "md:flex-row", - "md:gap-5", - "md:grid-cols-2", - "md:mb-0", - "md:pt-4", - "md:px-0", - "md:relative", - "md:translate-x-0", - "md:w-32", - "media-type-label", - "metadata", - "metadata__flow", - "metadata__icon", - "metadata__item", - "metadata__item--secondary", - "method-badge", - "method-badge--get", - "min-w-0", - "ml-1", + "layout-container", "ml-2", - "ml-3", - "ml-4", - "mr-2", - "mr-3", - "mt-1", - "mt-2", + "mobile-nav-icon", + "mobile-nav-overlay", + "mobile-nav-toggle", "mt-4", - "mt-6", - "mt-8", - "mx-2", "mx-8", - "mx-auto", - "my-1", - "my-10", "my-4", "name", - "nested-content", - "no-js", - "not-prose", + "nav-children", + "nav-children--collapsed", + "nav-item", + "nav-item-content", + "nav-link", + "nav-link--current", + "nav-list", + "nav-list--level-1", + "nav-list--level-2", + "nav-list--level-3", + "nav-list--level-4", + "nav-text", + "nav-toggle", + "nav-toggle-icon", + "nav-tree", + "nav-version", + "nav-version-label", + "nav-version-number", "note", - "notebook-cell", - "notebook-cell--code", - "notebook-cell--hidden", - "notebook-cell--markdown", - "notebook-cell-wrapper", - "notebook-cell__header", - "notebook-cell__markdown-content", - "notebook-cell__number", - "notebook-cell__output", - "notebook-cell__output--execute-result", - "notebook-cell__output--stream", - "notebook-cell__outputs", - "notebook-cell__status", - "notebook-cell__status--executed", - "notebook-cell__status--pending", - "notebook-cell__text-output", - "notebook-cell__type", - "notebook-cell__type-icon", - "notebook-cell__type-text", - "notebook__actions", - "notebook__cell-counter", - "notebook__cells", - "notebook__launch", - "notebook__launch-arrow", - "notebook__launch-dropdown", - "notebook__launch-toggle", - "notebook__nav-btn", - "notebook__toolbar", "notice", "notice--danger", "notice--info", @@ -412,180 +274,135 @@ "notice--snack", "notice--tip", "notice--warning", - "notice__container", - "notice__content", - "notice__icon", - "notice__icon-wrapper", - "notice__text", - "notice__title", - "object-model__chevron", - "object-model__dash", - "object-model__description", - "object-model__details", - "object-model__field", - "object-model__group", - "object-model__groups", - "object-model__header", - "object-model__heading", - "object-model__heading-badge", - "object-model__intro", - "object-model__intro-text", - "object-model__item", - "object-model__list", - "object-model__name", - "object-model__option-item", - "object-model__option-key", - "object-model__option-value", - "object-model__options", - "object-model__row", - "object-model__section", - "object-model__subheading", - "object-model__summary", - "object-model__summary-row", - "object-model__title", - "opacity-40", - "opacity-60", - "opacity-70", - "openapi-components", - "openapi-content", - "openapi-header", - "openapi-header__badge", - "openapi-header__badge--maturity", - "openapi-header__badge--type", - "openapi-header__badge--version", - "openapi-header__description", - "openapi-header__info", - "openapi-header__meta", - "openapi-header__title", - "openapi-overview", - "openapi-spec", - "openapi-version", + "notice-container", + "notice-content", + "notice-icon", + "notice-icon--danger", + "notice-icon--info", + "notice-icon--note", + "notice-icon--security", + "notice-icon--tip", + "notice-icon--warning", + "notice-icon-wrapper", + "notice-text", + "notice-title", "overflow-y-auto", - "overview-content", - "overview-doc-link", - "overview-doc-link__arrow", - "overview-doc-link__content", - "overview-doc-link__description", - "overview-doc-link__icon", - "overview-doc-link__title", - "overview-documentation", - "overview-documentation__grid", - "p-1", "p-1.5", - "p-2", - "p-3", "p-4", - "p-5", - "page-container", - "page-content", + "page-action", + "page-action-icon", + "page-actions", + "page-actions-list", + "page-actions-title", + "page-chat", + "page-chat-container", + "page-chat-title", + "page-meta", + "page-meta-item", + "page-meta-label", + "page-meta-list", + "page-meta-title", + "page-meta-value", + "page-navigation", + "page-toc", + "page-toc-content", + "page-toc-title", + "pagination-alternatives", + "pagination-container", + "pagination-content", + "pagination-direction", + "pagination-item", + "pagination-item--next", + "pagination-item--prev", + "pagination-item--section", + "pagination-link", + "pagination-link--disabled", + "pagination-section-link", + "pagination-summary", + "pagination-title", "pending", "pending-indicator", - "pl-0", - "pl-2", - "pr-1", "pr-12", - "pr-2", + "preview-article-link", + "primary-nav", + "primary-nav-close", + "primary-nav-content", + "primary-nav-footer", + "primary-nav-header", + "primary-nav-title", "progress-fill", "progress-percentage", "progress-track", - "properties-list", - "property-description", - "property-format", - "property-header", - "property-item", - "property-item--required", - "property-meta", - "property-name", - "property-required", - "property-type", - "prose", - "pt-2", - "pt-4", - "px-3", "px-3.5", - "px-4", - "py-1", - "py-2", "py-2.5", "py-4", - "py-8", + "quicklink-action", + "quicklink-actions", + "quicklink-card", + "quicklink-content", + "quicklink-description", + "quicklink-header", + "quicklink-icon", + "quicklink-title", "quicklinks", - "quicklinks__actions", - "quicklinks__description", - "quicklinks__grid", - "quicklinks__header", - "quicklinks__icon", - "quicklinks__item", - "quicklinks__link", - "quicklinks__title", + "quicklinks-grid", + "quicklinks-header", + "quicklinks-title", + "read-more-link", + "recent-updates", + "recent-updates-footer", + "recent-updates-title", + "related-article", + "related-card", "related-content", - "related-content__card", - "related-content__collapse-toggle", - "related-content__container", - "related-content__header", - "related-content__item", - "related-content__view", - "related-content__view--cards", - "related-content__view--compact", - "related-content__view-toggle", + "related-content-container", + "related-content-controls", + "related-content-footer", + "related-content-header", + "related-content-title", + "related-grid", + "related-item", + "related-list", + "related-view", + "related-view--grid", + "related-view--list", "relative", "resize-none", - "response-content", - "response-description", - "response-details", - "response-header", - "response-item", - "response-media-type", - "response-schema", - "response-status", - "response-toggle", - "responses-container", - "right-0", "right-2.5", "rounded-2xl", - "rounded-full", "rounded-lg", - "rounded-md", "save-progress", - "schema-container", - "schema-header", - "schema-properties", - "schema-type-info", "scroll-anchor", - "section-chevron", - "section-content", + "section-card", + "section-card-articles", + "section-card-content", + "section-card-count", + "section-card-description", + "section-card-icon", + "section-card-preview", + "section-card-preview-title", + "section-card-title", + "section-count", + "section-grid", "section-header", + "section-icon", + "section-page", + "section-text", "section-title", - "shadow-lg", "shadow-sm", - "shrink-0", - "sidebar", - "sidebar__chevron", - "sidebar__close-button", - "sidebar__expander", - "sidebar__header", - "sidebar__icon", - "sidebar__item", - "sidebar__item--level-1", - "sidebar__item--level-2", - "sidebar__item--level-3", - "sidebar__item--level-4", - "sidebar__link", - "sidebar__link--active", - "sidebar__link-tree", - "sidebar__text", - "sidebar__toggle", + "sidebar-right-container", + "site-branding", + "site-footer", + "site-footer-container", + "site-header", + "site-header-container", + "site-logo-link", + "site-main", + "site-title", + "site-title-group", + "skip-link", "source", - "space-x-1", - "space-x-2", - "space-x-3", - "space-y-1", - "space-y-2", - "space-y-3", "sr-only", - "status-code", - "status-code--2xx", - "status-code--dxx", "step-counter", "step-dot", "step-dots", @@ -595,59 +412,29 @@ "step-number", "step-time-small", "step-title-disabled", - "step-validation", "sticky", "stretch", - "table", - "table--dense", - "table--glass", - "table--rounded", - "table--zebra", - "table__body", - "table__cell", - "table__cell--nowrap", - "table__container", - "table__container--rounded", - "table__head", - "table__row", + "tab-content", + "tab-content-header", + "tab-content-title", + "tab-item", "tableblock", - "tabs", - "tabs__button", - "tabs__content", - "tabs__nav", - "tabs__panel", - "tag-endpoints", - "text-2xl", - "text-3xl", - "text-base", + "technical-article", "text-center", "text-current", - "text-decoration-none", - "text-gray-500", - "text-gray-700", - "text-left", - "text-lg", - "text-right", "text-sm", - "text-text-primary", - "text-text-secondary", - "text-white", - "text-xl", "text-xs", - "text-yellow-700", - "text-yellow-800", + "theme-toggle", + "theme-toggle-icon", + "theme-toggle-icon--dark", + "theme-toggle-icon--light", "time-estimate", "tip", "title", + "title-icon", "toc", - "toc-link", - "toc-link--h1", - "toc__nav", - "top-0", - "top-10", + "toggle-icon", "top-16", - "top-20", - "top-4", "topbar", "topbar__button", "topbar__button--danger", @@ -657,14 +444,7 @@ "topbar__logo-link", "topbar__navigation", "topbar__search", - "tracking-wide", - "transform", - "transition", "transition-all", - "transition-colors", - "transition-opacity", - "transition-transform", - "truncate", "tutorial-compact-actions", "tutorial-compact-breadcrumb", "tutorial-compact-header", @@ -675,47 +455,27 @@ "tutorial-progress-bar", "tutorial-progress-compact", "tutorial-progress-expanded", - "tutorial-section", - "tutorial-step-content", "tutorial-step-item", - "tutorial-step-wrapper", "tutorial-steps-list", - "type-badge", - "type-badge--[array]", - "type-badge--[integer]", - "type-badge--[object]", - "type-badge--[string]", "underline", - "uppercase", - "validate-step", - "validation-checkbox", - "validation-checklist", - "validation-item", - "validation-text", + "update-card", + "update-card-meta", + "update-card-summary", + "update-card-title", + "update-section", + "updates-grid", "valign-top", - "w-1", - "w-3", + "version-error", + "version-number", + "view-all-link", + "view-toggle", + "view-toggle--active", "w-3.5", "w-4", "w-5", - "w-56", - "w-6", "w-7", - "w-80", "w-full", - "warning", - "xl:block", - "xl:h-[calc(100vh-4rem)]", - "xl:hidden", - "xl:max-w-4xl", - "xl:px-8", - "xl:sticky", - "xl:top-16", - "xl:translate-x-0", - "xl:w-auto", - "z-10", - "z-40", - "z-50" + "warning" ], "ids": [ "-notebook-component-split-test", @@ -729,586 +489,154 @@ "4-production-vs-development", "5-init-repo", "6-deploy-locally", - "GET-////", - "GET-////-details", "TableOfContents", - "a", - "a-note-on-ignore_conversion_failuretrue", "add-algolia-search-lite-script", "add-tailwindcss-before-you-start", "add-tailwindcss-how-to-add-tailwindcss-to-a-hugo-theme", "advanced-features", - "analyze-image-size", "api-documentation", "args", - "article-container", - "article-metadata-panel", - "articleContent", - "articleSummarizationContainer", - "articleSummaryOutput", "asciihtml-before-you-start", "asciihtml-examples", "asciihtml-source-code", "asciihtml-table", - "async-openai-client-usage", "author-tips", "available-variants", "aws-amplify", - "az", - "b", "before-you-start", - "best-practices-summary", "blah-this-is-an-embedded-section", "blocks-you-can-override", "body-attributes", - "build-the-container-image", - "building-and-containerizing-applications-analyze-image-size", - "building-and-containerizing-applications-best-practices-summary", - "building-and-containerizing-applications-build-the-container-image", - "building-and-containerizing-applications-container-resource-usage", - "building-and-containerizing-applications-create-dockerignore", - "building-and-containerizing-applications-create-packagejson", - "building-and-containerizing-applications-create-tests", - "building-and-containerizing-applications-create-the-application-structure", - "building-and-containerizing-applications-create-the-server-application", - "building-and-containerizing-applications-dockerfile-optimization", "building-and-containerizing-applications-overview", - "building-and-containerizing-applications-performance-testing", - "building-and-containerizing-applications-scan-for-vulnerabilities", - "building-and-containerizing-applications-security-best-practices", - "building-and-containerizing-applications-security-checklist", - "building-and-containerizing-applications-step-1-create-a-sample-web-application", - "building-and-containerizing-applications-step-2-create-an-optimized-dockerfile", - "building-and-containerizing-applications-step-3-build-and-test-your-container", - "building-and-containerizing-applications-step-4-optimize-your-images", - "building-and-containerizing-applications-step-5-container-security-best-practices", - "building-and-containerizing-applications-step-6-create-docker-compose-for-development", - "building-and-containerizing-applications-test-the-container-locally", - "building-and-containerizing-applications-test-with-docker-compose", - "building-and-containerizing-applications-testing-and-validation", - "building-and-containerizing-applications-use-docker-buildx-for-advanced-builds", - "building-and-containerizing-applications-whats-next", "building-for-production", - "built-in-sdg-pipelines", - "c", - "cell-code-11", - "cell-code-11-body", - "cell-code-11-code", - "cell-code-11-header", - "cell-code-13", - "cell-code-13-body", - "cell-code-13-code", - "cell-code-13-header", - "cell-code-15", - "cell-code-15-body", - "cell-code-15-code", - "cell-code-15-header", - "cell-code-17", - "cell-code-17-body", - "cell-code-17-code", - "cell-code-17-header", - "cell-code-19", - "cell-code-19-body", - "cell-code-19-code", - "cell-code-19-header", - "cell-code-2", - "cell-code-2-body", - "cell-code-2-code", - "cell-code-2-header", - "cell-code-22", - "cell-code-22-body", - "cell-code-22-code", - "cell-code-22-header", - "cell-code-26", - "cell-code-26-body", - "cell-code-26-code", - "cell-code-26-header", - "cell-code-28", - "cell-code-28-body", - "cell-code-28-code", - "cell-code-28-header", - "cell-code-30", - "cell-code-30-body", - "cell-code-30-code", - "cell-code-30-header", - "cell-code-32", - "cell-code-32-body", - "cell-code-32-code", - "cell-code-32-header", - "cell-code-34", - "cell-code-34-body", - "cell-code-34-code", - "cell-code-34-header", - "cell-code-36", - "cell-code-36-body", - "cell-code-36-code", - "cell-code-36-header", - "cell-code-38", - "cell-code-38-body", - "cell-code-38-code", - "cell-code-38-header", - "cell-code-4", - "cell-code-4-body", - "cell-code-4-code", - "cell-code-4-header", - "cell-code-40", - "cell-code-40-body", - "cell-code-40-code", - "cell-code-40-header", - "cell-code-41", - "cell-code-41-body", - "cell-code-41-code", - "cell-code-41-header", - "cell-code-43", - "cell-code-43-body", - "cell-code-43-code", - "cell-code-43-header", - "cell-code-45", - "cell-code-45-body", - "cell-code-45-code", - "cell-code-45-header", - "cell-code-48", - "cell-code-48-body", - "cell-code-48-code", - "cell-code-48-header", - "cell-code-5", - "cell-code-5-body", - "cell-code-5-code", - "cell-code-5-header", - "cell-code-50", - "cell-code-50-body", - "cell-code-50-code", - "cell-code-50-header", - "cell-code-52", - "cell-code-52-body", - "cell-code-52-code", - "cell-code-52-header", - "cell-code-54", - "cell-code-54-body", - "cell-code-54-code", - "cell-code-54-header", - "cell-code-56", - "cell-code-56-body", - "cell-code-56-code", - "cell-code-56-header", - "cell-code-58", - "cell-code-58-body", - "cell-code-58-code", - "cell-code-58-header", - "cell-code-60", - "cell-code-60-body", - "cell-code-60-code", - "cell-code-60-header", - "cell-code-64", - "cell-code-64-body", - "cell-code-64-code", - "cell-code-64-header", - "cell-code-66", - "cell-code-66-body", - "cell-code-66-code", - "cell-code-66-header", - "cell-code-67", - "cell-code-67-body", - "cell-code-67-code", - "cell-code-67-header", - "cell-code-7", - "cell-code-7-body", - "cell-code-7-code", - "cell-code-7-header", - "cell-code-70", - "cell-code-70-body", - "cell-code-70-code", - "cell-code-70-header", - "cell-code-71", - "cell-code-71-body", - "cell-code-71-code", - "cell-code-71-header", - "cell-code-74", - "cell-code-74-body", - "cell-code-74-code", - "cell-code-74-header", - "cell-code-76", - "cell-code-76-body", - "cell-code-76-code", - "cell-code-76-header", - "cell-code-78", - "cell-code-78-body", - "cell-code-78-code", - "cell-code-78-header", - "cell-code-80", - "cell-code-80-body", - "cell-code-80-code", - "cell-code-80-header", - "cell-code-81", - "cell-code-81-body", - "cell-code-81-code", - "cell-code-81-header", - "cell-code-83", - "cell-code-83-body", - "cell-code-83-code", - "cell-code-83-header", - "cell-code-84", - "cell-code-84-body", - "cell-code-84-code", - "cell-code-84-header", - "cell-code-87", - "cell-code-87-body", - "cell-code-87-code", - "cell-code-87-header", - "cell-code-88", - "cell-code-88-body", - "cell-code-88-code", - "cell-code-88-header", - "cell-code-9", - "cell-code-9-body", - "cell-code-9-code", - "cell-code-9-header", - "cell-code-90", - "cell-code-90-body", - "cell-code-90-code", - "cell-code-90-header", - "cell-code-91", - "cell-code-91-body", - "cell-code-91-code", - "cell-code-91-header", - "cell-markdown-0", - "cell-markdown-0-body", - "cell-markdown-0-header", - "cell-markdown-1", - "cell-markdown-1-body", - "cell-markdown-1-header", - "cell-markdown-10", - "cell-markdown-10-body", - "cell-markdown-10-header", - "cell-markdown-12", - "cell-markdown-12-body", - "cell-markdown-12-header", - "cell-markdown-14", - "cell-markdown-14-body", - "cell-markdown-14-header", - "cell-markdown-16", - "cell-markdown-16-body", - "cell-markdown-16-header", - "cell-markdown-18", - "cell-markdown-18-body", - "cell-markdown-18-header", - "cell-markdown-20", - "cell-markdown-20-body", - "cell-markdown-20-header", - "cell-markdown-21", - "cell-markdown-21-body", - "cell-markdown-21-header", - "cell-markdown-23", - "cell-markdown-23-body", - "cell-markdown-23-header", - "cell-markdown-24", - "cell-markdown-24-body", - "cell-markdown-24-header", - "cell-markdown-25", - "cell-markdown-25-body", - "cell-markdown-25-header", - "cell-markdown-27", - "cell-markdown-27-body", - "cell-markdown-27-header", - "cell-markdown-29", - "cell-markdown-29-body", - "cell-markdown-29-header", - "cell-markdown-3", - "cell-markdown-3-body", - "cell-markdown-3-header", - "cell-markdown-31", - "cell-markdown-31-body", - "cell-markdown-31-header", - "cell-markdown-33", - "cell-markdown-33-body", - "cell-markdown-33-header", - "cell-markdown-35", - "cell-markdown-35-body", - "cell-markdown-35-header", - "cell-markdown-37", - "cell-markdown-37-body", - "cell-markdown-37-header", - "cell-markdown-39", - "cell-markdown-39-body", - "cell-markdown-39-header", - "cell-markdown-42", - "cell-markdown-42-body", - "cell-markdown-42-header", - "cell-markdown-44", - "cell-markdown-44-body", - "cell-markdown-44-header", - "cell-markdown-46", - "cell-markdown-46-body", - "cell-markdown-46-header", - "cell-markdown-47", - "cell-markdown-47-body", - "cell-markdown-47-header", - "cell-markdown-49", - "cell-markdown-49-body", - "cell-markdown-49-header", - "cell-markdown-51", - "cell-markdown-51-body", - "cell-markdown-51-header", - "cell-markdown-53", - "cell-markdown-53-body", - "cell-markdown-53-header", - "cell-markdown-55", - "cell-markdown-55-body", - "cell-markdown-55-header", - "cell-markdown-57", - "cell-markdown-57-body", - "cell-markdown-57-header", - "cell-markdown-59", - "cell-markdown-59-body", - "cell-markdown-59-header", - "cell-markdown-6", - "cell-markdown-6-body", - "cell-markdown-6-header", - "cell-markdown-61", - "cell-markdown-61-body", - "cell-markdown-61-header", - "cell-markdown-62", - "cell-markdown-62-body", - "cell-markdown-62-header", - "cell-markdown-63", - "cell-markdown-63-body", - "cell-markdown-63-header", - "cell-markdown-65", - "cell-markdown-65-body", - "cell-markdown-65-header", - "cell-markdown-68", - "cell-markdown-68-body", - "cell-markdown-68-header", - "cell-markdown-69", - "cell-markdown-69-body", - "cell-markdown-69-header", - "cell-markdown-72", - "cell-markdown-72-body", - "cell-markdown-72-header", - "cell-markdown-73", - "cell-markdown-73-body", - "cell-markdown-73-header", - "cell-markdown-75", - "cell-markdown-75-body", - "cell-markdown-75-header", - "cell-markdown-77", - "cell-markdown-77-body", - "cell-markdown-77-header", - "cell-markdown-79", - "cell-markdown-79-body", - "cell-markdown-79-header", - "cell-markdown-8", - "cell-markdown-8-body", - "cell-markdown-8-header", - "cell-markdown-82", - "cell-markdown-82-body", - "cell-markdown-82-header", - "cell-markdown-85", - "cell-markdown-85-body", - "cell-markdown-85-header", - "cell-markdown-86", - "cell-markdown-86-body", - "cell-markdown-86-header", - "cell-markdown-89", - "cell-markdown-89-body", - "cell-markdown-89-header", "chat-form", "chat-messages", - "chat-model-usage", "chatContainer", "chatTocToggle", "cicd-integration", - "classify-math-entity", - "classify-python-entity", "clearAll", - "closed-question-pipeline", - "code-1758984056047387000", - "code-1758984056047983000", - "code-1758984056049020000", - "code-1758984056049664000", - "code-1758984056050012000", - "code-1758984056050478000", - "code-1758984056050811000", - "code-1758984056051632000", - "code-1758984056051938000", - "code-1758984056056613000", - "code-1758984056056790000", - "code-1758984056056916000", - "code-1758984056057046000", - "code-1758984056057242000", - "code-1758984056057495000", - "code-1758984056057628000", - "code-1758984056057754000", - "code-1758984056057926000", - "code-1758984056058166000", - "code-1758984056059254000", - "code-1758984056062553000", - "code-1758984056062769000", - "code-1758984056063000000", - "code-1758984056063166000", - "code-1758984056063341000", - "code-1758984056063838000", - "code-1758984056063959000", - "code-1758984056064110000", - "code-1758984056064385000", - "code-1758984056064507000", - "code-1758984056064739000", - "code-1758984056065077000", - "code-1758984056066298000", - "code-1758984056068624000", - "code-1758984056069124000", - "code-1758984056069343000", - "code-1758984056069477000", - "code-1758984056069694000", - "code-1758984056069800000", - "code-1758984056069911000", - "code-1758984056070004000", - "code-1758984056070155000", - "code-1758984056070403000", - "code-1758984056071405000", - "code-1758984056071510000", - "code-1758984056071945000", - "code-1758984056072526000", - "code-1758984056072822000", - "code-1758984056074204000", - "code-1758984056076347000", - "code-1758984056078232000", - "code-1758984056081988000", - "code-1758984056085752000", - "code-1758984056086143000", - "code-1758984056090598000", - "code-1758984056090813000", - "code-1758984056091006000", - "code-1758984056093009000", - "code-1758984056093805000", - "code-1758984056101265000", - "code-1758984056101452000", - "code-1758984056101595000", - "code-1758984056112084000", - "code-1758984056112670000", - "code-1758984056206460000", - "code-1758984056206972000", - "code-1758984056207175000", - "code-1758984056207447000", - "code-1758984056207591000", - "code-1758984056207863000", - "code-1758984056214457000", - "code-1758984056214674000", - "code-1758984056215149000", - "code-1758984056215369000", - "code-1758984056215640000", - "code-1758984056215968000", - "code-1758984056216146000", - "code-1758984056216358000", - "code-1758984056229565000", - "code-1758984056229925000", - "code-1758984056230651000", - "code-1758984056233200000", - "code-1758984056249651000", - "code-1758984056251020000", - "code-1758984056251246000", - "code-1758984056251450000", - "code-1758984056251662000", - "code-1758984056251910000", - "code-1758984056252067000", - "code-1758984056254797000", - "code-1758984056254982000", - "code-1758984056255698000", - "code-1758984056260149000", - "code-1758984056260179000", - "code-1758984056260325000", - "code-1758984056260357000", - "code-1758984056260521000", - "code-1758984056260670000", - "code-1758984056260712000", - "code-1758984056264476000", - "code-1758984056266178000", - "code-1758984056269275000", - "code-1758984056271157000", - "code-1758984056271595000", - "code-1758984056271990000", - "code-1758984056273558000", - "code-1758984056273863000", - "code-1758984056275075000", - "code-1758984056275707000", - "code-1758984056275748000", - "code-1758984056275864000", - "code-1758984056275947000", - "code-1758984056275983000", - "code-1758984056276039000", - "code-1758984056276205000", - "code-1758984056276611000", - "code-1758984056276797000", - "code-1758984056276883000", - "code-1758984056276957000", - "code-1758984056277868000", - "code-1758984056278091000", - "code-1758984056278343000", - "code-1758984056278614000", - "code-1758984056278862000", - "code-1758984056279328000", - "code-1758984056286140000", - "code-1758984056286372000", - "code-1758984056286582000", - "code-1758984056287100000", - "code-1758984056287237000", - "code-1758984056288130000", - "code-1758984056288267000", - "code-1758984056289182000", - "code-1758984056289418000", - "code-1758984056290275000", - "code-1758984056290615000", - "code-1758984056291094000", - "code-1758984056291809000", - "code-1758984056292169000", - "code-1758984056292701000", - "code-1758984056293118000", - "code-1758984056293792000", - "code-1758984056294300000", - "code-1758984056294626000", - "code-1758984056296148000", - "code-1758984056296549000", - "code-1758984056297080000", - "code-1758984056297141000", - "code-1758984056297205000", - "code-1758984056297555000", - "code-1758984056304325000", - "code-1758984056304543000", - "code-1758984056304768000", - "code-1758984056304879000", - "code-1758984056305389000", - "code-1758984056305406000", - "code-1758984056305692000", - "code-1758984056306080000", - "code-1758984056306228000", - "code-1758984056306235000", - "code-1758984056306407000", - "code-1758984056306683000", - "code-1758984056306837000", - "code-1758984056307141000", - "code-1758984056307756000", - "code-1758984056308354000", - "code-1758984056308756000", - "code-1758984056308980000", - "code-1758984056309178000", - "code-1758984056348979000", - "code-1758984056350346000", - "code-1758984056350392000", - "collapse-0d0cece9160ef824a01d2821d406048f-1758984056306807000", - "collapse-0d0cece9160ef824a01d2821d406048f-1758984056306807000-body", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758984056080492000", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758984056080492000-body", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758984056080601000", - "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758984056080601000-body", + "code-1758990905824193000", + "code-1758990905825900000", + "code-1758990905826540000", + "code-1758990905827032000", + "code-1758990905828299000", + "code-1758990905828411000", + "code-1758990905829577000", + "code-1758990905831859000", + "code-1758990905832322000", + "code-1758990905833052000", + "code-1758990905833598000", + "code-1758990905834850000", + "code-1758990905835084000", + "code-1758990905835317000", + "code-1758990905835447000", + "code-1758990905835669000", + "code-1758990905835866000", + "code-1758990905836057000", + "code-1758990905836229000", + "code-1758990905836328000", + "code-1758990905836441000", + "code-1758990905836532000", + "code-1758990905836575000", + "code-1758990905836723000", + "code-1758990905836728000", + "code-1758990905836877000", + "code-1758990905837026000", + "code-1758990905837043000", + "code-1758990905837198000", + "code-1758990905837308000", + "code-1758990905837316000", + "code-1758990905837415000", + "code-1758990905837423000", + "code-1758990905837597000", + "code-1758990905837676000", + "code-1758990905837680000", + "code-1758990905837789000", + "code-1758990905837797000", + "code-1758990905837879000", + "code-1758990905837907000", + "code-1758990905837994000", + "code-1758990905838027000", + "code-1758990905839392000", + "code-1758990905840525000", + "code-1758990905841674000", + "code-1758990905841796000", + "code-1758990905841982000", + "code-1758990905842688000", + "code-1758990905843549000", + "code-1758990905853864000", + "code-1758990905854043000", + "code-1758990905854854000", + "code-1758990905856393000", + "code-1758990905856554000", + "code-1758990905856746000", + "code-1758990905860604000", + "code-1758990905860771000", + "code-1758990905863455000", + "code-1758990905869222000", + "code-1758990905993327000", + "code-1758990906040164000", + "code-1758990906040923000", + "code-1758990906041720000", + "code-1758990906042211000", + "code-1758990906053961000", + "code-1758990906054467000", + "code-1758990906054892000", + "code-1758990906060302000", + "code-1758990906060785000", + "code-1758990906061135000", + "code-1758990906061489000", + "code-1758990906061940000", + "code-1758990906062246000", + "code-1758990906063102000", + "code-1758990906063137000", + "code-1758990906064673000", + "code-1758990906083409000", + "code-1758990906084676000", + "code-1758990906095544000", + "code-1758990906095682000", + "code-1758990906095775000", + "code-1758990906095884000", + "code-1758990906096164000", + "code-1758990906096418000", + "code-1758990906096773000", + "code-1758990906097319000", + "code-1758990906266558000", + "code-1758990906266726000", + "code-1758990906266955000", + "code-1758990906267041000", + "code-1758990906267181000", + "code-1758990906267251000", + "code-1758990906267388000", + "code-1758990906267644000", + "code-1758990906267769000", + "code-1758990906267920000", + "code-1758990906267964000", + "code-1758990906268284000", + "code-1758990906268711000", + "code-1758990906268999000", + "code-1758990906269153000", + "code-1758990906269416000", + "code-1758990906269786000", + "code-1758990906270112000", + "code-1758990906270354000", + "code-1758990906332602000", + "code-1758990906334471000", + "code-1758990906334570000", + "collapse-0d0cece9160ef824a01d2821d406048f-1758990906269721000", + "collapse-0d0cece9160ef824a01d2821d406048f-1758990906269721000-content", + "collapse-0d0cece9160ef824a01d2821d406048f-1758990906269721000-header", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758990905854327000", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758990905854327000-content", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758990905854327000-header", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758990905854399000", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758990905854399000-content", + "collapse-1a13b6d7ed5bd84998158abc2cd6d55c-1758990905854399000-header", "collapsehtml-examples", "collapsehtml-how-it-works", "collapsehtml-source-code", - "common-issues", "common-shortcodes", - "complete-step-disabled-reason", - "components", "comprehensive-testing", - "conclusion", "configuration", "configuration-examples", "configure", @@ -1326,7 +654,6 @@ "configure-theme-variant-and-mode", "configure-update-feature-settings", "configure-update-organization-and-product-details", - "container-resource-usage", "content", "content-authoring-writers-author-tips", "content-authoring-writers-common-shortcodes", @@ -1336,27 +663,16 @@ "content-authoring-writers-section-landing-pages", "content-authoring-writers-tiles-and-child-links", "create-a-page", - "create-application-manifest", "create-default-layouts", - "create-dockerignore", "create-jsonjson-partial", - "create-packagejson", "create-searchjs-file", - "create-servicemonitor", - "create-tests", - "create-the-application-structure", - "create-the-server-application", - "creating-custom-prompts", "css-custom-properties", "csvhtml-examples", "csvhtml-full-table-with-default-delimiter", "csvhtml-full-table-with-excluded-column", "csvhtml-how-it-works", "csvhtml-source-code", - "curl-example", "custom-configurations", - "customize-chartyaml", - "d", "dark-mode", "darkModeToggle", "debug-information", @@ -1371,14 +687,6 @@ "demo-package.DemoClass.demo_method", "demo-package.demo_function", "demo-package.demo_submodule_function", - "deploy-to-development", - "deploy-to-production", - "deployment", - "deployment-input-attributes", - "deployment-managed-attributes", - "deployment-template", - "deploymentstatedetails", - "deploymentstatedetails-attributes", "development--debug-features-advanced-features", "development--debug-features-available-variants", "development--debug-features-body-attributes", @@ -1417,9 +725,6 @@ "development-commands", "development-setup-scenarios", "development-workflow", - "dialogue-generation-pipeline", - "dockerfile-optimization", - "e", "elevation-and-interactions", "enable-algolia-search-add-algolia-search-lite-script", "enable-algolia-search-before-you-start", @@ -1443,28 +748,9 @@ "enable-rst-before-you-start", "enable-rst-how-to-enable-rst-markup", "enabling-debug-mode", - "endpoint-groups", - "endpoints", "enterprise-environment", - "entity-classification", - "entries-container", "environment-intelligence-system", - "environment-setup-common-issues", - "environment-setup-for-linux", - "environment-setup-for-macos", - "environment-setup-for-windows", - "environment-setup-helm-package-manager", - "environment-setup-k9s-optional-but-recommended", - "environment-setup-kubectl-if-not-included-with-docker-desktop", "environment-setup-overview", - "environment-setup-step-1-install-docker-desktop", - "environment-setup-step-2-enable-kubernetes-in-docker-desktop", - "environment-setup-step-3-verify-your-installation", - "environment-setup-step-4-install-additional-development-tools", - "environment-setup-step-5-configure-your-development-environment", - "environment-setup-troubleshooting", - "environment-setup-verification-checklist", - "environment-setup-whats-next", "environment-specific-builds", "environment-specific-features", "environment-vs-variant-separation", @@ -1473,57 +759,12 @@ "examples", "expandChat", "expected-results", - "exploring-the-math-question-generation-pipeline", - "f", - "featuresdevelopment-debug-card-summary", - "featuresglossaryapple-card-summary", - "featuresglossarybanana-card-summary", - "featuresglossarychocolate-card-summary", - "featuresglossarydates-card-summary", - "featuresglossaryeggs-card-summary", - "featuresmakefile-card-summary", - "featuresshortcodesascii-card-summary", - "featuresshortcodescollapse-card-summary", - "featuresshortcodescsv-card-summary", - "featuresshortcodesinclude-card-summary", - "featuresshortcodesnotice-card-summary", - "featuresshortcodespdoc-card-summary", - "featuresshortcodesprod-card-summary", - "featuresshortcodesrst-card-summary", - "featuresshortcodestabs-card-summary", - "featuresshortcodesversion-card-summary", "footer", - "for-linux", - "for-macos", - "for-windows", "full-table-with-default-delimiter", "full-table-with-excluded-column", - "g", - "generating-a-math-problem", - "generating-n-macro-topics", - "generating-n-subtopics", - "generationMessage", - "get-started-before-you-start", - "get-started-why-hugo", - "get-started-why-this-theme", - "get-startedconfigure-card-summary", - "get-startedinstall-card-summary", - "get-startedquickstart-card-summary", - "getting-started-with-synthetic-data-generation-powered-by-nemo-curator", "global-version", - "go-example", - "guideslayout-and-blocks-card-summary", - "guidesmarkupsascii-card-summary", - "guidesmarkupsrst-card-summary", - "guidesthemestailwind-card-summary", - "guidesthemestest-showcase-card-summary", - "guidestheming-and-tokens-card-summary", - "guideswriterscontent-authoring-card-summary", - "h", "header-classes", "header-functions", - "health-check-commands", - "helm-package-manager", "homejson", "how-it-works", "how-it-works-simplified", @@ -1537,9 +778,8 @@ "how-to-enable-asciidoc-markup", "how-to-enable-rst-markup", "how-to-locally-test-your-theme", - "hpa-template", "hugo-environment", - "i", + "hugo-environment-json", "images-and-assets", "includehtml-examples", "includehtml-how-it-works", @@ -1547,7 +787,6 @@ "includehtml-source-code", "includehtml-this-file", "index", - "initialize-helm-chart", "install", "install-1-install-hugo", "install-2-create-a-new-site", @@ -1555,13 +794,7 @@ "install-4-add-theme-to-config", "install-5-init-repo", "install-6-deploy-locally", - "install-argocd", - "install-dependencies", - "install-prometheus-and-grafana", - "installing-nemo-curator-dependencies", - "j", "javascript-environment-detection", - "js-example", "json-objects-before-you-start", "json-objects-create-default-layouts", "json-objects-create-jsonjson-partial", @@ -1572,10 +805,6 @@ "json-objects-singlejson", "json-objects-test", "json-objects-update-hugo-configuration", - "k", - "k9s-optional-but-recommended", - "kubectl-if-not-included-with-docker-desktop", - "l", "layout-at-a-glance", "layout-blocks-and-tokens-blocks-you-can-override", "layout-blocks-and-tokens-layout-at-a-glance", @@ -1586,11 +815,10 @@ "layout-blocks-and-tokens-utilities-partials", "links-and-metadata", "listjson", - "load-testing", "local-version", - "m", "macos", - "mainContent", + "main-content", + "main-css", "make-search-script-available", "makefile-commands", "makefile-reference-api-documentation", @@ -1616,67 +844,38 @@ "makefile-reference-version-management", "makefile-reference-workflow-integration", "manual-test-instructions", - "math-question-generation-pipeline", - "milo-theme-docs-a-note-on-ignore_conversion_failuretrue", - "milo-theme-docs-async-openai-client-usage", - "milo-theme-docs-built-in-sdg-pipelines", - "milo-theme-docs-chat-model-usage", - "milo-theme-docs-classify-math-entity", - "milo-theme-docs-classify-python-entity", - "milo-theme-docs-closed-question-pipeline", - "milo-theme-docs-creating-custom-prompts", - "milo-theme-docs-dialogue-generation-pipeline", - "milo-theme-docs-entity-classification", - "milo-theme-docs-exploring-the-math-question-generation-pipeline", - "milo-theme-docs-generating-a-math-problem", - "milo-theme-docs-generating-n-macro-topics", - "milo-theme-docs-generating-n-subtopics", - "milo-theme-docs-getting-started-with-synthetic-data-generation-powered-by-nemo-curator", - "milo-theme-docs-installing-nemo-curator-dependencies", - "milo-theme-docs-math-question-generation-pipeline", - "milo-theme-docs-model-selection-and-configs", - "milo-theme-docs-modifying-the-prompts", - "milo-theme-docs-open-question-pipeline", - "milo-theme-docs-prompt-modification-at-pipeline-level", - "milo-theme-docs-python-question-generation-pipeline", - "milo-theme-docs-reward-model-usage", - "milo-theme-docs-two-turn-prompt-generation-pipeline", - "milo-theme-docs-using-alternative-prompts", - "milo-theme-docs-using-the-nemo-curator-openai-client", - "milo-theme-docs-using-the-nemotrongenerator", "milo-theme-docs-welcome-to-example-product-theme", - "milo-theme-docs-writing-task-generation-pipeline", - "model-selection-and-configs", - "modifying-the-prompts", - "monitoring-dashboards", "moon", - "n", + "nav-section-api", + "nav-section-apipets-api", + "nav-section-apipets-apipets", + "nav-section-features", + "nav-section-featuresglossary", + "nav-section-featuresnotebooks", + "nav-section-featuresshortcodes", + "nav-section-featurestutorial", + "nav-section-get-started", + "nav-section-guides", + "nav-section-guideshelpers", + "nav-section-guidesmarkups", + "nav-section-guidesthemes", + "nav-section-guidesthemesoutput-formats", + "nav-section-guidesthemessearch", "netlify", - "next-steps", "notebook-components-test--notebook-component-split-test", "notebook-components-test-expected-results", "notebook-components-test-manual-test-instructions", "notebook-components-test-test-markdown-cell", "notebook-components-test-test-notebook", - "notebook-metadata", "noticehtml-examples", "noticehtml-how-it-works", "noticehtml-source-code", "nvidia-environment", - "o", "offline-documentation", - "open-question-pipeline", "open-source-environment", "openapi-integration", - "openapi-metadata", - "operational-checklist", "overriding-tokens", "overview", - "p", - "packagedmodel", - "packagedmodel-input-attributes", - "packagedmodel-managed-attributes", - "pageContainer", "patterns", "pdoc", "pdoc-2", @@ -1686,117 +885,40 @@ "pdochtml-pdoc-2", "pdochtml-source-code", "per-page-or-per-section-overrides-front-matter", - "performance-optimization", - "performance-testing", + "primary-navigation", "prodhtml-examples", "prodhtml-how-it-works", "prodhtml-source-code", "production-commands", - "production-deployment-with-helm-conclusion", - "production-deployment-with-helm-create-application-manifest", - "production-deployment-with-helm-create-servicemonitor", - "production-deployment-with-helm-customize-chartyaml", - "production-deployment-with-helm-deploy-to-development", - "production-deployment-with-helm-deploy-to-production", - "production-deployment-with-helm-deployment-template", - "production-deployment-with-helm-health-check-commands", - "production-deployment-with-helm-hpa-template", - "production-deployment-with-helm-initialize-helm-chart", - "production-deployment-with-helm-install-argocd", - "production-deployment-with-helm-install-dependencies", - "production-deployment-with-helm-install-prometheus-and-grafana", - "production-deployment-with-helm-load-testing", - "production-deployment-with-helm-monitoring-dashboards", - "production-deployment-with-helm-next-steps", - "production-deployment-with-helm-operational-checklist", "production-deployment-with-helm-overview", - "production-deployment-with-helm-performance-optimization", - "production-deployment-with-helm-resources", - "production-deployment-with-helm-security-checklist", - "production-deployment-with-helm-service-template", - "production-deployment-with-helm-step-1-create-helm-chart-structure", - "production-deployment-with-helm-step-2-configure-application-values", - "production-deployment-with-helm-step-3-create-kubernetes-manifests", - "production-deployment-with-helm-step-4-deploy-to-kubernetes", - "production-deployment-with-helm-step-5-set-up-monitoring-and-observability", - "production-deployment-with-helm-step-6-implement-gitops-with-argocd", - "production-deployment-with-helm-step-7-production-verification", - "production-deployment-with-helm-step-8-production-best-practices", "production-testing", - "prompt-modification-at-pipeline-level", - "python-example", "python-file-with-comments", - "python-question-generation-pipeline", - "q", "question", "quick-reference", "quickstart-macos", - "r", "recommended-development-flow", "recommended-setup", - "registry", - "registry-input-attributes", - "registry-managed-attributes", + "related-content-container", "related-documentation", "release-management", - "release-notes001-card-summary", - "release-notes002-card-summary", "requirements", - "resources", - "response-200", - "response-default", "returns", - "reward-model-usage", "rsthtml-before-you-start", "rsthtml-how-it-works", "rsthtml-source-code", "rsthtml-table", - "s", - "scan-for-vulnerabilities", - "schema-error", - "schema-error-details", - "schema-pet", - "schema-pet-details", - "schema-pets", - "schema-pets-details", "section-intro", "section-landing-pages", "sectionjson", - "security-best-practices", - "security-checklist", "sendButton", - "service-template", - "sharedreadfile-card-summary", - "sharedrstadmonitions-card-summary", - "sharedrsttable-card-summary", "sidebar", - "sidebar-left", - "sidebar-right", "singlejson", "site-wide-defaults-config", "source-code", "starting-development-servers", - "step-1-create-a-sample-web-application", - "step-1-create-helm-chart-structure", - "step-1-install-docker-desktop", - "step-2-configure-application-values", - "step-2-create-an-optimized-dockerfile", - "step-2-enable-kubernetes-in-docker-desktop", - "step-3-build-and-test-your-container", - "step-3-create-kubernetes-manifests", - "step-3-verify-your-installation", - "step-4-deploy-to-kubernetes", - "step-4-install-additional-development-tools", - "step-4-optimize-your-images", - "step-5-configure-your-development-environment", - "step-5-container-security-best-practices", - "step-5-set-up-monitoring-and-observability", - "step-6-create-docker-compose-for-development", - "step-6-implement-gitops-with-argocd", - "step-7-production-verification", - "step-8-production-best-practices", "sun", - "t", + "tab-launch-method-cli", + "tab-launch-method-console", "table", "tabshtml-example", "tabshtml-how-it-works-simplified", @@ -1811,10 +933,7 @@ "test--showcase-your-hugo-theme-netlify", "test-markdown-cell", "test-notebook", - "test-the-container-locally", - "test-with-docker-compose", "testing--quality-assurance", - "testing-and-validation", "theme-variant", "theme-variant-testing", "theme-variants", @@ -1826,23 +945,14 @@ "this-file", "this-is-an-embedded-section", "tiles-and-child-links", - "tocContainer", "topNav", "troubleshooting", - "two-turn-prompt-generation-pipeline", - "u", "update-feature-settings", "update-hugo-configuration", "update-organization-and-product-details", - "use-docker-buildx-for-advanced-builds", - "using-alternative-prompts", - "using-the-nemo-curator-openai-client", - "using-the-nemotrongenerator", "utilities-partials", - "v", "vale-before-you-start", "vale-how-to-add-vale-to-your-documentation-repository", - "verification-checklist", "version-management", "versionhtml-examples", "versionhtml-global-version", @@ -1851,18 +961,10 @@ "versionhtml-source-code", "vs-code-integration", "vs-code-links-not-working", - "w", "welcome-to-example-product-theme", "what-it-provides", - "whats-next", "where-tokens-live", - "why-hugo", - "why-this-theme", - "workflow-integration", - "writing-task-generation-pipeline", - "x", - "y", - "z" + "workflow-integration" ] } } diff --git a/exampleSite/package.json b/exampleSite/package.json index e1843b8..6b31bb3 100644 --- a/exampleSite/package.json +++ b/exampleSite/package.json @@ -13,11 +13,9 @@ "author": "", "license": "ISC", "devDependencies": { - "@tailwindcss/postcss": "^4.1.13", "autoprefixer": "^10.4.21", "postcss": "^8.5.6", "postcss-cli": "^11.0.1", - "postcss-import": "^16.1.1", - "tailwindcss": "^4.1.13" + "postcss-import": "^16.1.1" } } diff --git a/exampleSite/postcss.config.js b/exampleSite/postcss.config.js index 35d0e15..8dd0d14 100644 --- a/exampleSite/postcss.config.js +++ b/exampleSite/postcss.config.js @@ -2,8 +2,7 @@ module.exports = { plugins: [ require('postcss-import')({ path: ['themes/milodocs/assets/css'] - }), // postcss-import needs to be first - require('@tailwindcss/postcss'), - require('autoprefixer') + }), // postcss-import processes @import statements + require('autoprefixer') // Add vendor prefixes for browser compatibility ] } \ No newline at end of file diff --git a/exampleSite/resources/_gen/assets/css/src/input.css_e03652540c5bbc68d359e86d9fc1015a.content b/exampleSite/resources/_gen/assets/css/main.css_77ecfdd452157f5ec51441f5c20cb322.content similarity index 64% rename from exampleSite/resources/_gen/assets/css/src/input.css_e03652540c5bbc68d359e86d9fc1015a.content rename to exampleSite/resources/_gen/assets/css/main.css_77ecfdd452157f5ec51441f5c20cb322.content index 6a6c713..8eba8b3 100644 --- a/exampleSite/resources/_gen/assets/css/src/input.css_e03652540c5bbc68d359e86d9fc1015a.content +++ b/exampleSite/resources/_gen/assets/css/main.css_77ecfdd452157f5ec51441f5c20cb322.content @@ -1,52 +1,83 @@ -/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */ -@layer properties; -@layer theme, base, components, utilities; +/* =============================================== + MiloDocs CSS - Pure, Modern, Semantic + =============================================== */ + +/* CSS Architecture: Import Foundation First */ + +/* đŸŽ¯ Universal Animation System - Single Source of Truth + * ===================================================== + * + * This file establishes consistent timing, easing, and animation patterns + * across the entire theme to eliminate timing chaos and performance issues. + */ + :root { - --timing-instant: 0.1s; - --timing-fast: 0.2s; - --timing-medium: 0.3s; - --timing-slow: 0.5s; - --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); - --easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); - --easing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); + /* ✨ TIMING TOKENS - Only these 4 speeds allowed site-wide */ + --timing-instant: 0.1s; /* Micro-interactions (hover, focus) */ + --timing-fast: 0.2s; /* Standard interactions (buttons, links) */ + --timing-medium: 0.3s; /* Complex interactions (collapse, expand) */ + --timing-slow: 0.5s; /* Dramatic reveals (page transitions) */ + + /* ✨ EASING TOKENS - Only these 3 curves allowed site-wide */ + --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Default - smooth start/end */ + --easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); /* Dramatic - bouncy feel */ + --easing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Gentle - soft motion */ + + /* đŸŽ¯ COLLAPSE TOKENS - Universal collapse/expand behavior */ --collapse-timing: var(--timing-medium); --collapse-easing: var(--easing-standard); --collapse-height-collapsed: 0; - --collapse-height-expanded: 2000px; + --collapse-height-expanded: 2000px; /* Never use 'none' or 'auto' - breaks animation */ --collapse-opacity-collapsed: 0; --collapse-opacity-expanded: 1; + + /* 🎨 TRANSFORM TOKENS - 3D acceleration friendly */ --transform-scale-down: scale(0.95); --transform-scale-up: scale(1.05); --transform-scale-normal: scale(1); --transform-translate-up: translateY(-4px); --transform-translate-down: translateY(4px); --transform-translate-none: translateY(0); + + /* 🌟 OPACITY TOKENS - Visibility states */ --opacity-hidden: 0; --opacity-faded: 0.6; --opacity-visible: 1; + + /* 🎨 COMPONENT-SPECIFIC TOKENS - From design-tokens.css merge */ + + /* Card & Tile Tokens */ --card-shadow-rest: 0 1px 3px rgba(0,0,0,0.1); --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.15); --card-shadow-active: 0 8px 25px rgba(0,0,0,0.15); --card-transform-hover: translateY(-2px); --card-transform-active: translateY(-1px) scale(0.98); --card-border-radius: 0.5rem; - --transform-lift-subtle: translateY(-1px); - --transform-lift-medium: translateY(-2px); - --transform-lift-dramatic: translateY(-4px); - --transform-slide-in-up: translateY(20px); - --transform-slide-in-down: translateY(-20px); - --transform-scale-hover: scale(1.02); - --transform-scale-active: scale(0.98); - --transform-scale-entrance: scale(0.95); + + /* ✨ ADDITIONAL TRANSFORM PATTERNS - From component analysis */ + --transform-lift-subtle: translateY(-1px); /* Buttons, small elements */ + --transform-lift-medium: translateY(-2px); /* Cards, medium elements */ + --transform-lift-dramatic: translateY(-4px); /* Hero elements */ + --transform-slide-in-up: translateY(20px); /* Entry animations */ + --transform-slide-in-down: translateY(-20px); /* Dropdown animations */ + --transform-scale-hover: scale(1.02); /* Hover scale up */ + --transform-scale-active: scale(0.98); /* Active scale down */ + --transform-scale-entrance: scale(0.95); /* Entry scale */ + + /* ✨ COMBINED TRANSFORMS - Common combinations */ --transform-lift-and-scale: translateY(-2px) scale(1.02); --transform-press-down: translateY(1px) scale(0.98); --transform-bounce-in: translateY(10px) scale(0.95); --transform-slide-up-fade: translateY(15px); + + /* Interaction Tokens */ --hover-scale: 1.02; --active-scale: 0.98; --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring-color: rgba(var(--color-brand-rgb), 0.2); + + /* Loading State Tokens */ --loading-opacity: 0.6; --loading-blur: blur(1px); --loading-skeleton-bg: linear-gradient(90deg, @@ -54,26 +85,40 @@ rgba(var(--color-brand-rgb), 0.2) 50%, rgba(var(--color-brand-rgb), 0.1) 75%); --loading-skeleton-size: 200% 100%; + + /* Feedback Tokens */ --feedback-success: #10b981; --feedback-warning: #f59e0b; --feedback-error: #ef4444; --feedback-info: #3b82f6; --feedback-slide-in: translateY(-10px); --feedback-slide-out: translateY(-20px); + + /* Progressive Reveal Tokens */ --reveal-stagger-delay: 0.05s; --reveal-batch-delay: 0.15s; --reveal-slide-distance: 20px; } + +/* 🌙 DARK MODE ENHANCEMENTS */ + .dark { --focus-ring-color: rgba(var(--color-brand-rgb), 0.3); + + /* Enhanced loading states for dark mode */ --loading-skeleton-bg: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%); + + /* Enhanced shadows for dark mode */ --card-shadow-rest: 0 1px 3px rgba(0,0,0,0.3); --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.4); --card-shadow-active: 0 8px 25px rgba(0,0,0,0.5); } + +/* 🚨 ACCESSIBILITY - Respect user preferences */ + @media (prefers-reduced-motion: reduce) { :root { --timing-instant: 0.01s; @@ -81,135 +126,212 @@ --timing-medium: 0.01s; --timing-slow: 0.01s; } + * { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; transition-duration: 0.01s !important; } } + +/* ✅ UNIVERSAL COLLAPSE COMPONENT + * ================================ + * Use these classes on any collapsible content for consistent behavior + */ + +/* Base collapsible container */ + .collapse-container { position: relative; overflow: hidden; } + +/* Collapsible content body */ + .collapse-body { max-height: var(--collapse-height-collapsed); opacity: var(--collapse-opacity-collapsed); overflow: hidden; - transition: max-height var(--collapse-timing) var(--collapse-easing), + transition: + max-height var(--collapse-timing) var(--collapse-easing), opacity var(--collapse-timing) var(--collapse-easing); } + +/* Expanded state */ + .collapse-body.expanded { max-height: var(--collapse-height-expanded); opacity: var(--collapse-opacity-expanded); } + +/* Duplicated component/data state rules moved to architecture/component-states.css */ + +/* Keeping this section intentionally empty to avoid divergence. */ + +/* ✅ PERFORMANCE-OPTIMIZED HOVER STATES + * ====================================== + * Use specific property transitions instead of "transition: all" + */ + .interactive-element { - transition: transform var(--timing-fast) var(--easing-standard), + transition: + transform var(--timing-fast) var(--easing-standard), opacity var(--timing-fast) var(--easing-standard), box-shadow var(--timing-fast) var(--easing-standard); } + .interactive-element:hover { transform: var(--transform-translate-up); opacity: var(--opacity-visible); } + .interactive-element:active { transform: var(--transform-scale-down); - transition-duration: var(--timing-instant); + transition-duration: var(--timing-instant); /* Instant feedback */ } + +/* ✅ COMPONENT-SPECIFIC CUSTOMIZATION + * ==================================== + * Override tokens for specific component needs + */ + +/* OpenAPI components need larger heights for complex content */ + .openapi-response { --collapse-height-expanded: 3000px; --collapse-timing: var(--timing-medium); } + +/* Notebook cells should be snappier */ + .notebook-cell { --collapse-height-expanded: 2000px; --collapse-timing: var(--timing-fast); } + +/* Tutorial sections can be more dramatic */ + .tutorial-section { --collapse-height-expanded: 2500px; --collapse-timing: var(--timing-slow); --collapse-easing: var(--easing-emphasized); } + +/* Tabs need instant switching for good UX */ + .tab-content { --collapse-height-expanded: 1500px; --collapse-timing: var(--timing-fast); } + +/* ✅ SIDEBAR NAVIGATION TREE - Optimized for hierarchical content */ + .nested-content { --collapse-height-expanded: 2000px; --collapse-timing: var(--timing-medium); --collapse-easing: var(--easing-standard); + + /* Performance optimization for tree navigation */ will-change: max-height, opacity; - transform: translateZ(0); + transform: translateZ(0); /* Force hardware acceleration */ } + +/* ✅ UTILITY CLASSES + * =================== + * Common animation patterns as reusable classes + */ + .fade-in { opacity: var(--opacity-hidden); animation: fadeIn var(--timing-medium) var(--easing-standard) forwards; } + .fade-out { opacity: var(--opacity-visible); animation: fadeOut var(--timing-medium) var(--easing-standard) forwards; } + .slide-up { transform: var(--transform-translate-down); animation: slideUp var(--timing-medium) var(--easing-standard) forwards; } + .slide-in-up { transform: var(--transform-slide-in-up); opacity: var(--opacity-hidden); animation: slideInUp var(--timing-medium) var(--easing-standard) forwards; } + .slide-in-down { transform: var(--transform-slide-in-down); opacity: var(--opacity-hidden); animation: slideInDown var(--timing-medium) var(--easing-standard) forwards; } + .scale-in { transform: var(--transform-scale-down); opacity: var(--opacity-hidden); animation: scaleIn var(--timing-medium) var(--easing-emphasized) forwards; } + .bounce-in { transform: var(--transform-bounce-in); opacity: var(--opacity-hidden); animation: bounceIn var(--timing-slow) var(--easing-emphasized) forwards; } + .lift-on-hover { transition: transform var(--timing-fast) var(--easing-standard); } + .lift-on-hover:hover { transform: var(--transform-lift-medium); } + +/* ✅ KEYFRAME ANIMATIONS + * ======================= + * Standard animations used across components + */ + @keyframes fadeIn { to { opacity: var(--opacity-visible); } } + @keyframes fadeOut { to { opacity: var(--opacity-hidden); } } + @keyframes slideUp { to { transform: var(--transform-translate-none); } } + @keyframes slideInUp { to { transform: var(--transform-translate-none); opacity: var(--opacity-visible); } } + @keyframes slideInDown { to { transform: var(--transform-translate-none); opacity: var(--opacity-visible); } } + @keyframes scaleIn { to { transform: var(--transform-scale-normal); opacity: var(--opacity-visible); } } + @keyframes bounceIn { 0% { transform: var(--transform-bounce-in); @@ -224,132 +346,277 @@ opacity: var(--opacity-visible); } } + +/* ✅ STAGGER ANIMATIONS + * ====================== + * For animating groups of elements with delays + */ + .stagger-children > * { animation-delay: calc(var(--reveal-stagger-delay) * var(--stagger-index, 0)); } + .stagger-fade-in > * { opacity: var(--opacity-hidden); animation: fadeIn var(--timing-medium) var(--easing-standard) forwards; } + .stagger-slide-up > * { transform: var(--transform-slide-in-up); opacity: var(--opacity-hidden); animation: slideInUp var(--timing-medium) var(--easing-standard) forwards; } + +/* ✅ DEBUG MODE + * ============== + * Uncomment to visualize animation timing (development only) + */ + +/* +.collapse-body { + border: 2px dashed red !important; +} + +.collapse-body.expanded { + border-color: green !important; +} + +[data-collapse-state] { + outline: 2px solid blue !important; +} +*/ + +/* đŸŽ¯ Universal Component State Management System + * ============================================== + * + * This file establishes consistent state management patterns across all + * interactive components, replacing inconsistent class-based approaches + * with data-attribute driven state management. + */ + +/* ✅ COLLAPSE STATE MANAGEMENT + * ============================= + * Universal collapse/expand states using data attributes + */ + +/* Base collapsed state - applies to any element with data-collapse-state */ + [data-collapse-state="collapsed"] { max-height: var(--collapse-height-collapsed, 0); opacity: var(--collapse-opacity-collapsed, 0); overflow: hidden; - transition: max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), + transition: + max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); } + +/* Transitioning state - shows element is mid-animation */ + [data-collapse-state="transitioning"] { - overflow: hidden; - pointer-events: none; + overflow: hidden; /* Ensure no content spillage during animation */ + pointer-events: none; /* Prevent interaction during transition */ } + +/* Expanded state - fully visible and interactive */ + [data-collapse-state="expanded"] { max-height: var(--collapse-height-expanded, 2000px); opacity: var(--collapse-opacity-expanded, 1); - overflow: visible; - transition: max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), + overflow: visible; /* Allow content to be fully visible when expanded */ + transition: + max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); } + +/* ✅ COMPONENT LIFECYCLE STATES + * ============================== + * Standard states for component initialization and interaction + */ + +/* Loading state - component is being initialized */ + [data-component-state="loading"] { opacity: var(--opacity-faded, 0.6); pointer-events: none; cursor: wait; transition: opacity var(--timing-fast) var(--easing-standard); } + +/* Ready state - component is initialized and interactive */ + [data-component-state="ready"] { opacity: var(--opacity-visible, 1); pointer-events: auto; transition: opacity var(--timing-fast) var(--easing-standard); } + +/* Disabled state - component is non-interactive */ + [data-component-state="disabled"] { opacity: var(--opacity-faded, 0.6); pointer-events: none; cursor: not-allowed; filter: grayscale(50%); - transition: opacity var(--timing-fast) var(--easing-standard), + transition: + opacity var(--timing-fast) var(--easing-standard), filter var(--timing-fast) var(--easing-standard); } + +/* Error state - component has encountered an error */ + [data-component-state="error"] { opacity: var(--opacity-visible, 1); border-color: var(--color-danger, #ef4444); background-color: rgba(239, 68, 68, 0.05); - transition: border-color var(--timing-fast) var(--easing-standard), + transition: + border-color var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard); } + +/* ✅ LEGACY CLASS SUPPORT (Backward Compatibility) + * ================================================= + * Bridge classes for existing components that use class-based states + */ + +/* Support for existing .expanded classes */ + .expanded { max-height: var(--collapse-height-expanded, 2000px) !important; opacity: var(--collapse-opacity-expanded, 1) !important; overflow: visible !important; - transition: max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), + transition: + max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); } + +/* Support for existing .collapsed classes */ + .collapsed { max-height: var(--collapse-height-collapsed, 0) !important; opacity: var(--collapse-opacity-collapsed, 0) !important; overflow: hidden !important; - transition: max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), + transition: + max-height var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)), opacity var(--collapse-timing, var(--timing-medium)) var(--collapse-easing, var(--easing-standard)); } + +/* ✅ INTERACTIVE STATES + * ===================== + * Consistent hover, focus, and active states + */ + +/* Interactive elements with hover states */ + [data-interactive="true"]:hover, .interactive:hover { transform: var(--transform-translate-up, translateY(-2px)); transition: transform var(--timing-fast) var(--easing-standard); } + +/* Interactive elements with focus states */ + [data-interactive="true"]:focus-visible, .interactive:focus-visible { outline: 2px solid var(--color-brand, #3b82f6); outline-offset: 2px; border-radius: 0.25rem; } + +/* Interactive elements with active states */ + [data-interactive="true"]:active, .interactive:active { transform: var(--transform-scale-down, scale(0.98)); transition: transform var(--timing-instant) var(--easing-standard); } + +/* ✅ COMPONENT-SPECIFIC STATE OVERRIDES + * ====================================== + * Customization for specific component types + */ + +/* OpenAPI Components */ + .openapi-response[data-collapse-state], .openapi-endpoint[data-collapse-state], .openapi-parameter[data-collapse-state] { - --collapse-height-expanded: 3000px; + --collapse-height-expanded: 3000px; /* Complex API content needs more space */ --collapse-timing: var(--timing-medium); --collapse-easing: var(--easing-standard); } + +/* Notebook Components */ + .notebook-cell[data-collapse-state], .notebook-output[data-collapse-state] { - --collapse-height-expanded: 2000px; - --collapse-timing: var(--timing-fast); + --collapse-height-expanded: 2000px; /* Code and output content */ + --collapse-timing: var(--timing-fast); /* Snappier interaction */ --collapse-easing: var(--easing-standard); } + +/* Tutorial Components */ + .tutorial-section[data-collapse-state], .section-content[data-collapse-state] { - --collapse-height-expanded: 2500px; - --collapse-timing: var(--timing-slow); + --collapse-height-expanded: 2500px; /* Text-heavy content */ + --collapse-timing: var(--timing-slow); /* More dramatic for educational content */ --collapse-easing: var(--easing-emphasized); } + +/* Tab Components */ + .tab-content[data-collapse-state], [data-tabcontent][data-collapse-state] { - --collapse-height-expanded: 1500px; - --collapse-timing: var(--timing-fast); + --collapse-height-expanded: 1500px; /* Tab content usually more compact */ + --collapse-timing: var(--timing-fast); /* Quick switching expected */ --collapse-easing: var(--easing-standard); } + +/* ✅ UTILITY CLASSES + * =================== + * Quick state application classes + */ + +/* Force immediate state without animation */ + .state-immediate { transition: none !important; } + +/* Force slow animation timing */ + .state-slow { --collapse-timing: var(--timing-slow); --collapse-easing: var(--easing-smooth); } + +/* Force fast animation timing */ + .state-fast { --collapse-timing: var(--timing-fast); --collapse-easing: var(--easing-standard); } + +/* Emphasized dramatic animation */ + .state-dramatic { --collapse-timing: var(--timing-slow); --collapse-easing: var(--easing-emphasized); } + +/* ✅ ACCESSIBILITY ENHANCEMENTS + * ============================== + * Enhanced states for screen readers and assistive technology + */ + +/* ✅ REMOVED: Enhanced focus indicators causing ancestry tree echoing + * The :focus-within pseudo-class was applying styling to ALL ancestor elements + * with data-collapse-state attributes, creating the visual "echo" effect. + * Focus should be handled by individual interactive elements instead. + */ + +/* Screen reader friendly state announcements */ + [data-collapse-state="collapsed"][aria-label]::before { content: "Collapsed: "; position: absolute; @@ -358,6 +625,7 @@ height: 1px; overflow: hidden; } + [data-collapse-state="expanded"][aria-label]::before { content: "Expanded: "; position: absolute; @@ -366,6 +634,12 @@ height: 1px; overflow: hidden; } + +/* ✅ MOTION REDUCTION SUPPORT + * ============================ + * Respect user motion preferences + */ + @media (prefers-reduced-motion: reduce) { [data-collapse-state], [data-component-state], @@ -377,80 +651,151 @@ transform: none !important; } } + +/* ✅ HIGH CONTRAST MODE SUPPORT + * ============================== + * Enhanced visibility for high contrast users + */ + @media (prefers-contrast: high) { [data-component-state="error"] { border-width: 2px; border-style: solid; } + + /* ✅ REMOVED: focus-within outline for high contrast mode + * This was also contributing to the ancestry tree echo effect + */ } + [data-interactive="true"]:focus-visible { outline-width: 3px; outline-style: solid; } + +/* ✅ DEBUG MODE (Development Only) + * ================================= + * Uncomment to visualize state management in development + */ + +/* +[data-collapse-state] { + position: relative; +} + +[data-collapse-state]::before { + content: "State: " attr(data-collapse-state); + position: absolute; + top: -1.5rem; + left: 0; + background: #000; + color: #fff; + padding: 0.25rem 0.5rem; + font-size: 0.75rem; + border-radius: 0.25rem; + z-index: 1000; + pointer-events: none; +} + +[data-component-state]::after { + content: "Component: " attr(data-component-state); + position: absolute; + top: -3rem; + left: 0; + background: #3b82f6; + color: #fff; + padding: 0.25rem 0.5rem; + font-size: 0.75rem; + border-radius: 0.25rem; + z-index: 1000; + pointer-events: none; +} +*/ + +/* đŸŽ¯ Universal Layout Foundations System + * ======================================= + * + * This file centralizes common spacing, positioning, and layout patterns + * to ensure consistent spatial relationships across all components. + */ + :root { + /* ✨ SPACING SCALE (based on 0.25rem = 4px base) */ --space-0: 0; --space-px: 1px; - --space-0-5: 0.125rem; - --space-1: 0.25rem; - --space-1-5: 0.375rem; - --space-2: 0.5rem; - --space-2-5: 0.625rem; - --space-3: 0.75rem; - --space-3-5: 0.875rem; - --space-4: 1rem; - --space-5: 1.25rem; - --space-6: 1.5rem; - --space-7: 1.75rem; - --space-8: 2rem; - --space-9: 2.25rem; - --space-10: 2.5rem; - --space-11: 2.75rem; - --space-12: 3rem; - --space-14: 3.5rem; - --space-16: 4rem; - --space-20: 5rem; - --space-24: 6rem; - --space-28: 7rem; - --space-32: 8rem; - --space-36: 9rem; - --space-40: 10rem; - --space-44: 11rem; - --space-48: 12rem; - --space-52: 13rem; - --space-56: 14rem; - --space-60: 15rem; - --space-64: 16rem; - --space-72: 18rem; - --space-80: 20rem; - --space-96: 24rem; - --space-xs: var(--space-1); - --space-sm: var(--space-2); - --space-md: var(--space-4); - --space-lg: var(--space-6); - --space-xl: var(--space-8); - --space-2xl: var(--space-12); - --space-3xl: var(--space-16); - --content-gap-tight: var(--space-2); - --content-gap-normal: var(--space-4); - --content-gap-relaxed: var(--space-6); - --content-gap-loose: var(--space-8); - --component-padding-sm: var(--space-3); - --component-padding-md: var(--space-4); - --component-padding-lg: var(--space-6); - --component-padding-xl: var(--space-8); + --space-0-5: 0.125rem; /* 2px */ + --space-1: 0.25rem; /* 4px */ + --space-1-5: 0.375rem; /* 6px */ + --space-2: 0.5rem; /* 8px */ + --space-2-5: 0.625rem; /* 10px */ + --space-3: 0.75rem; /* 12px */ + --space-3-5: 0.875rem; /* 14px */ + --space-4: 1rem; /* 16px */ + --space-5: 1.25rem; /* 20px */ + --space-6: 1.5rem; /* 24px */ + --space-7: 1.75rem; /* 28px */ + --space-8: 2rem; /* 32px */ + --space-9: 2.25rem; /* 36px */ + --space-10: 2.5rem; /* 40px */ + --space-11: 2.75rem; /* 44px */ + --space-12: 3rem; /* 48px */ + --space-14: 3.5rem; /* 56px */ + --space-16: 4rem; /* 64px */ + --space-20: 5rem; /* 80px */ + --space-24: 6rem; /* 96px */ + --space-28: 7rem; /* 112px */ + --space-32: 8rem; /* 128px */ + --space-36: 9rem; /* 144px */ + --space-40: 10rem; /* 160px */ + --space-44: 11rem; /* 176px */ + --space-48: 12rem; /* 192px */ + --space-52: 13rem; /* 208px */ + --space-56: 14rem; /* 224px */ + --space-60: 15rem; /* 240px */ + --space-64: 16rem; /* 256px */ + --space-72: 18rem; /* 288px */ + --space-80: 20rem; /* 320px */ + --space-96: 24rem; /* 384px */ + + /* ✨ SEMANTIC SPACING TOKENS */ + --space-xs: var(--space-1); /* 4px - Minimal spacing */ + --space-sm: var(--space-2); /* 8px - Small spacing */ + --space-md: var(--space-4); /* 16px - Medium spacing */ + --space-lg: var(--space-6); /* 24px - Large spacing */ + --space-xl: var(--space-8); /* 32px - Extra large spacing */ + --space-2xl: var(--space-12); /* 48px - Double extra large */ + --space-3xl: var(--space-16); /* 64px - Triple extra large */ + + /* ✨ CONTENT SPACING TOKENS */ + --content-gap-tight: var(--space-2); /* 8px - Tight content */ + --content-gap-normal: var(--space-4); /* 16px - Normal content */ + --content-gap-relaxed: var(--space-6); /* 24px - Relaxed content */ + --content-gap-loose: var(--space-8); /* 32px - Loose content */ + + /* ✨ COMPONENT SPACING TOKENS */ + --component-padding-sm: var(--space-3); /* 12px - Small components */ + --component-padding-md: var(--space-4); /* 16px - Medium components */ + --component-padding-lg: var(--space-6); /* 24px - Large components */ + --component-padding-xl: var(--space-8); /* 32px - Extra large components */ + + /* ✨ BORDER RADIUS SCALE */ --radius-none: 0; - --radius-sm: 0.125rem; - --radius-base: 0.25rem; - --radius-md: 0.375rem; - --radius-lg: 0.5rem; - --radius-xl: 0.75rem; - --radius-2xl: 1rem; - --radius-3xl: 1.5rem; - --radius-full: 9999px; - --radius-button: var(--radius-md); - --radius-card: var(--radius-lg); - --radius-modal: var(--radius-xl); - --radius-input: var(--radius-base); + --radius-sm: 0.125rem; /* 2px */ + --radius-base: 0.25rem; /* 4px */ + --radius-md: 0.375rem; /* 6px */ + --radius-lg: 0.5rem; /* 8px */ + --radius-xl: 0.75rem; /* 12px */ + --radius-2xl: 1rem; /* 16px */ + --radius-3xl: 1.5rem; /* 24px */ + --radius-full: 9999px; /* Full radius */ + + /* ✨ SEMANTIC BORDER RADIUS TOKENS */ + --radius-button: var(--radius-md); /* Button border radius */ + --radius-card: var(--radius-lg); /* Card border radius */ + --radius-modal: var(--radius-xl); /* Modal border radius */ + --radius-input: var(--radius-base); /* Input border radius */ + + /* ✨ Z-INDEX SCALE */ --z-behind: -1; --z-base: 0; --z-low: 10; @@ -461,421 +806,471 @@ --z-popover: 1000000; --z-tooltip: 10000000; --z-top: 999999999; + + /* ✨ SEMANTIC Z-INDEX TOKENS */ --z-dropdown: var(--z-overlay); --z-sticky-header: var(--z-high); --z-sidebar: var(--z-medium); --z-loading-overlay: var(--z-modal); --z-toast: var(--z-overlay); - --max-width-xs: 20rem; - --max-width-sm: 24rem; - --max-width-md: 28rem; - --max-width-lg: 32rem; - --max-width-xl: 36rem; - --max-width-2xl: 42rem; - --max-width-3xl: 48rem; - --max-width-4xl: 56rem; - --max-width-5xl: 64rem; - --max-width-6xl: 72rem; - --max-width-7xl: 80rem; + + /* ✨ MAX WIDTH SCALE */ + --max-width-xs: 20rem; /* 320px */ + --max-width-sm: 24rem; /* 384px */ + --max-width-md: 28rem; /* 448px */ + --max-width-lg: 32rem; /* 512px */ + --max-width-xl: 36rem; /* 576px */ + --max-width-2xl: 42rem; /* 672px */ + --max-width-3xl: 48rem; /* 768px */ + --max-width-4xl: 56rem; /* 896px */ + --max-width-5xl: 64rem; /* 1024px */ + --max-width-6xl: 72rem; /* 1152px */ + --max-width-7xl: 80rem; /* 1280px */ --max-width-full: 100%; - --max-width-prose: 65ch; + --max-width-prose: 65ch; /* Optimal reading width */ --max-width-screen-sm: 640px; --max-width-screen-md: 768px; --max-width-screen-lg: 1024px; --max-width-screen-xl: 1280px; --max-width-screen-2xl: 1536px; - --max-width-content: var(--max-width-4xl); - --max-width-sidebar: var(--max-width-xs); - --max-width-modal: var(--max-width-2xl); - --max-width-form: var(--max-width-lg); - --left-rail-width: 18rem; - --right-rail-width: 22rem; - --layout-gap-xl: var(--space-8); - --left-rail-width-2xl: 20rem; - --right-rail-width-2xl: 28rem; - --layout-gap-2xl: var(--space-16); - --grid-card-min: 280px; - --tile-glass-blur: 12px; - --tile-glass-saturate: 140%; + + /* ✨ SEMANTIC MAX WIDTH TOKENS */ + --max-width-content: var(--max-width-4xl); /* Main content area */ + --max-width-sidebar: var(--max-width-xs); /* Sidebar width */ + --max-width-modal: var(--max-width-2xl); /* Modal dialogs */ + --max-width-form: var(--max-width-lg); /* Form containers */ + + /* ✨ LAYOUT SHELL TOKENS (moved from input.css) */ + --left-rail-width: 18rem; /* xl left rail */ + --right-rail-width: 22rem; /* xl right rail */ + --layout-gap-xl: var(--space-8);/* xl gap */ + --left-rail-width-2xl: 20rem; /* 2xl left rail */ + --right-rail-width-2xl: 28rem; /* 2xl right rail */ + --layout-gap-2xl: var(--space-16); /* 2xl gap */ + + /* ✨ GRID/TILE TOKENS (moved from input.css) */ + --grid-card-min: 280px; /* minimum card width for auto-fit grids */ + --tile-glass-blur: 12px; /* tile glass blur amount */ + --tile-glass-saturate: 140%; /* tile glass saturation */ + + /* ✨ GLASSMORPHISM TOKENS (unified) */ --glass-blur: 8px; --glass-saturate: 1.15; --glass-bg: rgba(255, 255, 255, 0.45); --glass-border-color: rgba(255, 255, 255, 0.22); --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } + +/* Dark mode glass adjustments */ + .dark { --glass-bg: rgba(17, 17, 17, 0.5); --glass-border-color: rgba(255, 255, 255, 0.10); --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } + +/* Right-rail presence attribute hook */ + main.layout-shell[data-has-right-rail="false"] { + /* Slightly increase center column breathing room when right rail is hidden */ --layout-gap-xl: var(--space-8); --layout-gap-2xl: var(--space-12); --max-width-content: var(--max-width-5xl); } + +/* Density presets + Apply by adding a class on or
, or via future param-driven mapping */ + .layout-density--compact { - --grid-card-min: 320px; - --layout-gap-xl: var(--space-6); + --grid-card-min: 320px; /* wider cards to reduce row count */ + --layout-gap-xl: var(--space-6); /* slightly tighter gap */ --layout-gap-2xl: var(--space-10); } + .layout-density--comfortable { --grid-card-min: 280px; --layout-gap-xl: var(--space-8); --layout-gap-2xl: var(--space-16); } -.m-auto { - margin: auto; -} -.mx-auto { - margin-left: auto; - margin-right: auto; -} -.my-auto { - margin-top: auto; - margin-bottom: auto; -} -.p-0 { - padding: var(--space-0); -} -.p-1 { - padding: var(--space-1); -} -.p-2 { - padding: var(--space-2); -} -.p-3 { - padding: var(--space-3); -} -.p-4 { - padding: var(--space-4); -} -.p-6 { - padding: var(--space-6); -} -.p-8 { - padding: var(--space-8); -} -.gap-tight { - gap: var(--content-gap-tight); -} -.gap-normal { - gap: var(--content-gap-normal); -} -.gap-relaxed { - gap: var(--content-gap-relaxed); -} -.gap-loose { - gap: var(--content-gap-loose); -} -.padding-sm { - padding: var(--component-padding-sm); -} -.padding-md { - padding: var(--component-padding-md); -} -.padding-lg { - padding: var(--component-padding-lg); -} -.padding-xl { - padding: var(--component-padding-xl); -} -.container { - width: 100%; - max-width: var(--max-width-content); - margin-left: auto; - margin-right: auto; - padding-left: var(--space-4); - padding-right: var(--space-4); -} -.container-narrow { - max-width: var(--max-width-2xl); -} -.container-wide { - max-width: var(--max-width-6xl); -} -.container-full { - max-width: none; - padding-left: 0; - padding-right: 0; -} + +/* ✅ SPACING UTILITY CLASSES + * =========================== + * Consistent spacing patterns for common use cases + */ + +/* Margin utilities */ + +.m-auto { margin: auto; } + +.mx-auto { margin-left: auto; margin-right: auto; } + +.my-auto { margin-top: auto; margin-bottom: auto; } + +/* Padding utilities */ + +.p-0 { padding: var(--space-0); } + +.p-1 { padding: var(--space-1); } + +.p-2 { padding: var(--space-2); } + +.p-3 { padding: var(--space-3); } + +.p-4 { padding: var(--space-4); } + +.p-6 { padding: var(--space-6); } + +.p-8 { padding: var(--space-8); } + +/* Semantic spacing classes */ + +.gap-tight { gap: var(--content-gap-tight); } + +.gap-normal { gap: var(--content-gap-normal); } + +.gap-relaxed { gap: var(--content-gap-relaxed); } + +.gap-loose { gap: var(--content-gap-loose); } + +/* Component padding classes */ + +.padding-sm { padding: var(--component-padding-sm); } + +.padding-md { padding: var(--component-padding-md); } + +.padding-lg { padding: var(--component-padding-lg); } + +.padding-xl { padding: var(--component-padding-xl); } + +/* ✅ LAYOUT PATTERN CLASSES + * ========================== + * Common layout patterns as reusable classes + */ + +/* Container patterns */ + +/* Base .container now handled by TailwindCSS v4 @utility directive in main.css */ + +/* Container variants now handled by TailwindCSS v4 @utility directives in main.css */ + +/* Content sections */ + .section { padding-top: var(--space-12); padding-bottom: var(--space-12); } + .section-sm { padding-top: var(--space-8); padding-bottom: var(--space-8); } + .section-lg { padding-top: var(--space-16); padding-bottom: var(--space-16); } + +/* Stack layouts (vertical spacing) */ + .stack > * + * { margin-top: var(--content-gap-normal); } + .stack-tight > * + * { margin-top: var(--content-gap-tight); } + .stack-relaxed > * + * { margin-top: var(--content-gap-relaxed); } + .stack-loose > * + * { margin-top: var(--content-gap-loose); } + +/* Cluster layouts (horizontal spacing) */ + .cluster { display: flex; flex-wrap: wrap; gap: var(--content-gap-normal); align-items: center; } + .cluster-tight { gap: var(--content-gap-tight); } + .cluster-relaxed { gap: var(--content-gap-relaxed); } + +/* Grid patterns */ + .grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--content-gap-normal); } + .grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } + .grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } + +/* Flexbox patterns */ + .flex-between { display: flex; justify-content: space-between; align-items: center; } + .flex-center { display: flex; justify-content: center; align-items: center; } + .flex-start { display: flex; justify-content: flex-start; align-items: center; } + .flex-end { display: flex; justify-content: flex-end; align-items: center; } -.relative { - position: relative; -} -.absolute { - position: absolute; -} -.fixed { - position: fixed; -} -.sticky { - position: sticky; -} + +/* ✅ POSITIONING UTILITIES + * ========================= + * Common positioning patterns + */ + +.relative { position: relative; } + +.absolute { position: absolute; } + +.fixed { position: fixed; } + +.sticky { position: sticky; } + +/* Absolute positioning helpers */ + .absolute-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } + .absolute-top-left { position: absolute; top: var(--space-2); left: var(--space-2); } + .absolute-top-right { position: absolute; top: var(--space-2); right: var(--space-2); } + .absolute-bottom-left { position: absolute; bottom: var(--space-2); left: var(--space-2); } + .absolute-bottom-right { position: absolute; bottom: var(--space-2); right: var(--space-2); } -.z-behind { - z-index: var(--z-behind); -} -.z-base { - z-index: var(--z-base); -} -.z-low { - z-index: var(--z-low); -} -.z-medium { - z-index: var(--z-medium); -} -.z-high { - z-index: var(--z-high); -} -.z-overlay { - z-index: var(--z-overlay); -} -.z-modal { - z-index: var(--z-modal); -} -.z-top { - z-index: var(--z-top); -} -.rounded-none { - border-radius: var(--radius-none); -} -.rounded-sm { - border-radius: var(--radius-sm); -} -.rounded { - border-radius: var(--radius-base); -} -.rounded-md { - border-radius: var(--radius-md); -} -.rounded-lg { - border-radius: var(--radius-lg); -} -.rounded-xl { - border-radius: var(--radius-xl); -} -.rounded-2xl { - border-radius: var(--radius-2xl); -} -.rounded-3xl { - border-radius: var(--radius-3xl); -} -.rounded-full { - border-radius: var(--radius-full); -} -.rounded-button { - border-radius: var(--radius-button); -} -.rounded-card { - border-radius: var(--radius-card); -} -.rounded-modal { - border-radius: var(--radius-modal); -} -.rounded-input { - border-radius: var(--radius-input); -} -.max-w-xs { - max-width: var(--max-width-xs); -} -.max-w-sm { - max-width: var(--max-width-sm); -} -.max-w-md { - max-width: var(--max-width-md); -} -.max-w-lg { - max-width: var(--max-width-lg); -} -.max-w-xl { - max-width: var(--max-width-xl); -} -.max-w-2xl { - max-width: var(--max-width-2xl); -} -.max-w-3xl { - max-width: var(--max-width-3xl); -} -.max-w-4xl { - max-width: var(--max-width-4xl); -} -.max-w-5xl { - max-width: var(--max-width-5xl); -} -.max-w-6xl { - max-width: var(--max-width-6xl); -} -.max-w-7xl { - max-width: var(--max-width-7xl); -} -.max-w-full { - max-width: var(--max-width-full); -} -.max-w-prose { - max-width: var(--max-width-prose); -} -.max-w-content { - max-width: var(--max-width-content); -} -.max-w-sidebar { - max-width: var(--max-width-sidebar); -} -.max-w-modal { - max-width: var(--max-width-modal); -} -.max-w-form { - max-width: var(--max-width-form); -} + +/* Z-index utilities */ + +.z-behind { z-index: var(--z-behind); } + +.z-base { z-index: var(--z-base); } + +.z-low { z-index: var(--z-low); } + +.z-medium { z-index: var(--z-medium); } + +.z-high { z-index: var(--z-high); } + +.z-overlay { z-index: var(--z-overlay); } + +.z-modal { z-index: var(--z-modal); } + +.z-top { z-index: var(--z-top); } + +/* ✅ BORDER RADIUS UTILITIES + * =========================== + * Consistent border radius patterns + */ + +.rounded-none { border-radius: var(--radius-none); } + +.rounded-sm { border-radius: var(--radius-sm); } + +.rounded { border-radius: var(--radius-base); } + +.rounded-md { border-radius: var(--radius-md); } + +.rounded-lg { border-radius: var(--radius-lg); } + +.rounded-xl { border-radius: var(--radius-xl); } + +.rounded-2xl { border-radius: var(--radius-2xl); } + +.rounded-3xl { border-radius: var(--radius-3xl); } + +.rounded-full { border-radius: var(--radius-full); } + +/* Semantic border radius */ + +.rounded-button { border-radius: var(--radius-button); } + +.rounded-card { border-radius: var(--radius-card); } + +.rounded-modal { border-radius: var(--radius-modal); } + +.rounded-input { border-radius: var(--radius-input); } + +/* ✅ MAX WIDTH UTILITIES + * ======================= + * Consistent content width constraints + */ + +.max-w-xs { max-width: var(--max-width-xs); } + +.max-w-sm { max-width: var(--max-width-sm); } + +.max-w-md { max-width: var(--max-width-md); } + +.max-w-lg { max-width: var(--max-width-lg); } + +.max-w-xl { max-width: var(--max-width-xl); } + +.max-w-2xl { max-width: var(--max-width-2xl); } + +.max-w-3xl { max-width: var(--max-width-3xl); } + +.max-w-4xl { max-width: var(--max-width-4xl); } + +.max-w-5xl { max-width: var(--max-width-5xl); } + +.max-w-6xl { max-width: var(--max-width-6xl); } + +.max-w-7xl { max-width: var(--max-width-7xl); } + +.max-w-full { max-width: var(--max-width-full); } + +.max-w-prose { max-width: var(--max-width-prose); } + +/* Semantic max width */ + +.max-w-content { max-width: var(--max-width-content); } + +.max-w-sidebar { max-width: var(--max-width-sidebar); } + +.max-w-modal { max-width: var(--max-width-modal); } + +.max-w-form { max-width: var(--max-width-form); } + +/* ✅ RESPONSIVE PATTERNS + * ======================= + * Mobile-first responsive design patterns + */ + @media (min-width: 640px) { - .sm\:container { - max-width: var(--max-width-screen-sm); + .sm\:container { + max-width: var(--max-width-screen-sm); } + .sm\:section { padding-top: var(--space-16); padding-bottom: var(--space-16); } + .sm\:padding-lg { padding: var(--component-padding-lg); } } + @media (min-width: 768px) { - .md\:container { - max-width: var(--max-width-screen-md); + .md\:container { + max-width: var(--max-width-screen-md); } + .md\:section { padding-top: var(--space-20); padding-bottom: var(--space-20); } + .md\:padding-xl { padding: var(--component-padding-xl); } + .md\:grid-2 { grid-template-columns: repeat(2, 1fr); } } + @media (min-width: 1024px) { - .lg\:container { - max-width: var(--max-width-screen-lg); + .lg\:container { + max-width: var(--max-width-screen-lg); } + .lg\:section { padding-top: var(--space-24); padding-bottom: var(--space-24); } + .lg\:grid-3 { grid-template-columns: repeat(3, 1fr); } } + @media (min-width: 1280px) { - .xl\:container { - max-width: var(--max-width-screen-xl); + .xl\:container { + max-width: var(--max-width-screen-xl); } + .xl\:grid-4 { grid-template-columns: repeat(4, 1fr); } } + @media (min-width: 1536px) { - .\32xl\:container { - max-width: var(--max-width-screen-2xl); + .\32xl\:container { + max-width: var(--max-width-screen-2xl); } } + +/* ✅ CONTENT FLOW PATTERNS + * ========================= + * Typography and content spacing patterns + */ + +/* Prose content */ + .prose { max-width: var(--max-width-prose); line-height: 1.7; } + .prose > * + * { margin-top: var(--space-4); } + .prose h1, .prose h2, .prose h3, @@ -885,6 +1280,7 @@ main.layout-shell[data-has-right-rail="false"] { margin-top: var(--space-8); margin-bottom: var(--space-4); } + .prose h1:first-child, .prose h2:first-child, .prose h3:first-child, @@ -893,31 +1289,51 @@ main.layout-shell[data-has-right-rail="false"] { .prose h6:first-child { margin-top: 0; } + .prose p + h1, .prose p + h2, .prose p + h3 { margin-top: var(--space-12); } + .prose p + h4, .prose p + h5, .prose p + h6 { margin-top: var(--space-8); } + +/* List spacing */ + .prose ul, .prose ol { padding-left: var(--space-6); } + .prose li + li { margin-top: var(--space-2); } + +/* ✅ ACCESSIBILITY ENHANCEMENTS + * ============================== + * Spacing and layout for accessibility + */ + +/* Focus spacing */ + .focus-spacing:focus-visible { outline-offset: var(--space-1); } + +/* Touch target sizing */ + .touch-target { min-height: 44px; min-width: 44px; padding: var(--space-2); } + +/* Screen reader spacing */ + .sr-only { position: absolute; width: 1px; @@ -929,283 +1345,658 @@ main.layout-shell[data-has-right-rail="false"] { white-space: nowrap; border: 0; } + +/* ✅ PRINT OPTIMIZATIONS + * ======================= + * Layout adjustments for print media + */ + @media print { .section { padding-top: var(--space-6); padding-bottom: var(--space-6); } + .container { padding-left: 0; padding-right: 0; } + .stack > * + * { margin-top: var(--space-3); } } -h1 { - font-size: clamp(1.5rem, 3.5vw, 1.75rem); - line-height: 1.2; - font-weight: 900; - letter-spacing: -0.025em; - word-wrap: break-word; + +/* ✅ PAGE LAYOUT PATTERNS + * ======================== + * Core page structure patterns for Hugo layouts + */ + +/* Layout Shell - Main page container for Hugo's layout structure */ + +.layout-shell { + display: grid; + grid-template-columns: + var(--left-rail-width, 0px) + 1fr + var(--right-rail-width, 0px); + min-height: 100vh; + gap: var(--layout-gap-base, var(--space-4)); } -h2 { - font-size: clamp(1.25rem, 3vw, 1.375rem); - line-height: 1.33; - font-weight: 700; - letter-spacing: -0.025em; - word-wrap: break-word; + +@media (min-width: 1280px) { + .layout-shell { + gap: var(--layout-gap-xl, var(--space-6)); + } } -h3 { - font-size: clamp(1.0625rem, 2.5vw, 1.1875rem); - line-height: 1.4; - font-weight: 700; - letter-spacing: -0.015em; - word-wrap: break-word; + +@media (min-width: 1536px) { + .layout-shell { + gap: var(--layout-gap-2xl, var(--space-8)); + } } -h4 { - letter-spacing: -0.01em; + +/* Page Container - Main content area */ + +.page-container { + padding: var(--space-4); + width: 100%; + min-width: 0; + margin: 0 auto; + max-width: var(--max-width-content, 80rem); } -body { - font-size: clamp(1rem, 2vw, 1.0625rem); - line-height: 1.6; - letter-spacing: 0.01em; + +@media (min-width: 768px) { + .page-container { + flex: 1; + } } -main { - font-family: var(--font-family-brand, inherit); + +@media (min-width: 1280px) { + .page-container { + padding-left: var(--space-8); + padding-right: var(--space-8); + } } -.article-content { + +@media (min-width: 1536px) { + .page-container { + padding-left: var(--space-12); + padding-right: var(--space-12); + } +} + +/* Layout Body - Base body styling */ + +.layout-body { + background-color: var(--color-bg-primary); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-family: var(--font-family-base); color: var(--color-text-primary); - font-size: 1rem; - line-height: 1.65; - letter-spacing: 0.01em; } -@media (min-width: 768px) { - .article-content { - font-size: 1.0625rem; - line-height: 1.6; + +/* ✅ SEMANTIC CONTENT LAYOUT PATTERNS + * ==================================== + * Semantic layout patterns for different content types + */ + +/* Article Layout Components */ + +.article-breadcrumbs, +.article-main { + margin-left: auto; + margin-right: auto; + max-width: var(--max-width-3xl); +} + +@media (min-width: 1280px) { + .article-breadcrumbs, + .article-main { + max-width: var(--max-width-4xl); } } -:root { - --elevation-0: none; - --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.06); - --elevation-2: 0 1px 3px rgba(0, 0, 0, 0.08); - --elevation-3: 0 2px 5px rgba(0, 0, 0, 0.08); - --elevation-4: 0 2px 6px rgba(0, 0, 0, 0.1); - --elevation-6: 0 3px 10px rgba(0, 0, 0, 0.12); - --elevation-8: 0 4px 14px rgba(0, 0, 0, 0.12); - --elevation-12: 0 6px 20px rgba(0, 0, 0, 0.14); - --elevation-16: 0 8px 24px rgba(0, 0, 0, 0.14); - --elevation-24: 0 12px 28px rgba(0, 0, 0, 0.16); - --elevation-hover-1: 0 3px 8px rgba(0, 0, 0, 0.12); - --elevation-hover-2: 0 4px 10px rgba(0, 0, 0, 0.14); - --elevation-hover-3: 0 5px 14px rgba(0, 0, 0, 0.14); - --elevation-hover-4: 0 6px 18px rgba(0, 0, 0, 0.16); - --elevation-hover-6: 0 8px 22px rgba(0, 0, 0, 0.18); - --elevation-hover-8: 0 10px 28px rgba(0, 0, 0, 0.2); - --elevation-brand-subtle: 0 2px 8px rgba(var(--color-brand-rgb), 0.1); - --elevation-brand-medium: 0 4px 16px rgba(var(--color-brand-rgb), 0.15); - --elevation-brand-strong: 0 8px 24px rgba(var(--color-brand-rgb), 0.2); - --elevation-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.15); - --elevation-brand-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.2); - --elevation-inset: inset 0 1px 3px rgba(0, 0, 0, 0.1); - --elevation-inset-deep: inset 0 2px 6px rgba(0, 0, 0, 0.15); - --elevation-outline: 0 0 0 1px rgba(0, 0, 0, 0.1); - --elevation-outline-brand: 0 0 0 1px var(--color-brand); - --elevation-error: 0 4px 12px rgba(239, 68, 68, 0.2); - --elevation-warning: 0 4px 12px rgba(245, 158, 11, 0.2); - --elevation-success: 0 4px 12px rgba(16, 185, 129, 0.2); - --elevation-info: 0 4px 12px rgba(59, 130, 246, 0.2); - --elevation-overlay: 0 24px 48px rgba(0, 0, 0, 0.3); - --elevation-modal: 0 32px 64px rgba(0, 0, 0, 0.4); - --elevation-dropdown: 0 8px 24px rgba(0, 0, 0, 0.15); - --elevation-tooltip: 0 4px 12px rgba(0, 0, 0, 0.2); + +@media (min-width: 1536px) { + .article-breadcrumbs, + .article-main { + max-width: var(--max-width-5xl); + } +} + +.article-breadcrumbs { + margin-bottom: var(--space-4); +} + +.article-header { + margin-bottom: var(--space-6); +} + +.article-title { + font-size: var(--font-size-3xl); + font-weight: 700; + margin-bottom: var(--space-3); + color: var(--color-text-primary); + line-height: 1.1; +} + +/* List Layout Components */ + +.list-breadcrumbs { + margin: var(--space-4) 0; +} + +.list-header { + margin-bottom: var(--space-6); + margin-left: auto; + margin-right: auto; + max-width: var(--max-width-3xl); +} + +@media (min-width: 1280px) { + .list-header { + max-width: var(--max-width-4xl); + } +} + +@media (min-width: 1536px) { + .list-header { + max-width: var(--max-width-5xl); + } +} + +.list-title { + font-size: var(--font-size-3xl); + font-weight: 700; + color: var(--color-text-primary); + margin-bottom: var(--space-4); +} + +.list-content { + max-width: var(--max-width-3xl); +} + +@media (min-width: 1280px) { + .list-content { + max-width: var(--max-width-4xl); + } +} + +@media (min-width: 1536px) { + .list-content { + max-width: var(--max-width-5xl); + } +} + +.list-section { + margin-left: auto; + margin-right: auto; + max-width: var(--max-width-6xl); +} + +@media (min-width: 1536px) { + .list-section { + max-width: var(--max-width-7xl); + } +} + +/* Home Layout Components */ + +.home-content { + color: var(--color-text-primary); + padding: var(--space-4); + margin-left: auto; + margin-right: auto; + max-width: var(--max-width-6xl); +} + +@media (min-width: 1536px) { + .home-content { + max-width: var(--max-width-7xl); + } +} + +.home-tiles { + padding: var(--space-4); + margin-left: auto; + margin-right: auto; + max-width: var(--max-width-6xl); +} + +@media (min-width: 1536px) { + .home-tiles { + max-width: var(--max-width-7xl); + } +} + +/* Section Layout Components */ + +.section-title { + color: var(--color-text-primary); + padding: var(--space-4); + font-size: var(--font-size-3xl); + font-weight: 700; + margin: 0; +} + +.section-content { + padding: var(--space-4); + color: var(--color-text-primary); +} + +.section-footer { + padding: var(--space-4); +} + +/* Typography System - Base type scales and article text + Centralizes type sizing tokens and base rules. */ + +/* Global Headings */ + +h1 { + font-size: clamp(1.5rem, 3.5vw, 1.75rem); /* 24px–28px */ + line-height: 1.2; + font-weight: 900; + letter-spacing: -0.025em; + word-wrap: break-word; +} + +h2 { + font-size: clamp(1.25rem, 3vw, 1.375rem); /* 20px–22px */ + line-height: 1.33; + font-weight: 700; + letter-spacing: -0.025em; + word-wrap: break-word; +} + +h3 { + font-size: clamp(1.0625rem, 2.5vw, 1.1875rem); /* 17px–19px */ + line-height: 1.4; + font-weight: 700; + letter-spacing: -0.015em; + word-wrap: break-word; +} + +h4 { letter-spacing: -0.01em; } + +/* Body */ + +body { + font-size: clamp(1rem, 2vw, 1.0625rem); /* 16px–17px */ + line-height: 1.6; + letter-spacing: 0.01em; +} + +/* Brand font on main */ + +main { font-family: var(--font-family-brand, inherit); } + +/* Article Content Typography */ + +.article-content { + color: var(--color-text-primary); + font-size: 1rem; /* mobile-first */ + line-height: 1.65; /* mobile-first */ + letter-spacing: 0.01em; +} + +@media (min-width: 768px) { + .article-content { + font-size: 1.0625rem; /* 17px */ + line-height: 1.6; + } +} + +/* đŸŽ¯ Universal Elevation System + * ============================== + * + * This file centralizes all box-shadow patterns to create a consistent + * elevation system across the theme. Based on Material Design principles + * but adapted for our brand aesthetic. + */ + +:root { + /* ✨ ELEVATION LEVELS (0-24dp equivalent) */ + --elevation-0: none; + /* --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.1); */ + --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.06); + /* --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1); */ + --elevation-2: 0 1px 3px rgba(0, 0, 0, 0.08); + /* --elevation-3: 0 2px 6px rgba(0, 0, 0, 0.1); */ + --elevation-3: 0 2px 5px rgba(0, 0, 0, 0.08); + /* --elevation-4: 0 2px 8px rgba(0, 0, 0, 0.1); */ + --elevation-4: 0 2px 6px rgba(0, 0, 0, 0.1); + /* --elevation-6: 0 4px 12px rgba(0, 0, 0, 0.1); */ + --elevation-6: 0 3px 10px rgba(0, 0, 0, 0.12); + /* --elevation-8: 0 4px 16px rgba(0, 0, 0, 0.1); */ + --elevation-8: 0 4px 14px rgba(0, 0, 0, 0.12); + /* --elevation-12: 0 8px 24px rgba(0, 0, 0, 0.1); */ + --elevation-12: 0 6px 20px rgba(0, 0, 0, 0.14); + /* --elevation-16: 0 12px 28px rgba(0, 0, 0, 0.1); */ + --elevation-16: 0 8px 24px rgba(0, 0, 0, 0.14); + /* --elevation-24: 0 16px 32px rgba(0, 0, 0, 0.15); */ + --elevation-24: 0 12px 28px rgba(0, 0, 0, 0.16); + + /* ✨ INTERACTIVE ELEVATION (hover states) */ + /* --elevation-hover-1: 0 4px 8px rgba(0, 0, 0, 0.15); */ + --elevation-hover-1: 0 3px 8px rgba(0, 0, 0, 0.12); + /* --elevation-hover-2: 0 4px 12px rgba(0, 0, 0, 0.15); */ + --elevation-hover-2: 0 4px 10px rgba(0, 0, 0, 0.14); + /* --elevation-hover-3: 0 6px 16px rgba(0, 0, 0, 0.15); */ + --elevation-hover-3: 0 5px 14px rgba(0, 0, 0, 0.14); + /* --elevation-hover-4: 0 8px 20px rgba(0, 0, 0, 0.15); */ + --elevation-hover-4: 0 6px 18px rgba(0, 0, 0, 0.16); + /* --elevation-hover-6: 0 12px 28px rgba(0, 0, 0, 0.15); */ + --elevation-hover-6: 0 8px 22px rgba(0, 0, 0, 0.18); + /* --elevation-hover-8: 0 16px 32px rgba(0, 0, 0, 0.2); */ + --elevation-hover-8: 0 10px 28px rgba(0, 0, 0, 0.2); + + /* ✨ BRAND-COLORED ELEVATIONS */ + --elevation-brand-subtle: 0 2px 8px rgba(var(--color-brand-rgb), 0.1); + --elevation-brand-medium: 0 4px 16px rgba(var(--color-brand-rgb), 0.15); + --elevation-brand-strong: 0 8px 24px rgba(var(--color-brand-rgb), 0.2); + --elevation-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.15); + --elevation-brand-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.2); + + /* ✨ SPECIALIZED ELEVATIONS */ + --elevation-inset: inset 0 1px 3px rgba(0, 0, 0, 0.1); + --elevation-inset-deep: inset 0 2px 6px rgba(0, 0, 0, 0.15); + --elevation-outline: 0 0 0 1px rgba(0, 0, 0, 0.1); + --elevation-outline-brand: 0 0 0 1px var(--color-brand); + + /* ✨ ERROR/WARNING/SUCCESS ELEVATIONS */ + --elevation-error: 0 4px 12px rgba(239, 68, 68, 0.2); + --elevation-warning: 0 4px 12px rgba(245, 158, 11, 0.2); + --elevation-success: 0 4px 12px rgba(16, 185, 129, 0.2); + --elevation-info: 0 4px 12px rgba(59, 130, 246, 0.2); + + /* ✨ OVERLAYS AND MODALS */ + --elevation-overlay: 0 24px 48px rgba(0, 0, 0, 0.3); + --elevation-modal: 0 32px 64px rgba(0, 0, 0, 0.4); + --elevation-dropdown: 0 8px 24px rgba(0, 0, 0, 0.15); + --elevation-tooltip: 0 4px 12px rgba(0, 0, 0, 0.2); } + +/* 🌙 DARK MODE ELEVATION ADJUSTMENTS */ + .dark { + /* Stronger shadows for dark mode */ + /* --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.3); */ --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.25); + /* --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.3); */ --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.28); + /* --elevation-3: 0 2px 6px rgba(0, 0, 0, 0.4); */ --elevation-3: 0 2px 5px rgba(0, 0, 0, 0.34); + /* --elevation-4: 0 2px 8px rgba(0, 0, 0, 0.4); */ --elevation-4: 0 2px 6px rgba(0, 0, 0, 0.36); + /* --elevation-6: 0 4px 12px rgba(0, 0, 0, 0.4); */ --elevation-6: 0 3px 10px rgba(0, 0, 0, 0.4); + /* --elevation-8: 0 4px 16px rgba(0, 0, 0, 0.5); */ --elevation-8: 0 4px 14px rgba(0, 0, 0, 0.48); + /* --elevation-12: 0 8px 24px rgba(0, 0, 0, 0.5); */ --elevation-12: 0 6px 20px rgba(0, 0, 0, 0.5); + /* --elevation-16: 0 12px 28px rgba(0, 0, 0, 0.6); */ --elevation-16: 0 8px 24px rgba(0, 0, 0, 0.56); + /* --elevation-24: 0 16px 32px rgba(0, 0, 0, 0.7); */ --elevation-24: 0 12px 28px rgba(0, 0, 0, 0.6); + + /* Enhanced hover states for dark mode */ + /* --elevation-hover-1: 0 4px 8px rgba(0, 0, 0, 0.5); */ --elevation-hover-1: 0 3px 8px rgba(0, 0, 0, 0.44); + /* --elevation-hover-2: 0 4px 12px rgba(0, 0, 0, 0.5); */ --elevation-hover-2: 0 4px 10px rgba(0, 0, 0, 0.48); + /* --elevation-hover-3: 0 6px 16px rgba(0, 0, 0, 0.6); */ --elevation-hover-3: 0 5px 14px rgba(0, 0, 0, 0.5); + /* --elevation-hover-4: 0 8px 20px rgba(0, 0, 0, 0.6); */ --elevation-hover-4: 0 6px 18px rgba(0, 0, 0, 0.54); + /* --elevation-hover-6: 0 12px 28px rgba(0, 0, 0, 0.7); */ --elevation-hover-6: 0 8px 22px rgba(0, 0, 0, 0.58); + /* --elevation-hover-8: 0 16px 32px rgba(0, 0, 0, 0.8); */ --elevation-hover-8: 0 10px 28px rgba(0, 0, 0, 0.62); + + /* Enhanced brand elevations for dark mode */ --elevation-brand-subtle: 0 2px 8px rgba(var(--color-brand-rgb), 0.15); --elevation-brand-medium: 0 4px 16px rgba(var(--color-brand-rgb), 0.2); --elevation-brand-strong: 0 8px 24px rgba(var(--color-brand-rgb), 0.25); --elevation-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.25); --elevation-brand-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.3); + + /* Enhanced overlay elevations for dark mode */ --elevation-overlay: 0 24px 48px rgba(0, 0, 0, 0.8); --elevation-modal: 0 32px 64px rgba(0, 0, 0, 0.9); --elevation-dropdown: 0 8px 24px rgba(0, 0, 0, 0.6); --elevation-tooltip: 0 4px 12px rgba(0, 0, 0, 0.7); } -.elevation-0 { - box-shadow: var(--elevation-0); -} -.elevation-1 { - box-shadow: var(--elevation-1); -} -.elevation-2 { - box-shadow: var(--elevation-2); -} -.elevation-3 { - box-shadow: var(--elevation-3); -} -.elevation-4 { - box-shadow: var(--elevation-4); -} -.elevation-6 { - box-shadow: var(--elevation-6); -} -.elevation-8 { - box-shadow: var(--elevation-8); -} -.elevation-12 { - box-shadow: var(--elevation-12); -} -.elevation-16 { - box-shadow: var(--elevation-16); -} -.elevation-24 { - box-shadow: var(--elevation-24); -} -.elevation-hover-1:hover { - box-shadow: var(--elevation-hover-1); -} -.elevation-hover-2:hover { - box-shadow: var(--elevation-hover-2); -} -.elevation-hover-3:hover { - box-shadow: var(--elevation-hover-3); -} -.elevation-hover-4:hover { - box-shadow: var(--elevation-hover-4); -} -.elevation-hover-6:hover { - box-shadow: var(--elevation-hover-6); -} -.elevation-hover-8:hover { - box-shadow: var(--elevation-hover-8); -} -.elevation-brand-subtle { - box-shadow: var(--elevation-brand-subtle); -} -.elevation-brand-medium { - box-shadow: var(--elevation-brand-medium); -} -.elevation-brand-strong { - box-shadow: var(--elevation-brand-strong); -} -.elevation-brand-glow { - box-shadow: var(--elevation-brand-glow); -} -.elevation-focus:focus-visible { + +/* ✅ ELEVATION UTILITY CLASSES + * ============================= + * Apply these classes for consistent elevation + */ + +.elevation-0 { box-shadow: var(--elevation-0); } + +.elevation-1 { box-shadow: var(--elevation-1); } + +.elevation-2 { box-shadow: var(--elevation-2); } + +.elevation-3 { box-shadow: var(--elevation-3); } + +.elevation-4 { box-shadow: var(--elevation-4); } + +.elevation-6 { box-shadow: var(--elevation-6); } + +.elevation-8 { box-shadow: var(--elevation-8); } + +.elevation-12 { box-shadow: var(--elevation-12); } + +.elevation-16 { box-shadow: var(--elevation-16); } + +.elevation-24 { box-shadow: var(--elevation-24); } + +/* Hover elevation classes */ + +.elevation-hover-1:hover { box-shadow: var(--elevation-hover-1); } + +.elevation-hover-2:hover { box-shadow: var(--elevation-hover-2); } + +.elevation-hover-3:hover { box-shadow: var(--elevation-hover-3); } + +.elevation-hover-4:hover { box-shadow: var(--elevation-hover-4); } + +.elevation-hover-6:hover { box-shadow: var(--elevation-hover-6); } + +.elevation-hover-8:hover { box-shadow: var(--elevation-hover-8); } + +/* Brand elevation classes */ + +.elevation-brand-subtle { box-shadow: var(--elevation-brand-subtle); } + +.elevation-brand-medium { box-shadow: var(--elevation-brand-medium); } + +.elevation-brand-strong { box-shadow: var(--elevation-brand-strong); } + +.elevation-brand-glow { box-shadow: var(--elevation-brand-glow); } + +/* Focus elevation */ + +.elevation-focus:focus-visible { box-shadow: var(--elevation-brand-focus); outline: none; } + +/* ✅ COMPONENT-SPECIFIC ELEVATION MAPPINGS + * ========================================= + * Semantic elevation assignments for common components + */ + +/* Surface elements */ + .surface { box-shadow: var(--elevation-0); } + .surface-raised { box-shadow: var(--elevation-1); } + +/* Cards */ + .card-flat { box-shadow: var(--elevation-1); } + .card-raised { box-shadow: var(--elevation-2); } + .card-elevated { box-shadow: var(--elevation-4); } + .card-floating { box-shadow: var(--elevation-8); } + +/* Interactive cards with hover */ + .card-interactive { box-shadow: var(--elevation-2); transition: box-shadow var(--timing-medium) var(--easing-standard); } + .card-interactive:hover { box-shadow: var(--elevation-hover-4); } + +/* Buttons */ + .btn-flat { box-shadow: var(--elevation-0); } + .btn-raised { box-shadow: var(--elevation-1); } + .btn-floating { box-shadow: var(--elevation-6); } + .btn-raised:hover, .btn-floating:hover { box-shadow: var(--elevation-hover-2); } + +/* Navigation */ + .nav-bar { box-shadow: var(--elevation-2); } + .nav-drawer { box-shadow: var(--elevation-16); } + .nav-tabs { box-shadow: var(--elevation-1); } + +/* Overlays */ + .dropdown-menu { box-shadow: var(--elevation-dropdown); } + .modal-content { box-shadow: var(--elevation-modal); } + .tooltip { box-shadow: var(--elevation-tooltip); } + .popover { box-shadow: var(--elevation-8); } + +/* Content sections */ + .content-section { box-shadow: var(--elevation-1); } + .featured-content { box-shadow: var(--elevation-4); } + .hero-section { box-shadow: var(--elevation-8); } + +/* ✅ STATE-BASED ELEVATIONS + * ========================== + * Elevation changes based on component state + */ + +/* Loading states get reduced elevation */ + [data-component-state="loading"] { box-shadow: var(--elevation-1) !important; opacity: var(--opacity-faded); } + +/* Error states get error elevation */ + [data-component-state="error"] { box-shadow: var(--elevation-error) !important; } + +/* Focus states for accessibility */ + [data-component-state="focused"] { box-shadow: var(--elevation-brand-focus) !important; } + +/* ✅ COMBINED ELEVATIONS + * ======================= + * Multiple shadows for complex effects + */ + .elevation-layered { - box-shadow: var(--elevation-2), + box-shadow: + var(--elevation-2), var(--elevation-brand-glow); } + .elevation-outlined { - box-shadow: var(--elevation-4), + box-shadow: + var(--elevation-4), var(--elevation-outline); } + .elevation-brand-outlined { - box-shadow: var(--elevation-4), + box-shadow: + var(--elevation-4), var(--elevation-outline-brand); } + +/* ✅ PERFORMANCE OPTIMIZATIONS + * ============================= + * Enable hardware acceleration for elements with elevation changes + */ + .elevation-animated { will-change: box-shadow; - transform: translateZ(0); + transform: translateZ(0); /* Force hardware acceleration */ } + +/* ✅ ACCESSIBILITY ENHANCEMENTS + * ============================== + * High contrast and reduced motion support + */ + @media (prefers-contrast: high) { + /* Enhance shadows for better visibility */ :root { --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.3); --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.3); @@ -1213,7 +2004,9 @@ main { --elevation-6: 0 4px 12px rgba(0, 0, 0, 0.4); } } + @media (prefers-reduced-motion: reduce) { + /* Remove shadow transitions for reduced motion */ .card-interactive, .btn-raised, .btn-floating, @@ -1221,99 +2014,162 @@ main { transition: none !important; } } + +/* ✅ PRINT STYLES + * ================ + * Remove shadows for print media + */ + @media print { * { box-shadow: none !important; } } + +/* đŸŽ¯ Universal Interaction Patterns System + * ======================================== + * + * This file centralizes all hover, focus, active, and interactive patterns + * to eliminate the hundreds of scattered transform/transition definitions + * across component files. + */ + :root { - --hover-lift-subtle: translateY(-1px); - --hover-lift-medium: translateY(-2px); - --hover-lift-dramatic: translateY(-4px); - --hover-scale-up: scale(1.02); - --hover-scale-down: scale(0.98); - --hover-combined-lift: translateY(-2px) scale(1.02); + /* ✨ INTERACTION TRANSFORM TOKENS */ + --hover-lift-subtle: translateY(-1px); /* Buttons, small elements */ + --hover-lift-medium: translateY(-2px); /* Cards, medium elements */ + --hover-lift-dramatic: translateY(-4px); /* Hero cards, dramatic elements */ + --hover-scale-up: scale(1.02); /* Slight growth on hover */ + --hover-scale-down: scale(0.98); /* Slight shrink on active */ + --hover-combined-lift: translateY(-2px) scale(1.02); /* Combined lift + scale */ + + /* ✨ SHADOW ELEVATION TOKENS */ --shadow-rest: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-hover-subtle: 0 4px 8px rgba(0, 0, 0, 0.1); --shadow-hover-medium: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-hover-dramatic: 0 12px 28px rgba(0, 0, 0, 0.12); --shadow-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.2); --shadow-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.15); - --transition-interactive: transform var(--timing-fast) var(--easing-standard), + + /* ✨ TRANSITION SETS - Reusable combinations */ + --transition-interactive: + transform var(--timing-fast) var(--easing-standard), box-shadow var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard); - --transition-elevation: transform var(--timing-medium) var(--easing-standard), + + --transition-elevation: + transform var(--timing-medium) var(--easing-standard), box-shadow var(--timing-medium) var(--easing-standard); - --transition-button: background-color var(--timing-fast) var(--easing-standard), + + --transition-button: + background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard), box-shadow var(--timing-fast) var(--easing-standard); } + +/* ✅ INTERACTION BEHAVIOR CLASSES + * ================================ + * Apply these classes for consistent interactive behavior + */ + +/* Subtle interactive elements (buttons, small cards) */ + .interact-subtle { transition: var(--transition-interactive); cursor: pointer; } + .interact-subtle:hover { transform: var(--hover-lift-subtle); box-shadow: var(--shadow-hover-subtle); } + .interact-subtle:active { transform: var(--hover-scale-down); transition-duration: var(--timing-instant); } + +/* Medium interactive elements (content cards, tiles) */ + .interact-medium { transition: var(--transition-elevation); cursor: pointer; } + .interact-medium:hover { transform: var(--hover-lift-medium); box-shadow: var(--shadow-hover-medium); } + .interact-medium:active { transform: var(--hover-scale-down); transition-duration: var(--timing-instant); } + +/* Dramatic interactive elements (hero cards, featured content) */ + .interact-dramatic { transition: var(--transition-elevation); cursor: pointer; } + .interact-dramatic:hover { transform: var(--hover-lift-dramatic); box-shadow: var(--shadow-hover-dramatic); border-color: var(--color-brand); } + .interact-dramatic:active { transform: var(--hover-combined-lift); transition-duration: var(--timing-instant); } + +/* ✅ BUTTON INTERACTION PATTERNS + * =============================== + * Specialized patterns for button-like elements + */ + .btn-interact { transition: var(--transition-button); position: relative; overflow: hidden; } + .btn-interact:hover { transform: var(--hover-lift-subtle); box-shadow: var(--shadow-hover-medium); } + .btn-interact:active { transform: var(--hover-scale-down); transition-duration: var(--timing-instant); } + .btn-interact:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; box-shadow: var(--shadow-focus); } + +/* ✅ BRAND-FOCUSED INTERACTIONS + * ============================== + * Elements that should emphasize brand colors + */ + .interact-brand { transition: var(--transition-elevation); cursor: pointer; } + .interact-brand:hover { transform: var(--hover-lift-medium); - box-shadow: var(--shadow-hover-medium), + box-shadow: + var(--shadow-hover-medium), var(--shadow-brand-glow); border-color: var(--color-brand); } + .interact-brand:hover h1, .interact-brand:hover h2, .interact-brand:hover h3, @@ -1323,16 +2179,30 @@ main { color: var(--color-brand); transition: color var(--timing-fast) var(--easing-standard); } + +/* ✅ FOCUS MANAGEMENT + * ==================== + * Consistent focus indicators across all interactive elements + */ + .focusable { - border-radius: 0.25rem; + border-radius: 0.25rem; /* Ensure focus outline has proper shape */ } + .focusable:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; box-shadow: var(--shadow-focus); - transition: outline-color var(--timing-fast) var(--easing-standard), + transition: + outline-color var(--timing-fast) var(--easing-standard), box-shadow var(--timing-fast) var(--easing-standard); } + +/* ✅ DISABLED STATES + * =================== + * Consistent disabled behavior + */ + .interact-disabled, [data-interactive="false"], .interact-subtle:disabled, @@ -1342,28 +2212,51 @@ main { cursor: not-allowed; pointer-events: none; filter: grayscale(50%); - transition: opacity var(--timing-fast) var(--easing-standard), + transition: + opacity var(--timing-fast) var(--easing-standard), filter var(--timing-fast) var(--easing-standard); } + +/* ✅ LOADING STATES + * ================== + * Interactive elements in loading state + */ + .interact-loading { opacity: var(--loading-opacity); cursor: wait; pointer-events: none; filter: var(--loading-blur); - transition: opacity var(--timing-fast) var(--easing-standard), + transition: + opacity var(--timing-fast) var(--easing-standard), filter var(--timing-fast) var(--easing-standard); } + +/* ✅ NESTED INTERACTION INHERITANCE + * ================================== + * Child elements inherit parent interaction states + */ + .interact-subtle:hover .nested-text, .interact-medium:hover .nested-text, .interact-dramatic:hover .nested-text { color: var(--color-brand); transition: color var(--timing-fast) var(--easing-standard); } + +/* ✅ ACCESSIBILITY ENHANCEMENTS + * ============================== + * Enhanced interaction patterns for accessibility + */ + +/* High contrast mode support */ + @media (prefers-contrast: high) { .focusable:focus-visible { outline-width: 3px; outline-style: solid; } + .interact-subtle:hover, .interact-medium:hover, .interact-dramatic:hover { @@ -1372,6 +2265,9 @@ main { border-color: var(--color-brand); } } + +/* Reduced motion support */ + @media (prefers-reduced-motion: reduce) { .interact-subtle, .interact-medium, @@ -1381,6 +2277,7 @@ main { transition: none !important; transform: none !important; } + .interact-subtle:hover, .interact-medium:hover, .interact-dramatic:hover, @@ -1389,13 +2286,22 @@ main { transform: none !important; } } + +/* ✅ TOUCH DEVICE OPTIMIZATIONS + * ============================== + * Better interactions for touch devices + */ + @media (hover: none) and (pointer: coarse) { + /* Reduce hover effects on touch devices */ .interact-subtle:hover, .interact-medium:hover, .interact-dramatic:hover { transform: none; box-shadow: var(--shadow-rest); } + + /* Enhance active states for touch feedback */ .interact-subtle:active, .interact-medium:active, .interact-dramatic:active { @@ -1403,6 +2309,12 @@ main { opacity: 0.8; } } + +/* ✅ DARK MODE ENHANCEMENTS + * ========================== + * Enhanced shadows and interactions for dark mode + */ + .dark { --shadow-rest: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-hover-subtle: 0 4px 8px rgba(0, 0, 0, 0.3); @@ -1411,18 +2323,56 @@ main { --shadow-focus: 0 0 0 2px rgba(var(--color-brand-rgb), 0.3); --shadow-brand-glow: 0 0 20px rgba(var(--color-brand-rgb), 0.25); } + +/* ✅ COMPONENT-SPECIFIC OVERRIDES + * ================================ + * Allow components to customize interaction patterns + */ + +/* Cards and tiles can use larger transforms */ + +.card, +.tile { + /* Use .interact-medium or .interact-dramatic class instead of custom transforms */ +} + +/* Buttons get subtle interactions by default */ + +.btn { + /* Use .btn-interact class instead of custom transforms */ +} + +/* Navigation items get subtle interactions */ + +.nav-item, +.sidebar__item { + /* Use .interact-subtle class instead of custom transforms */ +} + +/* đŸŽ¯ Universal Loading States System + * =================================== + * + * This file centralizes all loading patterns, skeletons, and async state + * management to ensure consistent loading experiences across components. + */ + :root { + /* ✨ LOADING TIMING TOKENS */ --loading-duration-fast: 1s; --loading-duration-normal: 1.5s; --loading-duration-slow: 2s; --loading-pulse-duration: 2s; --loading-shimmer-duration: 1.5s; + + /* ✨ LOADING VISUAL TOKENS */ --loading-opacity: 0.6; --loading-blur: blur(1px); --loading-grayscale: grayscale(30%); --loading-backdrop: rgba(255, 255, 255, 0.8); --loading-spinner-size: 2rem; --loading-spinner-border: 2px; + + /* ✨ SKELETON TOKENS */ --skeleton-bg-base: rgba(var(--color-text-primary-rgb, 0, 0, 0), 0.1); --skeleton-bg-shimmer: rgba(var(--color-text-primary-rgb, 0, 0, 0), 0.2); --skeleton-border-radius: 0.25rem; @@ -1430,12 +2380,16 @@ main { --skeleton-height-title: 1.5rem; --skeleton-height-button: 2.5rem; --skeleton-height-avatar: 3rem; + + /* ✨ SHIMMER GRADIENT */ --shimmer-gradient: linear-gradient( 90deg, var(--skeleton-bg-base) 25%, var(--skeleton-bg-shimmer) 50%, var(--skeleton-bg-base) 75% ); + + /* ✨ PULSE GRADIENT */ --pulse-gradient: linear-gradient( 45deg, rgba(var(--color-brand-rgb), 0.1) 0%, @@ -1443,10 +2397,14 @@ main { rgba(var(--color-brand-rgb), 0.1) 100% ); } + +/* 🌙 DARK MODE LOADING ADJUSTMENTS */ + .dark { --loading-backdrop: rgba(0, 0, 0, 0.8); --skeleton-bg-base: rgba(255, 255, 255, 0.1); --skeleton-bg-shimmer: rgba(255, 255, 255, 0.2); + --shimmer-gradient: linear-gradient( 90deg, var(--skeleton-bg-base) 25%, @@ -1454,31 +2412,51 @@ main { var(--skeleton-bg-base) 75% ); } + +/* ✅ LOADING STATE CLASSES + * ========================= + * Apply these classes to show loading states + */ + +/* Basic loading state */ + .loading { opacity: var(--loading-opacity); pointer-events: none; cursor: wait; transition: opacity var(--timing-fast) var(--easing-standard); } + +/* Loading with blur effect */ + .loading-blur { opacity: var(--loading-opacity); filter: var(--loading-blur); pointer-events: none; cursor: wait; - transition: opacity var(--timing-fast) var(--easing-standard), + transition: + opacity var(--timing-fast) var(--easing-standard), filter var(--timing-fast) var(--easing-standard); } + +/* Loading with grayscale effect */ + .loading-muted { opacity: var(--loading-opacity); filter: var(--loading-grayscale); pointer-events: none; cursor: wait; - transition: opacity var(--timing-fast) var(--easing-standard), + transition: + opacity var(--timing-fast) var(--easing-standard), filter var(--timing-fast) var(--easing-standard); } + +/* Loading overlay */ + .loading-overlay { position: relative; } + .loading-overlay::before { content: ''; position: absolute; @@ -1493,10 +2471,19 @@ main { pointer-events: none; transition: opacity var(--timing-medium) var(--easing-standard); } + .loading-overlay.is-loading::before { opacity: 1; pointer-events: auto; } + +/* ✅ SPINNER COMPONENTS + * ====================== + * Various spinner patterns + */ + +/* Basic spinner */ + .spinner { width: var(--loading-spinner-size); height: var(--loading-spinner-size); @@ -1506,18 +2493,24 @@ main { animation: spin var(--loading-duration-fast) linear infinite; display: inline-block; } + .spinner-sm { --loading-spinner-size: 1rem; --loading-spinner-border: 1px; } + .spinner-lg { --loading-spinner-size: 3rem; --loading-spinner-border: 3px; } + +/* Dots spinner */ + .spinner-dots { display: inline-flex; gap: 0.25rem; } + .spinner-dots::before, .spinner-dots::after { content: ''; @@ -1527,12 +2520,17 @@ main { border-radius: 50%; animation: pulse var(--loading-pulse-duration) ease-in-out infinite; } + .spinner-dots::before { animation-delay: 0s; } + .spinner-dots::after { animation-delay: 0.5s; } + +/* Pulse spinner */ + .spinner-pulse { width: var(--loading-spinner-size); height: var(--loading-spinner-size); @@ -1540,12 +2538,21 @@ main { border-radius: 50%; animation: pulse var(--loading-pulse-duration) ease-in-out infinite; } + +/* ✅ SKELETON COMPONENTS + * ======================= + * Skeleton loading patterns for different content types + */ + +/* Base skeleton */ + .skeleton { background: var(--skeleton-bg-base); border-radius: var(--skeleton-border-radius); position: relative; overflow: hidden; } + .skeleton::after { content: ''; position: absolute; @@ -1556,111 +2563,167 @@ main { background: var(--shimmer-gradient); animation: shimmer var(--loading-shimmer-duration) ease-in-out infinite; } + +/* Skeleton variations */ + .skeleton-text { height: var(--skeleton-height-text); width: 100%; } + .skeleton-text-short { width: 75%; } + .skeleton-text-long { width: 90%; } + .skeleton-title { height: var(--skeleton-height-title); width: 60%; margin-bottom: var(--space-2); } + .skeleton-button { height: var(--skeleton-height-button); width: 120px; border-radius: var(--radius-button); } + .skeleton-avatar { width: var(--skeleton-height-avatar); height: var(--skeleton-height-avatar); border-radius: 50%; } + .skeleton-card { height: 200px; border-radius: var(--radius-card); } + .skeleton-image { height: 150px; width: 100%; border-radius: var(--radius-base); } + +/* ✅ SKELETON LAYOUTS + * ==================== + * Complete skeleton layouts for common components + */ + +/* Article skeleton */ + .skeleton-article { padding: var(--space-6); } + .skeleton-article .skeleton-title { margin-bottom: var(--space-4); } + .skeleton-article .skeleton-text { margin-bottom: var(--space-3); } + .skeleton-article .skeleton-text:last-child { width: 65%; margin-bottom: 0; } + +/* Card skeleton */ + .skeleton-card-content { padding: var(--space-4); } + .skeleton-card-content .skeleton-image { margin-bottom: var(--space-4); } + .skeleton-card-content .skeleton-title { margin-bottom: var(--space-3); } + .skeleton-card-content .skeleton-text { margin-bottom: var(--space-2); } + +/* List item skeleton */ + .skeleton-list-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); } + .skeleton-list-item .skeleton-avatar { - flex-shrink: 0; + shrink: 0; } + .skeleton-list-item .skeleton-content { flex: 1; } + .skeleton-list-item .skeleton-text { margin-bottom: var(--space-1); } + .skeleton-list-item .skeleton-text:last-child { width: 40%; margin-bottom: 0; } + +/* ✅ PROGRESSIVE LOADING + * ======================= + * Progressive reveal patterns + */ + .progressive-load { opacity: 0; transform: var(--transform-slide-in-up); - transition: opacity var(--timing-medium) var(--easing-standard), + transition: + opacity var(--timing-medium) var(--easing-standard), transform var(--timing-medium) var(--easing-standard); } + .progressive-load.loaded { opacity: 1; transform: var(--transform-translate-none); } + +/* Staggered progressive loading */ + .progressive-load-stagger > * { opacity: 0; transform: var(--transform-slide-in-up); - transition: opacity var(--timing-medium) var(--easing-standard), + transition: + opacity var(--timing-medium) var(--easing-standard), transform var(--timing-medium) var(--easing-standard); transition-delay: calc(var(--reveal-stagger-delay) * var(--stagger-index, 0)); } + .progressive-load-stagger.loaded > * { opacity: 1; transform: var(--transform-translate-none); } + +/* ✅ ASYNC OPERATION STATES + * ========================== + * Loading states for different async operations + */ + +/* Button loading states */ + .btn-loading { position: relative; color: transparent !important; cursor: wait; pointer-events: none; } + .btn-loading::after { content: ''; position: absolute; @@ -1674,36 +2737,57 @@ main { border-radius: 50%; animation: spin var(--loading-duration-fast) linear infinite; } + +/* Form loading states */ + .form-loading { opacity: var(--loading-opacity); pointer-events: none; } + .form-loading input, .form-loading textarea, .form-loading select { cursor: wait; background-color: var(--color-surface-muted); } + +/* Content loading states */ + .content-loading { min-height: 200px; display: flex; align-items: center; justify-content: center; } + +/* ✅ ERROR AND RETRY STATES + * ========================== + * Loading error and retry patterns + */ + .loading-error { padding: var(--space-6); text-align: center; color: var(--color-text-secondary); } + .loading-error-icon { width: 3rem; height: 3rem; margin: 0 auto var(--space-4); opacity: 0.5; } + .retry-button { margin-top: var(--space-4); } + +/* ✅ KEYFRAME ANIMATIONS + * ======================= + * Loading-specific animations + */ + @keyframes spin { from { transform: rotate(0deg); @@ -1712,6 +2796,7 @@ main { transform: rotate(360deg); } } + @keyframes pulse { 0%, 100% { opacity: 0.3; @@ -1722,6 +2807,7 @@ main { transform: scale(1.1); } } + @keyframes shimmer { 0% { left: -100%; @@ -1730,6 +2816,7 @@ main { left: 100%; } } + @keyframes fade-pulse { 0%, 100% { opacity: 0.3; @@ -1738,6 +2825,14 @@ main { opacity: 0.7; } } + +/* ✅ ACCESSIBILITY ENHANCEMENTS + * ============================== + * Loading states for screen readers and reduced motion + */ + +/* Screen reader announcements */ + .sr-loading-text { position: absolute; left: -10000px; @@ -1745,39 +2840,57 @@ main { height: 1px; overflow: hidden; } + +/* Reduced motion support */ + @media (prefers-reduced-motion: reduce) { .spinner, .spinner-pulse, .skeleton::after { animation: fade-pulse var(--loading-duration-slow) ease-in-out infinite; } + .progressive-load, .progressive-load-stagger > * { transition: opacity var(--timing-fast) ease; transform: none !important; } } + +/* High contrast mode */ + @media (prefers-contrast: high) { .skeleton { background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.3); } + .dark .skeleton { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); } } + +/* ✅ COMPONENT INTEGRATION + * ========================= + * Integration with existing component systems + */ + +/* Loading states for data attributes */ + [data-loading="true"] { opacity: var(--loading-opacity); pointer-events: none; cursor: wait; } + [data-loading-type="skeleton"] { background: var(--skeleton-bg-base); border-radius: var(--skeleton-border-radius); position: relative; overflow: hidden; } + [data-loading-type="skeleton"]::after { content: ''; position: absolute; @@ -1788,30 +2901,40 @@ main { background: var(--shimmer-gradient); animation: shimmer var(--loading-shimmer-duration) ease-in-out infinite; } + +/* Loading states for component states */ + [data-component-state="loading"] { opacity: var(--loading-opacity); filter: var(--loading-blur); pointer-events: none; cursor: wait; } + +/* ✅ PERFORMANCE OPTIMIZATIONS + * ============================= + * Hardware acceleration for loading animations + */ + .spinner, .skeleton::after, .progressive-load { will-change: transform, opacity; - transform: translateZ(0); -} -.is-loading { - opacity: var(--loading-opacity); - pointer-events: none; -} -.is-skeleton { - background: var(--skeleton-bg-base); + transform: translateZ(0); /* Force hardware acceleration */ } -.has-shimmer { - position: relative; - overflow: hidden; -} -.has-shimmer::after { + +/* ✅ UTILITY CLASSES + * =================== + * Quick loading state utilities + */ + +.is-loading { opacity: var(--loading-opacity); pointer-events: none; } + +.is-skeleton { background: var(--skeleton-bg-base); } + +.has-shimmer { position: relative; overflow: hidden; } + +.has-shimmer::after { content: ''; position: absolute; top: 0; @@ -1821,28 +2944,24 @@ main { background: var(--shimmer-gradient); animation: shimmer var(--loading-shimmer-duration) ease-in-out infinite; } + +/* Component Imports: Flat Structure for Better Visibility */ + +/* Buttons Component - Enhanced button system with NVIDIA styling */ + +/* Enhanced Button System */ + .btn { display: inline-flex; align-items: center; justify-content: center; - padding-inline: calc(var(--spacing) * 4); - padding-block: calc(var(--spacing) * 2); - --tw-font-weight: var(--font-weight-medium); - font-weight: var(--font-weight-medium); - &:focus { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - &:focus { - --tw-ring-offset-width: 2px; - --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - } - &:focus { - --tw-outline-style: none; - outline-style: none; - } + padding: var(--space-2) var(--space-4); + font-weight: 500; + outline: none; border-radius: var(--radius-button); - transition: background-color var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard), @@ -1853,83 +2972,103 @@ main { position: relative; overflow: hidden; } + .btn:disabled { + opacity: 0.5; cursor: not-allowed; - opacity: 50%; } + .btn--primary { background-color: var(--color-brand); color: var(--color-text-inverse); --tw-ring-color: var(--color-brand); } + .btn--primary:hover:not(:disabled) { background-color: var(--color-brand-1); transform: var(--transform-lift-subtle); box-shadow: var(--elevation-hover-2); } + .btn--secondary { background-color: var(--color-surface); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); --tw-ring-color: var(--color-brand); } + .btn--secondary:hover:not(:disabled) { background-color: var(--color-surface-hover); border-color: var(--color-brand); transform: var(--transform-lift-subtle); } + .btn--ghost { background-color: transparent; color: var(--color-text-secondary); --tw-ring-color: var(--color-brand); } + .btn--ghost:hover:not(:disabled) { background-color: var(--color-surface-hover); color: var(--color-text-primary); } + .btn--danger { background-color: var(--color-brand-7); color: var(--color-text-inverse); --tw-ring-color: var(--color-brand-7); } + .btn--danger:hover:not(:disabled) { + /* background-color: #dc2626; */ background-color: var(--feedback-error); transform: var(--transform-lift-subtle); } + .btn--sm { - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); + /* @apply px-3 py-1 text-sm; */ + font-size: var(--font-size-sm); min-height: 2rem; min-width: 2rem; - padding: 0.375rem 0.5rem; + padding: 0.375rem 0.5rem; /* tighter, more square */ } + .btn--lg { - padding-inline: calc(var(--spacing) * 6); - padding-block: calc(var(--spacing) * 3); - font-size: var(--text-lg); - line-height: var(--tw-leading, var(--text-lg--line-height)); + padding: var(--space-3) var(--space-6); + font-size: var(--font-size-lg); min-height: 3rem; } + .btn__icon { + /* @apply w-4 h-4 mr-2; */ width: 1rem; height: 1rem; margin-right: 0.375rem; display: inline-block; vertical-align: middle; } + +/* Icon-only small buttons: remove right margin for centering */ + .btn--sm .btn__icon:only-child { margin-right: 0; } + .btn__icon--right { - margin-right: calc(var(--spacing) * 0); - margin-left: calc(var(--spacing) * 2); - height: calc(var(--spacing) * 4); - width: calc(var(--spacing) * 4); + width: 1rem; + height: 1rem; + margin-left: var(--space-2); + margin-right: 0; } + +/* Enhanced loading state */ + .btn--loading { + opacity: 0.75; cursor: wait; - opacity: 75%; } + .btn--loading::before { content: ''; position: absolute; @@ -1943,6 +3082,9 @@ main { border-radius: 50%; animation: spin 1s linear infinite; } + +/* Topbar Button Component */ + .topbar__button { position: relative; padding: 0.5rem; @@ -1952,7 +3094,9 @@ main { background-color: var(--color-surface); border: 1px solid var(--color-border-primary); color: var(--color-text-secondary); - transition: background-color var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); @@ -1962,6 +3106,7 @@ main { justify-content: center; cursor: pointer; } + .topbar__button::before { content: ''; position: absolute; @@ -1974,34 +3119,46 @@ main { transition: opacity var(--timing-fast) var(--easing-standard); pointer-events: none; } + .topbar__button:hover { background-color: var(--color-surface-hover); border-color: var(--color-brand); color: var(--color-text-primary); transform: var(--transform-lift-subtle); + /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ box-shadow: var(--elevation-hover-2); } + .topbar__button:hover::before { opacity: 1; } + .topbar__button:active { transform: translateY(0); + /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ box-shadow: var(--elevation-1); } + .topbar__button img { width: 1.125rem; height: 1.125rem; - transition: background-color var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); filter: brightness(0.8); - flex-shrink: 0; + shrink: 0; } + .topbar__button:hover img { filter: brightness(1); transform: scale(1.1); } + +/* Legacy toggle-btn support for backward compatibility */ + .toggle-btn { position: relative; padding: 0.5rem; @@ -2011,7 +3168,9 @@ main { background-color: var(--color-surface); border: 1px solid var(--color-border-primary); color: var(--color-text-secondary); - transition: background-color var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); @@ -2021,11 +3180,13 @@ main { justify-content: center; --tw-ring-color: var(--color-brand); } + .toggle-btn:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-brand); } + .toggle-btn::before { content: ''; position: absolute; @@ -2042,236 +3203,271 @@ main { transition: opacity var(--timing-fast) var(--easing-standard); pointer-events: none; } + .toggle-btn:hover { background-color: var(--color-surface-hover); border-color: var(--color-brand); color: var(--color-text-primary); transform: var(--transform-lift-subtle); + /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ box-shadow: var(--elevation-hover-2); } + .toggle-btn:hover::before { opacity: 1; } + .toggle-btn:active { transform: translateY(0); + /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ box-shadow: var(--elevation-1); } + .toggle-btn--active { background-color: var(--color-brand); color: var(--color-text-inverse); border-color: var(--color-brand); } + .toggle-btn--active:hover { background-color: var(--color-brand-1); color: var(--color-text-inverse); } + .toggle-btn img { - width: 1.125rem !important; + width: 1.125rem !important; /* Properly sized icons */ height: 1.125rem !important; - transition: background-color var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); filter: brightness(0.8); - flex-shrink: 0; + shrink: 0; /* Prevent icon compression */ } + .toggle-btn:hover img { filter: brightness(1); transform: scale(1.1); } + .toggle-btn--active img { filter: brightness(1) invert(1); } + +/* Button Ripple Effects */ + .ripple { position: absolute !important; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: scale(0); + /* ✅ FIXED: Use animation tokens for ripple effect */ animation: ripple-animation var(--timing-slow) linear; pointer-events: none; z-index: 1; + /* Ensure it doesn't affect layout */ top: 0; left: 0; width: 0; height: 0; } + .dark .ripple { background: rgba(255, 255, 255, 0.2); } + +/* ✅ KEYFRAME: Ripple animation using animation tokens */ + @keyframes ripple-animation { to { transform: scale(4); opacity: var(--opacity-hidden); } } + +/* Ensure buttons have proper positioning for ripple containment */ + button, .btn { position: relative; overflow: hidden; } + +/* ========================================================================== + Copy Button States + ========================================================================== */ + +.copy-button--success { + background-color: var(--color-success, #16a34a) !important; + color: white !important; + border-color: var(--color-success, #16a34a) !important; +} + +.copy-button--error { + background-color: var(--color-danger, #dc2626) !important; + color: white !important; + border-color: var(--color-danger, #dc2626) !important; +} + +/* Tables Component - BEM, dense, and glass variants aligned to design tokens */ + @layer components { + /* + * Replacement policy: retire global element styles in favor of a semantic component API. + * Old global table selectors are intentionally removed to avoid leakage across the site. + */ + + /* Bridge default Markdown tables to component rules until all markup adopts .table */ :where(.table, .article-content table) { width: 100%; - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); + font-size: var(--font-size-sm); border-collapse: separate; border-spacing: 0; color: var(--color-text-primary); } + + /* Container (enables horizontal scroll when needed) */ .table__container { overflow-x: auto; -webkit-overflow-scrolling: touch; - overflow-y: hidden; - } - .table__container--rounded { - border-radius: 0.75rem; + overflow-y: hidden; /* avoid clipping rounded headers within container */ } + /* Ensure rounded headers aren't visually clipped when inside a scroll container */ + .table__container--rounded { border-radius: 0.75rem; } + /* Progressive enhancement: auto-round container if it has a rounded/glass table */ .table__container:has(> .table.table--rounded), - .table__container:has(> .table.table--glass) { - border-radius: 0.75rem; - } + .table__container:has(> .table.table--glass) { border-radius: 0.75rem; } + + /* Head */ :where(.table__head, .article-content table thead) th { text-align: left; - font-size: var(--text-xs); - line-height: var(--tw-leading, var(--text-xs--line-height)); - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - --tw-tracking: var(--tracking-wide); - letter-spacing: var(--tracking-wide); + font-weight: 600; text-transform: uppercase; + letter-spacing: 0.05em; + font-size: var(--font-size-xs); background-color: var(--color-surface-active); color: var(--color-text-primary); } + + /* Rows */ :where(.table__row, .article-content table tbody tr) { vertical-align: top; } + + /* Cells */ :where(.table__cell, .article-content table th, .article-content table td) { - padding-inline: calc(var(--spacing) * 3); - padding-block: calc(var(--spacing) * 1.5); + padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-border-primary); } - .table__cell--numeric { - text-align: right; - } - .table__cell--wrap { - white-space: normal; - } - .table__cell--nowrap { - white-space: nowrap; - } - .table--dense .table__cell { - padding-block: calc(var(--spacing) * 1); - } - .table--compact .table__cell { - padding-block: calc(var(--spacing) * 0.5); - } - .table :where(.table__row:hover) { - background-color: var(--color-surface-hover); - } - :where(.article-content table tbody tr:hover) { - background-color: var(--color-surface-hover); - } - .table--zebra .table__body > .table__row:nth-child(even) { - background-color: var(--color-surface); - } - .table--zebra .table__body > .table__row:nth-child(even):hover { - background-color: var(--color-surface-hover); - } - .table--sticky thead th { - position: sticky; - top: 0; - z-index: 1; - } + .table__cell--numeric { text-align: right; } + .table__cell--wrap { white-space: normal; } + .table__cell--nowrap { white-space: nowrap; } + + /* Density variants */ + .table--dense .table__cell { padding-top: var(--space-1); padding-bottom: var(--space-1); } + .table--compact .table__cell { padding-top: 0.125rem; padding-bottom: 0.125rem; } + + /* Row states */ + .table :where(.table__row:hover) { background-color: var(--color-surface-hover); } + :where(.article-content table tbody tr:hover) { background-color: var(--color-surface-hover); } + .table--zebra .table__body > .table__row:nth-child(even) { background-color: var(--color-surface); } + /* Ensure hover wins over zebra striping */ + .table--zebra .table__body > .table__row:nth-child(even):hover { background-color: var(--color-surface-hover); } + + /* Pinned header (opt-in) */ + .table--sticky thead th { position: sticky; top: 0; z-index: 1; } + + /* Glass morphism (opt-in) */ .table--glass { border-radius: var(--radius-lg); - --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + box-shadow: var(--shadow-sm); backdrop-filter: saturate(150%) blur(8px); -webkit-backdrop-filter: saturate(150%) blur(8px); - background-color: color-mix(in srgb, #fff 60%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-white) 60%, transparent); - } - @media (prefers-color-scheme: dark) { - background-color: color-mix(in srgb, oklch(21% 0.006 285.885) 40%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-zinc-900) 40%, transparent); - } - } + /* Light: subtle translucent surface; Dark: stronger translucency */ + background-color: rgba(255, 255, 255, 0.6); border: 1px solid var(--color-border-primary); } + + /* Inspired header: match code/tabs glass header visuals */ .table--header-glass .table__head, .table--glass .table__head { background: var(--glass-bg); border-bottom: 1px solid var(--glass-border-color); - overflow: hidden; + overflow: hidden; /* ensure rounded corners show */ } .table--header-glass .table__head th, .table--glass .table__head th { - padding-inline: calc(var(--spacing) * 3); - padding-block: calc(var(--spacing) * 2); - font-size: var(--text-xs); - line-height: var(--tw-leading, var(--text-xs--line-height)); - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - --tw-tracking: var(--tracking-wide); - letter-spacing: var(--tracking-wide); + padding: var(--space-2) var(--space-3); + font-size: var(--font-size-xs); + font-weight: 600; text-transform: uppercase; + letter-spacing: 0.05em; background: var(--glass-bg); - border-top: none; + border-top: none; /* avoid double border at the top */ } + /* Subtle separators between header cells (like tabs nav) */ .table--header-glass .table__head th + th, .table--glass .table__head th + th { border-left: 1px solid var(--glass-border-color); } + /* Light mode: strengthen dividers for visibility */ @media (prefers-color-scheme: light) { .table--header-glass .table__head, - .table--glass .table__head { - border-bottom-color: var(--color-border-primary); - } + .table--glass .table__head { border-bottom-color: var(--color-border-primary); } .table--header-glass .table__head th + th, - .table--glass .table__head th + th { - border-left-color: var(--color-border-primary); - } + .table--glass .table__head th + th { border-left-color: var(--color-border-primary); } } + /* Rounded top corners when using glass/rounded variant */ .table--rounded .table__head th:first-child, - .table--glass .table__head th:first-child { - border-top-left-radius: 0.75rem; - } + .table--glass .table__head th:first-child { border-top-left-radius: 0.75rem; } .table--rounded .table__head th:last-child, - .table--glass .table__head th:last-child { - border-top-right-radius: 0.75rem; - } - .table--rounded .table__head { - border-top-left-radius: 0.75rem; - border-top-right-radius: 0.75rem; - overflow: hidden; - } + .table--glass .table__head th:last-child { border-top-right-radius: 0.75rem; } + .table--rounded .table__head { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; overflow: hidden; } } + +/* Enhanced Notice Component */ + +/* Base Enhanced Notice Styles */ + .notice { position: relative; margin-top: 1.5rem; margin-bottom: 1.5rem; - transition: transform var(--timing-medium) var(--easing-standard), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-medium) var(--easing-standard), opacity var(--timing-medium) var(--easing-standard), box-shadow var(--timing-medium) var(--easing-standard); border-radius: var(--radius-lg); overflow: hidden; + /* backdrop-filter: blur(10px); */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* ✅ FIXED: Use animation tokens */ animation: notice-enter var(--timing-medium) var(--easing-standard); animation-fill-mode: both; } + +/* Removed legacy overrides that zeroed out spacing and styles */ + +/* Enhanced Notice Container */ + .notice__container { display: flex; align-items: flex-start; padding: 0.875rem 1rem; position: relative; } + +/* Enhanced Notice Icon */ + .notice__icon-wrapper { margin-right: 1rem; - flex-shrink: 0; + shrink: 0; position: relative; margin-top: 0.125rem; } + .notice__icon { height: 1.25rem; width: 1.25rem; @@ -2280,10 +3476,14 @@ button, .btn { transition-duration: 0.2s; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); } + +/* Enhanced Notice Content */ + .notice__content { min-width: 0; flex: 1 1 0%; } + .notice__title { margin-bottom: 0.25rem; font-family: "NVIDIA", Arial, Helvetica, sans-serif; @@ -2295,6 +3495,7 @@ button, .btn { transition-duration: 0.2s; line-height: 1.3; } + .notice__text { font-size: 0.875rem; line-height: 1.25rem; @@ -2302,15 +3503,19 @@ button, .btn { color: var(--color-text-primary); font-family: var(--font-brand); } + .notice__text p { margin-bottom: 0.5rem; } + .notice__text p:last-child { margin-bottom: 0; } + .notice__text strong { font-weight: 600; } + .notice__text code { border-radius: var(--radius-base); padding: 0.125rem 0.375rem; @@ -2319,6 +3524,15 @@ button, .btn { background-color: rgba(0, 0, 0, 0.1); font-family: var(--font-family-mono, monospace); } + +/* Notice Type Variations */ + +/* Info Notice */ + +/* Old hex-based colors commented in favor of tokens */ + +/* .notice--info { ... } */ + .notice--info { background: linear-gradient( 135deg, @@ -2326,15 +3540,19 @@ button, .btn { rgba(var(--color-info-rgb), 0.05) 100% ) !important; border: 1px solid rgba(var(--color-info-rgb), 0.2) !important; - box-shadow: 0 4px 12px rgba(var(--color-info-rgb), 0.1), + box-shadow: + 0 4px 12px rgba(var(--color-info-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } -.notice--info .notice__title { - color: var(--color-info); -} + +.notice--info .notice__title { color: var(--color-info); } + .notice--info .notice__icon { filter: drop-shadow(0 1px 2px rgba(59, 130, 246, 0.3)); } + +/* Note Notice */ + .notice--note { background: linear-gradient( 135deg, @@ -2342,15 +3560,19 @@ button, .btn { rgba(var(--color-note-rgb), 0.05) 100% ) !important; border: 1px solid rgba(var(--color-note-rgb), 0.2) !important; - box-shadow: 0 4px 12px rgba(var(--color-note-rgb), 0.1), + box-shadow: + 0 4px 12px rgba(var(--color-note-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } -.notice--note .notice__title { - color: var(--color-note); -} + +.notice--note .notice__title { color: var(--color-note); } + .notice--note .notice__icon { filter: drop-shadow(0 1px 2px rgba(99, 102, 241, 0.3)); } + +/* Tip Notice */ + .notice--tip { background: linear-gradient( 135deg, @@ -2358,15 +3580,19 @@ button, .btn { rgba(var(--color-tip-rgb), 0.05) 100% ) !important; border: 1px solid rgba(var(--color-tip-rgb), 0.2) !important; - box-shadow: 0 4px 12px rgba(var(--color-tip-rgb), 0.1), + box-shadow: + 0 4px 12px rgba(var(--color-tip-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } -.notice--tip .notice__title { - color: var(--color-tip); -} + +.notice--tip .notice__title { color: var(--color-tip); } + .notice--tip .notice__icon { filter: drop-shadow(0 1px 2px rgba(34, 197, 94, 0.3)); } + +/* Warning Notice */ + .notice--warning { background: linear-gradient( 135deg, @@ -2374,15 +3600,19 @@ button, .btn { rgba(var(--color-warning-rgb), 0.05) 100% ) !important; border: 1px solid rgba(var(--color-warning-rgb), 0.2) !important; - box-shadow: 0 4px 12px rgba(var(--color-warning-rgb), 0.1), + box-shadow: + 0 4px 12px rgba(var(--color-warning-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } -.notice--warning .notice__title { - color: var(--color-warning); -} + +.notice--warning .notice__title { color: var(--color-warning); } + .notice--warning .notice__icon { filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.3)); } + +/* Danger Notice */ + .notice--danger { background: linear-gradient( 135deg, @@ -2390,15 +3620,19 @@ button, .btn { rgba(var(--color-danger-rgb), 0.05) 100% ) !important; border: 1px solid rgba(var(--color-danger-rgb), 0.2) !important; - box-shadow: 0 4px 12px rgba(var(--color-danger-rgb), 0.1), + box-shadow: + 0 4px 12px rgba(var(--color-danger-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } -.notice--danger .notice__title { - color: var(--color-danger); -} + +.notice--danger .notice__title { color: var(--color-danger); } + .notice--danger .notice__icon { filter: drop-shadow(0 1px 2px rgba(239, 68, 68, 0.3)); } + +/* Security Notice */ + .notice--security { background: linear-gradient( 135deg, @@ -2406,15 +3640,19 @@ button, .btn { rgba(var(--color-security-rgb), 0.05) 100% ) !important; border: 1px solid rgba(var(--color-security-rgb), 0.2) !important; - box-shadow: 0 4px 12px rgba(var(--color-security-rgb), 0.1), + box-shadow: + 0 4px 12px rgba(var(--color-security-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } -.notice--security .notice__title { - color: var(--color-security); -} + +.notice--security .notice__title { color: var(--color-security); } + .notice--security .notice__icon { filter: drop-shadow(0 1px 2px rgba(168, 85, 247, 0.3)); } + +/* Snack Notice */ + .notice--snack { background: linear-gradient( 135deg, @@ -2422,18 +3660,25 @@ button, .btn { rgba(var(--color-snack-rgb), 0.05) 100% ) !important; border: 1px solid rgba(var(--color-snack-rgb), 0.2) !important; - box-shadow: 0 4px 12px rgba(var(--color-snack-rgb), 0.1), + box-shadow: + 0 4px 12px rgba(var(--color-snack-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } -.notice--snack .notice__title { - color: var(--color-snack); -} + +.notice--snack .notice__title { color: var(--color-snack); } + .notice--snack .notice__icon { filter: drop-shadow(0 1px 2px rgba(236, 72, 153, 0.3)); } -.notice:has(a:hover) .notice__icon { - transform: scale(1.03); -} + +/* Hover Effects */ + +/* Subtle hover only when interactive content is inside */ + +.notice:has(a:hover) .notice__icon { transform: scale(1.03); } + +/* Entrance Animation */ + @keyframes notice-enter { 0% { opacity: 0; @@ -2444,26 +3689,48 @@ button, .btn { transform: translateY(0) scale(1); } } + +/* Dark mode code styling */ + @media (prefers-color-scheme: dark) { .notice__text code { background-color: rgba(255, 255, 255, 0.1); } } + +/* Remove heavy :has() spacing shifts; container layout handles alignment */ + +/* Navigation Component - Modular navigation system with NVIDIA styling */ + +/* Import all navigation components directly */ + +/* Navigation Base - Container queries and shared navigation foundations */ + +/* ======================================== + Container Query Context + ======================================== */ + .sidebar-container, .topbar, .chat-toc-toggle { container-type: inline-size; } + .sidebar-container { container-name: sidebar; container-type: inline-size; } + .topbar { container-name: topbar; } + .chat-toc-toggle { container-name: toggle; } + +/* Base navigation link styling */ + .nav-link { position: relative; padding: 0.5rem 0.75rem; @@ -2474,20 +3741,27 @@ button, .btn { min-height: 2.25rem; color: var(--color-text-primary); text-decoration: none; - transition: background-color var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard); white-space: nowrap; - overflow: hidden; + overflow: hidden; /* Essential for ripple containment */ display: flex; align-items: center; cursor: pointer; } + +/* Enhanced focus states for nav-links */ + .nav-link:focus { outline: 2px solid transparent; outline-offset: 2px; - box-shadow: 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.2); + box-shadow: + 0 0 0 2px var(--color-brand), + 0 0 0 4px rgba(var(--color-brand-rgb), 0.2); /* Double focus ring */ } + .nav-link::before { content: ''; position: absolute; @@ -2505,39 +3779,61 @@ button, .btn { transition: opacity var(--timing-fast) var(--easing-standard); pointer-events: none; } + .nav-link:hover, .nav-link:focus { color: var(--color-brand); + /* Removed transform and background for cleaner minimal look */ } + .nav-link:hover::before, .nav-link:focus::before { - opacity: 0.5; + opacity: 0.5; /* More subtle hover effect */ } + +/* Base nested content styling - use new animation system */ + .nested-content { + /* Use animation bridge collapse system instead of display:none */ max-height: var(--collapse-height-collapsed); opacity: var(--collapse-opacity-collapsed); overflow: hidden; - transition: max-height var(--collapse-timing) var(--collapse-easing), + transition: + max-height var(--collapse-timing) var(--collapse-easing), opacity var(--collapse-timing) var(--collapse-easing); } + +/* Enhanced hover states - use animation tokens for consistency */ + .nested-content a:hover { transform: translateX(4px); transition: transform var(--timing-fast) var(--easing-standard); } + +/* Expand toggle button - use animation tokens */ + .expand-toggle { padding: 0.25rem; border-radius: var(--radius-base); color: var(--color-text-secondary); - transition: background-color var(--timing-fast) var(--easing-standard), + transition: + background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard); } + .expand-toggle:hover { background-color: var(--color-surface-hover); color: var(--color-brand); } + .expand-toggle svg { transition: transform var(--timing-fast) var(--easing-standard); } + +/* Chat/TOC Toggle Component - Interactive toggle between chat and table of contents */ + +/* Chat/TOC Toggle Component */ + .chat-toc-toggle { display: flex; background: var(--color-surface); @@ -2546,20 +3842,25 @@ button, .btn { overflow: hidden; box-shadow: var(--elevation-4); height: 2.25rem; - min-width: 72px; + min-width: 72px; /* Ensure minimum visibility */ + + /* Prevent flash during initialization */ opacity: 1; transition: opacity var(--timing-instant) var(--easing-standard); + + /* Enhance visibility */ position: relative; } + .chat-toc-toggle.initialized { opacity: 1; - animation: none; + animation: none; /* Cancel fallback animation */ } + @keyframes fallback-show { - to { - opacity: 1; - } + to { opacity: 1; } } + .chat-toc-toggle__option { position: relative; display: flex; @@ -2572,49 +3873,66 @@ button, .btn { background: transparent; color: var(--color-text-secondary); cursor: pointer; - transition: background-color var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard); overflow: hidden; } + .chat-toc-toggle__option:hover { background: var(--color-surface-hover); color: var(--color-text-primary); transform: var(--transform-lift-subtle); box-shadow: 0 4px 8px color-mix(in srgb, black 10%, transparent); } + .chat-toc-toggle__option--active { background: var(--color-brand); color: var(--color-text-inverse); } + .chat-toc-toggle__option--active:hover { background: var(--color-brand-1); transform: var(--transform-lift-subtle); } + .chat-toc-toggle__icon { width: 1.125rem; height: 1.125rem; - flex-shrink: 0; - transition: background-color var(--timing-fast) var(--easing-standard), + shrink: 0; + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard); filter: brightness(0.8); } + .chat-toc-toggle__option:hover .chat-toc-toggle__icon { filter: brightness(1); transform: scale(1.1); } + .chat-toc-toggle__option--active .chat-toc-toggle__icon { filter: brightness(0) invert(1); } + .chat-toc-toggle__option--active:hover .chat-toc-toggle__icon { filter: brightness(0) invert(1); transform: scale(1.1); } + +/* Focus states for accessibility */ + .chat-toc-toggle__option:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-brand); z-index: 1; } + +/* Ripple effect on click */ + .chat-toc-toggle__option::before { content: ''; position: absolute; @@ -2623,378 +3941,501 @@ button, .btn { right: 0; bottom: 0; background: radial-gradient( - circle at center, - var(--color-brand) 0%, - transparent 70% - ); - @supports (color: color-mix(in lab, red, red)) { - background: radial-gradient( circle at center, color-mix(in srgb, var(--color-brand) 10%, transparent) 0%, transparent 70% ); - } opacity: 0; transition: opacity var(--timing-fast) var(--easing-standard); pointer-events: none; } + .chat-toc-toggle__option:hover::before { opacity: 1; } + .chat-toc-toggle__option:active::before { opacity: 1; } + .chat-toc-toggle__option:active { transform: translateY(0); box-shadow: 0 2px 4px color-mix(in srgb, black 10%, transparent); } + +/* Sidebar Navigation - Main navigation sidebar with responsive behavior */ + +/* Sidebar Container Styling */ + .sidebar, .sidebar-container { background-color: transparent; color: var(--color-text-primary); border-inline-end: none; + /* Enable named container for container queries in this file */ container-type: inline-size; container-name: sidebar; } + +/* Desktop sidebar styling */ + +/* +@container sidebar (min-width: 768px) { + .sidebar, + .sidebar-container { + background-color: transparent; + border-inline-end: none; + transform: translateX(0) !important; + position: sticky !important; + display: flex !important; + } +} +*/ + +/* FALLBACK: Media query for desktop sidebar visibility */ + +/* +@media (min-width: 768px) { + .sidebar-container { + transform: translateX(0) !important; + position: sticky !important; + display: flex !important; + } +} +*/ + +/* Mobile sidebar styling */ + @container sidebar (max-width: 767px) { .sidebar-container { + /* Ensure it starts hidden on mobile */ position: fixed; z-index: 40; - width: 20rem; + width: 20rem; /* w-80 equivalent */ height: 100vh; top: 0; left: 0; transform: translateX(-100%); + /* ✅ FIXED: Use animation tokens */ transition: transform var(--timing-medium) var(--easing-standard); } + .sidebar.translate-x-0, .sidebar-container.translate-x-0 { transform: translateX(0) !important; } } + +/* Mobile Header Styling - Force hide on desktop */ + .sidebar-header { border-bottom: none; background-color: transparent; color: var(--color-text-primary); display: flex; } + +/* Force hide sidebar header on desktop */ + @container sidebar (min-width: 768px) { .sidebar__header, .sidebar-header { display: none !important; } } + +/* Fallback: Hide mobile navigation elements on desktop */ + @media (min-width: 768px) { .sidebar__header, .sidebar-header { display: none !important; } + [data-component="navigation-mobile-toggle"] { display: none !important; } } + +/* Ensure sidebar starts hidden on mobile */ + @container sidebar (max-width: 767px) { .sidebar:not(.translate-x-0), .sidebar-container:not(.translate-x-0) { transform: translateX(-100%) !important; } } + .sidebar__close-button, .sidebar-close-btn { color: var(--color-text-secondary); - transition: background-color var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard); border: none; background: transparent; cursor: pointer; } + .sidebar__close-button:hover, .sidebar-close-btn:hover { background-color: var(--color-surface-hover); color: var(--color-text-primary); border-radius: var(--radius-lg); } + .sidebar__close-button:focus, .sidebar-close-btn:focus { outline: 2px solid var(--color-brand); outline-offset: 2px; } + +/* LinkTree Styling */ + [data-link-tree], #linkTree { background-color: transparent; color: var(--color-text-primary); width: 100%; } + +/* Desktop linkTree padding adjustment */ + @container sidebar (min-width: 768px) { [data-link-tree], #linkTree { - padding-inline-start: 4px; + padding-inline-start: 4px; /* Add space for focus ring to prevent clipping */ padding-inline-end: 0; } } + +/* Mobile linkTree styling */ + @container sidebar (max-width: 767px) { [data-link-tree], #linkTree { padding: 1rem; } } + +/* Prevent layout shift during initialization */ + +/* +#linkTree:not(.initialized) { + opacity: 0; + transition: opacity var(--timing-fast) var(--easing-standard); +} +*/ + [data-link-tree].initialized, #linkTree.initialized { opacity: 1; } + +/* Robust expansion using :has() based on aria-expanded (fallback if JS state desyncs) */ + li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="true"]) > .nested-content { max-height: var(--collapse-height-expanded); opacity: var(--collapse-opacity-expanded); overflow: visible; } + li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested-content { max-height: var(--collapse-height-collapsed); opacity: var(--collapse-opacity-collapsed); overflow: hidden; } + +/* Allow interaction inside nested content while its parent is transitioning */ + .nested-content[data-collapse-state="transitioning"] { + /* Override global pattern that disables all pointer events during transitions */ pointer-events: auto; } + +/* ✅ NEW ANIMATION SYSTEM - Use data attributes for consistent behavior */ + +/* Ensure animations only work after initialization */ + [data-link-tree].initialized .nested-content[data-collapse-state="expanded"], #linkTree.initialized .nested-content[data-collapse-state="expanded"] { max-height: var(--collapse-height-expanded); opacity: var(--collapse-opacity-expanded); - overflow: visible; + overflow: visible; /* Allow content to be fully visible */ } + [data-link-tree].initialized .nested-content[data-collapse-state="collapsed"], #linkTree.initialized .nested-content[data-collapse-state="collapsed"] { max-height: var(--collapse-height-collapsed); opacity: var(--collapse-opacity-collapsed); overflow: hidden; } + [data-link-tree].initialized .nested-content[data-collapse-state="transitioning"], #linkTree.initialized .nested-content[data-collapse-state="transitioning"] { - overflow: hidden; + overflow: hidden; /* Prevent content spillage during animation */ } + +/* Sidebar Navigation Components - Cohesive Design */ + .sidebar__item { display: flex; align-items: center; border-radius: var(--radius-md); - transition-property: all; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - --tw-duration: 200ms; - transition-duration: 200ms; + transition: all var(--timing-fast) var(--easing-standard); background-color: transparent; margin: 1px 0; } + .sidebar__item:hover { background-color: var(--color-surface-hover); } + .sidebar__link { display: flex; - flex-grow: 1; align-items: center; - border-top-left-radius: var(--radius-md); - border-bottom-left-radius: var(--radius-md); - padding: calc(var(--spacing) * 2); - transition-property: all; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - --tw-duration: 200ms; - transition-duration: 200ms; - &:focus { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - &:focus { - --tw-outline-style: none; - outline-style: none; - } + flex-grow: 1; + padding: var(--space-2); + transition: all var(--timing-fast) var(--easing-standard); + outline: none; + border-radius: var(--radius-md) 0 0 var(--radius-md); color: var(--color-text-primary); text-decoration: none; --tw-ring-color: var(--color-brand); - min-height: 2.5rem; + min-height: 2.5rem; /* Consistent touch target */ } + .sidebar__link:hover, .sidebar__link:focus { color: var(--color-brand); } + .sidebar__link--active { color: var(--color-brand); background-color: var(--color-hover); } + .sidebar__icon { - margin-right: calc(var(--spacing) * 3); - height: calc(var(--spacing) * 4); - width: calc(var(--spacing) * 4); + /* Reduced icon size for tighter look */ + /* @apply w-5 h-5 mr-3 shrink-0; */ + width: 1rem; + height: 1rem; + margin-right: var(--space-3); flex-shrink: 0; } + .sidebar__text { flex-grow: 1; } + .sidebar__expander { + padding: var(--space-2); + transition: all var(--timing-fast) var(--easing-standard); + outline: none; + border-radius: 0 var(--radius-md) var(--radius-md) 0; display: flex; align-items: center; justify-content: center; - border-top-right-radius: var(--radius-md); - border-bottom-right-radius: var(--radius-md); - padding: calc(var(--spacing) * 2); - transition-property: all; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - --tw-duration: 200ms; - transition-duration: 200ms; - &:focus { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - &:focus { - --tw-outline-style: none; - outline-style: none; - } color: var(--color-text-secondary); min-width: 2.5rem; min-height: 2.5rem; --tw-ring-color: var(--color-brand); } + .sidebar__expander:hover, .sidebar__expander:focus { color: var(--color-brand); background-color: var(--color-surface-active); } + .sidebar__chevron { - height: calc(var(--spacing) * 4); - width: calc(var(--spacing) * 4); - transition-property: transform, translate, scale, rotate; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - --tw-duration: 200ms; - transition-duration: 200ms; + width: 1rem; + height: 1rem; + transition: transform var(--timing-fast) var(--easing-standard); } + +/* Level-specific styling */ + .sidebar__item--level-1 .sidebar__text { - font-size: var(--text-base); - line-height: var(--tw-leading, var(--text-base--line-height)); - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); + /* Step down one size from text-lg and slightly reduce weight */ + /* @apply text-lg font-brand font-bold; */ + font-size: var(--font-size-base); + font-weight: 600; font-family: "NVIDIA", "Arial", "Helvetica", sans-serif; } + .sidebar__item--level-1 { - margin-bottom: calc(var(--spacing) * 1); + margin-bottom: var(--space-1); } + .sidebar__item--level-2 { - margin-left: calc(var(--spacing) * 4); + margin-left: var(--space-4); } + .sidebar__item--level-2 .sidebar__text { - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); - --tw-font-weight: var(--font-weight-normal); - font-weight: var(--font-weight-normal); + /* Step down one size from text-base */ + /* @apply font-normal text-base; */ + font-weight: 400; + font-size: var(--font-size-sm); } + .sidebar__item--level-3 { - margin-left: calc(var(--spacing) * 6); + margin-left: var(--space-6); } + .sidebar__item--level-3 .sidebar__text { - font-size: var(--text-xs); - line-height: var(--tw-leading, var(--text-xs--line-height)); - --tw-font-weight: var(--font-weight-light); - font-weight: var(--font-weight-light); + /* Step down one size from text-sm */ + /* @apply font-light text-sm; */ + font-weight: 300; + font-size: var(--font-size-xs); } + .sidebar__item--level-4 { - margin-left: calc(var(--spacing) * 8); + margin-left: var(--space-8); } + .sidebar__item--level-4 .sidebar__text { - font-size: var(--text-xs); - line-height: var(--tw-leading, var(--text-xs--line-height)); + /* Step down one size from text-sm */ + /* @apply text-sm; */ + font-size: var(--font-size-xs); } + .sidebar__item--level-default { - margin-left: calc(var(--spacing) * 10); + margin-left: 2.5rem; } + .sidebar__item--level-default .sidebar__text { - font-size: var(--text-xs); - line-height: var(--tw-leading, var(--text-xs--line-height)); + font-size: var(--font-size-xs); } + +/* Ensure text-brand utility works with sidebar items */ + .sidebar__link.text-brand { color: var(--color-brand) !important; } + +/* Enhanced active state for the whole item */ + .sidebar__item:has(.sidebar__link--active) { background-color: var(--color-hover); + /* box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.2); */ box-shadow: var(--elevation-brand-subtle); } + +/* Performance hints for hover states (localize former global rules) */ + .sidebar:has(.sidebar__item:hover), .sidebar-container:has(.sidebar__item:hover) { will-change: transform; contain: layout; } + +/* Right Sidebar Styling - Remove background in dark mode */ + #sidebar-right { background: transparent; } + .dark #sidebar-right { background: transparent !important; background-color: transparent !important; } + +/* Remove chat controls background in dark mode */ + .dark .chat-controls { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } + +/* Topbar Navigation - Main horizontal navigation bar with responsive grid layout */ + +/* Clean CSS Grid Topbar Layout */ + .topbar { position: sticky; top: 0; z-index: 50; + /* background-color: var(--color-bg-primary); */ + /* border-bottom: 1px solid var(--color-border-primary); */ background: var(--glass-bg); border-bottom: 1px solid var(--glass-border-color); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - transition: background-color var(--timing-medium) var(--easing-standard), + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-medium) var(--easing-standard), color var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard); + + /* CSS Grid Layout */ display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: "logo navigation search controls"; align-items: center; gap: 1rem; + /* padding: 0.75rem 1.5rem; */ padding: 0.5rem 0.75rem; + /* min-height: 4rem; */ min-height: 3rem; box-shadow: var(--glass-shadow); } + +/* Grid Areas */ + .topbar__logo { grid-area: logo; display: flex; align-items: center; - flex-shrink: 0; + shrink: 0; } + .topbar__logo-link { display: flex; align-items: center; text-decoration: none; transition: opacity var(--timing-fast) var(--easing-standard); } + .topbar__logo-link:hover { opacity: 0.8; } + .topbar__logo-image { width: 1.25rem; height: 1.25rem; -o-object-fit: contain; object-fit: contain; } + .topbar__navigation { grid-area: navigation; display: flex; align-items: center; gap: 0.75rem; - min-width: 0; + min-width: 0; /* Allow shrinking */ } + .topbar__search { grid-area: search; display: flex; align-items: center; justify-content: center; - min-width: 0; + min-width: 0; /* Allow shrinking */ } + .topbar__controls { grid-area: controls; display: flex; align-items: center; gap: 0.5rem; - flex-shrink: 0; + shrink: 0; } + +/* Responsive Grid Layout */ + @container topbar (max-width: 1024px) { .topbar { grid-template-columns: auto auto 1fr auto; @@ -3003,6 +4444,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested padding: 0.5rem 1rem; } } + @container topbar (max-width: 768px) { .topbar { grid-template-columns: auto 1fr auto; @@ -3011,24 +4453,35 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested padding: 0.5rem 0.5rem; min-height: 2.75rem; } + + /* Hide navigation on mobile - it should be in a hamburger menu */ .topbar__navigation { display: none; } } + +/* Updated Navigation Links for Grid Layout */ + .topbar__links { display: flex; align-items: center; - gap: 0.5rem; + gap: 0.5rem; /* Tighter spacing for minimal look */ font-family: var(--font-brand); font-weight: 300; font-size: 0.875rem; color: var(--color-text-primary); } + +/* Hide navigation links on mobile */ + @container (max-width: 768px) { .topbar__link { - display: none; + display: none; /* Hidden on mobile, shown via hamburger menu */ } } + +/* Topbar links */ + .topbar__link { display: inline-flex; align-items: center; @@ -3038,56 +4491,64 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested text-decoration: none; transition: color var(--timing-fast) var(--easing-standard); } + .topbar__link:hover, .topbar__link:focus-visible { color: var(--color-brand); outline: none; } + +/* Table of Contents (TOC) - Navigation within content and sidebar TOC */ + +/* Enhanced TOC Styling */ + .toc { - margin-bottom: calc(var(--spacing) * 8); border-radius: var(--radius-lg); - padding: calc(var(--spacing) * 6); + padding: var(--space-6); + margin-bottom: var(--space-8); background: transparent; border: none; box-shadow: none; } + .toc-header { - margin-bottom: calc(var(--spacing) * 4); display: flex; align-items: center; - padding-bottom: calc(var(--spacing) * 3); + margin-bottom: var(--space-4); + padding-bottom: var(--space-3); border: none; color: var(--color-text-primary); } + .toc-content a { display: inline-block; + padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); - padding-inline: calc(var(--spacing) * 3); - padding-block: calc(var(--spacing) * 2); - transition-property: all; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - --tw-duration: 200ms; - transition-duration: 200ms; + transition: all var(--timing-fast) var(--easing-standard); color: var(--color-text-secondary); text-decoration: none; } + .toc-content a:hover { background-color: var(--color-surface-hover); color: var(--color-brand); transform: translateX(4px); } + +/* Enhanced Right Sidebar TOC */ + .toc { - padding: calc(var(--spacing) * 6); - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); + padding: var(--space-6); + font-size: var(--font-size-sm); background: transparent; border-radius: var(--radius-xl); color: var(--color-text-primary); } + .toc__nav { position: relative; } + .toc__nav::before { content: ''; position: absolute; @@ -3103,44 +4564,36 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested ); border-radius: 2px; } + .toc ul { - list-style-type: none; - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); - } - padding-left: calc(var(--spacing) * 4); + list-style: none; + padding-left: var(--space-4); margin: 0; } + .toc ul ul { - margin-top: calc(var(--spacing) * 2); - border-left-style: var(--tw-border-style); - border-left-width: 1px; - padding-left: calc(var(--spacing) * 4); - border-color: var(--color-border-primary); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in srgb, var(--color-border-primary) 20%, transparent); - } + padding-left: var(--space-4); + margin-top: var(--space-2); + border-left: 1px solid; + border-color: color-mix(in srgb, var(--color-border-primary) 20%, transparent); } + +/* TOC Link Styling */ + .toc-link { - position: relative; display: block; - overflow: hidden; + padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); - padding-inline: calc(var(--spacing) * 3); - padding-block: calc(var(--spacing) * 2); - transition-property: all; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - --tw-duration: 200ms; - transition-duration: 200ms; + transition: all var(--timing-fast) var(--easing-standard); + position: relative; + overflow: hidden; color: var(--color-text-secondary); text-decoration: none; line-height: 1.4; font-weight: 400; - cursor: pointer; + cursor: pointer; /* Ensure ripple-ready */ } + .toc-link::before { content: ''; position: absolute; @@ -3157,6 +4610,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transition: opacity var(--timing-fast) var(--easing-standard); pointer-events: none; } + .toc-link:hover { background-color: var(--color-surface-hover); color: var(--color-brand); @@ -3164,42 +4618,65 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested padding-inline-start: calc(0.75rem + 2px); border-inline-start: 2px solid var(--color-brand); } + .toc-link:hover::before { opacity: 1; } + .toc-link:focus { outline: 2px solid transparent; outline-offset: 2px; color: var(--color-brand); - box-shadow: var(--elevation-brand-focus), + /* box-shadow: + 0 0 0 2px var(--color-brand), + 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); */ /* Enhanced double focus ring */ + box-shadow: + var(--elevation-brand-focus), 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); } + +/* Reading progress bar animation */ + #progress-bar { transition: width 0.3s ease-out; } + +/* Heading Level Variations */ + .toc-link--h1 { font-weight: 600; + /* Slightly reduce H1 TOC size for a lighter hierarchy */ + /* font-size: 0.95em; */ font-size: 0.9em; color: var(--color-text-primary); } + .toc-link--h2 { font-weight: 500; color: var(--color-brand); opacity: 0.9; } + .toc-link--h3 { + /* Slightly reduce H3 TOC size in tandem with sidebar tightening */ + /* font-size: 0.85em; */ font-size: 0.8em; color: var(--color-text-tertiary); font-weight: 400; } + +/* Active state styling */ + .toc-link.active { background-color: var(--color-brand); color: var(--color-text-inverse); font-weight: 500; transform: translateX(2px); + /* box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); */ box-shadow: var(--elevation-brand-subtle); } + .toc-link.active::before { background: linear-gradient( 90deg, @@ -3208,6 +4685,9 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested ); opacity: 1; } + +/* Smooth scrolling indicator */ + .toc-progress { position: absolute; top: 0; @@ -3218,10 +4698,15 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transition: height var(--timing-medium) var(--easing-standard); border-radius: 1px; } + +/* Enhanced animations */ + .toc { + /* ✅ FIXED: Use animation tokens */ animation: toc-enter var(--timing-medium) var(--easing-standard); animation-fill-mode: both; } + @keyframes toc-enter { from { opacity: 0; @@ -3232,20 +4717,28 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: translateX(0) scale(1); } } + +/* Responsive adjustments */ + @container (max-width: 1024px) { .toc { - padding: calc(var(--spacing) * 4); - font-size: var(--text-xs); - line-height: var(--tw-leading, var(--text-xs--line-height)); + padding: var(--space-4); + font-size: var(--font-size-xs); } + .toc-link { - padding-inline: calc(var(--spacing) * 2); - padding-block: calc(var(--spacing) * 1.5); + padding: 0.375rem var(--space-2); } } + +/* Remove TOC sidebar background in dark mode */ + .dark .toc { background: transparent !important; } + +/* Enhanced active state context */ + .toc:has(.toc-link.active) .toc__nav::before { opacity: 1; transform: scaleY(1.1); @@ -3256,39 +4749,44 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transparent 100% ); } + +/* Localized performance hint for hover state */ + .toc:has(.toc-link:hover) { will-change: transform; contain: layout; } + +/* Dropdown Navigation - Dropdown menus for navigation links */ + .topbar__dropdown { position: absolute; - left: calc(var(--spacing) * 0); - margin-top: calc(var(--spacing) * 2); - width: calc(var(--spacing) * 52); - overflow: hidden; + left: 0; + margin-top: var(--space-2); + width: 13rem; /* w-52 = 208px = 13rem */ border-radius: var(--radius-xl); - padding: calc(var(--spacing) * 2); - --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - transition-property: all; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - --tw-duration: 300ms; - transition-duration: 300ms; + overflow: hidden; + padding: var(--space-2); + transition: all var(--timing-medium) var(--easing-standard); + /* background-color: var(--color-surface); */ background: var(--glass-bg); + /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.95); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 20px rgba(var(--color-brand-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); } + .group:hover .topbar__dropdown { display: block; opacity: 1; visibility: visible; transform: translateY(0) scale(1); } + .topbar__dropdown::before { content: ''; position: absolute; @@ -3296,41 +4794,31 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested left: 20px; width: 12px; height: 12px; + /* background-color: var(--color-surface); */ background: var(--glass-bg); + /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); border-bottom: none; border-right: none; transform: rotate(45deg); z-index: -1; } + .topbar__dropdown-link { - position: relative; display: flex; align-items: center; - overflow: hidden; + padding: var(--space-3) var(--space-4); + font-size: var(--font-size-sm); border-radius: var(--radius-lg); - padding-inline: calc(var(--spacing) * 4); - padding-block: calc(var(--spacing) * 3); - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); - transition-property: all; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - --tw-duration: 200ms; - transition-duration: 200ms; - &:focus { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - &:focus { - --tw-outline-style: none; - outline-style: none; - } + transition: all var(--timing-fast) var(--easing-standard); + position: relative; + overflow: hidden; color: var(--color-text-primary); --tw-ring-color: var(--color-brand); text-decoration: none; margin: 2px 0; } + .topbar__dropdown-link::before { content: ''; position: absolute; @@ -3347,6 +4835,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transition: opacity var(--timing-fast) var(--easing-standard); pointer-events: none; } + .topbar__dropdown-link:hover, .topbar__dropdown-link:focus { background-color: var(--color-surface-hover); @@ -3355,30 +4844,48 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested border-inline-start: 3px solid var(--color-brand); padding-inline-start: calc(1rem - 3px); } + .topbar__dropdown-link:hover::before, .topbar__dropdown-link:focus::before { opacity: 1; } + +/* Language Switcher transitions migrated from page-enhancements.css */ + .language-switcher .hidden { opacity: 0; transform: translateY(-8px); transition: opacity 0.2s ease-out, transform 0.2s ease-out; } + .language-switcher .block { opacity: 1; transform: translateY(0); } + @media (max-width: 640px) { - .language-switcher { - position: relative; - } + .language-switcher { position: relative; } } + +/* Navigation API Endpoint Styling */ + +/* Enhanced styling for API endpoints in the main navigation sidebar */ + +/* ========================================================================== + API Endpoint Items + ========================================================================== */ + .api-endpoint-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; } + +/* ========================================================================== + HTTP Method Badges + ========================================================================== */ + .http-method-badge { display: inline-block; padding: 0.125rem 0.375rem; @@ -3389,33 +4896,52 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested min-width: 3rem; text-align: center; letter-spacing: 0.025em; - flex-shrink: 0; -} -.http-method-badge--get { - background: var(--http-get-bg); - color: var(--http-get-text); -} -.http-method-badge--post { - background: var(--http-post-bg); - color: var(--http-post-text); -} -.http-method-badge--put { - background: var(--http-put-bg); - color: var(--http-put-text); -} -.http-method-badge--patch { - background: var(--http-patch-bg); - color: var(--http-patch-text); -} -.http-method-badge--delete { - background: var(--http-delete-bg); - color: var(--http-delete-text); + shrink: 0; } + +/* GET - Green */ + +/* Old hex-based method colors commented out in favor of tokens per themes/milodocs/init */ + +/* .http-method-badge--get { background: #10b981; color: white; } */ + +.http-method-badge--get { background: var(--http-get-bg); color: var(--http-get-text); } + +/* POST - Blue */ + +/* .http-method-badge--post { background: #3b82f6; color: white; } */ + +.http-method-badge--post { background: var(--http-post-bg); color: var(--http-post-text); } + +/* PUT - Orange */ + +/* .http-method-badge--put { background: #f59e0b; color: white; } */ + +.http-method-badge--put { background: var(--http-put-bg); color: var(--http-put-text); } + +/* PATCH - Purple */ + +/* .http-method-badge--patch { background: #8b5cf6; color: white; } */ + +.http-method-badge--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } + +/* DELETE - Red */ + +/* .http-method-badge--delete { background: #ef4444; color: white; } */ + +.http-method-badge--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } + +/* HEAD, OPTIONS - Gray */ + +/* .http-method-badge--head, .http-method-badge--options { background: #6b7280; color: white; } */ + .http-method-badge--head, -.http-method-badge--options { - background: var(--http-head-bg); - color: var(--http-head-text); -} +.http-method-badge--options { background: var(--http-head-bg); color: var(--http-head-text); } + +/* ========================================================================== + API Endpoint Path and Summary + ========================================================================== */ + .api-endpoint-path { font-weight: 500; color: var(--color-text-primary); @@ -3424,6 +4950,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested word-break: break-all; flex: 1; } + .api-endpoint-summary { display: block; font-size: 0.75rem; @@ -3433,70 +4960,113 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested font-weight: 400; font-style: italic; } + +/* ========================================================================== + Enhanced Sidebar Item Styling for API Endpoints + ========================================================================== */ + +/* Make API endpoint links have more vertical space */ + .sidebar__link:has(.api-endpoint-item) { padding: 0.75rem; align-items: flex-start; } + +/* Ensure the text wrapper takes full width */ + .sidebar__text:has(.api-endpoint-item) { width: 100%; } -.sidebar__link:hover .http-method-badge--get { - background: var(--http-get-bg); -} -.sidebar__link:hover .http-method-badge--post { - background: var(--http-post-bg); -} -.sidebar__link:hover .http-method-badge--put { - background: var(--http-put-bg); -} -.sidebar__link:hover .http-method-badge--patch { - background: var(--http-patch-bg); -} -.sidebar__link:hover .http-method-badge--delete { - background: var(--http-delete-bg); -} + +/* ========================================================================== + Hover and Active States + ========================================================================== */ + +/* Hover states are implicitly handled by dark-mode tokens; leaving hover overrides minimal */ + +.sidebar__link:hover .http-method-badge--get { background: var(--http-get-bg); } + +.sidebar__link:hover .http-method-badge--post { background: var(--http-post-bg); } + +.sidebar__link:hover .http-method-badge--put { background: var(--http-put-bg); } + +.sidebar__link:hover .http-method-badge--patch { background: var(--http-patch-bg); } + +.sidebar__link:hover .http-method-badge--delete { background: var(--http-delete-bg); } + .sidebar__link:hover .http-method-badge--head, -.sidebar__link:hover .http-method-badge--options { - background: var(--http-head-bg); -} +.sidebar__link:hover .http-method-badge--options { background: var(--http-head-bg); } + +/* Active state enhancements */ + .sidebar__link--active .api-endpoint-path { color: var(--color-brand-primary); font-weight: 600; } + .sidebar__link--active .api-endpoint-summary { color: var(--color-text-secondary); } + +/* ========================================================================== + Responsive Design + ========================================================================== */ + @media (max-width: 768px) { .http-method-badge { min-width: 2.5rem; font-size: 0.625rem; padding: 0.125rem 0.25rem; } + .api-endpoint-path { font-size: 0.75rem; } + .api-endpoint-summary { font-size: 0.6875rem; } + .sidebar__link:has(.api-endpoint-item) { padding: 0.5rem; } } + +/* ========================================================================== + Dark Mode Support + ========================================================================== */ + +/* Dark mode handled via CSS variables in :root/.dark */ + +/* ========================================================================== + Focus States for Accessibility + ========================================================================== */ + .sidebar__link:focus-visible:has(.api-endpoint-item) { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; } + +/* ========================================================================== + Animation and Transitions + ========================================================================== */ + .http-method-badge { transition: background-color 0.15s ease; } + .api-endpoint-path, .api-endpoint-summary { transition: color 0.15s ease; } + +/* Breadcrumbs Navigation Component - Pure navigation styling */ + .breadcrumb { flex: 1; min-width: 0; } + .breadcrumb__list { display: flex; flex-wrap: wrap; @@ -3507,15 +5077,18 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested padding: 0; list-style: none; } + .breadcrumb__item { display: flex; align-items: center; } + .breadcrumb__link { position: relative; display: inline-flex; align-items: center; border-radius: var(--radius-lg); + /* padding: 0.5rem 0.75rem; */ padding: 0.25rem 0.5rem; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); background-color: transparent; @@ -3524,6 +5097,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested font-weight: 500; overflow: hidden; } + .breadcrumb__link:before { content: ""; position: absolute; @@ -3541,46 +5115,63 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transition: opacity 0.2s ease; pointer-events: none; } + .breadcrumb__link:hover { color: var(--color-brand); + /* background-color: var(--color-surface-hover); */ + /* transform: var(--transform-lift-subtle); */ + /* box-shadow: var(--elevation-4); */ } + .breadcrumb__link:hover:before { opacity: 1; } + .breadcrumb__link:focus { outline: 2px solid transparent; outline-offset: 2px; color: var(--color-brand); background-color: var(--color-surface-hover); - box-shadow: 0 0 0 2px var(--color-brand), - 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); + box-shadow: + 0 0 0 2px var(--color-brand), + 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); /* Enhanced double focus ring */ } + .breadcrumb__separator { margin-left: 0.75rem; margin-right: 0.75rem; font-size: 1.125rem; line-height: 1.75rem; color: var(--color-text-tertiary); - transition: color var(--timing-fast) var(--easing-standard), + transition: + color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); font-weight: 300; } + .breadcrumb:hover .breadcrumb__separator { color: var(--color-brand); transform: scale(1.1); } + .breadcrumb__current { display: inline-flex; align-items: center; border-radius: var(--radius-lg); + /* padding: 0.5rem 0.75rem; */ padding: 0.25rem 0.5rem; font-weight: 600; + /* background-color: var(--color-brand); */ + /* color: var(--color-text-inverse); */ background: var(--glass-bg); color: var(--color-text-primary); border: 1px solid var(--glass-border-color); position: relative; overflow: hidden; } + +/* Clickable current breadcrumb for metadata toggle */ + .breadcrumb__current--clickable { cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; @@ -3590,32 +5181,40 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested font-size: inherit; line-height: inherit; } + .breadcrumb__current--clickable:hover { background-color: var(--color-surface-hover); } + .breadcrumb__current--clickable:focus { outline: 2px solid transparent; outline-offset: 2px; - box-shadow: 0 0 0 2px var(--color-text-inverse), + box-shadow: + 0 0 0 2px var(--color-text-inverse), 0 0 0 4px rgba(var(--color-brand-rgb), 0.5); } + .breadcrumb__current--clickable:active { transform: translateY(0); } + .breadcrumb__metadata-icon { width: 1rem; height: 1rem; opacity: 0.8; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } + .breadcrumb__current--clickable:hover .breadcrumb__metadata-icon { opacity: 1; transform: scale(1.1); } + .breadcrumb__current--clickable[aria-expanded="true"] .breadcrumb__metadata-icon { opacity: 1; transform: rotate(180deg); } + .breadcrumb__current:before { content: ""; position: absolute; @@ -3631,11 +5230,15 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested ); pointer-events: none; } + +/* Entrance Animation */ + .breadcrumb__current, .breadcrumb__link { animation: breadcrumb-enter 0.3s ease-out; animation-fill-mode: both; } + @keyframes breadcrumb-enter { 0% { opacity: 0; @@ -3646,41 +5249,56 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: translateX(0); } } + +/* Responsive Design */ + @media (max-width: 768px) { .breadcrumb__list { font-size: 0.75rem; line-height: 1rem; } + .breadcrumb__link, .breadcrumb__current { padding: 0.375rem 0.5rem; } + .breadcrumb__metadata-icon { width: 0.875rem; height: 0.875rem; } + .breadcrumb__separator { margin-left: 0.5rem; margin-right: 0.5rem; font-size: 1rem; } } -@media (prefers-contrast: high) { + +/* High contrast mode support */ + +@media (prefers-contrast: high) { .breadcrumb__link { border: 1px solid transparent; } + .breadcrumb__link:hover, .breadcrumb__link:focus { border-color: var(--color-brand); } + .breadcrumb__current { border: 2px solid var(--color-brand); } + .breadcrumb__current--clickable:hover, .breadcrumb__current--clickable:focus { border: 2px solid var(--color-text-inverse); } } + +/* Reduced motion support */ + @media (prefers-reduced-motion: reduce) { .breadcrumb__link, .breadcrumb__separator, @@ -3688,22 +5306,33 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested .breadcrumb__metadata-icon { transition: none; } + .breadcrumb__current, .breadcrumb__link { animation: none; } + .breadcrumb__link:hover, .breadcrumb__current--clickable:hover { transform: none; } + .breadcrumb:hover .breadcrumb__separator { transform: none; } + .breadcrumb__current--clickable:hover .breadcrumb__metadata-icon, .breadcrumb__current--clickable[aria-expanded="true"] .breadcrumb__metadata-icon { transform: none; } } + +/* ========================================================================== + :has() Breadcrumb Component Enhancements + ========================================================================== */ + +/* Breadcrumb container awareness of metadata panel state */ + .breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) { background: linear-gradient( 135deg, @@ -3715,28 +5344,44 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested padding: 0.25rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } + +/* Enhanced separator styling when metadata is expanded */ + .breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) .breadcrumb__separator { color: var(--color-brand); transform: scale(1.2); } + +/* Interactive breadcrumb links when metadata is open */ + .breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) .breadcrumb__link { background-color: rgba(var(--color-brand-rgb), 0.05); border-radius: 0.375rem; } + .breadcrumb:has(.breadcrumb__current[aria-expanded="true"]) .breadcrumb__link:hover { background-color: rgba(var(--color-brand-rgb), 0.15); transform: var(--transform-lift-medium); box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.2); } + +/* Hover context awareness */ + .breadcrumb:has(.breadcrumb__link:hover) { background: rgba(var(--color-surface), 0.5); border-radius: var(--radius-lg); transition: all 0.2s ease; } + .breadcrumb:has(.breadcrumb__link:hover) .breadcrumb__current { transform: scale(1.02); box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); } + +/* Search Component - Sophisticated search interface with NVIDIA styling and complex grouping */ + +/* SOPHISTICATED SEARCH INPUT - Matching design system */ + .search-input { position: relative; z-index: 10; @@ -3747,57 +5392,95 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested border: 1px solid var(--color-border-primary); font-size: 0.875rem; font-weight: 500; + /* background: var(--color-surface); */ background: var(--glass-bg); + color: var(--color-text-primary); font-family: var(--font-family-brand, inherit); + /* backdrop-filter: blur(10px); */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - transition: background-color var(--timing-fast) var(--easing-standard), + /* transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); */ + transition: + background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard), box-shadow var(--timing-fast) var(--easing-standard); + /* box-shadow: + 0 1px 3px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + /* box-shadow: var(--elevation-1), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); + + /* Search icon using brand color */ + /* Use currentColor for icon stroke; color is set via CSS variable for themeability */ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21 21-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z'/%3e%3c/svg%3e"); background-position: left 0.75rem center; background-repeat: no-repeat; background-size: 1.125rem 1.125rem; color: var(--color-text-primary); } + .search-input:hover { border-color: var(--color-brand); background-color: var(--color-surface-hover); transform: var(--transform-lift-subtle); + /* box-shadow: + 0 4px 8px rgba(0, 0, 0, 0.1), + 0 0 20px rgba(var(--color-brand-rgb), 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.15); */ + /* box-shadow: var(--elevation-hover-2), var(--elevation-brand-subtle), inset 0 1px 0 rgba(255, 255, 255, 0.15); */ box-shadow: var(--glass-shadow); } + .search-input:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--color-brand); background-color: var(--glass-bg); transform: var(--transform-lift-subtle); + /* box-shadow: + 0 0 0 2px var(--color-brand), + 0 0 0 4px rgba(var(--color-brand-rgb), 0.15), + 0 4px 12px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.2); */ + /* box-shadow: 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15), var(--elevation-hover-2), inset 0 1px 0 rgba(255, 255, 255, 0.2); */ box-shadow: 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15), var(--glass-shadow); } + .search-input::-moz-placeholder { color: var(--color-text-tertiary); font-style: italic; } + .search-input::placeholder { color: var(--color-text-tertiary); font-style: italic; } + +/* SOPHISTICATED SEARCH CONTAINER - Matching design system */ + .search-container { position: relative; border-radius: 0.875rem; padding: 0.75rem; + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); border: 1px solid var(--glass-border-color); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); - transition: background-color var(--timing-medium) var(--easing-standard), + /* transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); */ + transition: + background-color var(--timing-medium) var(--easing-standard), color var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard), transform var(--timing-medium) var(--easing-standard), box-shadow var(--timing-medium) var(--easing-standard); } + .search-container::before { content: ''; position: absolute; @@ -3812,32 +5495,48 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested rgba(var(--color-brand-rgb), 0.02) 100% ); opacity: 0; + /* transition: opacity 0.3s ease; */ transition: opacity var(--timing-medium) var(--easing-standard); pointer-events: none; border-radius: 0.875rem; } + .search-container:hover, .search-container:focus-within { border-color: var(--color-brand); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), + box-shadow: + 0 8px 24px rgba(0, 0, 0, 0.1), 0 0 20px rgba(var(--color-brand-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15); } + .search-container:hover::before, .search-container:focus-within::before { opacity: 1; } + +/* SOPHISTICATED SEARCH RESULTS CONTAINER */ + #searchResultsContainer { position: relative; + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); border-radius: 0.875rem; + /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); + /* backdrop-filter: blur(10px); */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); + /* animation: search-container-enter 0.5s cubic-bezier(0.4, 0, 0.2, 1); */ animation: search-container-enter var(--timing-medium) var(--easing-standard); animation-fill-mode: both; overflow: hidden; } + #searchResultsContainer::before { content: ''; position: absolute; @@ -3855,9 +5554,11 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transition: opacity 0.3s ease; pointer-events: none; } + #searchResultsContainer:hover::before { opacity: 1; } + @keyframes search-container-enter { from { opacity: 0; @@ -3868,6 +5569,9 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: translateY(0) scale(1); } } + +/* SOPHISTICATED SEARCH HIT STYLING - Matching tiles and navigation patterns */ + .search-hit { position: relative; display: block; @@ -3876,21 +5580,32 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested margin-bottom: 0.75rem; overflow: hidden; } + .search-hit-content { position: relative; + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); border-radius: 0.875rem; + /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); padding: 1.25rem; - transition: background-color var(--timing-medium) var(--easing-standard), + /* transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); */ + transition: + background-color var(--timing-medium) var(--easing-standard), color var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard), transform var(--timing-medium) var(--easing-standard), box-shadow var(--timing-medium) var(--easing-standard); + /* backdrop-filter: blur(10px); */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); overflow: hidden; } + .search-hit-content::before { content: ''; position: absolute; @@ -3905,9 +5620,11 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested rgba(var(--color-brand-rgb), 0.02) 100% ); opacity: 0; + /* transition: opacity 0.3s ease; */ transition: opacity var(--timing-medium) var(--easing-standard); pointer-events: none; } + .search-hit-content::after { content: ''; position: absolute; @@ -3917,33 +5634,49 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested height: 3px; background: linear-gradient(90deg, var(--color-brand), var(--color-brand-2)); transform: scaleX(0); + /* transition: transform 0.3s ease; */ transition: transform var(--timing-medium) var(--easing-standard); transform-origin: left; } + .search-hit:hover .search-hit-content { transform: var(--transform-lift-dramatic); border-color: var(--color-brand); - box-shadow: var(--elevation-hover-2), + /* box-shadow: + 0 12px 28px rgba(0, 0, 0, 0.12), + 0 0 20px rgba(var(--color-brand-rgb), 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.15); */ + box-shadow: + var(--elevation-hover-2), var(--elevation-brand-subtle), inset 0 1px 0 rgba(255, 255, 255, 0.15); } + .search-hit:hover .search-hit-content::before { opacity: 1; } + .search-hit:hover .search-hit-content::after { transform: scaleX(1); } + +/* Focus states for accessibility */ + .search-hit:focus-within .search-hit-content { outline: 2px solid var(--color-brand); outline-offset: 2px; transform: var(--transform-lift-medium); } + +/* Search Hit Typography - Matching design system */ + .search-hit-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.75rem; } + .search-hit-section { font-size: 0.75rem; font-weight: 600; @@ -3953,10 +5686,12 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested margin-bottom: 0.25rem; transition: all 0.2s ease; } + .search-hit:hover .search-hit-section { transform: translateX(2px); color: var(--color-brand-1); } + .search-hit-title { font-size: 1.125rem; font-weight: 600; @@ -3964,11 +5699,14 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested color: var(--color-text-primary); font-family: var(--font-family-brand, inherit); margin: 0; + /* transition: color 0.2s ease; */ transition: color var(--timing-fast) var(--easing-standard); } + .search-hit:hover .search-hit-title { color: var(--color-brand); } + .search-hit-description { font-size: 0.875rem; line-height: 1.5; @@ -3979,6 +5717,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested -webkit-box-orient: vertical; overflow: hidden; } + .search-hit-metadata { display: flex; align-items: center; @@ -3989,6 +5728,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested padding-top: 0.75rem; border-top: 1px solid var(--color-border-secondary); } + .search-hit-score { display: inline-flex; align-items: center; @@ -4004,33 +5744,45 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transition: all 0.2s ease; opacity: 0.8; } + .search-hit:hover .search-hit-score { transform: scale(1.05); opacity: 1; background: var(--color-brand-1); } + +/* SOPHISTICATED SEARCH SECTIONS */ + .search-section { margin-bottom: 2rem; border-radius: 0.875rem; - transition: background-color var(--timing-medium) var(--easing-standard), + /* transition: all 0.3s ease; */ + transition: + background-color var(--timing-medium) var(--easing-standard), color var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard), transform var(--timing-medium) var(--easing-standard), box-shadow var(--timing-medium) var(--easing-standard); } + .search-section:hover { transform: var(--transform-lift-medium); } + .search-section-header { display: flex; align-items: center; margin-bottom: 1.5rem; padding: 1rem; + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); border-radius: 0.75rem; + /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); + /* backdrop-filter: blur(10px); */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); } + .search-section-badge { display: flex; align-items: center; @@ -4043,13 +5795,17 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested font-size: 0.875rem; font-weight: 600; margin-right: 0.75rem; + /* box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.2); */ box-shadow: var(--elevation-brand-subtle); transition: all 0.2s ease; } + .search-section:hover .search-section-badge { transform: scale(1.1); + /* box-shadow: 0 4px 16px rgba(var(--color-brand-rgb), 0.3); */ box-shadow: var(--elevation-brand-medium); } + .search-section-title { font-size: 1.5rem; font-weight: 700; @@ -4057,10 +5813,14 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested font-family: var(--font-family-brand, inherit); margin: 0; } + +/* SOPHISTICATED PARENT GROUPS */ + .search-parent-group { position: relative; margin-bottom: 1.5rem; } + .search-parent-group h3 { position: sticky; top: 0; @@ -4071,39 +5831,55 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested font-family: var(--font-family-brand, inherit); margin: 0 -1rem 1rem -1rem; padding: 0.75rem 1rem; + /* background: var(--color-surface); */ background: var(--glass-bg); + /* backdrop-filter: blur(10px); */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border-bottom: 1px solid var(--color-border-secondary); border-radius: 0.5rem 0.5rem 0 0; } + +/* SEARCH RESULTS HEADER */ + .search-results-header { padding: 1.5rem; margin-bottom: 1.5rem; + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); border-radius: 0.875rem; + /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); border-left: 4px solid var(--color-brand); + /* backdrop-filter: blur(10px); */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* animation: slideInUp 0.6s ease-out; */ animation: slideInUp var(--timing-slow) var(--easing-standard); } + .search-results-header h1 { font-size: 1.25rem; font-weight: 600; color: var(--color-text-primary); margin: 0 0 0.25rem 0; } + .search-results-header p { font-size: 0.875rem; color: var(--color-text-secondary); margin: 0; } + .search-stats { text-align: right; } + .search-stats div { font-size: 0.75rem; color: var(--color-text-tertiary); } + +/* SOPHISTICATED ANIMATIONS - Matching design system */ + @keyframes fadeIn { from { opacity: 0; @@ -4114,6 +5890,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: translateY(0); } } + @keyframes slideInUp { from { opacity: 0; @@ -4124,6 +5901,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: translateY(0); } } + @keyframes pulse { 0%, 100% { opacity: 1; @@ -4132,42 +5910,65 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested opacity: 0.7; } } + +/* Animation Classes */ + .animate-fadeIn { + /* animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1); */ animation: fadeIn var(--timing-fast) var(--easing-standard); } + .animate-slideInUp { + /* animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1); */ animation: slideInUp var(--timing-fast) var(--easing-standard); } + .animate-pulse { + /* animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; */ animation: pulse var(--timing-slow) var(--easing-emphasized) infinite; } + +/* Search Container Enhancements */ + .search-results-container { transition: all 0.3s ease; } + .search-results-header { animation: slideInUp 0.6s ease-out; } + +/* Search Section Styling */ + .search-section { border-radius: 12px; transition: all 0.3s ease; } + .search-section:hover { transform: var(--transform-lift-medium); } + +/* Enhanced Search Hit Styling */ + .search-hit { position: relative; overflow: hidden; } + .search-hit-content { position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid var(--color-border, #e0e0e0); } + .search-hit:hover .search-hit-content { border-color: var(--color-brand); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--color-brand-alpha, rgba(74, 144, 226, 0.1)); } + .search-hit-content::before { content: ''; position: absolute; @@ -4180,33 +5981,49 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transition: transform 0.3s ease; transform-origin: left; } + .search-hit:hover .search-hit-content::before { transform: scaleX(1); } + +/* Search Hit Typography */ + .search-hit-title { transition: color 0.2s ease; } + .search-hit:hover .search-hit-title { color: var(--color-brand) !important; } + .search-hit-section { transition: all 0.2s ease; } + .search-hit:hover .search-hit-section { transform: translateX(2px); } + +/* Search Score Badge */ + .search-hit-score { transition: all 0.2s ease; min-width: 45px; text-align: center; } + .search-hit:hover .search-hit-score { transform: scale(1.05); opacity: 1 !important; } + +/* SOPHISTICATED FILTER STYLING - Matching navigation patterns */ + #filterSelect { position: relative; + /* background: var(--color-surface); */ background: var(--glass-bg); + /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); border-radius: var(--radius-lg); padding: 0.5rem 0.75rem; @@ -4214,36 +6031,47 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested font-weight: 500; color: var(--color-text-primary); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + /* backdrop-filter: blur(10px); */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */ box-shadow: var(--glass-shadow); cursor: pointer; } + #filterSelect:hover { background: var(--color-surface-hover); border-color: var(--color-brand); transform: var(--transform-lift-subtle); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } + #filterSelect:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--color-brand); - box-shadow: 0 0 0 2px var(--color-brand), + box-shadow: + 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); } + .filter-active { background: var(--color-brand) !important; color: var(--color-text-inverse) !important; border-color: var(--color-brand) !important; box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.25) !important; } + .filter-active:hover { background: var(--color-brand-1) !important; transform: var(--transform-lift-subtle); } + +/* Filter container styling */ + #filterContainer { position: relative; } + #filterContainer label { display: block; font-size: 0.875rem; @@ -4251,44 +6079,59 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested color: var(--color-text-secondary); margin-bottom: 0.5rem; } + +/* UTILITY CLASSES */ + .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } + .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } + .space-y-3 > * + * { margin-top: 0.75rem; } + .space-x-4 > * + * { margin-left: 1rem; } + .flex { display: flex; } + .items-center { align-items: center; } + .justify-between { justify-content: space-between; } + .flex-1 { flex: 1 1 0%; } + .font-medium { font-weight: 500; } + +/* SOPHISTICATED LOADING STATES */ + .search-loading { position: relative; padding: 2rem; text-align: center; } + .search-loading::after { content: ''; position: absolute; @@ -4302,53 +6145,71 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested border-radius: 50%; animation: spin 1s linear infinite; } + @keyframes spin { to { transform: rotate(360deg); } } + .search-loading-text { color: var(--color-text-secondary); font-size: 0.875rem; margin-top: 1rem; } + +/* Focus Management */ + .search-hit:focus-within .search-hit-content { outline: 2px solid var(--color-brand); outline-offset: 2px; } + +/* RESPONSIVE DESIGN */ + @media (max-width: 768px) { .search-hit-content { padding: 1rem; } + .search-hit-metadata { flex-direction: column; align-items: flex-start; gap: 0.5rem; } + .search-results-header { padding: 1rem; } + .search-results-header .flex { flex-direction: column; align-items: flex-start; gap: 0.5rem; } + .search-section-header { padding: 0.75rem; } + .search-section-badge { width: 1.75rem; height: 1.75rem; font-size: 0.75rem; } + .search-section-title { font-size: 1.25rem; } + .search-parent-group h3 { font-size: 1rem; padding: 0.5rem 0.75rem; } } + +/* PRINT STYLES */ + @media print { .search-hit-content { -moz-column-break-inside: avoid; @@ -4357,16 +6218,21 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested border: 1px solid #000; background: white; } + .search-hit-score, .animate-fadeIn, .animate-slideInUp { display: none; } + .search-section-badge { background: #000; color: white; } } + +/* NO RESULTS AND ERROR STATES - Matching design system */ + .search-no-results, .search-error { text-align: center; @@ -4380,6 +6246,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested border: 1px solid var(--color-border-primary); animation: fadeIn 0.5s ease-out; } + .search-no-results .emoji, .search-error .emoji { font-size: 3rem; @@ -4387,6 +6254,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested opacity: 0.6; display: block; } + .search-no-results h2, .search-error h2 { font-size: 1.25rem; @@ -4394,12 +6262,14 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested color: var(--color-text-secondary); margin: 0 0 0.5rem 0; } + .search-no-results p, .search-error p { font-size: 0.875rem; color: var(--color-text-tertiary); margin: 0 0 1rem 0; } + .search-error button { background: var(--color-brand); color: var(--color-text-inverse); @@ -4411,19 +6281,27 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested cursor: pointer; transition: all 0.2s ease; } + .search-error button:hover { background: var(--color-brand-1); transform: var(--transform-lift-subtle); box-shadow: 0 4px 8px rgba(var(--color-brand-rgb), 0.25); } + +/* High Contrast Mode Support */ + @media (prefers-contrast: high) { .search-hit-content { border-width: 2px; } + .search-hit:hover .search-hit-content { border-width: 3px; } } + +/* ACCESSIBILITY AND REDUCED MOTION SUPPORT */ + @media (prefers-reduced-motion: reduce) { .search-hit-content, .search-section, @@ -4434,154 +6312,236 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested animation: none; transition: none; } + .search-hit:hover .search-hit-content, .search-section:hover, .search-section:hover .search-section-badge { transform: none; } } + +/* HIGH CONTRAST MODE SUPPORT */ + @media (prefers-contrast: high) { .search-hit-content, .search-section-header, .search-results-header { border-width: 2px; } + .search-hit:hover .search-hit-content { border-width: 3px; } + .search-section-badge { border: 2px solid var(--color-text-primary); } } + +/* DARK MODE SUPPORT - All styles automatically work via CSS custom properties */ + +/* The color system in colors.css handles dark mode via .dark class */ + +/* No additional dark mode styles needed as we use semantic color variables */ + +/* Chat Component - Enhanced chat interface with premium styling */ + +/* Chat Header */ + .chat__header { + /* backdrop-filter: blur(10px); */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - border-radius: 0.75rem 0.75rem 0 0; + border-radius: 0.75rem 0.75rem 0 0; /* Top corners rounded to match design system */ } + +/* Chat header icon styling for proper dark mode */ + .chat__header-icon { filter: brightness(0) saturate(100%) invert(42%) sepia(15%) saturate(566%) hue-rotate(202deg) brightness(96%) contrast(87%); } + .dark .chat__header-icon { filter: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(593%) hue-rotate(202deg) brightness(91%) contrast(92%); } + +/* Danger button variant for delete action */ + .topbar__button--danger:hover { background-color: rgba(239, 68, 68, 0.1) !important; border-color: rgb(239, 68, 68) !important; color: rgb(239, 68, 68) !important; } + .topbar__button--danger:hover img { filter: brightness(0) saturate(100%) invert(35%) sepia(96%) saturate(2067%) hue-rotate(346deg) brightness(89%) contrast(94%) !important; } + +/* Chat Container - Clean transparent design */ + #chatContainer { background: transparent; border: none; box-shadow: none; - border-radius: 0.75rem; - margin-top: 1rem; + border-radius: 0.75rem; /* Add consistent border radius */ + /* margin-right: 1.5rem; Align with page container padding */ + /* Replaced: remove right margin on wide screens to avoid pinching */ + margin-top: 1rem; /* Match the pageContainer's top padding to align with content start */ } + +/* On xl+, let chat use full sidebar column width */ + @screen xl { #chatContainer { margin-right: 0; } } + +/* Enhanced Chat Interface - Clean transparent design */ + .chat__controls { background: transparent; border: none; - border-radius: 0 0 0.75rem 0.75rem; + border-radius: 0 0 0.75rem 0.75rem; /* Bottom corners rounded to match container */ } + .chat__form { width: 100%; } + .chat__input { - &:focus { - --tw-outline-style: none; - outline-style: none; - } - transition: border-color var(--timing-fast) var(--easing-standard), + outline: none; + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + border-color var(--timing-fast) var(--easing-standard), box-shadow var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard); font-family: var(--font-brand); line-height: 1.4; } + .chat__input:hover { border-color: var(--color-brand); box-shadow: var(--elevation-4); } + .chat__input:focus { border-color: var(--color-brand); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(var(--color-brand-rgb), 0.1); } + +/* Old styling moved to enhanced section below */ + +/* Smooth transitions for chat container */ + #chatContainer { - transition: width var(--timing-medium) var(--easing-smooth), + /* ✅ FIXED: Use animation tokens for consistent timing */ + /* transition (was medium for all) */ + transition: + width var(--timing-medium) var(--easing-smooth), max-width var(--timing-medium) var(--easing-smooth), - + /* slower transform and shadow for more graceful feel */ box-shadow var(--timing-slow) var(--easing-smooth), transform var(--timing-slow) var(--easing-smooth), border-radius var(--timing-slow) var(--easing-standard), - + /* include background/border transitions for softer state change */ background-color var(--timing-medium) var(--easing-smooth), border-color var(--timing-medium) var(--easing-smooth), backdrop-filter var(--timing-medium) var(--easing-smooth); transform-origin: top right; will-change: width, transform, box-shadow; } + +/* Expanded Chat State - Enhanced Liquid Glass */ + .chat-expanded { + /* Lighter translucent surface */ background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border-color); border-left-width: 3px; + /* box-shadow: 0 18px 60px rgba(0, 0, 0, 0.08), 0 8px 28px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.18); */ box-shadow: var(--glass-shadow); transform: translateY(-2px); overflow: visible; display: flex; flex-direction: column; } + +/* Dark theme tuning: slightly lighter sheet */ + .dark .chat-expanded { background: var(--glass-bg); border-color: var(--glass-border-color); } + +/* Ensure messages area scrolls within viewport when expanded */ + .chat-expanded #chat-messages { flex: 1 1 auto; - min-height: 0; + min-height: 0; /* required for flex children to allow overflow */ overflow-y: auto; - max-height: none; + max-height: none; /* use container max-height instead */ } + +/* Modal overlay for expanded chat */ + .chat-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.22); opacity: 0; transition: opacity var(--timing-medium) var(--easing-smooth); - z-index: 50; + z-index: 50; /* below chat container (which uses 60) */ } + .chat-overlay.visible { opacity: 1; } + +/* Enhanced input styling for expanded state */ + .chat-expanded .chat__input { - font-size: var(--text-base); - line-height: var(--tw-leading, var(--text-base--line-height)); - font-size: 15px; + font-size: var(--font-size-base); + font-size: 15px; /* Slightly larger for better UX */ line-height: 1.5; } + +/* Micro-interaction for expand button */ + .chat__header button { - transition: transform var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard); } + .chat__header button:hover { transform: scale(1.1); background-color: var(--color-surface-hover); } + .chat__header button:active { transform: scale(0.95); } + +/* Enhanced focus states */ + .chat-expanded .chat__input:focus { - box-shadow: 0 0 0 3px rgba(var(--color-brand-rgb), 0.12), + box-shadow: + 0 0 0 3px rgba(var(--color-brand-rgb), 0.12), 0 4px 20px rgba(0, 0, 0, 0.1); border-color: var(--color-brand); } + +/* Subtle animation for chat messages in expanded state */ + .chat-expanded .chat__messages { + /* ✅ FIXED: Use animation tokens */ animation: subtle-fade-in var(--timing-medium) var(--easing-standard) var(--reveal-stagger-delay) both; } + @keyframes subtle-fade-in { from { opacity: 0.8; @@ -4592,144 +6552,206 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: translateY(0); } } + +/* Liquid Glass Hover Effect */ + #chatContainer:not(.chat-expanded):hover { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border-color: var(--glass-border-color); + /* transform: translateX(-1px); */ box-shadow: var(--glass-shadow); } + +/* Auto-resize textarea styling with liquid glass focus */ + .chat-input { overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; - transition: background-color var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), box-shadow var(--timing-fast) var(--easing-standard); } + .chat-input::-webkit-scrollbar { display: none; } + .chat-input:focus { background: rgba(255, 255, 255, 0.08) !important; + /* backdrop-filter: blur(12px) !important; */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important; border-color: rgba(255, 255, 255, 0.15) !important; - box-shadow: 0 0 0 2px rgba(var(--color-brand-rgb), 0.1), + box-shadow: + 0 0 0 2px rgba(var(--color-brand-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.06); } + +/* Enhanced send button styling */ + #sendButton { - transition: transform var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard), box-shadow var(--timing-fast) var(--easing-standard), filter var(--timing-fast) var(--easing-standard); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } + +/* :has() Chat Interface Enhancements */ + +/* Chat container responds to input focus (no scale to avoid clipping) */ + #chatContainer:has(.chat__input:focus) { transform: translateY(-1px); - box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), + box-shadow: + 0 12px 40px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(var(--color-brand-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2); border-color: var(--color-brand); overflow: visible; } + +/* Match header with lighter sheet while expanded */ + .chat-expanded .chat__header { background: rgba(255, 255, 255, 0.08) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.14); } + .dark .chat-expanded .chat__header { background: rgba(255, 255, 255, 0.05) !important; border-bottom-color: rgba(255, 255, 255, 0.12); } + +/* Enhanced expanded state with input focus */ + .chat-expanded:has(.chat__input:focus) { border-left-width: 4px; border-color: var(--color-brand); background: rgba(255, 255, 255, 0.15); } + +/* Chat form with content gets enhanced styling */ + #chatContainer:has(.chat__input:not(:-moz-placeholder)) .chat__header { background: linear-gradient(135deg, rgba(var(--color-brand-rgb), 0.1) 0%, rgba(var(--color-brand-rgb), 0.05) 100%); border-bottom: 1px solid rgba(var(--color-brand-rgb), 0.2); } + #chatContainer:has(.chat__input:not(:placeholder-shown)) .chat__header { background: linear-gradient(135deg, rgba(var(--color-brand-rgb), 0.1) 0%, rgba(var(--color-brand-rgb), 0.05) 100%); border-bottom: 1px solid rgba(var(--color-brand-rgb), 0.2); } + +/* Send button activation based on input content */ + #chatContainer:has(.chat__input:not(:-moz-placeholder)) #sendButton { background-color: var(--color-brand) !important; color: var(--color-text-inverse) !important; transform: scale(1.05); - box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.3), + box-shadow: + 0 4px 12px rgba(var(--color-brand-rgb), 0.3), 0 2px 8px rgba(0, 0, 0, 0.1); } + #chatContainer:has(.chat__input:not(:placeholder-shown)) #sendButton { background-color: var(--color-brand) !important; color: var(--color-text-inverse) !important; transform: scale(1.05); - box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.3), + box-shadow: + 0 4px 12px rgba(var(--color-brand-rgb), 0.3), 0 2px 8px rgba(0, 0, 0, 0.1); } + #sendButton:not(:disabled) { background-color: var(--color-brand) !important; color: var(--color-text-inverse) !important; } + #sendButton:not(:disabled):hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); filter: brightness(1.1); } + #sendButton:not(:disabled):active { transform: scale(0.95); filter: brightness(0.9); } + #sendButton:disabled { background-color: var(--color-bg-secondary) !important; color: var(--color-text-tertiary) !important; } + +/* Chat input improvements */ + .chat__input:focus { - box-shadow: 0 0 0 3px rgba(var(--color-brand-rgb), 0.1), + box-shadow: + 0 0 0 3px rgba(var(--color-brand-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.1); border-color: var(--color-brand) !important; } + .chat__input::-moz-placeholder { color: var(--color-text-tertiary); } + .chat__input::placeholder { color: var(--color-text-tertiary); } + +/* Header button hover effects with enhanced micro-interactions */ + .chat__header button:hover svg { transform: scale(1.15) rotate(2deg); transition: transform var(--timing-fast) var(--easing-standard); } + +/* Smooth state transitions for expand button icon */ + .chat__header button svg { + /* ✅ FIXED: Use animation tokens and specific properties */ transition: transform var(--timing-medium) var(--easing-standard); } + +/* Chat bubble improvements - tighter spacing and better hierarchy */ + .chat-bubble { - position: relative; - max-width: none; + padding: var(--space-3); border-radius: var(--radius-xl); - padding: calc(var(--spacing) * 3); - --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + box-shadow: var(--shadow-sm); + position: relative; + max-width: none; /* Reduced padding from p-4 to p-3 */ word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; hyphens: auto; white-space: pre-wrap; - line-height: 1.5; + line-height: 1.5; /* Slightly tighter line height */ font-family: var(--font-brand); - border-radius: 1rem 1rem 1rem 0.25rem; + border-radius: 1rem 1rem 1rem 0.25rem; /* Consistent rounded corners with tail */ } + .chat-bubble--user { - margin-left: calc(var(--spacing) * 6); + margin-left: var(--space-6); /* Reduced margin */ background-color: var(--color-brand); color: var(--color-text-inverse); - border-radius: 1rem 1rem 0.25rem 1rem; + border-radius: 1rem 1rem 0.25rem 1rem; /* User tail on right */ box-shadow: var(--elevation-4); } + .chat-bubble--bot { - margin-right: calc(var(--spacing) * 6); + margin-right: var(--space-6); /* Reduced margin */ background: linear-gradient( 135deg, var(--color-surface) 0%, @@ -4737,24 +6759,24 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested ); border: 1px solid var(--color-border-primary); color: var(--color-text-primary); - border-radius: 1rem 1rem 1rem 0.25rem; + border-radius: 1rem 1rem 1rem 0.25rem; /* Bot tail on left */ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } + +/* Enhanced Chat Messages */ + #chat-messages { display: flex; flex-direction: column; - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); - } - padding: calc(var(--spacing) * 4); + gap: var(--space-3); + padding: var(--space-4); /* Tighter spacing */ max-height: calc(100vh - 12rem); overflow-y: auto; scroll-behavior: smooth; } + .chat-bubble--error { - margin-right: calc(var(--spacing) * 6); + margin-right: var(--space-6); /* Consistent with other bubbles */ background: linear-gradient( 135deg, rgba(239, 68, 68, 0.1) 0%, @@ -4762,46 +6784,51 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested ); border: 1px solid rgba(239, 68, 68, 0.2); color: var(--color-text-primary); - border-radius: 1rem 1rem 1rem 0.25rem; + border-radius: 1rem 1rem 1rem 0.25rem; /* Consistent tail */ } + +/* Chat message formatting */ + .chat-bubble p { - margin-bottom: calc(var(--spacing) * 3); - &:last-child { - margin-bottom: calc(var(--spacing) * 0); - } + margin-bottom: var(--space-3); word-wrap: break-word; overflow-wrap: break-word; } + .chat-bubble code { - border-radius: 0.25rem; - padding-inline: calc(var(--spacing) * 2); - padding-block: calc(var(--spacing) * 1); - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); + padding: var(--space-1) var(--space-2); + border-radius: var(--radius-sm); + font-size: var(--font-size-sm); background-color: rgba(var(--color-brand-rgb), 0.1); color: var(--color-brand); font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; word-break: break-all; } + .chat-bubble pre { - margin-block: calc(var(--spacing) * 3); - overflow-x: auto; + padding: var(--space-3); border-radius: var(--radius-lg); - padding: calc(var(--spacing) * 3); - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); + overflow-x: auto; + font-size: var(--font-size-sm); + margin: var(--space-3) 0; background-color: var(--color-bg-tertiary); border: 1px solid var(--color-border-primary); } + .chat-bubble pre code { - padding: calc(var(--spacing) * 0); + padding: 0; background: none; color: var(--color-text-primary); } + +/* Chat message animations */ + .chat-bubble { + /* ✅ FIXED: Use animation tokens */ animation: chat-message-enter var(--timing-medium) var(--easing-standard); animation-fill-mode: both; } + @keyframes chat-message-enter { from { opacity: 0; @@ -4812,17 +6839,16 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: translateY(0) scale(1); } } + +/* Enhanced typing indicator */ + .typing-indicator { - margin-right: calc(var(--spacing) * 8); display: flex; align-items: center; - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))); - } + gap: var(--space-2); + padding: var(--space-4); border-radius: var(--radius-xl); - padding: calc(var(--spacing) * 4); + margin-right: var(--space-8); background: linear-gradient( 135deg, var(--color-surface) 0%, @@ -4830,6 +6856,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested ); border: 1px solid var(--color-border-primary); } + .typing-indicator::after { content: ''; display: inline-block; @@ -4839,6 +6866,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested background-color: var(--color-text-secondary); animation: typing-dot 1.4s infinite; } + .typing-indicator::before { content: ''; display: inline-block; @@ -4846,9 +6874,11 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested height: 4px; border-radius: 50%; background-color: var(--color-text-secondary); + /* ✅ FIXED: Use animation tokens for stagger */ animation: typing-dot 1.4s infinite var(--reveal-batch-delay); margin-right: 4px; } + @keyframes typing-dot { 0%, 60%, 100% { opacity: 0.3; @@ -4859,46 +6889,33 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: scale(1.2); } } + +/* Chat pair container - tighter spacing */ + .chat-pair { - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); - } + gap: var(--space-3); /* Slightly increased for better breathing room */ position: relative; margin-bottom: 1rem; } + +/* Improved delete button styling aligned with design system */ + .chat-delete { position: absolute; - top: calc(var(--spacing) * -1); - right: calc(var(--spacing) * -1); + top: -0.25rem; + right: -0.25rem; + width: 1.25rem; + height: 1.25rem; + border-radius: 9999px; display: flex; - height: calc(var(--spacing) * 5); - width: calc(var(--spacing) * 5); align-items: center; justify-content: center; - border-radius: calc(infinity * 1px); - font-size: var(--text-xs); - line-height: var(--tw-leading, var(--text-xs--line-height)); - opacity: 0%; - &:is(:where(.group):hover *) { - @media (hover: hover) { - opacity: 100%; - } - } - &:focus { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - &:focus { - --tw-ring-offset-width: 1px; - --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - } - &:focus { - --tw-outline-style: none; - outline-style: none; - } - transition: opacity var(--timing-fast) var(--easing-standard), + font-size: var(--font-size-xs); + opacity: 0; + outline: none; + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + opacity var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard); @@ -4908,8 +6925,10 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested font-size: 0.75rem; line-height: 1; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + /* backdrop-filter: blur(8px); */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); } + .chat-delete:hover { background-color: rgba(239, 68, 68, 0.1); border-color: rgb(239, 68, 68); @@ -4917,48 +6936,66 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: scale(1.1); box-shadow: 0 4px 8px rgba(239, 68, 68, 0.2); } + .chat-delete:active { transform: scale(0.95); + /* ✅ FIXED: Use animation tokens */ animation: delete-shake var(--timing-medium) var(--easing-standard); } + .chat-pair:hover .chat-delete { opacity: 1; } + +/* Delete shake animation */ + @keyframes delete-shake { - 0%, 100% { - transform: scale(0.95) rotate(0deg); - } - 25% { - transform: scale(0.95) rotate(-2deg); - } - 75% { - transform: scale(0.95) rotate(2deg); - } + 0%, 100% { transform: scale(0.95) rotate(0deg); } + 25% { transform: scale(0.95) rotate(-2deg); } + 75% { transform: scale(0.95) rotate(2deg); } } + +/* Article Header Component - Parent container managing breadcrumbs and metadata */ + .article-header { position: relative; margin-bottom: 1.5rem; } + +/* Navigation container - holds breadcrumbs and toggle button */ + .article-header__navigation { display: flex; align-items: center; justify-content: space-between; + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ border-radius: 0.75rem; + /* padding: 1rem 1.25rem; */ padding: 0.5rem 0.75rem; + /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); background: var(--glass-bg); box-shadow: var(--glass-shadow); transition: background-color var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard); } + +/* Reduced hover effect intentionally disabled to keep things airy */ + +/* Actions Container - holds copy page and metadata toggle */ + .article-header__actions { display: flex; align-items: center; gap: 0.75rem; } + +/* Copy Page Component Styles */ + .article-header__copy-page { position: relative; } + .article-header__copy-toggle { display: flex; align-items: center; @@ -4977,44 +7014,60 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); font-family: var(--font-brand); } + .article-header__copy-toggle:hover { background: var(--color-bg-secondary); border-color: var(--color-brand); color: var(--color-brand); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } + .article-header__copy-toggle:focus { outline: 2px solid rgba(var(--color-brand-rgb), 0.5); outline-offset: 2px; } + +/* Copy Page Dropdown Styles */ + .article-header__copy-dropdown { position: absolute; right: 0; margin-top: 0.5rem; width: 14rem; + /* background: var(--color-surface); */ background: var(--glass-bg); + /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); border-radius: 0.5rem; + /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); */ box-shadow: var(--glass-shadow); z-index: 999; overflow: hidden; + /* backdrop-filter: blur(10px); */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } + .dark .article-header__copy-dropdown { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2); } + .article-header__copy-dropdown[data-state="hidden"] { display: none; } + .article-header__copy-dropdown-content { padding: 0.25rem; + /* Elevate glass on inner wrapper to ensure effect covers menu content */ background: var(--glass-bg); border: 1px solid var(--glass-border-color); border-radius: 0.75rem; backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); box-shadow: var(--glass-shadow); } + +/* Dropdown Menu Items */ + .copy-page-menu-item { width: 100%; display: flex; @@ -5031,29 +7084,39 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transition: all 0.2s ease; text-decoration: none; } + .copy-page-menu-item:hover { background: var(--color-surface-hover); color: var(--color-brand); } + .copy-page-menu-item:focus { outline: 2px solid rgba(var(--color-brand-rgb), 0.5); outline-offset: -2px; } + .copy-page-menu-item svg { width: 1rem; height: 1rem; - flex-shrink: 0; + shrink: 0; color: var(--color-text-secondary); transition: color 0.2s ease; } + .copy-page-menu-item:hover svg { color: var(--color-brand); } + +/* Menu Separator */ + .copy-page-separator { margin: 0.25rem 0; border: 0; border-top: 1px solid var(--color-border-primary); } + +/* Menu Section Header */ + .copy-page-section-header { padding: 0.25rem 0.75rem; font-size: 0.75rem; @@ -5064,99 +7127,139 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested background: var(--color-bg-tertiary); margin: 0.25rem 0; } + +/* Icon Styles */ + .article-header__copy-icon, .article-header__copy-arrow { width: 1rem; height: 1rem; - flex-shrink: 0; + shrink: 0; color: var(--color-text-secondary); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } + .article-header__copy-toggle:hover .article-header__copy-icon, .article-header__copy-toggle:hover .article-header__copy-arrow { color: var(--color-brand); } + +/* Dropdown arrow rotation */ + .article-header__copy-toggle[aria-expanded="true"] .article-header__copy-arrow { transform: rotate(180deg); } + +/* Copy feedback states */ + .copy-page-menu-item.copying { background: var(--color-brand); color: var(--color-text-inverse); } + .copy-page-menu-item.copying svg { color: var(--color-text-inverse); } + .copy-page-menu-item.success { background: var(--color-brand-5); color: var(--color-text-inverse); } + .copy-page-menu-item.success svg { color: var(--color-text-inverse); } + .copy-page-menu-item.error { background: var(--color-brand-7); color: var(--color-text-inverse); } + .copy-page-menu-item.error svg { color: var(--color-text-inverse); } + .article-header__copy-text { white-space: nowrap; } + .article-header__copy-icon, .article-header__copy-arrow { width: 1rem; height: 1rem; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } + .article-header__copy-toggle[aria-expanded="true"] .article-header__copy-arrow { transform: rotate(180deg); } + .article-header__copy-dropdown { position: absolute; right: 0; top: 100%; margin-top: 0.5rem; width: 14rem; + /* background: var(--color-surface); */ background: var(--glass-bg); + /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); border-radius: 0.75rem; + /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.1); */ box-shadow: var(--glass-shadow); z-index: 50; + /* backdrop-filter: blur(10px); */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); overflow: hidden; } + .article-header__copy-dropdown .p-1 { padding: 0.25rem; } + +/* Stronger glassmorphism for dropdown readability over underlying text */ + .article-header__copy-dropdown { + /* Locally override glass tokens for this component */ --glass-blur: 14px; --glass-saturate: 1.25; --glass-bg: rgba(255, 255, 255, 0.72); --glass-border-color: rgba(255, 255, 255, 0.32); --glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); + + /* Ensure it visually floats above overlapping content */ z-index: 1000; background-clip: padding-box; + /* Let inner content own the visual surface to avoid double borders */ background: transparent; border: none; } + .dark .article-header__copy-dropdown { --glass-bg: rgba(17, 17, 17, 0.72); --glass-border-color: rgba(255, 255, 255, 0.18); --glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); } + +/* Responsive adjustments */ + @media (max-width: 768px) { .article-header__actions { gap: 0.5rem; } + .article-header__copy-text { display: none; } + .article-header__copy-dropdown { width: 12rem; right: -2rem; } } + +/* Metadata Toggle Button */ + .article-header__metadata-toggle { display: flex; align-items: center; @@ -5177,6 +7280,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); font-family: var(--font-brand); } + .article-header__metadata-toggle:before { content: ""; position: absolute; @@ -5194,32 +7298,44 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transition: opacity 0.2s ease; pointer-events: none; } + .article-header__metadata-toggle:hover { background: var(--color-brand-1); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.4); } + .article-header__metadata-toggle:hover:before { opacity: 1; } + .article-header__metadata-toggle:focus { outline: 2px solid rgba(var(--color-brand-rgb), 0.5); outline-offset: 2px; } + .article-header__metadata-toggle:active { transform: translateY(0); } + .article-header__toggle-text { white-space: nowrap; } + .article-header__toggle-icon { width: 1rem; height: 1rem; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } + +/* Rotate icon when expanded */ + .article-header__metadata-toggle[aria-expanded="true"] .article-header__toggle-icon { transform: rotate(180deg); } + +/* Metadata Panel */ + .article-header__metadata-panel { max-height: 0; overflow: hidden; @@ -5228,19 +7344,28 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested opacity: 0; transform: translateY(-10px); } + .article-header__metadata-panel[aria-hidden="false"] { - max-height: 200px; + max-height: 200px; /* More reasonable max height for metadata */ opacity: 1; transform: translateY(0); } + +/* Enhanced UX styles for horizontal metadata flow within article header */ + .article-header__metadata-panel .metadata { + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); border-radius: 0.75rem; + /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); + /* backdrop-filter: blur(10px); */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); margin-top: 0.75rem; } + .article-header__metadata-panel .metadata__flow { display: flex; align-items: center; @@ -5248,6 +7373,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested gap: 0.75rem; padding: 1rem 1.25rem; } + .article-header__metadata-panel .metadata__item { display: flex; align-items: center; @@ -5263,6 +7389,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested font-weight: 400; white-space: nowrap; } + .article-header__metadata-panel .metadata__item:before { content: ''; position: absolute; @@ -5279,6 +7406,7 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transition: opacity 0.2s ease; pointer-events: none; } + .article-header__metadata-panel .metadata__item:hover { background-color: var(--color-surface-hover); color: var(--color-brand); @@ -5286,16 +7414,26 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested padding-left: calc(0.75rem + 2px); border-left: 2px solid var(--color-brand); } + .article-header__metadata-panel .metadata__item:hover:before { opacity: 1; } + +/* Secondary metadata items (like last modified) */ + .article-header__metadata-panel .metadata__item--secondary { color: var(--color-text-tertiary); font-size: 0.8125rem; } + .article-header__metadata-panel .metadata__item--secondary:hover { color: var(--color-text-secondary); } + +/* Metadata separators removed - clean horizontal flow */ + +/* Override global SVG styles for metadata icons - very specific targeting */ + .article-header__metadata-panel .metadata .metadata__icon, .article-header__metadata-panel .metadata__icon, .article-header__metadata-panel svg { @@ -5305,9 +7443,12 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested max-width: 1.25rem !important; min-height: 1.25rem !important; min-width: 1.25rem !important; - flex-shrink: 0 !important; + shrink: 0 !important; display: inline-block !important; } + +/* Mobile responsive styles */ + @media (max-width: 768px) { .article-header__metadata-panel .metadata__flow { padding: 0.75rem 1rem; @@ -5315,11 +7456,15 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested flex-direction: column; align-items: flex-start; } + .article-header__metadata-panel .metadata__item { font-size: 0.8125rem; padding: 0.375rem 0.5rem; width: 100%; } + + /* Separators removed - no longer needed */ + .article-header__metadata-panel .metadata .metadata__icon, .article-header__metadata-panel .metadata__icon, .article-header__metadata-panel svg { @@ -5331,24 +7476,33 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested min-width: 1rem !important; } } + +/* Additional responsive styles for navigation */ + @media (max-width: 768px) { .article-header__navigation { flex-direction: column; gap: 1rem; align-items: stretch; } + .article-header__metadata-toggle { justify-content: center; width: 100%; } } + +/* Loading State */ + .article-header.loading .article-header__metadata-toggle { pointer-events: none; opacity: 0.7; } + .article-header.loading .article-header__toggle-icon { animation: spin 1s linear infinite; } + @keyframes spin { from { transform: rotate(0deg); @@ -5357,34 +7511,54 @@ li:has(> .sidebar-item > .sidebar-item__toggle[aria-expanded="false"]) > .nested transform: rotate(360deg); } } + +/* Focus states for accessibility */ + .article-header__metadata-toggle:focus-within { outline: 2px solid var(--color-brand); outline-offset: 2px; border-radius: 0.625rem; } + +/* High contrast mode support */ + @media (prefers-contrast: high) { .article-header__navigation { border-width: 2px; } + .article-header__metadata-toggle { border: 2px solid var(--color-brand); } } + +/* Reduced motion support */ + @media (prefers-reduced-motion: reduce) { .article-header__metadata-panel, .article-header__toggle-icon { transition: none; } + .article-header__navigation:hover { transform: none; } } + +/* Fix stacking context issues when dropdown is open */ + body:has(.article-header__copy-dropdown:not(.hidden)) h1[id] { position: static; } + body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { display: none; } + +/* :has() Article Header Enhancements */ + +/* Breadcrumb navigation with interactive states */ + .article-header:has(.breadcrumb__current[aria-expanded="true"]) .article-header__navigation { background: linear-gradient( 135deg, @@ -5392,13 +7566,20 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { var(--color-surface) 100% ); border-color: rgba(var(--color-brand-rgb), 0.2); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(var(--color-brand-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.15); } + +/* Enhanced metadata panel visibility */ + .article-header:has(.article-header__metadata-panel[aria-hidden="false"]) { margin-bottom: 2.5rem; } + +/* Related Content component styles migrated from page-enhancements.css */ + .related-content { position: relative; background: var(--glass-bg); @@ -5411,16 +7592,21 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { box-shadow var(--timing-medium) var(--easing-standard); box-shadow: var(--glass-shadow); } + .related-content__header { border-bottom: 1px solid var(--glass-border-color); padding-bottom: 0.75rem; margin-bottom: 1rem; } + .related-content__header h2 { margin: 0; color: var(--color-text-primary); font-weight: 600; } + +/* View Toggle Buttons */ + .related-content__view-toggle { position: relative; display: inline-flex; @@ -5436,22 +7622,26 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { min-width: 2.25rem; min-height: 2.25rem; } + .related-content__view-toggle:hover { background-color: var(--color-surface-hover); color: var(--color-text-primary); border-color: var(--color-border-secondary); transform: translateY(-1px); } + .related-content__view-toggle.active { background-color: var(--color-brand); color: var(--color-text-inverse); border-color: var(--color-brand); box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.3); } + .related-content__view-toggle:focus { outline: 2px solid var(--color-brand); outline-offset: 2px; } + .related-content__collapse-toggle { position: relative; display: inline-flex; @@ -5467,22 +7657,29 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { min-width: 2.25rem; min-height: 2.25rem; } + .related-content__collapse-toggle:hover { background-color: var(--color-surface-hover); color: var(--color-text-primary); border-color: var(--color-border-secondary); transform: translateY(-1px); } + .related-content__collapse-toggle[data-collapsed="true"] svg { transform: rotate(180deg); } + .related-content__collapse-toggle:focus { outline: 2px solid var(--color-brand); outline-offset: 2px; } + .related-content__container[data-collapsed="true"] { display: none; } + +/* Compact View Styles */ + .related-content__view--compact .related-content__item { position: relative; background: var(--glass-bg); @@ -5493,6 +7690,7 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { overflow: hidden; box-shadow: var(--glass-shadow); } + .related-content__view--compact .related-content__item::before { content: ''; position: absolute; @@ -5509,31 +7707,40 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { transition: opacity 0.2s ease; pointer-events: none; } + .related-content__view--compact .related-content__item:hover { border-color: rgba(var(--color-brand-rgb), 0.45); background: var(--color-surface-hover); transform: translateY(-1px); box-shadow: var(--elevation-2); } + .related-content__view--compact .related-content__item:hover::before { opacity: 1; } + .related-content__view--compact .related-content__item a { position: relative; z-index: 1; text-decoration: none; color: inherit; } + .related-content__view--compact .related-content__item a:hover { text-decoration: none; } + .related-content__view--compact .related-content__item .font-medium { color: var(--color-text-primary); transition: color 0.2s ease; } + .related-content__view--compact .related-content__item:hover .font-medium { color: var(--color-brand); } + +/* Enhanced Card View Styles */ + .related-content__card { position: relative; background: var(--glass-bg); @@ -5544,6 +7751,7 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { overflow: hidden; box-shadow: var(--glass-shadow); } + .related-content__card::before { content: ''; position: absolute; @@ -5561,19 +7769,23 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { transition: opacity 0.3s ease; pointer-events: none; } + .related-content__card:hover { transform: translateY(-3px); border-color: rgba(var(--color-brand-rgb), 0.45); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), var(--elevation-brand-subtle); } + .related-content__card:hover::before { opacity: 1; } + .related-content__card:focus-within { outline: 2px solid var(--color-brand); outline-offset: 2px; transform: translateY(-2px); } + .related-content__card a { position: relative; z-index: 1; @@ -5581,116 +7793,142 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { color: inherit; display: block; } + .related-content__card a:hover { text-decoration: none; } + .related-content__card .text-base { color: var(--color-text-primary); transition: color 0.2s ease; } + .related-content__card:hover .text-base { color: var(--color-brand); } + .related-content__card .text-gray-600 { color: var(--color-text-secondary); } + .related-content__card .text-gray-500 { color: var(--color-text-tertiary); } + +/* Dark mode enhancements */ + .dark .related-content { border-color: var(--color-border-secondary); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); } + .dark .related-content__view-toggle, .dark .related-content__collapse-toggle { border-color: var(--color-border-secondary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } + .dark .related-content__view-toggle:hover, .dark .related-content__collapse-toggle:hover { border-color: var(--color-border-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08); } + .dark .compact-view .compact-item { border-color: var(--color-border-secondary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } + .dark .compact-view .compact-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 8px rgba(var(--color-brand-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08); } + .dark .resource-card-compact { border-color: var(--color-border-secondary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); } + .dark .resource-card-compact:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(var(--color-brand-rgb), 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1); } + +/* Improved responsive behavior */ + @media (max-width: 768px) { .related-content { padding: 1rem; margin-top: 1.5rem; } + .related-header { flex-direction: column; gap: 0.75rem; align-items: flex-start; } + .related-content__view--compact .related-content__item { padding: 0.75rem; } + .related-content__view--compact .related-content__item time { display: none; } + .related-content__card { padding: 1rem; } + .related-content__view--cards .grid { grid-template-columns: 1fr; } + .related-content__view--compact .related-content__item:hover, .related-content__card:hover { transform: translateY(-1px); } } + +/* High contrast mode support */ + @media (prefers-contrast: high) { - .related-content { - border-width: 2px; - } - .related-content__view-toggle, .related-content__collapse-toggle { - border-width: 2px; - } - .related-content__view--compact .related-content__item { - border-width: 2px; - } - .related-content__card { - border-width: 2px; - } + .related-content { border-width: 2px; } + .related-content__view-toggle, .related-content__collapse-toggle { border-width: 2px; } + .related-content__view--compact .related-content__item { border-width: 2px; } + .related-content__card { border-width: 2px; } } + +/* Animation for view transitions */ + .related-content__view--compact, .related-content__view--cards { animation: fadeIn 0.3s ease-in-out; } + @keyframes fadeIn { - from { - opacity: 0; - transform: translateY(10px); - } - to { - opacity: 1; - transform: translateY(0); - } + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } } + +/* Print styles */ + @media print { - .related-content { - display: none; - } + .related-content { display: none; } } + +/* Page Resources component minor rules */ + +/* Hide resources block in print to reduce clutter */ + @media print { - [data-component="article-page-resources"] { - display: none; - } + [data-component="article-page-resources"] { display: none; } } + +/* Tiles Component - Interactive content cards with enhanced UX */ + +/* Base Tile Styles */ + .card--tile { position: relative; + /* Use a CSS var for the base background so JS can layer gradients on hover */ --tile-base-bg: linear-gradient( 135deg, var(--color-surface) 0%, @@ -5699,16 +7937,20 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { background: var(--tile-base-bg); border-radius: var(--radius-card); border: 1px solid var(--color-border-primary); + /* backdrop-filter: blur(var(--tile-glass-blur)) saturate(var(--tile-glass-saturate)); */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - transition: transform var(--timing-medium) var(--easing-standard), + transition: + transform var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard), box-shadow var(--timing-medium) var(--easing-standard), background var(--timing-medium) var(--easing-standard); overflow: hidden; + /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); will-change: transform, filter; isolation: isolate; } + .card--tile::before { content: ''; position: absolute; @@ -5726,6 +7968,9 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { transition: opacity 0.3s ease; pointer-events: none; } + +/* Subtle inner highlight for glass edge */ + .card--tile::after { content: ''; position: absolute; @@ -5734,20 +7979,31 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); } + .card--tile:hover::before { opacity: 1; } + +/* Focus states for accessibility */ + .card--tile:focus-within { outline: 2px solid var(--color-brand); outline-offset: 2px; transform: var(--transform-lift-medium); } + +/* Tile content spacing */ + .card--tile .space-y-3 > * + * { margin-top: 0.75rem; } + .card--tile .space-y-2 > * + * { margin-top: 0.5rem; } + +/* Tile links - ensure they take full space */ + .card--tile a { display: block; color: inherit; @@ -5755,9 +8011,13 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { position: relative; z-index: 2; } + .card--tile a:hover { color: inherit; } + +/* Tile headers */ + .card--tile h3 { color: var(--color-text-primary); font-weight: 600; @@ -5765,26 +8025,38 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { margin-bottom: 0.5rem; transition: color 0.2s ease; } + .card--tile:hover h3 { color: var(--color-brand); } -.card--tile p { + +/* Tile descriptions */ + +.card--tile p { color: var(--color-text-secondary); line-height: 1.5; font-size: 0.875rem; } + +/* Tile icons */ + .card--tile .icon { width: 1.5rem; height: 1.5rem; - flex-shrink: 0; - transition: filter var(--timing-fast) var(--easing-standard), + shrink: 0; + transition: + filter var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); filter: brightness(0.8); } + .card--tile:hover .icon { filter: brightness(1); transform: scale(1.05); } + +/* Tile tag/badge styles */ + .card--tile .inline-block { background-color: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); @@ -5792,39 +8064,55 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { font-size: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 9999px; - transition: filter var(--timing-fast) var(--easing-standard), + transition: + filter var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); display: inline-block; text-decoration: none; } + .card--tile .inline-block:hover { background-color: var(--color-brand); border-color: var(--color-brand); color: var(--color-text-inverse); transform: var(--transform-lift-subtle); } + +/* Responsive adjustments */ + @media (max-width: 768px) { .card--tile { margin-bottom: 1rem; } + .card--tile:hover { transform: var(--transform-lift-medium); } } + +/* Grid layout enhancements - simplified for child links component */ + .grid .card--tile { height: 100%; } + +/* Dark mode enhancements */ + .dark .card--tile { border-color: var(--color-border-secondary); + /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); */ box-shadow: var(--glass-shadow); } -.dark .card--tile:hover { - box-shadow: var(--glass-shadow); -} + +.dark .card--tile:hover { box-shadow: var(--glass-shadow); } + +/* Animation improvements */ + .card--tile { animation: card-tile-enter 0.4s ease-out; animation-fill-mode: both; } + @keyframes card-tile-enter { from { opacity: 0; @@ -5835,28 +8123,115 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { transform: translateY(0) scale(1); } } -.grid .card--tile:nth-child(1) { - animation-delay: 0s; + +/* Stagger animation for grids */ + +.grid .card--tile:nth-child(1) { animation-delay: 0s; } + +.grid .card--tile:nth-child(2) { animation-delay: 0.1s; } + +.grid .card--tile:nth-child(3) { animation-delay: 0.2s; } + +.grid .card--tile:nth-child(4) { animation-delay: 0.3s; } + +.grid .card--tile:nth-child(5) { animation-delay: 0.4s; } + +.grid .card--tile:nth-child(6) { animation-delay: 0.5s; } + +/* ========================================================================== + Article Tiles Component - Responsive Grid Layout + ========================================================================== */ + +.article-tiles { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: var(--space-4); +} + +@media (min-width: 768px) { + .article-tiles { + gap: var(--space-5); + } } -.grid .card--tile:nth-child(2) { - animation-delay: 0.1s; + +@media (min-width: 1536px) { + .article-tiles { + grid-template-columns: repeat(3, 1fr); + } } -.grid .card--tile:nth-child(3) { - animation-delay: 0.2s; + +.article-tile { + border-radius: var(--radius-lg); + padding: var(--space-4); + display: flex; + flex-direction: column; + gap: var(--space-3); + background-color: var(--color-surface); + border: 1px solid var(--color-border-primary); + transition: border-color var(--timing-fast) var(--easing-standard); } -.grid .card--tile:nth-child(4) { - animation-delay: 0.3s; + +.article-tile:hover { + border-color: var(--color-brand); } -.grid .card--tile:nth-child(5) { - animation-delay: 0.4s; + +.article-tile__link { + display: flex; + flex-direction: column; + gap: var(--space-3); + text-decoration: none; + color: inherit; } -.grid .card--tile:nth-child(6) { - animation-delay: 0.5s; + +.article-tile__header { + display: flex; + align-items: flex-start; + gap: var(--space-3); } + +.article-tile__icon { + width: 1.5rem; + height: 1.5rem; + flex-shrink: 0; + margin-top: var(--space-1); +} + +.article-tile__title-wrapper { + flex-grow: 1; +} + +.article-tile__title { + font-size: var(--font-size-xl); + font-family: var(--font-brand); + font-weight: 600; + line-height: 1.25; + color: var(--color-text-primary); + margin: 0; +} + +.article-tile__description { + font-size: var(--font-size-sm); + line-height: 1.625; + color: var(--color-text-secondary); + margin: 0; +} + +/* ========================================================================== + Related Content Component + ========================================================================== */ + +.related-content { + margin-top: var(--space-6); +} + +/* Child Links Component - Flexbox layout approach */ + .child-links-container { + /* Position directly beneath description with consistent spacing */ margin-top: 0.75rem; padding-top: 0; } + .child-links-list { display: flex; flex-wrap: wrap; @@ -5866,10 +8241,12 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { gap: 0.5rem; align-items: flex-start; } + .child-link-item { margin: 0; padding: 0; } + .child-link-pill { display: inline-block; font-size: 0.75rem; @@ -5883,6 +8260,7 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { white-space: nowrap; line-height: 1.4; } + .child-link-pill:hover { color: var(--color-brand); border-color: var(--color-brand); @@ -5890,77 +8268,94 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } + .child-link-pill:focus { outline: 2px solid var(--color-brand); outline-offset: 2px; } + +/* Simplest approach: Main link fills most space, child links follow naturally */ + .grid .tile { display: flex; flex-direction: column; position: relative; } + .grid .tile > a { + /* Main link fills available space for maximum clickability */ flex: 1; display: flex; flex-direction: column; - margin-bottom: 0.75rem; + margin-bottom: 0.75rem; /* Space for child links */ } + .grid .tile .space-y-3 { display: flex; flex-direction: column; height: 100%; } + .grid .tile .space-y-3 > p { + /* Description takes only the space it needs */ flex: 0 0 auto; } + +/* Child links sit naturally after main content area */ + .grid .tile .child-links-container { flex: 0 0 auto; margin-top: 0; padding-top: 0; } + +/* Dark mode support */ + .dark .child-link-pill { border-color: var(--color-border-secondary); background-color: var(--color-surface); } + .dark .child-link-pill:hover { background-color: var(--color-brand); color: var(--color-text-inverse); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } + +/* Responsive adjustments */ + @media (max-width: 768px) { .child-links-container { padding-top: 0.5rem; } + .child-link-pill { font-size: 0.7rem; padding: 0.2rem 0.6rem; } } + +/* Animation for child links appearance */ + .child-link-item { animation: child-link-appear 0.3s ease-out; animation-fill-mode: both; } -.child-link-item:nth-child(1) { - animation-delay: 0.1s; -} -.child-link-item:nth-child(2) { - animation-delay: 0.15s; -} -.child-link-item:nth-child(3) { - animation-delay: 0.2s; -} -.child-link-item:nth-child(4) { - animation-delay: 0.25s; -} -.child-link-item:nth-child(5) { - animation-delay: 0.3s; -} -.child-link-item:nth-child(6) { - animation-delay: 0.35s; -} -.child-link-item:nth-child(7) { - animation-delay: 0.4s; -} + +.child-link-item:nth-child(1) { animation-delay: 0.1s; } + +.child-link-item:nth-child(2) { animation-delay: 0.15s; } + +.child-link-item:nth-child(3) { animation-delay: 0.2s; } + +.child-link-item:nth-child(4) { animation-delay: 0.25s; } + +.child-link-item:nth-child(5) { animation-delay: 0.3s; } + +.child-link-item:nth-child(6) { animation-delay: 0.35s; } + +.child-link-item:nth-child(7) { animation-delay: 0.4s; } + @keyframes child-link-appear { from { opacity: 0; @@ -5971,29 +8366,90 @@ body:has(.article-header__copy-dropdown:not(.hidden)) h1[id]::before { transform: translateY(0) scale(1); } } + +/* Cards Component - Resource cards, content metadata, and generic card styles */ + +/* ========================================================================== + Link Card Pattern + ========================================================================== */ + +.link-card { + display: flex; + align-items: center; + padding: var(--space-4); + background-color: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-radius: var(--radius-lg); + text-decoration: none; + transition: border-color var(--timing-fast) var(--easing-standard); +} + +.link-card:hover { + border-color: var(--color-brand); +} + +.link-card__icon { + width: 1.25rem; + height: 1.25rem; + margin-right: var(--space-3); + color: var(--color-text-secondary); + flex-shrink: 0; +} + +.link-card__content { + flex: 1; +} + +.link-card__title { + font-weight: 600; + color: var(--color-text-primary); + margin: 0 0 var(--space-1) 0; + font-size: var(--font-size-base); +} + +.link-card__description { + font-size: var(--font-size-sm); + color: var(--color-text-secondary); + margin: 0; +} + +/* Base Card Styles */ + html:not(.no-transitions) .card { position: relative; + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); border-radius: var(--radius-card); + /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); + /* backdrop-filter: blur(10px); */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - transition: transform var(--timing-medium) var(--easing-standard), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard), box-shadow var(--timing-medium) var(--easing-standard), background-color var(--timing-medium) var(--easing-standard), color var(--timing-medium) var(--easing-standard); overflow: hidden; + /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); } + .card { position: relative; + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); border-radius: var(--radius-card); + /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); + /* backdrop-filter: blur(10px); */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); overflow: hidden; + /* box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); } + .card::before { content: ''; position: absolute; @@ -6011,9 +8467,19 @@ html:not(.no-transitions) .card { transition: opacity 0.3s ease; pointer-events: none; } + +/* Enhanced hover states - Use architectural classes instead */ + +.card { + /* Apply .interact-dramatic class to card elements in HTML instead of this CSS */ +} + .card:hover::before { opacity: 1; } + +/* Resource Card Styles */ + .card--resource { position: relative; background: var(--glass-bg); @@ -6022,9 +8488,11 @@ html:not(.no-transitions) .card { backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); overflow: hidden; box-shadow: var(--glass-shadow); + /* padding: 1.5rem; */ padding: 1rem; margin-bottom: 1rem; } + .card--resource h3 { color: var(--color-text-primary); font-weight: 600; @@ -6033,24 +8501,30 @@ html:not(.no-transitions) .card { margin-bottom: 0.75rem; transition: color 0.2s ease; } + .card--resource:hover h3 { color: var(--color-brand); } + .card--resource p { color: var(--color-text-secondary); line-height: 1.6; font-size: 0.875rem; margin-bottom: 1rem; } + .card--resource a { color: var(--color-brand); text-decoration: none; font-weight: 500; - transition: background-color var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); position: relative; } + .card--resource a::after { content: ''; position: absolute; @@ -6059,34 +8533,51 @@ html:not(.no-transitions) .card { width: 0; height: 2px; background: var(--color-brand); + /* transition: width 0.3s ease; */ transition: width var(--timing-medium) var(--easing-standard); } + .card--resource a:hover::after { width: 100%; } + .card--resource .icon { width: 1.5rem; height: 1.5rem; margin-bottom: 0.75rem; filter: brightness(0.8); - transition: background-color var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); } + .card--resource:hover .icon { filter: brightness(1); transform: scale(1.05); } + +/* Content Metadata Styles */ + .content-metadata { + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); border-radius: var(--radius-card); + /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); padding: 1rem 1.25rem; font-size: 0.875rem; color: var(--color-text-secondary); + /* backdrop-filter: blur(10px); */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + /* box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); - transition: background-color var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); display: flex; @@ -6094,24 +8585,31 @@ html:not(.no-transitions) .card { gap: 0.75rem; flex-wrap: wrap; } + .content-metadata:hover { border-color: var(--color-brand); color: var(--color-text-primary); } + .content-metadata .icon { width: 1rem; height: 1rem; - flex-shrink: 0; + shrink: 0; opacity: 0.7; transition: opacity 0.2s ease; } + .content-metadata:hover .icon { opacity: 1; } + .content-metadata time, .content-metadata span { white-space: nowrap; } + +/* Article Card Styles */ + .article-card { position: relative; background: var(--glass-bg); @@ -6126,25 +8624,31 @@ html:not(.no-transitions) .card { flex-direction: column; height: 100%; } + .article-card .card-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; } + .article-card .card-icon { width: 2rem; height: 2rem; - flex-shrink: 0; + shrink: 0; filter: brightness(0.8); - transition: background-color var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); } + .article-card:hover .card-icon { filter: brightness(1); transform: scale(1.05); } + .article-card .card-title { color: var(--color-text-primary); font-weight: 600; @@ -6153,9 +8657,11 @@ html:not(.no-transitions) .card { margin: 0; transition: color 0.2s ease; } + .article-card:hover .card-title { color: var(--color-brand); } + .article-card .card-description { color: var(--color-text-secondary); line-height: 1.6; @@ -6163,6 +8669,7 @@ html:not(.no-transitions) .card { margin-bottom: 1rem; flex: 1; } + .article-card .card-meta { color: var(--color-text-tertiary); font-size: 0.75rem; @@ -6173,15 +8680,22 @@ html:not(.no-transitions) .card { padding-top: 1rem; border-top: 1px solid var(--color-border-primary); } + +/* Interactive Card States */ + .card-interactive { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } + .card-interactive:active { transform: var(--transform-press-down); } + +/* Focus states for accessibility */ + .card:focus-within, .resource-card:focus-within, .article-card:focus-within { @@ -6189,44 +8703,59 @@ html:not(.no-transitions) .card { outline-offset: 2px; transform: var(--transform-lift-medium); } + +/* Responsive adjustments */ + @media (max-width: 768px) { .resource-card, .article-card { padding: 1rem; margin-bottom: 1rem; } + .card:hover, .resource-card:hover, .article-card:hover { transform: var(--transform-lift-medium); } + .content-metadata { flex-direction: column; align-items: flex-start; gap: 0.5rem; } } + +/* Dark mode enhancements */ + .dark .card, .dark .resource-card, .dark .content-metadata, .dark .article-card { border-color: var(--color-border-secondary); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); } + .dark .card:hover, .dark .resource-card:hover, .dark .article-card:hover { - box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), + box-shadow: + 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--color-brand-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } + +/* Animation improvements */ + .card, .resource-card, .article-card { animation: card-enter 0.4s ease-out; animation-fill-mode: both; } + @keyframes card-enter { from { opacity: 0; @@ -6237,10 +8766,14 @@ html:not(.no-transitions) .card { transform: translateY(0) scale(1); } } + +/* Card grid layouts */ + .card-grid { display: grid; gap: 1.5rem; } + .card-grid .card, .card-grid .resource-card, .card-grid .article-card { @@ -6248,72 +8781,107 @@ html:not(.no-transitions) .card { display: flex; flex-direction: column; } + +/* Stagger animation for card grids */ + .card-grid .card:nth-child(1), .card-grid .resource-card:nth-child(1), -.card-grid .article-card:nth-child(1) { - animation-delay: 0s; -} +.card-grid .article-card:nth-child(1) { animation-delay: 0s; } + .card-grid .card:nth-child(2), .card-grid .resource-card:nth-child(2), -.card-grid .article-card:nth-child(2) { - animation-delay: 0.1s; -} +.card-grid .article-card:nth-child(2) { animation-delay: 0.1s; } + .card-grid .card:nth-child(3), .card-grid .resource-card:nth-child(3), -.card-grid .article-card:nth-child(3) { - animation-delay: 0.2s; -} +.card-grid .article-card:nth-child(3) { animation-delay: 0.2s; } + .card-grid .card:nth-child(4), .card-grid .resource-card:nth-child(4), -.card-grid .article-card:nth-child(4) { - animation-delay: 0.3s; -} +.card-grid .article-card:nth-child(4) { animation-delay: 0.3s; } + +/* :has() Content-Aware Card Layouts */ + +/* Cards with images get different padding */ + .card:has(.card__image) { padding-top: 0; } + .card:has(.card__image) .card__content { padding-top: 1.5rem; } + +/* Cards with icons get enhanced layout */ + .card:has(.card__icon) .card__title { margin-left: 3rem; position: relative; } + .card:has(.card__icon) .card__content { padding-left: 1rem; } + +/* Resource cards with descriptions get enhanced spacing */ + .card--resource:has(.card__description) { min-height: 180px; } + .card--resource:has(.card__description) .card__footer { margin-top: auto; border-top: 1px solid var(--color-border-primary); padding-top: 1rem; } + +/* Cards with actions get enhanced bottom padding */ + .card:has(.card__actions) { padding-bottom: 1rem; } + .card:has(.card__actions) .card__content { padding-bottom: 2rem; } + +/* Interactive card states based on content */ + .card:has(a:hover) { transform: var(--transform-lift-and-scale); - box-shadow: var(--elevation-hover-2), + /* box-shadow: + 0 12px 30px rgba(0, 0, 0, 0.12), + 0 4px 16px rgba(0, 0, 0, 0.08); */ + box-shadow: + var(--elevation-hover-2), var(--elevation-brand-subtle); border-color: rgba(var(--color-brand-rgb), 0.3); } + +/* Glossary Component - Enhanced UX for glossary entries and navigation */ + +/* Base Glossary Entry Styles */ + .glossary-entry { position: relative; + /* background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%); */ background: var(--glass-bg); border-radius: var(--radius-xl); + /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); + /* backdrop-filter: blur(10px); */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - transition: transform var(--timing-medium) var(--easing-standard), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard), box-shadow var(--timing-medium) var(--easing-standard); overflow: hidden; + /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); margin-bottom: 1rem; } + .glossary-entry::before { content: ''; position: absolute; @@ -6331,17 +8899,28 @@ html:not(.no-transitions) .card { transition: opacity 0.3s ease; pointer-events: none; } + +/* Enhanced hover states */ + .glossary-entry:hover { border-color: var(--color-brand); + /* box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 0 20px rgba(var(--color-brand-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15); */ } + .glossary-entry:hover::before { opacity: 1; } + +/* Focus states for accessibility */ + .glossary-entry:focus-within { outline: 2px solid var(--color-brand); outline-offset: 2px; transform: translateY(-2px); } + +/* Glossary entry content */ + .glossary-entry a { display: block; color: inherit; @@ -6350,6 +8929,7 @@ html:not(.no-transitions) .card { position: relative; z-index: 2; } + .glossary-entry h2 { color: var(--color-text-primary); font-weight: 700; @@ -6359,9 +8939,11 @@ html:not(.no-transitions) .card { transition: color 0.2s ease; position: relative; } + .glossary-entry:hover h2 { color: var(--color-brand); } + .glossary-entry h2::after { content: ''; position: absolute; @@ -6376,9 +8958,13 @@ html:not(.no-transitions) .card { ); transition: width 0.3s ease; } + .glossary-entry:hover h2::after { width: 100%; } + +/* Glossary entry descriptions */ + .glossary-entry p { color: var(--color-text-secondary); line-height: 1.6; @@ -6386,9 +8972,13 @@ html:not(.no-transitions) .card { margin: 0; transition: color 0.2s ease; } + .glossary-entry:hover p { color: var(--color-text-primary); } + +/* Glossary letter headers */ + .glossary-entry + h1 { color: var(--color-text-primary); font-size: 2rem; @@ -6398,17 +8988,24 @@ html:not(.no-transitions) .card { border-bottom: 3px solid var(--color-brand); position: relative; } + .glossary-entry + h1 a { color: inherit; text-decoration: none; - transition: background-color var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); } + .glossary-entry + h1 a:hover { color: var(--color-brand); transform: translateX(4px); } + +/* First letter styling for glossary headers */ + h1[id] { color: var(--color-text-primary); font-size: 2rem; @@ -6419,18 +9016,23 @@ h1[id] { position: relative; scroll-margin-top: var(--header-offset, 64px); } + h1[id] a { color: inherit; text-decoration: none; - transition: background-color var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); display: inline-block; } + h1[id] a:hover { color: var(--color-brand); transform: translateX(4px); } + h1[id]::before { content: ''; position: absolute; @@ -6445,36 +9047,54 @@ h1[id]::before { transparent 100% ); } + +/* Glossary container */ + #enteries-container { padding: 1rem 0; } + +/* Responsive adjustments */ + @media (max-width: 768px) { .glossary-entry { margin-bottom: 1rem; padding: 1rem; } + .glossary-entry:hover { transform: translateY(-2px); } + h1[id] { font-size: 1.5rem; margin: 2rem 0 1rem 0; } } + +/* Dark mode enhancements */ + .dark .glossary-entry { border-color: var(--color-border-secondary); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); } + .dark .glossary-entry:hover { - box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), + box-shadow: + 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--color-brand-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } + +/* Animation improvements */ + .glossary-entry { animation: glossary-enter 0.4s ease-out; animation-fill-mode: both; } + @keyframes glossary-enter { from { opacity: 0; @@ -6485,22 +9105,29 @@ h1[id]::before { transform: translateY(0) scale(1); } } -.glossary-entry:nth-child(odd) { - animation-delay: 0s; -} -.glossary-entry:nth-child(even) { - animation-delay: 0.1s; -} + +/* Stagger animation for multiple entries */ + +.glossary-entry:nth-child(odd) { animation-delay: 0s; } + +.glossary-entry:nth-child(even) { animation-delay: 0.1s; } + +/* Glossary navigation enhancements */ + .glossary-nav { position: sticky; top: 2rem; + /* background: var(--color-surface); */ background: var(--glass-bg); border-radius: var(--radius-xl); padding: 1rem; + /* border: 1px solid var(--color-border-primary); */ border: 1px solid var(--glass-border-color); + /* backdrop-filter: blur(10px); */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); margin-bottom: 2rem; } + .glossary-nav a { display: inline-block; padding: 0.5rem; @@ -6508,36 +9135,54 @@ h1[id]::before { border-radius: var(--radius-lg); color: var(--color-text-secondary); text-decoration: none; - transition: background-color var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); font-weight: 500; } + .glossary-nav a:hover { background-color: var(--color-brand); color: var(--color-text-inverse); transform: translateY(-1px); } + +/* Quicklinks Component - Enhanced UX for quickstart/feature tiles */ + +/* Base Quicklinks Container */ + .quicklinks { margin-bottom: 1.5rem; position: relative; } + .quicklinks--home { padding-bottom: 1rem; } + +/* Quicklinks Grid */ + .quicklinks__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; + + /* Responsive grid */ @media (min-width: 768px) { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } + @media (min-width: 1280px) { grid-template-columns: repeat(2, 1fr); gap: 2rem; } } + +/* Quicklinks Item - Compact distinctive call-to-action card design */ + .quicklinks__item { position: relative; padding: 1.25rem; @@ -6545,6 +9190,8 @@ h1[id]::before { flex-direction: column; gap: 0.75rem; min-height: 160px; + + /* Distinctive card styling - not like regular tiles */ background: linear-gradient( 145deg, var(--color-surface) 0%, @@ -6553,14 +9200,24 @@ h1[id]::before { ); border: 2px solid var(--color-border-primary); border-radius: var(--radius-card); - box-shadow: var(--elevation-2), + /* box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.06), + 0 1px 4px rgba(0, 0, 0, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + box-shadow: + var(--elevation-2), var(--elevation-outline), inset 0 1px 0 rgba(255, 255, 255, 0.1); + + /* Accent border - distinctive feature */ border-left: 3px solid var(--color-brand); + + /* Optimized transition for performance */ transition: var(--transition-interactive); - overflow: hidden; + overflow: hidden; /* Essential for ripple effects */ cursor: pointer; } + .quicklinks__item::before { content: ''; position: absolute; @@ -6570,30 +9227,44 @@ h1[id]::before { bottom: 0; background: rgba(var(--color-brand-rgb), 0.06); opacity: 0; + /* transition: opacity 0.2s ease; */ transition: opacity var(--timing-fast) var(--easing-standard); pointer-events: none; } + .quicklinks__item:hover { transform: translateY(-3px); border-color: var(--color-brand); border-left-color: var(--color-brand-2); - box-shadow: var(--elevation-hover-2), + /* box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.12), + 0 4px 8px rgba(var(--color-brand-rgb), 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.15); */ + box-shadow: + var(--elevation-hover-2), var(--elevation-brand-subtle), inset 0 1px 0 rgba(255, 255, 255, 0.15); } + .quicklinks__item:hover::before { opacity: 1; } + +/* Quicklinks Header */ + .quicklinks__header { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.25rem; } + +/* Quicklinks Icon - Compact design */ + .quicklinks__icon { width: 1.5rem; height: 1.5rem; - flex-shrink: 0; + shrink: 0; padding: 0.25rem; background: linear-gradient( 135deg, @@ -6603,11 +9274,14 @@ h1[id]::before { border-radius: var(--radius-lg); border: 1px solid rgba(var(--color-brand-rgb), 0.2); filter: brightness(0.9); - transition: transform var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard); margin-top: 0; } + .quicklinks__item:hover .quicklinks__icon { background: linear-gradient( 135deg, @@ -6618,10 +9292,16 @@ h1[id]::before { filter: brightness(1) saturate(1.2); transform: scale(1.05); } + +/* Target the actual SVG/image inside the icon container */ + .quicklinks__item:hover .quicklinks__icon img, .quicklinks__item:hover .quicklinks__icon svg { filter: brightness(0) invert(1); } + +/* Quicklinks Title - Compact but prominent */ + .quicklinks__title { color: var(--color-text-primary); font-size: 1.125rem; @@ -6629,13 +9309,16 @@ h1[id]::before { font-family: var(--font-brand); line-height: 1.3; margin: 0; + /* transition: color 0.2s ease; */ transition: color var(--timing-fast) var(--easing-standard); position: relative; letter-spacing: -0.025em; } + .quicklinks__item:hover .quicklinks__title { color: var(--color-brand); } + .quicklinks__title::after { content: ''; position: absolute; @@ -6645,23 +9328,33 @@ h1[id]::before { height: 2px; background: var(--color-brand); border-radius: 1px; + /* transition: width 0.2s ease; */ transition: width var(--timing-fast) var(--easing-standard); } + .quicklinks__item:hover .quicklinks__title::after { width: 100%; } + +/* Quicklinks Description */ + .quicklinks__description { color: var(--color-text-secondary); font-size: 0.8125rem; line-height: 1.5; margin: 0; flex: 1; + /* transition: color 0.2s ease; */ transition: color var(--timing-fast) var(--easing-standard); font-family: var(--font-body); } + .quicklinks__item:hover .quicklinks__description { color: var(--color-text-primary); } + +/* Quicklinks Actions Container */ + .quicklinks__actions { display: flex; flex-wrap: wrap; @@ -6669,11 +9362,16 @@ h1[id]::before { margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--color-border-primary); + /* transition: border-color 0.2s ease; */ transition: border-color var(--timing-fast) var(--easing-standard); } + .quicklinks__item:hover .quicklinks__actions { border-color: var(--color-brand); } + +/* Quicklinks Action Links - Compact CTA buttons */ + .quicklinks__link { position: relative; display: inline-flex; @@ -6690,38 +9388,65 @@ h1[id]::before { font-family: var(--font-brand); text-transform: uppercase; letter-spacing: 0.25px; - transition: transform var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard); - overflow: hidden; + overflow: hidden; /* Enable ripple effects */ cursor: pointer; + /* box-shadow: 0 2px 6px rgba(var(--color-brand-rgb), 0.25); */ box-shadow: var(--elevation-brand-subtle); } + .quicklinks__link:hover { background: var(--color-brand-2); border-color: var(--color-brand-2); transform: var(--transform-lift-subtle); + /* box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.35); */ box-shadow: var(--elevation-brand-medium); } + .quicklinks__link:active { transform: translateY(0); } + +/* Enhanced focus states for accessibility */ + .quicklinks__link:focus { outline: 2px solid transparent; outline-offset: 2px; - box-shadow: var(--elevation-brand-subtle), + /* box-shadow: + 0 2px 6px rgba(var(--color-brand-rgb), 0.25), + 0 0 0 2px var(--color-surface), + 0 0 0 4px var(--color-brand); */ /* Inverted double focus ring */ + box-shadow: + var(--elevation-brand-subtle), 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-brand); } + +/* Enhanced focus for quicklinks items */ + .quicklinks__item:focus { outline: 2px solid transparent; outline-offset: 2px; - box-shadow: var(--elevation-2), + /* box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.06), + 0 1px 4px rgba(0, 0, 0, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 0.1), + 0 0 0 2px var(--color-brand), + 0 0 0 4px rgba(var(--color-brand-rgb), 0.2); */ /* Double focus ring */ + box-shadow: + var(--elevation-2), var(--elevation-outline), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.2); } + +/* External link indicator */ + .quicklinks__link[href^="http"]::after { content: '↗'; margin-left: 0.25rem; @@ -6729,37 +9454,48 @@ h1[id]::before { opacity: 0.7; transition: opacity 0.2s ease; } + .quicklinks__link[href^="http"]:hover::after { opacity: 1; } + +/* Responsive adjustments */ + @media (max-width: 768px) { .quicklinks__grid { gap: 1.25rem; } + .quicklinks__item { padding: 1rem; min-height: 140px; } + .quicklinks__item:hover { transform: var(--transform-lift-medium); } + .quicklinks__icon { width: 1.375rem; height: 1.375rem; padding: 0.25rem; } + .quicklinks__title { font-size: 1rem; font-weight: 700; } + .quicklinks__description { font-size: 0.75rem; } + .quicklinks__actions { flex-direction: column; gap: 0.375rem; padding-top: 0.375rem; } + .quicklinks__link { justify-content: center; text-align: center; @@ -6767,25 +9503,32 @@ h1[id]::before { font-size: 0.6875rem; } } + @media (max-width: 480px) { .quicklinks__item { padding: 0.875rem; min-height: 120px; gap: 0.5rem; } + .quicklinks__header { gap: 0.375rem; margin-bottom: 0.125rem; } + .quicklinks__icon { width: 1.25rem; height: 1.25rem; padding: 0.1875rem; } + .quicklinks__title { font-size: 0.9375rem; } } + +/* Dark mode enhancements */ + .dark .quicklinks__item { background: linear-gradient( 145deg, @@ -6794,17 +9537,30 @@ h1[id]::before { rgba(var(--color-bg-secondary), 0.7) 100% ); border-color: var(--color-border-secondary); - box-shadow: var(--elevation-8), + /* box-shadow: + 0 8px 24px rgba(0, 0, 0, 0.3), + 0 2px 8px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.05); */ + box-shadow: + var(--elevation-8), var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.05); } + .dark .quicklinks__item:hover { border-color: var(--color-brand); - box-shadow: var(--elevation-hover-4), + /* box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.4), + 0 8px 32px rgba(var(--color-brand-rgb), 0.3), + 0 0 40px rgba(var(--color-brand-rgb), 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.1); */ + box-shadow: + var(--elevation-hover-4), var(--elevation-brand-medium), var(--elevation-brand-glow), inset 0 1px 0 rgba(255, 255, 255, 0.1); } + .dark .quicklinks__icon { background: linear-gradient( 135deg, @@ -6813,6 +9569,7 @@ h1[id]::before { ); border-color: rgba(var(--color-brand-rgb), 0.3); } + .dark .quicklinks__item:hover .quicklinks__icon { background: linear-gradient( 135deg, @@ -6821,14 +9578,21 @@ h1[id]::before { ); border-color: var(--color-brand); } + +/* Target the actual SVG/image inside the icon container for dark mode */ + .dark .quicklinks__item:hover .quicklinks__icon img, .dark .quicklinks__item:hover .quicklinks__icon svg { filter: brightness(0) invert(1); } + +/* Animation improvements - simplified for performance */ + .quicklinks__item { animation: quicklinks-enter 0.3s ease-out; animation-fill-mode: both; } + @keyframes quicklinks-enter { from { opacity: 0; @@ -6839,18 +9603,19 @@ h1[id]::before { transform: translateY(0); } } -.quicklinks__item:nth-child(1) { - animation-delay: 0s; -} -.quicklinks__item:nth-child(2) { - animation-delay: 0.1s; -} -.quicklinks__item:nth-child(3) { - animation-delay: 0.2s; -} -.quicklinks__item:nth-child(4) { - animation-delay: 0.3s; -} + +/* Stagger animation for multiple items */ + +.quicklinks__item:nth-child(1) { animation-delay: 0s; } + +.quicklinks__item:nth-child(2) { animation-delay: 0.1s; } + +.quicklinks__item:nth-child(3) { animation-delay: 0.2s; } + +.quicklinks__item:nth-child(4) { animation-delay: 0.3s; } + +/* Loading state placeholders */ + .quicklinks--loading .quicklinks__item { background: linear-gradient(90deg, var(--color-surface) 25%, @@ -6859,14 +9624,14 @@ h1[id]::before { background-size: 200% 100%; animation: quicklinks-loading 2s infinite; } + @keyframes quicklinks-loading { - 0% { - background-position: 200% 0; - } - 100% { - background-position: -200% 0; - } + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } } + +/* Print styles */ + @media print { .quicklinks__item { -moz-column-break-inside: avoid; @@ -6874,16 +9639,25 @@ h1[id]::before { border: 1px solid #ccc; margin-bottom: 1rem; } + .quicklinks__link { color: #000 !important; text-decoration: underline; } } + +/* Next-Prev Navigation Component - Enhanced UX for page navigation */ + +/* Base Navigation Container */ + [data-component="article-next-prev"] { margin-top: 2rem; margin-bottom: 1rem; position: relative; } + +/* Next-Prev Navigation Link Base Styles - Scoped to avoid topbar conflicts */ + [data-component="article-next-prev"] .article-next-prev__link { position: relative; display: flex; @@ -6898,14 +9672,18 @@ h1[id]::before { border-radius: 0.75rem; color: var(--color-text-primary); text-decoration: none; - transition: transform var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard); overflow: hidden; min-height: 4rem; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.1); } + [data-component="article-next-prev"] .article-next-prev__link::before { content: ''; position: absolute; @@ -6918,27 +9696,40 @@ h1[id]::before { transition: opacity 0.2s ease; pointer-events: none; } + +/* Navigation Link Hover States */ + [data-component="article-next-prev"] .article-next-prev__link:hover { border-color: var(--color-brand); transform: translateY(-2px); - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(var(--color-brand-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15); } + [data-component="article-next-prev"] .article-next-prev__link:hover::before { opacity: 1; } + [data-component="article-next-prev"] .article-next-prev__link:hover div > div[class*="font-medium"], [data-component="article-next-prev"] .article-next-prev__link:hover .article-next-prev__title { color: var(--color-brand) !important; } + [data-component="article-next-prev"] .article-next-prev__link:hover svg { color: var(--color-brand); transform: translateX(2px); } + +/* Previous link - align icon to left, slide left on hover */ + [data-component="article-next-prev"] .article-next-prev__link:hover:has(svg[class*="mr-"]) svg { transform: translateX(-2px); } + +/* Navigation Link Typography */ + [data-component="article-next-prev"] .article-next-prev__link .text-xs { color: var(--color-text-tertiary); font-size: 0.75rem; @@ -6948,6 +9739,9 @@ h1[id]::before { margin-bottom: 0.25rem; transition: color 0.2s ease; } + +/* Target the title content specifically, avoiding Tailwind utility classes */ + [data-component="article-next-prev"] .article-next-prev__link div > div[class*="font-medium"], [data-component="article-next-prev"] .article-next-prev__title { color: var(--color-text-primary) !important; @@ -6957,16 +9751,25 @@ h1[id]::before { transition: color 0.2s ease !important; font-family: var(--font-brand) !important; } + [data-component="article-next-prev"] .article-next-prev__link:hover .text-xs { color: var(--color-text-secondary); } + +/* SVG Icons */ + [data-component="article-next-prev"] .article-next-prev__link svg { color: var(--color-text-secondary); - transition: transform var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard); - flex-shrink: 0; + shrink: 0; } + +/* Disabled Navigation Links */ + [data-component="article-next-prev"] .article-next-prev__link--disabled { background: linear-gradient( 135deg, @@ -6979,87 +9782,119 @@ h1[id]::before { pointer-events: none; opacity: 0.6; } + [data-component="article-next-prev"] .article-next-prev__link--disabled svg { color: var(--color-text-tertiary); opacity: 0.5; } + [data-component="article-next-prev"] .article-next-prev__link--disabled .text-xs, [data-component="article-next-prev"] .article-next-prev__link--disabled div > div[class*="font-medium"] { color: var(--color-text-tertiary) !important; } + +/* Focus States for Accessibility */ + [data-component="article-next-prev"] .article-next-prev__link:focus { outline: 2px solid var(--color-brand); outline-offset: 2px; } + [data-component="article-next-prev"] .article-next-prev__link:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } + +/* Enhanced Visual Hierarchy */ + [data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"] { border-left: 3px solid transparent; - transition: transform var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard), border-left-color var(--timing-fast) var(--easing-standard); } + [data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"] { border-right: 3px solid transparent; - transition: transform var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-fast) var(--easing-standard), background-color var(--timing-fast) var(--easing-standard), border-right-color var(--timing-fast) var(--easing-standard); } + [data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"]:hover { border-left-color: var(--color-brand); } + [data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"]:hover { border-right-color: var(--color-brand); } + +/* Responsive Adjustments */ + @media (max-width: 768px) { [data-component="article-next-prev"] { margin-top: 1.5rem; } + [data-component="article-next-prev"] .article-next-prev__link { padding: 1rem; min-height: 3.5rem; } + [data-component="article-next-prev"] .article-next-prev__link div > div[class*="font-medium"], [data-component="article-next-prev"] .article-next-prev__title { font-size: 0.875rem !important; } + [data-component="article-next-prev"] .article-next-prev__link .text-xs { font-size: 0.6875rem; } + [data-component="article-next-prev"] .article-next-prev__link svg { width: 1rem; height: 1rem; } } + @media (max-width: 480px) { [data-component="article-next-prev"] { flex-direction: column; gap: 0.75rem; } + [data-component="article-next-prev"] .article-next-prev__link { padding: 0.875rem; min-height: 3rem; flex: none; } + [data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"] { border-left: none; border-top: 3px solid transparent; } + [data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"] { border-right: none; border-bottom: 3px solid transparent; } + [data-component="article-next-prev"] .nav-link[aria-label*="Previous"]:hover { border-left-color: transparent; border-top-color: var(--color-brand); } + [data-component="article-next-prev"] .nav-link[aria-label*="Next"]:hover { border-right-color: transparent; border-bottom-color: var(--color-brand); } } + +/* Dark Mode Enhancements */ + .dark [data-component="article-next-prev"] .article-next-prev__link { background: linear-gradient( 135deg, @@ -7067,14 +9902,18 @@ h1[id]::before { rgba(var(--color-bg-secondary), 0.6) 100% ); border-color: var(--color-border-secondary); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); } + .dark [data-component="article-next-prev"] .article-next-prev__link:hover { - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(var(--color-brand-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } + .dark [data-component="article-next-prev"] .article-next-prev__link--disabled { background: linear-gradient( 135deg, @@ -7083,10 +9922,14 @@ h1[id]::before { ); border-color: rgba(var(--color-border-secondary), 0.5); } + +/* Animation Enhancements */ + [data-component="article-next-prev"] .article-next-prev__link { animation: nav-link-enter 0.3s ease-out; animation-fill-mode: both; } + @keyframes nav-link-enter { from { opacity: 0; @@ -7097,12 +9940,15 @@ h1[id]::before { transform: translateY(0); } } -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"] { - animation-delay: 0s; -} -[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"] { - animation-delay: 0.1s; -} + +/* Stagger animation for prev/next pair */ + +[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Previous"] { animation-delay: 0s; } + +[data-component="article-next-prev"] .article-next-prev__link[aria-label*="Next"] { animation-delay: 0.1s; } + +/* Loading state placeholders */ + [data-component="article-next-prev"] .article-next-prev__link--loading { background: linear-gradient(90deg, var(--color-surface) 25%, @@ -7111,24 +9957,144 @@ h1[id]::before { background-size: 200% 100%; animation: nav-link-loading 2s infinite; } + @keyframes nav-link-loading { - 0% { - background-position: 200% 0; - } - 100% { - background-position: -200% 0; - } + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } } + +/* Print styles */ + @media print { [data-component="article-next-prev"] .article-next-prev__link { border: 1px solid #ccc; box-shadow: none; background: white; } + [data-component="article-next-prev"] .nav-link svg { display: none; } } + +/* Tutorial Component - Enhanced tutorial system with modern UX patterns */ + +/* ========================================================================== + Modern Tutorial Typography & Layout + ========================================================================== */ + +.tutorial-step__title { + font-size: var(--font-size-3xl); + font-weight: 700; + color: var(--color-text-primary); + margin-bottom: var(--space-4); + line-height: 1.1; +} + +.tutorial-section__title { + font-size: var(--font-size-4xl); + font-weight: 900; + color: var(--color-text-primary); + margin-bottom: var(--space-6); + line-height: 1; +} + +/* Responsive scaling for tutorial section titles */ + +@media (min-width: 1024px) { + .tutorial-section__title { + font-size: var(--font-size-5xl); + } +} + +.tutorial-step-wrapper { + margin-bottom: var(--space-8); +} + +.tutorial-links-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-4); +} + +.tutorial-step__header { + margin-bottom: var(--space-6); +} + +.tutorial-accent-bar { + width: 0.25rem; + height: 4rem; + border-radius: 9999px; + flex-shrink: 0; + background-color: var(--color-brand); + opacity: 0.3; +} + +.tutorial-description__content { + flex: 1; +} + +.tutorial-description__text { + font-size: var(--font-size-xl); + font-weight: 300; + line-height: 1.625; + color: var(--color-text-secondary); +} + +.tutorial-section__chevron { + width: 1.25rem; + height: 1.25rem; +} + +.tutorial-requirements-list { + list-style-type: disc; + list-style-position: inside; + display: flex; + flex-direction: column; + gap: var(--space-2); +} + +.tutorial-requirement { + color: var(--color-text-primary); +} + +@media (min-width: 768px) { + .tutorial-links-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.release-notes__title { + font-size: var(--font-size-3xl); + font-weight: 700; + color: var(--color-text-primary); + margin-bottom: var(--space-6); + line-height: 1.1; +} + +.release-notes-section { + max-width: 112rem; /* max-w-7xl */ + margin: 0 auto; + padding: var(--space-6); +} + +.release-notes__content { + margin-top: var(--space-4); + padding-left: var(--space-4); + color: var(--color-text-secondary); +} + +.release-notes__secondary { + display: flex; + flex-direction: row; + gap: var(--space-2); + margin-top: var(--space-4); +} + +/* ========================================================================== + Tutorial Overview Components + ========================================================================== */ + .tutorial-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); @@ -7136,6 +10102,7 @@ h1[id]::before { margin: 2rem 0; padding: 0 1rem; } + .tutorial-card { position: relative; background: linear-gradient( @@ -7146,13 +10113,17 @@ h1[id]::before { border-radius: 1rem; border: 1px solid var(--color-border-primary); padding: 2rem; - transition: transform var(--timing-medium) var(--easing-standard), + /* ✅ FIXED: Specific properties instead of transition: all */ + transition: + transform var(--timing-medium) var(--easing-standard), border-color var(--timing-medium) var(--easing-standard), box-shadow var(--timing-medium) var(--easing-standard); overflow: hidden; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); } + .tutorial-card::before { content: ''; position: absolute; @@ -7170,16 +10141,20 @@ h1[id]::before { transition: opacity 0.3s ease; pointer-events: none; } + .tutorial-card:hover { transform: translateY(-8px); border-color: var(--color-brand); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 20px rgba(var(--color-brand-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15); } + .tutorial-card:hover::before { opacity: 1; } + .tutorial-card__header { display: flex; justify-content: space-between; @@ -7188,11 +10163,13 @@ h1[id]::before { flex-wrap: wrap; gap: 0.5rem; } + .tutorial-card__badges { display: flex; gap: 0.5rem; flex-wrap: wrap; } + .tutorial-card__title { color: var(--color-text-primary); font-size: 1.5rem; @@ -7201,20 +10178,26 @@ h1[id]::before { margin: 1rem 0 0.75rem 0; transition: color 0.2s ease; } + .tutorial-card:hover .tutorial-card__title { color: var(--color-brand); } + .tutorial-card__description { color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 1.5rem; font-size: 0.95rem; } + .tutorial-card__metadata { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--color-border-primary); } + +/* Tutorial Badges */ + .tutorial-badge { display: inline-flex; align-items: center; @@ -7224,30 +10207,39 @@ h1[id]::before { font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; - transition: background-color var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); } + .tutorial-badge--difficulty { background: linear-gradient(135deg, var(--color-brand-3) 0%, var(--color-brand-2) 100%); color: var(--color-text-inverse); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } + .tutorial-badge--time { background-color: var(--color-bg-tertiary); color: var(--color-text-secondary); border: 1px solid var(--color-border-secondary); } + .tutorial-badge--prerequisites { background: linear-gradient(135deg, var(--color-brand-5) 0%, var(--color-brand-6) 100%); color: var(--color-text-primary); } + +/* Tutorial Progress Mini Display */ + .tutorial-progress-mini { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } + .progress-bar-mini { flex: 1; height: 6px; @@ -7256,6 +10248,7 @@ h1[id]::before { overflow: hidden; position: relative; } + .progress-bar-mini__fill { height: 100%; background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand-2) 100%); @@ -7263,6 +10256,7 @@ h1[id]::before { transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } + .progress-bar-mini__fill::after { content: ''; position: absolute; @@ -7273,25 +10267,22 @@ h1[id]::before { background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 100%); animation: progress-shine 2s infinite; } + @keyframes progress-shine { - 0% { - transform: translateX(-20px); - opacity: 0; - } - 50% { - opacity: 1; - } - 100% { - transform: translateX(20px); - opacity: 0; - } + 0% { transform: translateX(-20px); opacity: 0; } + 50% { opacity: 1; } + 100% { transform: translateX(20px); opacity: 0; } } + .progress-text { font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); white-space: nowrap; } + +/* Tutorial Actions */ + .tutorial-actions { display: flex; justify-content: space-between; @@ -7299,25 +10290,35 @@ h1[id]::before { gap: 1rem; flex-wrap: wrap; } + .tutorial-actions__primary { display: flex; gap: 0.75rem; } + .tutorial-actions__secondary { display: flex; gap: 0.5rem; } + .bookmark-tutorial { position: relative; transition: transform var(--timing-fast) var(--easing-standard); } + .bookmark-tutorial:hover { transform: scale(1.1); } + .bookmark-tutorial.bookmarked .bookmark-icon { fill: var(--color-brand); transform: scale(1.1); } + +/* ========================================================================== + Compact Progress Components (Primary) + ========================================================================== */ + .tutorial-progress-compact { background: var(--color-surface); border-radius: 0.75rem; @@ -7326,6 +10327,7 @@ h1[id]::before { margin: 1rem 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } + .tutorial-compact-header { display: flex; justify-content: space-between; @@ -7333,10 +10335,12 @@ h1[id]::before { margin-bottom: 0.75rem; gap: 1rem; } + .tutorial-compact-info { flex: 1; min-width: 0; } + .tutorial-compact-breadcrumb { display: flex; align-items: center; @@ -7344,6 +10348,7 @@ h1[id]::before { margin-bottom: 0.375rem; font-size: 0.875rem; } + .tutorial-parent-link { color: var(--color-text-secondary); text-decoration: none; @@ -7351,15 +10356,18 @@ h1[id]::before { transition: color 0.2s ease; white-space: nowrap; } + .tutorial-parent-link:hover { color: var(--color-brand); } + .breadcrumb-separator { color: var(--color-text-tertiary); - flex-shrink: 0; + shrink: 0; width: 1rem; height: 1rem; } + .current-step-title { color: var(--color-text-primary); font-weight: 600; @@ -7367,6 +10375,7 @@ h1[id]::before { line-height: 1.3; margin: 0; } + .tutorial-compact-meta { display: flex; align-items: center; @@ -7374,16 +10383,19 @@ h1[id]::before { flex-wrap: wrap; font-size: 0.875rem; } + .step-counter { color: var(--color-text-secondary); font-weight: 500; white-space: nowrap; } + .progress-percentage { color: var(--color-brand); font-weight: 700; white-space: nowrap; } + .time-estimate { color: var(--color-text-secondary); background: var(--color-bg-tertiary); @@ -7392,11 +10404,13 @@ h1[id]::before { white-space: nowrap; font-size: 0.8125rem; } + .tutorial-compact-actions { display: flex; gap: 0.375rem; - flex-shrink: 0; + shrink: 0; } + .btn-compact { display: flex; align-items: center; @@ -7407,25 +10421,33 @@ h1[id]::before { border: 1px solid var(--color-border-primary); background: var(--color-surface); color: var(--color-text-secondary); - transition: background-color var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard); cursor: pointer; - flex-shrink: 0; + shrink: 0; } + .btn-compact:hover { background: var(--color-surface-hover); border-color: var(--color-brand); color: var(--color-text-primary); } + .btn-compact svg { width: 0.875rem; height: 0.875rem; } + +/* Compact Progress Bar */ + .tutorial-progress-bar { position: relative; margin-bottom: 0.75rem; } + .progress-track { height: 3px; background: var(--color-border-secondary); @@ -7434,6 +10456,7 @@ h1[id]::before { margin-bottom: 0.625rem; position: relative; } + .progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand-2) 100%); @@ -7441,6 +10464,7 @@ h1[id]::before { transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } + .progress-fill::after { content: ''; position: absolute; @@ -7451,12 +10475,14 @@ h1[id]::before { background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 100%); animation: progress-shine 2s infinite; } + .step-dots { display: flex; justify-content: space-between; align-items: center; position: relative; } + .step-dot { display: flex; align-items: center; @@ -7467,7 +10493,9 @@ h1[id]::before { font-size: 0.6875rem; font-weight: 600; text-decoration: none; - transition: background-color var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), box-shadow var(--timing-fast) var(--easing-standard), @@ -7475,50 +10503,62 @@ h1[id]::before { position: relative; z-index: 2; } + .step-dot.completed { background: var(--color-brand); color: var(--color-text-inverse); box-shadow: 0 2px 4px rgba(var(--color-brand-rgb), 0.2); } + .step-dot.current { background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 100%); color: var(--color-text-inverse); box-shadow: 0 2px 6px rgba(var(--color-brand-rgb), 0.3); animation: pulse-gentle 2s infinite; } + .step-dot.pending { background: var(--color-bg-tertiary); color: var(--color-text-secondary); border: 1px solid var(--color-border-secondary); } + .step-dot.pending:hover:not(.disabled) { background: var(--color-surface-hover); border-color: var(--color-brand); transform: scale(1.1); } + .step-dot.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } + .step-number { font-size: 0.6875rem; font-weight: 700; line-height: 1; } + .step-dot svg { width: 0.75rem; height: 0.75rem; } + +/* Expandable Progress Section */ + .tutorial-progress-expanded { border-top: 1px solid var(--color-border-primary); padding-top: 1rem; margin-top: 1rem; } + .tutorial-steps-list { display: grid; gap: 0.75rem; } + .tutorial-step-item { display: flex; align-items: center; @@ -7527,12 +10567,15 @@ h1[id]::before { border-radius: 0.5rem; transition: background-color 0.2s ease; } + .tutorial-step-item:hover { background: var(--color-surface-hover); } + .tutorial-step-item.current { background: var(--color-hover); } + .step-indicator-small { display: flex; align-items: center; @@ -7540,8 +10583,9 @@ h1[id]::before { width: 1.5rem; height: 1.5rem; border-radius: 50%; - flex-shrink: 0; + shrink: 0; } + .step-indicator-small .current-indicator, .step-indicator-small .pending-indicator { width: 100%; @@ -7553,14 +10597,17 @@ h1[id]::before { font-weight: 700; border-radius: 50%; } + .step-indicator-small .current-indicator { background: var(--color-brand); color: var(--color-text-inverse); } + .step-indicator-small .pending-indicator { background: var(--color-bg-tertiary); color: var(--color-text-secondary); } + .step-info-small { flex: 1; display: flex; @@ -7568,6 +10615,7 @@ h1[id]::before { align-items: center; gap: 1rem; } + .step-link { color: var(--color-text-primary); text-decoration: none; @@ -7575,14 +10623,17 @@ h1[id]::before { font-weight: 500; transition: color 0.2s ease; } + .step-link:hover { color: var(--color-brand); } + .step-title-disabled { color: var(--color-text-tertiary); font-size: 0.875rem; font-weight: 500; } + .step-time-small { color: var(--color-text-tertiary); font-size: 0.75rem; @@ -7590,6 +10641,9 @@ h1[id]::before { padding: 0.125rem 0.375rem; border-radius: 0.25rem; } + +/* Compact Navigation */ + .tutorial-compact-nav { display: flex; justify-content: space-between; @@ -7599,6 +10653,13 @@ h1[id]::before { padding-top: 0.75rem; margin-top: 0.75rem; } + +/* ========================================================================== + Enhanced Progress Navigation (Legacy) + ========================================================================== */ + +/* Legacy Progress Components (for backward compatibility) */ + .tutorial-progress { background: var(--color-surface); border-radius: 1rem; @@ -7607,6 +10668,7 @@ h1[id]::before { margin: 2rem 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } + .tutorial-progress__header { display: flex; justify-content: space-between; @@ -7615,6 +10677,7 @@ h1[id]::before { flex-wrap: wrap; gap: 1rem; } + .tutorial-title { color: var(--color-text-primary); font-size: 1.75rem; @@ -7622,12 +10685,14 @@ h1[id]::before { margin: 0; line-height: 1.2; } + .tutorial-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } + .time-remaining { font-size: 0.875rem; color: var(--color-text-secondary); @@ -7636,10 +10701,14 @@ h1[id]::before { border-radius: 0.5rem; border: 1px solid var(--color-border-primary); } + +/* Progress Track */ + .tutorial-progress__track { position: relative; margin: 3rem 0; } + .progress-line { position: absolute; top: 3rem; @@ -7650,6 +10719,7 @@ h1[id]::before { border-radius: 2px; z-index: 1; } + .progress-line::after { content: ''; position: absolute; @@ -7662,6 +10732,7 @@ h1[id]::before { transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 10px rgba(var(--color-brand-rgb), 0.3); } + .tutorial-steps { display: flex; justify-content: space-between; @@ -7670,6 +10741,7 @@ h1[id]::before { z-index: 2; gap: 1rem; } + .tutorial-step { display: flex; flex-direction: column; @@ -7680,16 +10752,22 @@ h1[id]::before { cursor: pointer; transition: all 0.3s ease; } + .tutorial-step:hover { transform: translateY(-2px); } + .tutorial-step.disabled { cursor: not-allowed; opacity: 0.6; } + .tutorial-step.disabled:hover { transform: none; } + +/* Step Indicators */ + .step-indicator { width: 4rem; height: 4rem; @@ -7704,11 +10782,15 @@ h1[id]::before { font-size: 1.1rem; border: 3px solid transparent; } + .step-icon--complete { background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 100%); color: var(--color-text-inverse); box-shadow: 0 4px 15px rgba(var(--color-brand-rgb), 0.3); } + +/* Checkmark handled by SVG, no need for ::before content */ + .step-icon--current { background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-2) 100%); color: var(--color-text-inverse); @@ -7716,31 +10798,38 @@ h1[id]::before { box-shadow: 0 4px 20px rgba(var(--color-brand-rgb), 0.4); border-color: var(--color-brand); } + .step-icon--pending { background-color: var(--color-bg-tertiary); color: var(--color-text-secondary); border-color: var(--color-border-secondary); } + .step-icon--pending:hover { background-color: var(--color-surface-hover); border-color: var(--color-brand); } + @keyframes pulse-gentle { - 0%, 100% { - transform: scale(1); - box-shadow: 0 4px 20px rgba(var(--color-brand-rgb), 0.4), 0 0 0 0 rgba(var(--color-brand-rgb), 0.4); + 0%, 100% { + transform: scale(1); + box-shadow: 0 4px 20px rgba(var(--color-brand-rgb), 0.4), 0 0 0 0 rgba(var(--color-brand-rgb), 0.4); } - 50% { - transform: scale(1.05); - box-shadow: 0 6px 25px rgba(var(--color-brand-rgb), 0.6), 0 0 0 15px rgba(var(--color-brand-rgb), 0); + 50% { + transform: scale(1.05); + box-shadow: 0 6px 25px rgba(var(--color-brand-rgb), 0.6), 0 0 0 15px rgba(var(--color-brand-rgb), 0); } } + +/* Step Content */ + .step-content { min-height: 80px; display: flex; flex-direction: column; justify-content: flex-start; } + .step-title { color: var(--color-text-primary); font-size: 1rem; @@ -7748,12 +10837,14 @@ h1[id]::before { margin: 0 0 0.5rem 0; line-height: 1.3; } + .step-description { color: var(--color-text-secondary); font-size: 0.875rem; line-height: 1.4; margin: 0 0 0.5rem 0; } + .step-time { color: var(--color-text-tertiary); font-size: 0.75rem; @@ -7763,6 +10854,9 @@ h1[id]::before { border-radius: 0.375rem; display: inline-block; } + +/* Progress Actions */ + .tutorial-progress__actions { display: flex; justify-content: space-between; @@ -7772,6 +10866,13 @@ h1[id]::before { border-top: 1px solid var(--color-border-primary); gap: 1rem; } + +/* ========================================================================== + Interactive Content Components + ========================================================================== */ + +/* Enhanced Code Blocks - Now used by render-codeblock.html */ + .code-block-enhanced { background: var(--color-bg-tertiary); border-radius: 0.75rem; @@ -7780,24 +10881,31 @@ h1[id]::before { margin: 1rem 0; box-shadow: var(--glass-shadow); } + .code-content { background: var(--color-bg-tertiary); } + .code-content pre { margin: 0; background: transparent; } + .code-content code { background: transparent; padding: 0.75rem; display: block; overflow-x: auto; } + +/* Reduce default code font size; allow override via --code-font-size */ + .code-content pre, .code-content code { font-size: var(--code-font-size, 0.875rem); line-height: 1.55; } + .code-header { display: flex; justify-content: space-between; @@ -7806,6 +10914,7 @@ h1[id]::before { background: var(--color-surface); border-bottom: 1px solid var(--color-border-primary); } + .code-language { font-size: 0.75rem; font-weight: 600; @@ -7816,22 +10925,30 @@ h1[id]::before { padding: 0.125rem 0.375rem; border-radius: 0.25rem; } + .code-actions { display: flex; gap: 0.375rem; } + .copy-code { position: relative; - transition: background-color var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), border-color var(--timing-fast) var(--easing-standard), color var(--timing-fast) var(--easing-standard), transform var(--timing-fast) var(--easing-standard); } + .copy-code.copied { background-color: var(--color-brand); border-color: var(--color-brand); color: var(--color-text-inverse); } + +/* Collapsible Sections */ + .tutorial-section { border: 1px solid var(--color-border-primary); border-radius: 0.75rem; @@ -7839,6 +10956,7 @@ h1[id]::before { overflow: hidden; background: var(--color-surface); } + .section-header { width: 100%; display: flex; @@ -7848,15 +10966,20 @@ h1[id]::before { background: none; border: none; cursor: pointer; - transition: background-color var(--timing-fast) var(--easing-standard); + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard); text-align: left; } + .section-header:hover { background-color: var(--color-surface-hover); } + .section-header[aria-expanded="true"] { border-bottom: 1px solid var(--color-border-primary); } + .section-title { color: var(--color-text-primary); font-size: 1.125rem; @@ -7864,32 +10987,42 @@ h1[id]::before { margin: 0; line-height: 1.3; } + .section-chevron { width: 1.25rem; height: 1.25rem; color: var(--color-text-secondary); transition: transform 0.3s ease; } + .section-header[aria-expanded="true"] .section-chevron { transform: rotate(180deg); } + .section-content { padding: 0 1.5rem; max-height: 0; opacity: 0; overflow: hidden; - transition: max-height var(--timing-medium) var(--easing-standard), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + max-height var(--timing-medium) var(--easing-standard), opacity var(--timing-medium) var(--easing-standard), padding var(--timing-medium) var(--easing-standard); + /* Tutorial-specific customization */ --collapse-height-expanded: 2500px; --collapse-timing: var(--timing-slow); --collapse-easing: var(--easing-emphasized); } + .section-content.expanded { max-height: var(--collapse-height-expanded, 2500px); opacity: 1; padding: 1.5rem; } + +/* Step Validation */ + .step-validation { background: var(--color-surface); border: 1px solid var(--color-border-primary); @@ -7898,141 +11031,180 @@ h1[id]::before { margin: 2rem 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } + .validation-checklist h4 { color: var(--color-text-primary); font-size: 1.125rem; font-weight: 600; margin: 0 0 1rem 0; } + .validation-item { display: flex; align-items: center; padding: 0.75rem 0; cursor: pointer; - transition: background-color var(--timing-fast) var(--easing-standard), + /* ✅ FIXED: Specific properties for better performance */ + transition: + background-color var(--timing-fast) var(--easing-standard), padding var(--timing-fast) var(--easing-standard); border-radius: 0.5rem; margin-bottom: 0.5rem; } + .validation-item:hover { background-color: var(--color-surface-hover); padding-left: 0.5rem; padding-right: 0.5rem; } + .validation-checkbox { margin-right: 1rem; width: 1.25rem; height: 1.25rem; accent-color: var(--color-brand); } + .validation-text { color: var(--color-text-primary); font-weight: 500; line-height: 1.5; } + .validate-step { margin-top: 1.5rem; width: 100%; transition: all 0.3s ease; } + .validate-step:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } + +/* ========================================================================== + Responsive Design + ========================================================================== */ + @media (max-width: 1024px) { .tutorial-overview { grid-template-columns: 1fr; gap: 1.5rem; padding: 0 0.5rem; } + .tutorial-card { padding: 1.5rem; } + .tutorial-progress { padding: 1.5rem; } + .tutorial-steps { gap: 0.75rem; } + .tutorial-step { max-width: 150px; } + .step-indicator { width: 3rem; height: 3rem; font-size: 1rem; } } + @media (max-width: 768px) { .tutorial-overview { padding: 0; } + .tutorial-card { border-radius: 0.75rem; margin: 0 0.5rem; } + .tutorial-card__header { flex-direction: column; align-items: flex-start; gap: 0.75rem; } + + /* Compact Progress Mobile */ .tutorial-progress-compact { margin: 0.75rem 0.5rem; padding: 0.75rem; border-radius: 0.5rem; } + .tutorial-compact-header { flex-direction: column; align-items: stretch; gap: 0.75rem; } + .tutorial-compact-meta { justify-content: space-between; } + .tutorial-compact-actions { align-self: flex-end; } + .tutorial-compact-nav { flex-direction: column; gap: 0.75rem; } + .tutorial-compact-nav .btn { width: 100%; justify-content: center; } + .step-dots { gap: 0.5rem; overflow-x: auto; padding: 0.25rem 0; } + .step-dot { width: 1.5rem; height: 1.5rem; - flex-shrink: 0; + shrink: 0; } + + /* Legacy tutorial progress mobile */ .tutorial-progress { margin: 1rem 0.5rem; padding: 1rem; border-radius: 0.75rem; } + .tutorial-progress__header { flex-direction: column; align-items: flex-start; gap: 1rem; } + .tutorial-title { font-size: 1.5rem; } + .tutorial-meta { width: 100%; justify-content: space-between; } + + /* Mobile Step Layout */ .tutorial-steps { flex-direction: column; gap: 1.5rem; align-items: stretch; } + .tutorial-step { flex-direction: row; max-width: none; @@ -8043,111 +11215,153 @@ h1[id]::before { border-radius: 0.75rem; border: 1px solid var(--color-border-primary); } + .step-indicator { margin-bottom: 0; margin-right: 1rem; - flex-shrink: 0; + shrink: 0; width: 3rem; height: 3rem; } + .step-content { min-height: auto; flex: 1; } + .progress-line { - display: none; + display: none; /* Hide connecting line on mobile */ } + .tutorial-progress__actions { flex-direction: column; gap: 1rem; } + .tutorial-progress__actions .btn { width: 100%; justify-content: center; } + + /* Mobile Code Blocks */ .code-header { padding: 0.75rem 1rem; flex-direction: column; align-items: flex-start; gap: 0.75rem; } + .code-actions { width: 100%; justify-content: flex-end; } + + /* Mobile Sections */ .section-header { padding: 1rem 1.25rem; } + .section-content.expanded { padding: 1rem 1.25rem 1.5rem; } + + /* Mobile Validation */ .step-validation { margin: 1.5rem 0.5rem; padding: 1.25rem; } } + @media (max-width: 480px) { .tutorial-card { margin: 0 0.25rem; padding: 1.25rem; } + .tutorial-progress { margin: 1rem 0.25rem; padding: 0.75rem; } + .tutorial-title { font-size: 1.25rem; } + .tutorial-step { padding: 0.75rem; } + .step-indicator { width: 2.5rem; height: 2.5rem; font-size: 0.9rem; } + .step-title { font-size: 0.9rem; } + .step-description { font-size: 0.8rem; } } + +/* ========================================================================== + Dark Mode Adjustments + ========================================================================== */ + .dark .tutorial-card { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); } + .dark .tutorial-card:hover { - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--color-brand-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } + .dark .tutorial-progress { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } + .dark .code-block-enhanced { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } + .dark .tutorial-section { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } + .dark .step-validation { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } + +/* ========================================================================== + Accessibility Enhancements + ========================================================================== */ + .tutorial-step:focus-within { outline: 2px solid var(--color-brand); outline-offset: 2px; border-radius: 0.5rem; } + .section-header:focus { outline: 2px solid var(--color-brand); outline-offset: 2px; } + .validation-item:focus-within { outline: 2px solid var(--color-brand); outline-offset: 2px; border-radius: 0.5rem; } + +/* Reduced motion preferences */ + @media (prefers-reduced-motion: reduce) { .tutorial-card, .tutorial-step, @@ -8156,29 +11370,50 @@ h1[id]::before { .progress-line::after { transition: none; } + .step-icon--current { animation: none; } + .progress-bar-mini__fill::after { animation: none; } } + +/* High contrast mode support */ + @media (prefers-contrast: high) { .tutorial-card { border-width: 2px; } + .tutorial-badge { border: 1px solid currentColor; } + .step-indicator { border-width: 2px; } } + +/* Toast Notification Component - Dedicated CSS */ + +/* Enhanced Toast Styles */ + .toast-notification { + /* Enhanced backdrop blur for modern glass effect */ + /* backdrop-filter: blur(20px) saturate(180%); */ backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + + /* Smooth shadow that matches notice components */ + /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.1); */ box-shadow: var(--glass-shadow); + + /* Ensure proper font rendering */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + + /* Base positioning and sizing */ position: fixed; top: 1.5rem; right: 1.5rem; @@ -8186,24 +11421,31 @@ h1[id]::before { max-width: 20rem; width: 100%; transform: translateX(100%); - transition: transform var(--timing-slow) var(--easing-emphasized), + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-slow) var(--easing-emphasized), opacity var(--timing-slow) var(--easing-emphasized); border-radius: 0.75rem; overflow: hidden; border: 1px solid; } + +/* Toast content */ + .toast-notification__content { display: flex; align-items: flex-start; padding: 1rem; gap: 0.75rem; } + .toast-notification__icon { - flex-shrink: 0; + shrink: 0; margin-top: 0.125rem; width: 1.25rem; height: 1.25rem; } + .toast-notification__message { flex: 1; min-width: 0; @@ -8212,8 +11454,9 @@ h1[id]::before { font-weight: 500; font-family: "NVIDIA", Arial, Helvetica, sans-serif; } + .toast-notification__close { - flex-shrink: 0; + shrink: 0; margin-left: 1rem; color: rgba(156, 163, 175, 1); transition: color 0.2s ease; @@ -8224,12 +11467,23 @@ h1[id]::before { width: 1rem; height: 1rem; } + .toast-notification__close:hover { color: rgba(107, 114, 128, 1); } + +/* Dark mode close button */ + .dark .toast-notification__close:hover { color: rgba(209, 213, 219, 1); } + +/* Type-specific styling */ + +/* Old hex-based colors commented in favor of tokens */ + +/* .toast-notification--success { ... } */ + .toast-notification--success { background: linear-gradient( 135deg, @@ -8239,12 +11493,13 @@ h1[id]::before { border-color: rgba(var(--color-success-rgb), 0.2); color: rgb(20, 83, 45); } -.toast-notification--success .toast-notification__icon { - color: var(--color-success); -} + +.toast-notification--success .toast-notification__icon { color: var(--color-success); } + .dark .toast-notification--success { color: rgb(187, 247, 208); } + .toast-notification--error { background: linear-gradient( 135deg, @@ -8254,12 +11509,13 @@ h1[id]::before { border-color: rgba(var(--color-danger-rgb), 0.2); color: rgb(127, 29, 29); } -.toast-notification--error .toast-notification__icon { - color: var(--color-danger); -} + +.toast-notification--error .toast-notification__icon { color: var(--color-danger); } + .dark .toast-notification--error { color: rgb(254, 202, 202); } + .toast-notification--warning { background: linear-gradient( 135deg, @@ -8269,12 +11525,13 @@ h1[id]::before { border-color: rgba(var(--color-warning-rgb), 0.2); color: rgb(120, 53, 15); } -.toast-notification--warning .toast-notification__icon { - color: var(--color-warning); -} + +.toast-notification--warning .toast-notification__icon { color: var(--color-warning); } + .dark .toast-notification--warning { color: rgb(254, 215, 170); } + .toast-notification--info { background: linear-gradient( 135deg, @@ -8284,20 +11541,27 @@ h1[id]::before { border-color: rgba(var(--color-info-rgb), 0.2); color: rgb(30, 58, 138); } -.toast-notification--info .toast-notification__icon { - color: var(--color-info); -} + +.toast-notification--info .toast-notification__icon { color: var(--color-info); } + .dark .toast-notification--info { color: rgb(191, 219, 254); } + +/* Animation states */ + .toast-notification--visible { transform: translateX(0); } + .toast-notification--hiding { transform: translateX(100%); opacity: 0; scale: 0.95; } + +/* Enhanced animations */ + @keyframes toast-slide-in { 0% { transform: translateX(100%) scale(0.95); @@ -8308,14 +11572,22 @@ h1[id]::before { opacity: 1; } } + .toast-notification--entering { animation: toast-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); } + +/* Dark mode enhancements */ + .dark .toast-notification { - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), + box-shadow: + 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); } + +/* Mobile responsiveness */ + @media (max-width: 640px) { .toast-notification { left: 1rem; @@ -8323,12 +11595,15 @@ h1[id]::before { max-width: none; transform: translateY(-100%); } + .toast-notification--visible { transform: translateY(0); } + .toast-notification--hiding { transform: translateY(-100%); } + @keyframes toast-slide-in { 0% { transform: translateY(-100%) scale(0.95); @@ -8340,60 +11615,105 @@ h1[id]::before { } } } -.toast-notification:nth-child(1) { - z-index: 9999; -} -.toast-notification:nth-child(2) { - z-index: 9998; - top: 5.5rem; -} -.toast-notification:nth-child(3) { - z-index: 9997; - top: 9.5rem; -} -.toast-notification:nth-child(4) { - z-index: 9996; - top: 13.5rem; -} + +/* Stacking for multiple toasts */ + +.toast-notification:nth-child(1) { z-index: 9999; } + +.toast-notification:nth-child(2) { z-index: 9998; top: 5.5rem; } + +.toast-notification:nth-child(3) { z-index: 9997; top: 9.5rem; } + +.toast-notification:nth-child(4) { z-index: 9996; top: 13.5rem; } + +/** + * Notebook Component Styles + * Modern, accessible styling for Jupyter notebook rendering + * Aligned with site-wide design system for consistency + * + * Features: + * - Unified code block styling with article content + * - Consistent button components across the site + * - Aligned typography and spacing patterns + * - Semantic color system integration + * - Performance optimizations for theme switching + * - Simplified container structure (reduced nesting) + * - Container queries for true responsive behavior + * - CSS logical properties for internationalization + */ + +/* ======================================== + Container Query Context + ======================================== */ + .notebook { container-type: inline-size; container-name: notebook; } + +/* ======================================== + Core Notebook Container (consolidated into .notebook__cells) + ======================================== */ + +/* ======================================== + Progressive Cell Visibility + ======================================== */ + +/* Notebook cell wrapper functionality merged into .notebook-cell */ + .notebook-cell.notebook-cell-wrapper { + /* CSS containment for performance isolation */ contain: layout style paint; + /* No transitions on wrapper to avoid layout issues */ } + .notebook-cell--hidden { + /* ✅ FIXED: Use animation tokens instead of display: none */ max-height: 0; opacity: 0; overflow: hidden; - transition: max-height var(--timing-medium) var(--easing-standard), + transition: + max-height var(--timing-medium) var(--easing-standard), opacity var(--timing-medium) var(--easing-standard), transform var(--timing-medium) var(--easing-standard); transform: translateY(20px); } + .notebook-cell--revealing { + /* ✅ FIXED: Use animation tokens for smooth transitions */ max-height: var(--collapse-height-expanded, 2000px); opacity: 1; transform: translateY(0); - transition: max-height var(--timing-medium) var(--easing-standard), + transition: + max-height var(--timing-medium) var(--easing-standard), opacity var(--timing-medium) var(--easing-standard), transform var(--timing-medium) var(--easing-standard); } + @keyframes revealCell { to { opacity: 1; transform: translateY(0); } } + +/* ======================================== + Notebook Header + ======================================== */ + .notebook__header { padding: 1.5rem 2rem; border-bottom: 1px solid var(--color-border-primary); background: var(--color-surface); margin-bottom: 1rem; } + +/* Hide header if it's empty */ + .notebook__header:empty { display: none; } + .notebook__title { font-size: 1.875rem; font-weight: 700; @@ -8401,104 +11721,152 @@ h1[id]::before { margin: 0 0 0.5rem 0; line-height: 1.2; } + .notebook__description { color: var(--color-text-secondary); font-size: 1.125rem; margin: 0; line-height: 1.5; } + .notebook__metadata { display: flex; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; } + .notebook__metadata-item { + /* Align with site button/badge patterns */ display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; background: var(--color-surface); color: var(--color-text-secondary); - border-radius: 0.375rem; + border-radius: 0.375rem; /* Match site border radius */ border: 1px solid var(--color-border-primary); font-size: 0.875rem; font-weight: 500; } + +/* ======================================== + Notebook Cells Container + ======================================== */ + .notebook__cells { + /* Simplified container - no shadow since cells have their own */ max-width: 100%; margin: 0 auto; padding: 0; + + /* Layout for cells */ display: flex; flex-direction: column; gap: 0.75rem; + + /* Performance optimizations */ contain: layout style; } + +/* Density variants based on data-view attribute */ + [data-view="compact"] .notebook__cells { - gap: 0.25rem; - padding: 0.25rem; + gap: 0.25rem; /* Much tighter cell spacing */ + padding: 0.25rem; /* Minimal container padding */ } + [data-view="comfortable"] .notebook__cells { - gap: 2rem; - padding: 2rem; + gap: 2rem; /* More spacious cell spacing */ + padding: 2rem; /* Generous container padding */ } + +/* Reduce space for first cell */ + .notebook__cells > .notebook-cell-wrapper:first-child .notebook-cell.collapse { margin-top: 0; } + +/* ======================================== + Individual Cell Styling (extends existing collapse) + ======================================== */ + .notebook-cell.collapse { + /* Notebook-specific styling for cells */ background: var(--glass-bg); border: 1px solid var(--glass-border-color); margin: 0 !important; --collapse-padding-expanded: 0; } + +/* ======================================== + Cell Headers (extends existing collapse headers) + ======================================== */ + .notebook-cell__header.collapse__header { + /* Notebook-specific header styling: narrower, glassmorphism */ padding: 0.5rem 0.75rem; background: var(--glass-bg); border-color: var(--glass-border-color); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); box-shadow: var(--glass-shadow); } + +/* Chevron/icon rotation synced to ARIA for notebook cells */ + .notebook-cell .collapse__header .collapse__icon { transform: rotate(0deg); } + .notebook-cell .collapse__header[aria-expanded="true"] .collapse__icon { transform: rotate(90deg) !important; } + +/* Compact cell headers */ + [data-view="compact"] .notebook-cell__header.collapse__header { - padding: 0.375rem 0.75rem; + padding: 0.375rem 0.75rem; /* Much more compact header padding */ } + [data-view="comfortable"] .notebook-cell__header.collapse__header { - padding: 1.5rem 2.5rem; + padding: 1.5rem 2.5rem; /* More generous header padding */ } + .notebook-cell__type { display: flex; align-items: center; gap: 0.75rem; } + .notebook-cell__type-icon { width: 1.25rem; height: 1.25rem; opacity: 0.8; color: var(--color-brand); } + .notebook-cell__type-text { font-size: 1rem; font-weight: 600; color: var(--color-text-primary); margin: 0; } + .notebook-cell__execution-indicator { font-size: 0.875rem; font-weight: 400; color: var(--color-text-secondary); - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: theme('fontFamily.mono'); margin-inline-start: 0.5rem; } + +/* Cell numbering - Jupyter style */ + .notebook-cell__number { font-size: 0.75rem; font-weight: 500; color: var(--color-text-tertiary); - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: theme('fontFamily.mono'); background: var(--color-bg-secondary); padding: 0.125rem 0.375rem; border-radius: 0.25rem; @@ -8509,134 +11877,174 @@ h1[id]::before { align-items: center; justify-content: center; } + .notebook-cell--code .notebook-cell__number { background: rgba(var(--color-brand-3-rgb, 59, 130, 246), 0.1); color: var(--color-brand-3); border-color: rgba(var(--color-brand-3-rgb, 59, 130, 246), 0.2); } + .notebook-cell--markdown .notebook-cell__number { background: color-mix(in srgb, rgb(134, 239, 172) 10%, transparent); color: #059669; border-color: color-mix(in srgb, rgb(134, 239, 172) 20%, transparent); } + +/* Execution status indicators */ + .notebook-cell__status { font-size: 0.75rem; font-weight: 500; padding: 0.125rem 0.375rem; border-radius: 0.25rem; - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: theme('fontFamily.mono'); } + .notebook-cell__status--executed { background: color-mix(in srgb, rgb(34, 197, 94) 10%, transparent); color: #059669; border: 1px solid color-mix(in srgb, rgb(34, 197, 94) 20%, transparent); } + .notebook-cell__status--pending { background: color-mix(in srgb, rgb(251, 191, 36) 10%, transparent); color: #d97706; border: 1px solid color-mix(in srgb, rgb(251, 191, 36) 20%, transparent); } + .notebook-cell__status--error { background: color-mix(in srgb, rgb(239, 68, 68) 10%, transparent); color: #dc2626; border: 1px solid color-mix(in srgb, rgb(239, 68, 68) 20%, transparent); } + +/* ======================================== + Cell Content (extends existing collapse body) + ======================================== */ + .notebook-cell .collapse__body-content { padding: 0; } + +/* Notebook cell body: align borders/background with glass style and avoid brand/green accents */ + .notebook-cell .collapse__body { background: var(--glass-bg); border-color: var(--glass-border-color); + /* Ensure body animates using data attributes on itself or parent */ --collapse-padding-expanded: 0.75rem; } + .notebook-cell.collapse[data-collapse-state="expanded"] .collapse__body, .notebook-cell.collapse.expanded .collapse__body { border-color: var(--glass-border-color); } + +/* Render Markdown cells as normal article content (less chrome) */ + .notebook-cell--markdown.collapse { background: transparent; border: none; box-shadow: none !important; transform: none !important; } + .notebook-cell--markdown.collapse:hover { box-shadow: none !important; transform: none !important; } + .notebook-cell--markdown .notebook-cell__header { display: none; } + .notebook-cell--markdown .collapse__body { background: transparent; border: none; } + .notebook-cell--markdown .collapse__body-content { padding: 0; } + +/* Compact cell content */ + [data-view="compact"] .notebook-cell .collapse__body-content { - padding: 0.5rem; + padding: 0.5rem; /* Much more compact cell content */ } + [data-view="comfortable"] .notebook-cell .collapse__body-content { - padding: 2.5rem; + padding: 2.5rem; /* More generous cell content padding */ } + +/* ======================================== + Markdown Cells + ======================================== */ + .notebook-cell--markdown .notebook-cell__type-icon { color: #059669; } + .notebook-cell__markdown-content { line-height: 1.7; } + .notebook-cell__markdown-content h1, .notebook-cell__markdown-content h2, .notebook-cell__markdown-content h3, .notebook-cell__markdown-content h4, .notebook-cell__markdown-content h5, .notebook-cell__markdown-content h6 { + /* Align with global heading styles from input.css */ margin-top: 0; margin-bottom: 1rem; color: var(--color-text-primary); font-weight: 700; word-wrap: break-word; } -.notebook-cell__markdown-content h1 { - font-size: 1.875rem; - font-weight: 900; -} -.notebook-cell__markdown-content h2 { - font-size: 1.5rem; -} -.notebook-cell__markdown-content h3 { - font-size: 1.25rem; -} -.notebook-cell__markdown-content h4 { - font-size: 1.125rem; -} -.notebook-cell__markdown-content h5 { - font-size: 1rem; -} -.notebook-cell__markdown-content h6 { - font-size: 0.875rem; -} + +.notebook-cell__markdown-content h1 { font-size: 1.875rem; font-weight: 900; } + +.notebook-cell__markdown-content h2 { font-size: 1.5rem; } + +.notebook-cell__markdown-content h3 { font-size: 1.25rem; } + +.notebook-cell__markdown-content h4 { font-size: 1.125rem; } + +.notebook-cell__markdown-content h5 { font-size: 1rem; } + +.notebook-cell__markdown-content h6 { font-size: 0.875rem; } + .notebook-cell__markdown-content p { + /* Match #articleContent spacing pattern */ margin: 0.75rem 0; color: var(--color-text-primary); } + .notebook-cell__markdown-content p:last-child { margin-bottom: 0; } + .notebook-cell__markdown-content ul, .notebook-cell__markdown-content ol { + /* Match #articleContent list patterns */ margin: 0.75rem 0; padding-inline-start: 1.5rem; } + .notebook-cell__markdown-content ul { list-style-type: disc; margin-inline-start: 1.5rem; } + .notebook-cell__markdown-content strong { + /* Match #articleContent strong styling */ font-family: var(--font-family-brand); font-weight: 600; } + .notebook-cell__markdown-content code { + /* Align with #articleContent code:not(pre code) styling */ padding: 0.25rem; border-radius: 0.25rem; font-size: 0.75rem; @@ -8645,52 +12053,86 @@ h1[id]::before { color: var(--color-brand-1); font-family: var(--font-family-mono, RobotoMono, monospace); } + +/* Dark mode support for inline code */ + .dark .notebook-cell__markdown-content code { color: var(--color-brand); } + +/* ======================================== + Code Cells + ======================================== */ + .notebook-cell--code .notebook-cell__type-icon { - color: var(--color-brand-3); + color: var(--color-brand-3); /* Uses semantic color system */ } + +/* Notebook code cells now use .code-block-enhanced with proper corner radius handling */ + +/* Fix border radius for code blocks with headers */ + .code-block-enhanced .code-header { - border-radius: 0.75rem 0.75rem 0 0; + border-radius: 0.75rem 0.75rem 0 0; /* Only top corners rounded */ } + .code-block-enhanced .code-content { - border-radius: 0 0 0.75rem 0.75rem; + border-radius: 0 0 0.75rem 0.75rem; /* Only bottom corners rounded */ } + +/* Target the actual highlighted code element that has the background */ + .code-block-enhanced .code-content .highlight { - border-radius: 0 0 0.75rem 0.75rem; + border-radius: 0 0 0.75rem 0.75rem; /* Only bottom corners rounded */ } + .code-block-enhanced .code-content .highlight pre { - border-radius: 0 0 0.75rem 0.75rem; + border-radius: 0 0 0.75rem 0.75rem; /* Only bottom corners rounded */ } + +/* Copy button styling handled by .code-block-enhanced */ + +/* ======================================== + Cell Outputs + ======================================== */ + .notebook-cell__outputs { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.75rem; } + +/* Compact output spacing */ + [data-view="compact"] .notebook-cell__outputs { margin-top: 0.5rem; gap: 0.375rem; } + [data-view="comfortable"] .notebook-cell__outputs { margin-top: 1.5rem; gap: 1rem; } + .notebook-cell__output { - border-radius: 0.5rem; + border-radius: theme('borderRadius.lg'); overflow: hidden; border: 1px solid var(--color-border-primary); background: var(--color-surface); } + +/* Stream Output */ + .notebook-cell__output--stream { background: var(--color-bg-secondary); color: #4ade80; padding: 1rem; - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: theme('fontFamily.mono'); font-size: 0.875rem; line-height: 1.5; } + .notebook-cell__output--stream pre { margin: 0; padding: 0; @@ -8699,17 +12141,23 @@ h1[id]::before { white-space: pre-wrap; word-break: break-word; } + +/* Execute Result Output */ + .notebook-cell__output--execute-result { padding: 1rem; } + .notebook-cell__output--execute-result .html-output { margin-bottom: 1rem; } + .notebook-cell__output--execute-result .html-output:last-child { margin-bottom: 0; } + .notebook-cell__output--execute-result .text-output { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: theme('fontFamily.mono'); font-size: 0.875rem; line-height: 1.5; color: var(--color-text-primary); @@ -8719,55 +12167,73 @@ h1[id]::before { white-space: pre-wrap; word-break: break-word; } + +/* Display Data Output */ + .notebook-cell__output--display-data { padding: 1rem; } + .notebook-cell__output--display-data img { max-width: 100%; height: auto; - aspect-ratio: auto; + aspect-ratio: auto; /* Preserve natural ratio but allow override */ -o-object-fit: contain; object-fit: contain; - border-radius: 0.375rem; - box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + border-radius: theme('borderRadius.md'); + box-shadow: theme('boxShadow.sm'); } + +/* For plots and charts, maintain square aspect ratio */ + .notebook-cell__output--display-data img[alt*="plot"], .notebook-cell__output--display-data img[alt*="chart"], .notebook-cell__output--display-data img[alt*="graph"] { aspect-ratio: 4 / 3; } + +/* Error Output */ + .notebook-cell__output--error { background: #7f1d1d; color: #fee2e2; border-color: #b91c1c; padding: 1rem; } + .notebook-cell__error-name { font-weight: 700; font-size: 1rem; margin-bottom: 0.5rem; color: #fca5a5; } + .notebook-cell__error-value { margin-bottom: 1rem; font-weight: 500; line-height: 1.5; } + .notebook-cell__error-traceback { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: theme('fontFamily.mono'); font-size: 0.875rem; line-height: 1.4; opacity: 0.9; } + .notebook-cell__traceback-line { padding: 0.125rem 0; border-inline-start: 2px solid #ef4444; padding-inline-start: 0.75rem; margin: 0.25rem 0; } + +/* Collapsible outputs for long content */ + .notebook-cell__output--collapsible { position: relative; } + .notebook-cell__output-toggle { display: flex; align-items: center; @@ -8781,66 +12247,90 @@ h1[id]::before { color: var(--color-text-secondary); transition: all 0.2s ease; } + .notebook-cell__output-toggle:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); } + .notebook-cell__output-toggle-icon { width: 1rem; height: 1rem; transition: transform var(--timing-fast) var(--easing-standard); } + .notebook-cell__output--collapsed .notebook-cell__output-toggle-icon { transform: rotate(-90deg); } + .notebook-cell__output-content { transition: all 0.3s ease; } + .notebook-cell__output--collapsed .notebook-cell__output-content { + /* ✅ FIXED: Use height-based collapse for smooth animation */ max-height: 0; opacity: 0; overflow: hidden; - transition: max-height var(--timing-medium) var(--easing-standard), + transition: + max-height var(--timing-medium) var(--easing-standard), opacity var(--timing-medium) var(--easing-standard); } + .notebook-cell__output-preview { padding: 0.75rem 1rem; background: var(--color-bg-secondary); color: var(--color-text-secondary); font-size: 0.875rem; - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: theme('fontFamily.mono'); border-bottom: 1px solid var(--color-border-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + +/* Output size indicators */ + .notebook-cell__output-size { font-size: 0.75rem; color: var(--color-text-tertiary); margin-inline-start: auto; } + +/* ======================================== + Raw Cells + ======================================== */ + .notebook-cell--raw .notebook-cell__type-icon { color: #9333ea; } + .notebook-cell__raw-content { background: var(--color-bg-secondary); - border-radius: 0.375rem; + border-radius: theme('borderRadius.md'); padding: 1rem; border: 1px solid var(--color-border-primary); } + .notebook-cell__raw-content pre { margin: 0; - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: theme('fontFamily.mono'); font-size: 0.875rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } + .notebook-cell__raw-content code { background: transparent; padding: 0; color: var(--color-text-primary); } + +/* ======================================== + Density Toggle and Navigation + ======================================== */ + .notebook__toolbar { display: flex; align-items: center; @@ -8851,6 +12341,7 @@ h1[id]::before { gap: 1rem; flex-wrap: wrap; } + .notebook__density-toggle { display: flex; align-items: center; @@ -8860,6 +12351,7 @@ h1[id]::before { padding: 0.25rem; border: 1px solid var(--color-border-primary); } + .notebook__density-btn { padding: 0.375rem 0.75rem; font-size: 0.75rem; @@ -8873,25 +12365,30 @@ h1[id]::before { min-width: 4rem; text-align: center; } + .notebook__density-btn:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); } + .notebook__density-btn--active { background: var(--color-brand); color: white; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } + .notebook__cell-counter { font-size: 0.875rem; color: var(--color-text-secondary); - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: theme('fontFamily.mono'); } + .notebook__actions { display: flex; align-items: center; gap: 0.5rem; } + .notebook__nav-btn { padding: 0.5rem; border: 1px solid var(--color-border-primary); @@ -8904,15 +12401,20 @@ h1[id]::before { align-items: center; justify-content: center; } + .notebook__nav-btn:hover { background: var(--color-bg-secondary); color: var(--color-text-primary); border-color: var(--color-border-secondary); } + .notebook__nav-btn svg { width: 1rem; height: 1rem; } + +/* Cell outline/navigation */ + .notebook__outline { position: fixed; top: 50%; @@ -8931,10 +12433,12 @@ h1[id]::before { visibility: hidden; transition: all 0.3s ease; } + .notebook__outline--visible { opacity: 1; visibility: visible; } + .notebook__outline-item { display: flex; align-items: center; @@ -8947,28 +12451,41 @@ h1[id]::before { transition: all 0.2s ease; text-decoration: none; } + .notebook__outline-item:hover { background: var(--color-bg-secondary); color: var(--color-text-primary); } + .notebook__outline-item--active { background: var(--color-brand); color: white; } + .notebook__outline-icon { width: 0.75rem; height: 0.75rem; - flex-shrink: 0; + shrink: 0; } + +/* ======================================== + Loading States and Performance Indicators + ======================================== */ + .notebook__performance-notice { margin-bottom: 1.5rem; } + .notebook-cell-wrapper { + /* Wrapper for lazy-loaded cells */ margin-bottom: 0; } + .notebook-cell--lazy { + /* Hidden cells waiting to be loaded */ display: none; } + .notebook-load-trigger { display: flex; align-items: center; @@ -8979,11 +12496,13 @@ h1[id]::before { border-top: 1px solid var(--color-border-primary); margin-top: 2rem; } + .loading-indicator { display: flex; align-items: center; gap: 0.5rem; } + .notebook-completion-indicator { display: flex; align-items: center; @@ -8994,109 +12513,174 @@ h1[id]::before { border-top: 1px solid var(--color-border-primary); margin-top: 2rem; background: var(--color-surface); - border-radius: 0.5rem; + border-radius: theme('borderRadius.lg'); } + +/* ======================================== + Light Mode Enhancements + ======================================== */ + +/* Light mode styles handled in .notebook__cells */ + .notebook-cell.collapse { + /* Light mode cell styling */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); + /* Add theme transition only to cells that need it */ transition: var(--transition-elevation); } + .notebook-cell.collapse:hover { + /* Enhanced light mode hover */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06); transform: translateY(-1px); } + +/* Light mode styling handled by .code-block-enhanced */ + .notebook-cell__output--stream { + /* Stream output styling with consistent colors */ background: var(--color-bg-inverse); color: var(--color-brand-2); } + .notebook-cell__output--error { + /* Error output styling with semantic colors */ background: rgba(var(--color-brand-7-rgb, 243, 179, 166), 0.1); color: var(--color-brand-7); border-color: rgba(var(--color-brand-7-rgb, 243, 179, 166), 0.3); } + .notebook-cell__output--error .notebook-cell__error-name { color: var(--color-brand-7); font-weight: 600; } + .notebook-cell__traceback-line { border-inline-start-color: var(--color-brand-7); } + +/* ======================================== + Dark Theme Support + ======================================== */ + +/* Dark mode handled by individual cell shadows */ + .dark .notebook-cell.collapse { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } + .dark .notebook-cell.collapse:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } + +/* Dark mode styling handled by .code-block-enhanced */ + .dark .notebook-cell__output--error { background: rgba(var(--color-brand-7-rgb, 243, 179, 166), 0.2); color: var(--color-text-primary); border-color: var(--color-brand-7); } + .dark .notebook-cell__output--error .notebook-cell__error-name { color: var(--color-brand-7); } + .dark .notebook-cell__traceback-line { border-inline-start-color: var(--color-brand-7); } + +/* ======================================== + Container Query Responsive Design + ======================================== */ + @container notebook (max-width: 768px) { .notebook__cells { margin: 0; padding: 0; } + .notebook__header { padding: 1rem 1.5rem; } + .notebook__title { font-size: 1.5rem; } + .notebook__description { font-size: 1rem; } + .notebook__cells { gap: 0; } + .notebook-cell .collapse__body-content { padding: 0; } + + /* Compact mode on mobile should be even more compact */ [data-view="compact"] .notebook__cells { padding: 0; gap: 0; } + [data-view="compact"] .notebook-cell .collapse__body-content { padding: 0; } + + /* Mobile code block styling handled by .code-block-enhanced */ + .notebook__performance-notice { margin: 0 1rem 1.5rem; } + + /* Hide outline on mobile */ .notebook__outline { display: none; } + + /* Stack toolbar on mobile */ .notebook__toolbar { flex-direction: column; align-items: stretch; gap: 0.75rem; } + .notebook__actions { justify-content: center; } } + @container notebook (max-width: 480px) { .notebook__metadata { flex-direction: column; gap: 0.5rem; } + .notebook-cell__header.collapse__header { padding: 0.75rem 1rem; } + .notebook-cell .collapse__body-content { padding: 0.75rem; } + + /* Print code block styling handled by .code-block-enhanced */ + .notebook-cell__type-text { font-size: 0.875rem; } + .notebook__performance-notice { margin: 0 0.75rem 1rem; } } + +/* ======================================== + Print Styles + ======================================== */ + @media print { .notebook__cells { border: 1px solid #ccc; @@ -9104,6 +12688,7 @@ h1[id]::before { break-inside: avoid; margin: 0; } + .notebook-cell .copy-code, .collapse__icon-wrapper, .notebook__performance-notice, @@ -9111,17 +12696,22 @@ h1[id]::before { .notebook-completion-indicator { display: none !important; } + + /* ✅ FIXED: Use standard collapse behavior with animation tokens */ .notebook-cell .collapse__body { max-height: var(--collapse-height-collapsed); opacity: var(--collapse-opacity-collapsed); overflow: hidden; - transition: max-height var(--collapse-timing) var(--collapse-easing), + transition: + max-height var(--collapse-timing) var(--collapse-easing), opacity var(--collapse-timing) var(--collapse-easing); } + .notebook-cell .collapse__body.expanded { max-height: var(--collapse-height-expanded); opacity: var(--collapse-opacity-expanded); } + .notebook-cell { -moz-column-break-inside: avoid; break-inside: avoid; @@ -9130,15 +12720,24 @@ h1[id]::before { border: 1px solid #ddd; margin-bottom: 1rem; } + .notebook-cell__outputs { -moz-column-break-inside: avoid; break-inside: avoid; } + + /* Print code styling handled by .code-block-enhanced */ + .notebook-cell__output--stream { background: #f0f0f0 !important; color: #333 !important; } } + +/* ======================================== + Accessibility Enhancements + ======================================== */ + @media (prefers-reduced-motion: reduce) { .notebook-cell, .notebook-cell__toggle, @@ -9147,6 +12746,7 @@ h1[id]::before { transition: none; } } + @media (prefers-contrast: high) { .notebook__cells { --notebook-border: #111827; @@ -9154,6 +12754,7 @@ h1[id]::before { --cell-hover-border: #1d4ed8; --cell-active-border: #2563eb; } + .dark .notebook__cells { --notebook-border: #f3f4f6; --cell-border: #d1d5db; @@ -9161,6 +12762,11 @@ h1[id]::before { --cell-active-border: #60a5fa; } } + +/* ======================================== + Animation Keyframes + ======================================== */ + @keyframes notebook-cell-enter { from { opacity: 0; @@ -9171,36 +12777,42 @@ h1[id]::before { transform: translateY(0); } } + @keyframes copy-success { - 0%, 100% { - transform: scale(1); - } - 50% { - transform: scale(1.1); - } + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.1); } } + @keyframes copy-error { - 0%, 100% { - transform: translateX(0); - } - 25% { - transform: translateX(-0.25rem); - } - 75% { - transform: translateX(0.25rem); - } + 0%, 100% { transform: translateX(0); } + 25% { transform: translateX(-0.25rem); } + 75% { transform: translateX(0.25rem); } } + +/* ======================================== + Entry Animations + ======================================== */ + .notebook-cell { animation: notebook-cell-enter 0.4s ease-out; animation-delay: calc(var(--cell-index, 0) * 0.1s); animation-fill-mode: both; } + .notebook-cell__copy-btn--success { animation: copy-success 0.3s ease-out; } + .notebook-cell__copy-btn--error { animation: copy-error 0.3s ease-out; } + +/* ======================================== + :has() Notebook Component Enhancements + ======================================== */ + +/* Notebook cells with error states get enhanced styling */ + .notebook-cell:has(.notebook-cell__error-name) { border-inline-start: 4px solid var(--color-danger); background: linear-gradient( @@ -9211,31 +12823,43 @@ h1[id]::before { margin-inline-start: -1rem; padding-inline-start: calc(1rem - 4px); } + .notebook-cell:has(.notebook-cell__error-name) .collapse__icon-wrapper { background: var(--color-danger); color: white; border-radius: 50%; } + +/* Cells with outputs get enhanced spacing */ + .notebook-cell:has(.notebook-cell__outputs) { margin-bottom: 2rem; border-bottom: 1px solid var(--color-border-secondary); padding-bottom: 1.5rem; } + .notebook-cell:has(.notebook-cell__outputs) .notebook-cell__outputs { background: var(--color-surface); border-radius: 0.5rem; padding: 1rem; margin-top: 1rem; } + +/* Interactive notebook cells on hover */ + .notebook-cell:has(.notebook-cell__copy-btn) { transition: all 0.2s ease; } + .notebook-cell:has(.notebook-cell__copy-btn:hover) { background: rgba(var(--color-brand-rgb), 0.02); border-radius: 0.5rem; margin: 0.5rem 0; padding: 0.5rem; } + +/* Notebook with metadata gets enhanced header */ + .notebook:has(.notebook__metadata) .notebook__header { background: linear-gradient( 135deg, @@ -9244,2299 +12868,3392 @@ h1[id]::before { ); border-radius: 0.75rem 0.75rem 0 0; } + +/* Enhanced notebook title when description is present */ + .notebook__header:has(.notebook__description) .notebook__title { margin-bottom: 1rem; font-size: 2.25rem; } -.openapi-spec { - max-width: none; - margin: 0; - padding: 0; + +/* ======================================== + Modern CSS Features Summary + ======================================== */ + +/* + * This notebook component showcases modern CSS techniques: + * + * ✅ Container Queries: + * - Responsive behavior based on container size, not viewport + * - @container notebook (max-width: 768px) replaces @media queries + * + * ✅ CSS Logical Properties: + * - margin-inline-start/end for better internationalization + * - border-inline-start for RTL language support + * - padding-inline-start for semantic spacing + * + * ✅ Modern Color Functions: + * - color-mix() for alpha blending instead of rgba() + * - More semantic and maintainable color mixing + * + * ✅ Aspect Ratio: + * - aspect-ratio property for consistent image display + * - object-fit: contain for proper image scaling + * + * ✅ Advanced Pseudo-classes: + * - :has() for parent selector functionality + * - :focus-visible for keyboard navigation + * - :focus-within for container focus states + * + * Browser Support: Modern features with graceful fallbacks + * Performance: CSS containment for layout isolation + */ + +/* Unified Tabs Component CSS + * - Enhanced tabs ([data-component="tabs"], .tabs__*) + */ + +/* ========================== + Enhanced Tabs (BEM + data) + ========================== */ + +[data-component="tabs"], +.tabs { + margin: 1.5rem 0; + border-radius: 1rem; + background: var(--glass-bg); + border: 1px solid var(--glass-border-color); + box-shadow: var(--glass-shadow); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + overflow: hidden; + position: relative; } -.openapi-content { - display: flex; - flex-direction: column; - gap: 3rem; + +/* Light mode: strengthen overall container border for visibility */ + +@media (prefers-color-scheme: light) { + [data-component="tabs"], + .tabs { + border-color: var(--color-border-primary); + } } -.section-header { - margin-bottom: 2rem; - text-align: center; + +/* Header-aligned visuals are now the default */ + +/* Tab buttons container */ + +[data-component="tabs"] [data-tab-id], +.tabs__nav { + background: var(--glass-bg); + border-bottom: 1px solid var(--glass-border-color); + padding: 0.5rem 0.5rem; + display: flex; + flex-wrap: wrap; + gap: 0.25rem; } -.section-title { - font-family: var(--font-family-brand); - font-size: 2.5rem; - font-weight: 700; - color: var(--color-text-primary); - margin: 0 0 0.5rem 0; - background: linear-gradient(135deg, var(--color-brand), var(--color-accent)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + +/* Light mode: strengthen nav divider for visibility */ + +@media (prefers-color-scheme: light) { + [data-component="tabs"] [data-tab-id], + .tabs__nav { + border-bottom-color: var(--color-border-primary); + } } -.section-description { - font-size: 1.125rem; - color: var(--color-text-secondary); - margin: 0; - max-width: 600px; - margin-left: auto; - margin-right: auto; + +/* Individual tab buttons */ + +[data-component="tabs"] button[data-tab-option], +.tabs__button { + position: relative; + border-radius: 0.625rem; + font-weight: 600; + transition: + background-color var(--timing-medium) var(--easing-standard), + border-color var(--timing-medium) var(--easing-standard), + color var(--timing-medium) var(--easing-standard), + transform var(--timing-medium) var(--easing-standard); + border: 1px solid var(--glass-border-color); + cursor: pointer; + white-space: nowrap; + background: var(--glass-bg); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + padding: 0.25rem 0.5rem; /* match breadcrumb */ } -.openapi-header { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); - border: 2px solid var(--color-border-primary); - border-radius: 1.5rem; - padding: 2rem; - margin-bottom: 2rem; + +/* Default (inactive) */ + +[data-component="tabs"] button[data-tab-option]:not(.bg-brand), +.tabs__button:not(.bg-brand) { + background: var(--glass-bg) !important; + color: var(--color-text-primary) !important; + border-color: var(--glass-border-color); +} + +/* Light mode: increase inactive button border contrast */ + +@media (prefers-color-scheme: light) { + [data-component="tabs"] button[data-tab-option]:not(.bg-brand), + .tabs__button:not(.bg-brand) { + border-color: var(--color-border-primary); + } +} + +/* Hover */ + +[data-component="tabs"] button[data-tab-option]:not(.bg-brand):hover, +.tabs__button:not(.bg-brand):hover { + background: var(--color-surface-hover) !important; + color: var(--color-brand) !important; + border-color: rgba(var(--color-brand-rgb), 0.35); + transform: translateY(-1px); + box-shadow: var(--elevation-2); +} + +/* Active */ + +[data-component="tabs"] button.bg-brand, +.tabs__button.bg-brand { + background: var(--color-brand) !important; + color: var(--color-text-inverse, #fff) !important; + border-color: var(--color-brand); + box-shadow: var(--elevation-brand-subtle); + transform: translateY(-1px); +} + +/* Subtle variant: revert to tinted-active style */ + +[data-component="tabs"].tabs--subtle button.bg-brand, +.tabs.tabs--subtle .tabs__button.bg-brand { + background: + linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.08) 0%, + transparent 50%, + rgba(var(--color-brand-rgb), 0.06) 100% + ), + var(--glass-bg) !important; + color: var(--color-text-primary) !important; + border-color: rgba(var(--color-brand-rgb), 0.45); + box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.18), var(--elevation-2); +} + +/* Dark mode: increase active contrast by default */ + +@media (prefers-color-scheme: dark) { + [data-component="tabs"] button.bg-brand, + .tabs__button.bg-brand { + background: var(--color-brand) !important; + color: var(--color-text-inverse, #fff) !important; + border-color: var(--color-brand); + box-shadow: var(--elevation-brand-medium); + } +} + +/* Focus */ + +[data-component="tabs"] button[data-tab-option]:focus-visible, +.tabs__button:focus-visible { + outline: 2px solid var(--color-brand); + outline-offset: 2px; + box-shadow: 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); +} + +/* Content container */ + +[data-component="tabs"] .w-full, +.tabs__content { + min-height: 200px; position: relative; overflow: hidden; + border-top: 1px solid var(--glass-border-color); + transition: height var(--timing-medium) var(--easing-standard); + isolation: isolate; /* prevent child blends from darkening surface */ } -.openapi-header::before { - content: ''; + +/* Panels */ + +[data-component="tabs"] [data-tabcontent], +.tabs__panel { + padding: 1.25rem 1.5rem; + background: transparent; position: absolute; top: 0; left: 0; right: 0; - bottom: 0; - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - transparent 50%, - rgba(var(--color-accent-rgb), 0.05) 100% - ); + will-change: opacity, transform; + backface-visibility: hidden; + transform: var(--transform-slide-in-up); + opacity: 0; + visibility: hidden; pointer-events: none; + transition: + opacity var(--timing-medium) var(--easing-standard), + transform var(--timing-medium) var(--easing-standard), + visibility 0s linear var(--timing-medium); } -.openapi-header__meta { - display: flex; - align-items: center; - gap: 1rem; - margin-bottom: 1rem; - position: relative; + +/* Visible panel */ + +[data-component="tabs"] [data-tabcontent].is-active, +.tabs__panel.is-active { + opacity: 1; + transform: var(--transform-translate-none); + visibility: visible; + pointer-events: auto; + transition-delay: 0s, 0s, 0s; + animation: slideInUp var(--timing-medium) var(--easing-standard); } -.openapi-header__badge { - display: inline-flex; - align-items: center; - padding: 0.5rem 1rem; - background: rgba(var(--color-brand-rgb, 59, 130, 246), 0.1); - border: 1px solid rgba(var(--color-brand-rgb, 59, 130, 246), 0.2); - border-radius: 2rem; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-brand, #3b82f6); - transition: background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; + +/* Panel content spacing */ + +[data-component="tabs"] [data-tabcontent] > *:first-child, +.tabs__panel > *:first-child { margin-top: 0; } + +[data-component="tabs"] [data-tabcontent] > *:last-child, +.tabs__panel > *:last-child { margin-bottom: 0; } + +/* Smooth entrance */ + +[data-component="tabs"] [data-tabcontent] *, +.tabs__panel * { transition: none; } + +/* Compact density variant */ + +[data-component="tabs"].tabs--compact .tabs__nav, +.tabs.tabs--compact .tabs__nav { + padding: 0.25rem 0.25rem; + gap: 0.125rem; } -.openapi-header__badge:hover { - background: rgba(var(--color-brand-rgb, 59, 130, 246), 0.15); - border-color: rgba(var(--color-brand-rgb, 59, 130, 246), 0.3); - transform: translateY(-1px); + +[data-component="tabs"].tabs--compact button[data-tab-option], +.tabs.tabs--compact .tabs__button { + padding: 0.375rem 0.5rem; + font-size: 0.875rem; } -.openapi-header__badge--version { - background: rgba(var(--color-accent-rgb, 139, 92, 246), 0.1); - border-color: rgba(var(--color-accent-rgb, 139, 92, 246), 0.2); - color: var(--color-accent, #8b5cf6); + +/* Underline hover animation for inactive buttons */ + +[data-component="tabs"] button[data-tab-option]:not(.bg-brand)::after, +.tabs__button:not(.bg-brand)::after { + content: ""; + position: absolute; + left: 0.5rem; right: 0.5rem; bottom: 0.25rem; + height: 2px; + background: rgba(var(--color-brand-rgb), 0.35); + transform: scaleX(0); + transform-origin: left center; + transition: transform var(--timing-medium) var(--easing-standard); } -.openapi-header__badge--version:hover { - background: rgba(var(--color-accent-rgb, 139, 92, 246), 0.15); - border-color: rgba(var(--color-accent-rgb, 139, 92, 246), 0.3); + +[data-component="tabs"] button[data-tab-option]:not(.bg-brand):hover::after, +.tabs__button:not(.bg-brand):hover::after { transform: scaleX(1); } + +/* Responsive */ + +@media (max-width: 640px) { + [data-component="tabs"] [data-tab-id], + .tabs__nav { flex-direction: column; align-items: stretch; } + [data-component="tabs"] button[data-tab-option], + .tabs__button { text-align: left; justify-content: flex-start; } + [data-component="tabs"] [data-tabcontent], + .tabs__panel { padding: 1.5rem; } } -.openapi-header__badge--type[data-api-type="REST"] { - background: rgba(var(--color-info-rgb), 0.1); - border-color: rgba(var(--color-info-rgb), 0.2); - color: var(--color-info); + +/* Print */ + +@media print { + [data-component="tabs"] [data-tab-id], + .tabs__nav { display: none; } + [data-component="tabs"] [data-tabcontent], + .tabs__panel { position: static !important; display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; page-break-inside: avoid; } + [data-component="tabs"] [data-tabcontent]:not(:first-of-type), + .tabs__panel:not(:first-of-type) { margin-top: 2rem; border-top: 1px solid var(--color-border-primary); padding-top: 2rem; } + [data-component="tabs"] [data-tabcontent]::before, + .tabs__panel::before { content: "Tab: " attr(data-tabcontent); display: block; font-weight: bold; margin-bottom: 1rem; color: var(--color-text-secondary); font-size: 0.875rem; text-transform: capitalize; } } -.openapi-header__badge--type[data-api-type="GraphQL"] { - background: rgba(var(--color-danger-rgb), 0.1); - border-color: rgba(var(--color-danger-rgb), 0.2); - color: var(--color-danger); + +@media (prefers-color-scheme: dark) { + [data-component="tabs"], .tabs { box-shadow: var(--elevation-4); } + [data-component="tabs"] button.bg-brand, .tabs__button.bg-brand { box-shadow: var(--elevation-brand-medium); } } -.openapi-header__badge--maturity[data-maturity="stable"] { - background: rgba(var(--color-success-rgb), 0.1); - border-color: rgba(var(--color-success-rgb), 0.2); - color: var(--color-success); -} -.openapi-header__badge--maturity[data-maturity="beta"] { - background: rgba(var(--color-warning-rgb), 0.1); - border-color: rgba(var(--color-warning-rgb), 0.2); - color: var(--color-warning); -} -.openapi-header__badge--maturity[data-maturity="alpha"] { - background: rgba(var(--color-danger-rgb), 0.1); - border-color: rgba(var(--color-danger-rgb), 0.2); - color: var(--color-danger); + +@media (prefers-color-scheme: dark) { + [data-component="tabs"]::after, + .tabs::after { + background: linear-gradient( + to bottom, + rgba(0,0,0,0) 0%, + rgba(0,0,0,0.18) 55%, + rgba(0,0,0,0.28) 100% + ); + } } -.openapi-header__badge--stability { - background: rgba(var(--color-security-rgb), 0.1); - border-color: rgba(var(--color-security-rgb), 0.2); - color: var(--color-security); + +/* Code Blocks - align with header/tabs glass surface and tokens */ + +.code-block-enhanced { + background: var(--glass-bg); + border-radius: 0.75rem; + border: 1px solid var(--glass-border-color); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + box-shadow: var(--glass-shadow); + overflow: hidden; } -.openapi-version { - font-family: var(--font-family-mono); + +/* Light mode: strengthen wrapper border for visibility */ + +@media (prefers-color-scheme: light) { + .code-block-enhanced { + border-color: var(--color-border-primary); + } } -.openapi-header__version { - display: inline-flex; + +.code-block-enhanced .code-header { + display: flex; + justify-content: space-between; align-items: center; - padding: 0.5rem 1rem; - background: rgba(var(--color-accent-rgb), 0.1); - border: 1px solid rgba(var(--color-accent-rgb), 0.2); - border-radius: 2rem; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-accent); + gap: 0.75rem; + padding: 0.5rem 0.75rem; + background: var(--glass-bg); + border-bottom: 1px solid var(--glass-border-color); } -.api-version { - font-family: var(--font-family-mono); + +/* Light mode: strengthen header divider similar to article header */ + +@media (prefers-color-scheme: light) { + .code-block-enhanced .code-header { + border-bottom-color: var(--color-border-primary); + } } -.openapi-header__version-stat { - min-width: auto; - flex: none; - min-height: auto; - padding: 0.5rem 1rem; + +.code-block-enhanced .code-language { + color: var(--color-text-secondary); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.04em; + font-size: 0.75rem; } -.openapi-header__version-stat .overview-stat__value { - font-family: var(--font-family-mono); - font-size: 0.875rem; + +.code-block-enhanced .code-actions .btn { + border-radius: 0.5rem; } -.openapi-header__title { - font-family: var(--font-family-brand); - font-size: 3rem; - font-weight: 800; - margin: 0 0 1rem 0; - color: var(--color-text-primary); - position: relative; + +.code-block-enhanced .code-actions .btn.btn--ghost { + background: var(--glass-bg); + border: 1px solid var(--glass-border-color); } -.openapi-header__summary { - font-size: 1.25rem; - color: var(--color-text-secondary); - margin-bottom: 1rem; - position: relative; + +.code-block-enhanced .code-actions .btn.btn--ghost:hover { + background: var(--color-surface-hover); + color: var(--color-brand); + border-color: rgba(var(--color-brand-rgb), 0.35); } -.openapi-header__description { - font-size: 1rem; - line-height: 1.6; - color: var(--color-text-primary); - margin-bottom: 1.5rem; - position: relative; + +.code-block-enhanced .code-content { + background: transparent; } -.openapi-header__info { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 2rem; - position: relative; + +.code-block-enhanced .code-content .highlight, +.code-block-enhanced .code-content .highlight pre, +.code-block-enhanced .code-content pre, +.code-block-enhanced .code-content code { + background: transparent; } -.openapi-contact, -.openapi-license, -.openapi-terms { - background: rgba(255, 255, 255, 0.5); - padding: 1.5rem; - border-radius: 1rem; - border: 1px solid var(--color-border-primary); + +.code-block-enhanced .code-content pre { + margin: 0; + padding: 0.75rem 1rem; } -.openapi-contact h3, -.openapi-license h3, -.openapi-terms h3 { - margin: 0 0 1rem 0; - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); + +.code-block-enhanced .code-content code { + display: block; } -.contact-name, -.contact-email, -.contact-url, -.license-name, -.terms-link { - margin-bottom: 0.5rem; + +/* Dark mode glow tuning aligns with header action glow */ + +@media (prefers-color-scheme: dark) { + .code-block-enhanced { + box-shadow: var(--elevation-4); + } } -.contact-email a, -.contact-url a, -.license-name a, -.terms-link a { - color: var(--color-brand); - text-decoration: none; - transition: color 0.2s ease; + +/* Copy button icon alignment and sizing + Ensure the single SVG icon in the copy button is visually centered and consistent */ + +.code-block-enhanced .code-actions .copy-code .btn__icon { + margin-right: 0; /* no trailing space for icon-only buttons */ + width: 1rem; /* enforce square icon */ + height: 1rem; + display: block; /* remove inline alignment quirks */ } -.contact-email a:hover, -.contact-url a:hover, -.license-name a:hover, -.terms-link a:hover { - color: var(--color-accent); - text-decoration: underline; + +@layer components { + /* Object Model Component */ + [data-component="object-model"] { + /* Align nested option text with summary text start: px-3 + chevron(1rem) + gap(0.5rem) */ + --om-pad-x: 0rem; /* no outer horizontal padding on rows */ + --om-chevron: 1rem; /* h-4 w-4 */ + --om-gap: 0.5rem; /* gap-2 */ + --om-indent: calc(var(--om-pad-x) + var(--om-chevron) + var(--om-gap)); + } + .object-model__title, + .object-model__heading { + scroll-margin-top: var(--header-offset); + } + +/* Layout Container */ +.object-model-container { + max-width: 80rem; /* container equivalent */ + margin: 0 auto; + padding: var(--space-8) var(--space-4); } -.openapi-header:has(.openapi-header__description) { - padding-bottom: 2.5rem; + +/* Typography Styles */ +.object-model__title { + font-size: var(--font-size-3xl); + font-weight: 700; + color: var(--color-text-primary); + margin-bottom: var(--space-4); + line-height: 1.1; + } + + .object-model__heading { + font-size: var(--font-size-2xl); + font-weight: 600; + color: var(--color-text-primary); + margin-bottom: var(--space-4); + line-height: 1.2; + } + +/* Layout Patterns */ +.object-model__intro { + display: flex; + flex-direction: column; + gap: var(--space-3); } -.openapi-header:has(.openapi-header__description) .openapi-header__title { - margin-bottom: 1.25rem; + +.object-model__section { + margin-top: var(--space-8); } -.openapi-header:not(:has(.openapi-header__info *)) .openapi-header__description { - margin-bottom: 0; + +.object-model__header { + margin-bottom: var(--space-4); } -.openapi-header__meta:has(.openapi-header__version-stat) { - gap: 1.5rem; - align-items: stretch; + +.object-model__summary { + margin-top: var(--space-2); } -.openapi-header__info:has(.openapi-contact:only-child) { + +.object-model__groups { + margin-left: var(--space-4); + display: grid; grid-template-columns: 1fr; - max-width: 400px; + gap: var(--space-6); } -.openapi-header__info:has(.openapi-contact + .openapi-license:not(+ *)) { - grid-template-columns: repeat(2, 1fr); + +.object-model__summary-row { + display: flex; + cursor: pointer; + align-items: flex-start; + gap: var(--space-2); } -.openapi-header__info:has(.openapi-contact + .openapi-license + .openapi-terms) { - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + +.object-model__chevron { + margin-top: var(--space-1); + height: 1rem; + width: 1rem; + flex-shrink: 0; + transition: transform var(--timing-fast) var(--easing-standard); } -.openapi-contact:has(.contact-email):has(.contact-url) { - background: linear-gradient(135deg, rgba(var(--color-brand-rgb), 0.05), rgba(var(--color-accent-rgb), 0.05)); - border-color: rgba(var(--color-brand-rgb), 0.15); + +.object-model__description { + margin-left: var(--space-1); } -.openapi-contact:has(.contact-name) h3 { - color: var(--color-brand); + +.object-model__options { + padding: var(--space-2) var(--space-4); } -.openapi-license:has(a) .license-name a { - color: var(--color-brand); - font-weight: 600; - text-decoration: none; - transition: all 0.2s ease; + +.object-model__option-item { + padding: var(--space-1) 0; } -.openapi-license:has(a) .license-name a:hover { - color: var(--color-accent); - text-decoration: underline; + +.object-model__row { + display: flex; + align-items: flex-start; + gap: var(--space-2); } -.openapi-header:has(.openapi-contact):has(.openapi-license):has(.openapi-terms) { - padding: 2.5rem; + +.object-model__dash { + margin-top: var(--space-1); + height: 1rem; + width: 1rem; + flex-shrink: 0; } -@media (max-width: 768px) { - .openapi-header:has(.openapi-header__info) { - padding: 1.5rem; + + @media (min-width: 1024px) { + .object-model__groups { + grid-template-columns: repeat(2, 1fr); + } } - .openapi-header__info:has(.openapi-contact + .openapi-license + .openapi-terms) { - grid-template-columns: 1fr; - gap: 1rem; + + .object-model__heading, + .object-model__subheading { + color: var(--color-text-primary); } - .openapi-header__meta:has(.openapi-header__version-stat) { - flex-direction: column; - gap: 0.75rem; - align-items: flex-start; + + /* Token-based badge for section headings (replaces hard-coded bg classes) */ + .object-model__heading-badge { + display: inline-block; + padding: 0.25rem 0.5rem; /* px-2 py-1 */ + border-radius: 0.5rem; + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + color: var(--color-text-primary); } -} -.openapi-overview { - padding: 1.5rem 0; - margin-bottom: 1rem; -} -.overview-header { - margin-bottom: 1.5rem; - text-align: left; -} -.overview-title { - font-family: var(--font-family-brand); - font-size: 1.75rem; - font-weight: 700; - color: var(--color-text-primary); - margin: 0 0 0.25rem 0; -} -@supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) { - .overview-title { - background: linear-gradient(135deg, var(--color-brand, #3b82f6), var(--color-accent, #8b5cf6)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - color: transparent; + + .object-model__intro-text, + .object-model__summary { + color: var(--color-text-primary); } + + .object-model__list { + /* Borderless, airy list; separation via spacing and summary hover */ + background: transparent; + border: 0; + box-shadow: none; + overflow: visible; + color: var(--color-text-primary); + list-style: none; + padding-left: 0; + } + + /* Ensure inner text inherits proper token-based colors */ + .object-model__item, + .object-model__field, + .object-model__options { + color: inherit; + } + + .object-model__details { + /* Remove default marker for consistent chevron */ + } + .object-model__details > summary::-webkit-details-marker { + display: none; + } + .object-model__details > summary { + list-style: none; + } + + /* Fine tune nested lists */ + .object-model__options { + /* Use only the explicit padding from markup; remove UA list padding/indent */ + list-style: none; + padding-inline-start: 0; + margin-left: 0.5em; + padding-left: var(--om-indent); + padding-top: 0.25rem; /* tighter attach under summary */ + } + + /* Override global article nested list indent for this component only */ + .article-content[data-component="object-model"] .object-model__list li, + .article-content[data-component="object-model"] .object-model__list li li { + margin-left: 0; + padding-left: 0; + } + + /* Ensure summary row has clear focus ring */ + .object-model__summary-row { + border-radius: var(--radius-md); + outline: none; + + /* TailwindCSS v4: focus-visible pseudo-selectors don't work well in @apply, use direct CSS */ + &:focus-visible { + ring: 2px solid theme(colors.indigo.500); + } + + .dark &:focus-visible { + ring: 2px solid theme(colors.indigo.400); + } + } + + .object-model__summary-row:hover { + background-color: rgba(var(--color-brand-rgb), 0.03); + } + + /* Ensure names/descriptions use token text colors automatically */ + .object-model__name { + color: var(--color-text-primary); + } + .object-model__description { + color: var(--color-text-primary); + } + + .object-model__chevron { + color: var(--color-text-secondary); + } + .object-model__dash { + color: var(--color-border-primary); + } + + /* Option items typography */ + /* Keys and values color tokens */ + .object-model__option-key code { + color: var(--color-text-primary); + font-weight: 600; /* add visual weight to keys */ + } + .object-model__option-value, + .object-model__option-value p, + .object-model__option-value a { + color: var(--color-text-primary); + } + .object-model__option-value { display: inline; margin-left: 0.375rem; } + .object-model__option-value p { display: inline; margin: 0; } + .object-model__option-value a:hover { color: var(--color-brand); } + + /* Option item in normal inline flow (avoid flex to prevent text splitting into multiple flex items) */ + .object-model__option-item { + display: block; + padding: 0.125rem 0; + font-size: 0.875rem; /* text-sm */ + line-height: 1.45; + } + .object-model__option-key { + color: var(--color-text-secondary); + white-space: nowrap; + } + .object-model__option-value { + color: var(--color-text-primary); + } + + /* Strong label variant (for legacy markup without key/value wrappers) */ + .object-model__option-item > strong { + margin-right: 0.375rem; + font-weight: 600; + } + .object-model__option-item code { + white-space: nowrap; + } + + /* Compact spacing for rows in dense lists */ + .object-model__row, + .object-model__summary-row { + padding-top: 0.375rem; + padding-bottom: 0.375rem; + } + + @media (min-width: 768px) { + .object-model__row, + .object-model__summary-row { + padding-top: var(--space-2); + padding-bottom: var(--space-2); + } + } + + .object-model__details:not([open]) .object-model__summary-row { box-shadow: none; } + .object-model__details[open] .object-model__summary-row { box-shadow: none; } + + /* Soft separation between items without borders */ + .object-model__item + .object-model__item { margin-top: 0.25rem; } } -.overview-subtitle { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin: 0; - opacity: 0.8; -} -.overview-content { - display: flex; - flex-direction: column; - gap: 1.5rem; + +/* Enhanced Collapse Component - Modern collapsible content with animations */ + +/* ========================================================================== + Base Collapse Component + ========================================================================== */ + +.collapse { + position: relative !important; + margin: 1.5rem 0 !important; + border-radius: 1rem !important; + overflow: hidden !important; + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + transform var(--timing-medium) var(--easing-standard), + box-shadow var(--timing-medium) var(--easing-standard) !important; + animation: collapse-enter var(--timing-medium) var(--easing-standard) !important; + animation-fill-mode: both !important; + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; + visibility: visible !important; + display: block !important; } -.overview-stats { - display: flex; - flex-wrap: wrap; - gap: 0.75rem; - align-items: stretch; + +.collapse:hover { + transform: translateY(-2px) !important; + box-shadow: + 0 8px 24px rgba(0, 0, 0, 0.12), + 0 0 20px rgba(var(--color-brand-rgb), 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; } -.overview-stat { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.75rem 1rem; + +/* ========================================================================== + Collapse Header (Trigger) + ========================================================================== */ + +.collapse__header { + position: relative; + cursor: pointer; + padding: 1.25rem 1.5rem; background: linear-gradient( 135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100% ); border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), - border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), - color 0.2s cubic-bezier(0.4, 0, 0.2, 1), - transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), - box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); - min-height: 60px; - position: relative; - overflow: hidden; - flex: 1; - min-width: 140px; + border-radius: 1rem; + /* ✅ FIXED: Use animation tokens and specific properties */ + transition: + border-color var(--timing-medium) var(--easing-standard), + background var(--timing-medium) var(--easing-standard), + transform var(--timing-medium) var(--easing-standard); + display: flex; + align-items: center; + gap: 1rem; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } -.overview-stat::before { + +.collapse__header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background: rgba(var(--color-brand-rgb), 0.03); + background: linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.05) 0%, + transparent 50%, + rgba(var(--color-brand-rgb), 0.02) 100% + ); opacity: 0; - transition: opacity 0.2s ease; + transition: opacity var(--timing-medium) var(--easing-standard); + pointer-events: none; + border-radius: inherit; } -.overview-stat:hover { - transform: translateY(-2px); + +.collapse__header:hover::before { + opacity: 1; +} + +.collapse__header:hover { border-color: var(--color-brand); - box-shadow: var(--elevation-hover-2); + background: linear-gradient( + 135deg, + var(--color-surface-hover) 0%, + var(--color-bg-tertiary) 100% + ); } -.overview-stat:hover::before { - opacity: 1; + +.collapse.expanded .collapse__header { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border-bottom-color: transparent; } -.overview-stat__icon { - width: 1.25rem; - height: 1.25rem; - color: var(--color-text-secondary); - flex-shrink: 0; - transition: color 0.2s ease; + +/* ========================================================================== + Collapse Icon + ========================================================================== */ + +.collapse__icon-wrapper { + shrink: 0; display: flex; align-items: center; justify-content: center; + width: 2rem; + height: 2rem; + border-radius: 0.5rem; + background: rgba(var(--color-brand-rgb), 0.1); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } -.overview-stat__icon svg { - width: 100%; - height: 100%; - display: block; -} -.overview-stat:hover .overview-stat__icon { - color: var(--color-brand); + +.collapse__header:hover .collapse__icon-wrapper { + background: rgba(var(--color-brand-rgb), 0.15); + transform: scale(1.05); } -.overview-stat__content { - display: flex; - flex-direction: column; - gap: 0.125rem; - min-width: 0; - flex: 1; + +.collapse__icon { + width: 1.25rem; + height: 1.25rem; + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); + stroke: var(--color-brand); + stroke-width: 2.5; + filter: drop-shadow(0 1px 2px rgba(var(--color-brand-rgb), 0.3)); } -.overview-stat__label { - font-size: 0.75rem; - font-weight: 500; - color: var(--color-text-tertiary); - text-transform: uppercase; - letter-spacing: 0.025em; - line-height: 1; + +.collapse.expanded .collapse__icon { + transform: rotate(90deg); } -.overview-stat__value { - font-size: 1rem; + +/* ========================================================================== + Collapse Content + ========================================================================== */ + +.collapse__content-wrapper { + flex: 1; + min-width: 0; +} + +.collapse__title { + margin: 0 0 0.25rem 0; + font-family: var(--font-family-brand); + font-size: 1.125rem; font-weight: 600; + line-height: 1.4; color: var(--color-text-primary); - line-height: 1.2; - word-break: break-word; -} -.overview-stat--primary { - background: linear-gradient(135deg, var(--color-brand), var(--color-accent)); - color: var(--color-text-inverse); - border-color: transparent; -} -.overview-stat--primary .overview-stat__icon, -.overview-stat--primary .overview-stat__label, -.overview-stat--primary .overview-stat__value { - color: currentColor; -} -.overview-stat--primary .overview-stat__label { - opacity: 0.8; -} -.overview-stat--primary:hover { - transform: translateY(-3px); - box-shadow: 0 8px 20px rgba(var(--color-brand-rgb), 0.25), - 0 4px 8px rgba(0, 0, 0, 0.1); + transition: all 0.2s ease; } -.overview-description { - padding: 1rem 1.25rem; - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - border-left: 3px solid var(--color-brand); + +.collapse__header:hover .collapse__title { + color: var(--color-brand); + transform: translateX(2px); } -.overview-description p { + +.collapse__description { margin: 0; - color: var(--color-text-secondary); - line-height: 1.6; font-size: 0.875rem; + line-height: 1.5; + color: var(--color-text-secondary); + transition: color 0.2s ease; } -.overview-documentation { - margin-top: 0.5rem; -} -.overview-documentation__title { - font-size: 1rem; - font-weight: 600; + +.collapse__header:hover .collapse__description { color: var(--color-text-primary); - margin: 0 0 1rem 0; -} -.overview-documentation__grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 0.75rem; - margin-top: 1.5rem; } -.overview-doc-link { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.875rem 1rem; + +/* ========================================================================== + Collapse Body (Collapsible Content) + ========================================================================== */ + +.collapse__body { background: var(--color-surface); border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - text-decoration: none; - transition: background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease, - box-shadow 0.2s ease; - position: relative; - overflow: hidden; -} -.overview-doc-link::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(var(--color-brand-rgb), 0.03); + border-top: none; + border-bottom-left-radius: 1rem; + border-bottom-right-radius: 1rem; + + /* Height-based collapse (consistent with all components) */ + max-height: 0; opacity: 0; - transition: opacity 0.2s ease; + overflow: hidden; + + /* Configure collapse behavior via CSS custom properties */ + --collapse-height-collapsed: 0; + --collapse-height-expanded: 2000px; + --collapse-opacity-collapsed: 0; + --collapse-opacity-expanded: 1; + --collapse-overflow-collapsed: hidden; + --collapse-overflow-expanded: visible; + --collapse-padding-collapsed: 0; + --collapse-padding-expanded: 1.5rem; + /* ✅ FIXED: Use animation tokens */ + --collapse-timing: var(--timing-medium); + --collapse-easing: var(--easing-standard); } -.overview-doc-link:hover { - transform: translateY(-2px); + +/* ✅ MIGRATED: Class-based to data-attribute system */ + +.collapse[data-collapse-state="expanded"] .collapse__body, +.collapse.expanded .collapse__body { border-color: var(--color-brand); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); -} -.overview-doc-link:hover::before { - opacity: 1; } -.overview-doc-link__icon { - width: 1.125rem; - height: 1.125rem; - color: var(--color-text-secondary); - flex-shrink: 0; - transition: color 0.2s ease; - display: flex; - align-items: center; - justify-content: center; + +.collapse__body-content { + /* ✅ FIXED: Use animation tokens */ + transition: transform var(--timing-medium) var(--easing-standard); + transform: translateY(-10px); } -.overview-doc-link__icon svg { - width: 100%; - height: 100%; - display: block; + +/* ✅ MIGRATED: Support both class-based and data-attribute systems */ + +.collapse[data-collapse-state="expanded"] .collapse__body-content, +.collapse.expanded .collapse__body-content { + transform: translateY(0); } -.overview-doc-link:hover .overview-doc-link__icon { - color: var(--color-brand); + +/* Enhanced content styling */ + +.collapse__body-content > *:first-child { + margin-top: 0; } -.overview-doc-link__content { - display: flex; - flex-direction: column; - gap: 0.125rem; - flex: 1; - min-width: 0; + +.collapse__body-content > *:last-child { + margin-bottom: 0; } -.overview-doc-link__title { - font-size: 0.875rem; - font-weight: 500; + +.collapse__body-content p { + line-height: 1.6; color: var(--color-text-primary); - line-height: 1.3; - transition: color 0.2s ease; + margin-bottom: 1rem; } -.overview-doc-link:hover .overview-doc-link__title { + +.collapse__body-content code { + background: rgba(var(--color-brand-rgb), 0.1); + border-radius: 0.375rem; + padding: 0.125rem 0.375rem; + font-size: 0.875rem; + font-family: var(--font-family-mono); color: var(--color-brand); } -.overview-doc-link__description { - font-size: 0.75rem; - color: var(--color-text-tertiary); - line-height: 1.4; + +.collapse__body-content pre { + background: var(--color-bg-tertiary); + border-radius: 0.5rem; + padding: 1rem; + margin: 1rem 0; + overflow-x: auto; + border: 1px solid var(--color-border-primary); } -.overview-doc-link__arrow { - width: 1rem; - height: 1rem; - color: var(--color-text-tertiary); - flex-shrink: 0; - transition: color 0.2s ease, - transform 0.2s ease; - display: flex; - align-items: center; - justify-content: center; + +/* ========================================================================== + Status Variants + ========================================================================== */ + +/* Info variant */ + +.collapse--info .collapse__header { + background: linear-gradient( + 135deg, + rgba(59, 130, 246, 0.05) 0%, + rgba(59, 130, 246, 0.02) 100% + ); + border-color: rgba(59, 130, 246, 0.2); } -.overview-doc-link__arrow svg { - width: 100%; - height: 100%; - display: block; + +.collapse--info .collapse__icon-wrapper { + background: rgba(59, 130, 246, 0.1); } -.overview-doc-link:hover .overview-doc-link__arrow { - color: var(--color-brand); - transform: translateX(2px) translateY(-2px); + +.collapse--info .collapse__icon { + stroke: #3b82f6; } -@media (max-width: 768px) { - .overview-stats { - flex-direction: column; - gap: 0.5rem; - } - .overview-stat { - min-width: unset; - } - .overview-documentation__grid { - grid-template-columns: 1fr; - } - .overview-title { - font-size: 1.5rem; - } + +.collapse--info .collapse__header:hover .collapse__title { + color: #1d4ed8; } -@media (max-width: 480px) { - .overview-stat { - gap: 0.5rem; - padding: 0.625rem 0.75rem; - min-height: 50px; - } - .overview-stat__icon { - width: 1rem; - height: 1rem; - } - .overview-doc-link { - gap: 0.5rem; - padding: 0.75rem; - } + +/* Warning variant */ + +.collapse--warning .collapse__header { + background: linear-gradient( + 135deg, + rgba(245, 158, 11, 0.05) 0%, + rgba(245, 158, 11, 0.02) 100% + ); + border-color: rgba(245, 158, 11, 0.2); } -.openapi-overview:has(.overview-documentation) { - padding-bottom: 2rem; + +.collapse--warning .collapse__icon-wrapper { + background: rgba(245, 158, 11, 0.1); } -.openapi-overview:has(.overview-documentation) .overview-stats { - margin-bottom: 2rem; + +.collapse--warning .collapse__icon { + stroke: #f59e0b; } -.overview-stats:has(.overview-stat:nth-child(4)) { - grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); + +.collapse--warning .collapse__header:hover .collapse__title { + color: #d97706; } -.overview-stats:has(.overview-stat:nth-child(3)) { - grid-template-columns: repeat(3, 1fr); + +/* Danger variant */ + +.collapse--danger .collapse__header { + background: linear-gradient( + 135deg, + rgba(239, 68, 68, 0.05) 0%, + rgba(239, 68, 68, 0.02) 100% + ); + border-color: rgba(239, 68, 68, 0.2); } -.overview-stats:has(.overview-stat:nth-child(2)) { - grid-template-columns: repeat(2, 1fr); + +.collapse--danger .collapse__icon-wrapper { + background: rgba(239, 68, 68, 0.1); } -.openapi-overview:has(.overview-documentation) .overview-stat:hover { - transform: translateY(-3px); - box-shadow: var(--elevation-hover-4); + +.collapse--danger .collapse__icon { + stroke: #ef4444; } -.openapi-overview:has(.overview-stats) .overview-documentation { - border-top: 1px solid var(--color-border-primary); - padding-top: 1.5rem; - margin-top: 1.5rem; + +.collapse--danger .collapse__header:hover .collapse__title { + color: #dc2626; } -.overview-stats:has(.overview-stat:only-child) .overview-stat { - max-width: 300px; - margin: 0 auto; + +/* Success variant */ + +.collapse--success .collapse__header { + background: linear-gradient( + 135deg, + rgba(34, 197, 94, 0.05) 0%, + rgba(34, 197, 94, 0.02) 100% + ); + border-color: rgba(34, 197, 94, 0.2); } -[data-api-type="REST"] .overview-stat--secondary { - background: linear-gradient(135deg, rgba(var(--color-info-rgb), 0.1), rgba(var(--color-security-rgb), 0.1)); - border-color: rgba(var(--color-info-rgb), 0.2); + +.collapse--success .collapse__icon-wrapper { + background: rgba(34, 197, 94, 0.1); } -[data-api-type="GraphQL"] .overview-stat--secondary { - background: linear-gradient(135deg, rgba(var(--color-danger-rgb), 0.1), rgba(var(--color-warning-rgb), 0.1)); - border-color: rgba(var(--color-danger-rgb), 0.2); + +.collapse--success .collapse__icon { + stroke: #22c55e; } -[data-maturity="stable"] .overview-stat--accent { - background: linear-gradient(135deg, rgba(var(--color-success-rgb), 0.1), rgba(var(--color-success-rgb), 0.1)); - border-color: rgba(var(--color-success-rgb), 0.2); + +.collapse--success .collapse__header:hover .collapse__title { + color: #15803d; } -[data-maturity="beta"] .overview-stat--accent { - background: linear-gradient(135deg, rgba(var(--color-warning-rgb), 0.1), rgba(var(--color-warning-rgb), 0.1)); - border-color: rgba(var(--color-warning-rgb), 0.2); + +/* ========================================================================== + Animations + ========================================================================== */ + +@keyframes collapse-enter { + 0% { + opacity: 0; + transform: translateY(10px) scale(0.98); + } + 100% { + opacity: 1; + transform: translateY(0) scale(1); + } } -[data-maturity="alpha"] .overview-stat--warning { - background: linear-gradient(135deg, rgba(var(--color-danger-rgb), 0.1), rgba(var(--color-danger-rgb), 0.1)); - border-color: rgba(var(--color-danger-rgb), 0.2); + +/* ========================================================================== + Responsive Design + ========================================================================== */ + +@media (max-width: 768px) { + .collapse { + margin: 1rem 0; + border-radius: 0.75rem; + } + + .collapse__header { + padding: 1rem; + border-radius: 0.75rem; + gap: 0.75rem; + } + + .collapse.expanded .collapse__body { + padding: 1rem; + } + + .collapse__title { + font-size: 1rem; + } + + .collapse__description { + font-size: 0.8125rem; + } + + .collapse__icon-wrapper { + width: 1.75rem; + height: 1.75rem; + } + + .collapse__icon { + width: 1rem; + height: 1rem; + } } -.openapi-servers { - padding: 2rem 0; + +/* ========================================================================== + Dark Mode Support + ========================================================================== */ + +@media (prefers-color-scheme: dark) { + .collapse__body-content code { + background: rgba(255, 255, 255, 0.1); + } } -.servers-list { - display: flex; - flex-direction: column; - gap: 1.5rem; + +/* ✅ DATA-ATTRIBUTE INTEGRATION + * ======================================================================= + * Integration with the Universal Component State Management System + * This allows collapse components to work with both class-based legacy + * and modern data-attribute approaches + */ + +/* Data-attribute collapsed state */ + +.collapse[data-collapse-state="collapsed"] .collapse__body, +.collapse__body[data-collapse-state="collapsed"] { + max-height: var(--collapse-height-collapsed); + opacity: var(--collapse-opacity-collapsed); + overflow: hidden; + padding: var(--collapse-padding-collapsed); + transition: + max-height var(--collapse-timing) var(--collapse-easing), + opacity var(--collapse-timing) var(--collapse-easing), + padding var(--collapse-timing) var(--collapse-easing); } -.server-item { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 1rem; - padding: 2rem; - transition: background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease, - box-shadow 0.2s ease; + +/* Data-attribute transitioning state */ + +.collapse[data-collapse-state="transitioning"] .collapse__body { + overflow: hidden; /* Prevent content spillage during animation */ + pointer-events: none; /* Prevent interaction during transition */ } -.server-item:hover { - border-color: var(--color-brand); - box-shadow: 0 4px 16px rgba(var(--color-brand-rgb), 0.1); + +/* Data-attribute expanded state */ + +.collapse[data-collapse-state="expanded"] .collapse__body, +.collapse__body[data-collapse-state="expanded"] { + max-height: var(--collapse-height-expanded); + opacity: var(--collapse-opacity-expanded); + overflow: var(--collapse-overflow-expanded); + padding: var(--collapse-padding-expanded); + transition: + max-height var(--collapse-timing) var(--collapse-easing), + opacity var(--collapse-timing) var(--collapse-easing), + padding var(--collapse-timing) var(--collapse-easing); } -.server-url { - font-family: var(--font-family-mono); - font-size: 1.125rem; - font-weight: 600; - color: var(--color-brand); - margin-bottom: 1rem; - word-break: break-all; + +/* Icon rotation for data-attribute system */ + +.collapse[data-collapse-state="expanded"] .collapse__icon { + transform: rotate(180deg); } -.server-description { - font-size: 1rem; - line-height: 1.6; - color: var(--color-text-secondary); - margin-bottom: 1.5rem; + +/* Enhanced accessibility for data-attribute system */ + +.collapse[data-collapse-state] .collapse__header { + /* Ensure proper ARIA attributes are communicated visually */ } -.server-variables { - margin-top: 1.5rem; + +.collapse[data-collapse-state="expanded"] .collapse__header[aria-expanded="true"] { + /* Visual confirmation of expanded state */ + border-color: var(--color-brand); } -.server-variables h4 { - margin: 0 0 1rem 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); + +/* Migration helper - components can use either system */ + +.collapse:not([data-collapse-state]) { + /* Legacy class-based system continues to work */ } -.variables-list { + +/* Navigation Components */ + +/* OpenAPI Components */ + +/* OpenAPI Base Container & Section Headers */ + +/* ========================================================================== + OpenAPI Base Container + ========================================================================== */ + +.openapi-spec { + max-width: none; + margin: 0; + padding: 0; +} + +.openapi-content { display: flex; flex-direction: column; - gap: 1rem; -} -.variable-item { - background: var(--color-bg-secondary); - padding: 1rem; - border-radius: 0.5rem; - border: 1px solid var(--color-border-primary); -} -.variable-name { - font-family: var(--font-family-mono); - font-weight: 600; - color: var(--color-brand); - margin-bottom: 0.5rem; -} -.variable-description { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin-bottom: 0.5rem; + gap: 3rem; } -.variable-default { - font-size: 0.875rem; - color: var(--color-text-primary); + +/* ========================================================================== + Section Headers + ========================================================================== */ + +.section-header { + margin-bottom: 2rem; + text-align: center; } -.variable-default strong { + +.section-title { + font-family: var(--font-family-brand); + font-size: 2.5rem; + font-weight: 700; color: var(--color-text-primary); + margin: 0 0 0.5rem 0; + background: linear-gradient(135deg, var(--color-brand), var(--color-accent)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; } -.variable-default code { - font-family: var(--font-family-mono); - background: rgba(var(--color-brand-rgb), 0.1); - padding: 0.125rem 0.25rem; - border-radius: 0.125rem; - color: var(--color-brand); + +.section-description { + font-size: 1.125rem; + color: var(--color-text-secondary); + margin: 0; + max-width: 600px; + margin-left: auto; + margin-right: auto; } -.endpoints-nav { - margin-bottom: 2rem; - padding: 1.5rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 1rem; + +/* OpenAPI Components */ + +/* ========================================================================== + Components Section + ========================================================================== */ + +.openapi-components { + padding: 2rem 0; } -.endpoints-nav__section { - margin-bottom: 1.5rem; + +.components-section { + margin-bottom: 3rem; } -.endpoints-nav__section:last-child { + +.components-section:last-child { margin-bottom: 0; } -.endpoints-nav__header { + +.components-section-title { + font-size: 1.5rem; font-weight: 600; color: var(--color-text-primary); - margin-bottom: 1rem; + margin: 0 0 1.5rem 0; + padding-bottom: 0.5rem; + border-bottom: 2px solid var(--color-border-primary); } -.endpoints-nav__tags, -.endpoints-nav__methods { + +.components-list { display: flex; - flex-wrap: wrap; - gap: 0.5rem; -} -.endpoints-nav__search { - position: relative; + flex-direction: column; + gap: 1rem; } -.endpoint-search { - width: 100%; - padding: 0.75rem 2rem 0.75rem 0.75rem; - font-size: 0.875rem; - border-radius: 0.5rem; - border: 1px solid var(--color-border-primary); + +.component-item { background: var(--color-surface); - color: var(--color-text-primary); - transition: background-color 0.2s ease, + border: 1px solid var(--color-border-primary); + border-radius: 0.75rem; + overflow: hidden; + transition: + background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, + transform 0.2s ease, box-shadow 0.2s ease; } -.endpoint-search:focus { - outline: none; + +.component-item:hover { border-color: var(--color-brand); - box-shadow: 0 0 0 2px rgba(var(--color-brand-rgb), 0.2); + box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.1); } -.search-icon { - position: absolute; - right: 0.5rem; - top: 50%; - transform: translateY(-50%); - width: 1rem; - height: 1rem; - color: var(--color-text-secondary); -} -.tag-filter, -.method-filter { - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 2rem; - padding: 0.5rem 1rem; - font-size: 0.875rem; - font-weight: 500; - color: var(--color-text-secondary); + +.component-header { + padding: 1rem 1.5rem; + display: flex; + align-items: center; + gap: 1rem; cursor: pointer; - transition: background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; + transition: background-color 0.2s ease; } -.tag-filter:hover, -.tag-filter--active { - background: var(--color-brand); - border-color: var(--color-brand); - color: var(--color-text-inverse); + +.component-header:hover { + background: var(--color-bg-secondary); } -.method-filter:hover, -.method-filter--active { - border-color: var(--color-brand); + +.component-icon { + width: 1.5rem; + height: 1.5rem; color: var(--color-brand); + shrink: 0; } -.method-filter--get { - border-color: var(--http-get-bg); - color: var(--http-get-bg); -} -.method-filter--post { - border-color: var(--http-post-bg); - color: var(--http-post-bg); + +.component-name { + flex: 1; + min-width: 0; } -.method-filter--put { - border-color: var(--http-put-bg); - color: var(--http-put-bg); + +.component-name h4 { + margin: 0 0 0.25rem 0; + font-size: 1rem; + font-weight: 600; + color: var(--color-text-primary); } -.method-filter--patch { - border-color: var(--http-patch-bg); - color: var(--http-patch-bg); + +.component-type { + display: flex; + align-items: center; + gap: 0.375rem; } -.method-filter--delete { - border-color: var(--http-delete-bg); - color: var(--http-delete-bg); + +.component-toggle { + width: 1.5rem; + height: 1.5rem; + color: var(--color-text-secondary); + shrink: 0; } -.method-filter--get.method-filter--active { - background: var(--http-get-bg); - border-color: var(--http-get-bg); - color: var(--http-get-text); + +.component-toggle .chevron { + width: 1rem; + height: 1rem; + transition: transform var(--timing-fast) var(--easing-standard); } -.method-filter--post.method-filter--active { - background: var(--http-post-bg); - border-color: var(--http-post-bg); - color: var(--http-post-text); + +.component-header[aria-expanded="true"] .chevron { + transform: rotate(90deg); } -.method-filter--put.method-filter--active { - background: var(--http-put-bg); - border-color: var(--http-put-bg); - color: var(--http-put-text); + +.component-details { + border-top: 1px solid var(--color-border-primary); + + /* Height-based collapse (consistent with all components) */ + max-height: 0; + opacity: 0; + overflow: hidden; + padding: 0; + + /* Configure collapse behavior */ + --collapse-height-collapsed: 0; + --collapse-height-expanded: 3000px; /* Large for complex schemas */ + --collapse-opacity-collapsed: 0; + --collapse-opacity-expanded: 1; + --collapse-overflow-collapsed: hidden; + --collapse-overflow-expanded: visible; + --collapse-padding-collapsed: 0; + --collapse-padding-expanded: 1.5rem; + --collapse-timing: 0.3s; + --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); } -.method-filter--patch.method-filter--active { - background: var(--http-patch-bg); - border-color: var(--http-patch-bg); - color: var(--http-patch-text); + +/* Remove old class-based approach - component-states.css handles this */ + +/* Legacy styles removed - component-states.css now handles all collapse behavior */ + +@keyframes schema-expand { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } } -.method-filter--delete.method-filter--active { - background: var(--http-delete-bg); - border-color: var(--http-delete-bg); - color: var(--http-delete-text); + +/* ========================================================================== + :has() Content-Aware Components Enhancements + ========================================================================== */ + +/* Components section adapts based on content type and count */ + +.openapi-components:has(.components-section[data-section-type="schemas"]) { + --primary-section: schemas; } -.openapi-sidebar-section { - margin-bottom: 2rem; - padding-bottom: 1.5rem; - border-bottom: 1px solid var(--color-border-light); + +.openapi-components:has(.components-section[data-section-type="parameters"]) { + --secondary-section: parameters; } -.openapi-sidebar-section:last-child { - border-bottom: none; + +/* Enhanced styling for sections with many items */ + +.components-section:has([data-item-count^="1"]) .components-section-title::after, +.components-section:has([data-item-count^="2"]) .components-section-title::after, +.components-section:has([data-item-count^="3"]) .components-section-title::after { + content: " (" attr(data-item-count) ")"; + color: var(--color-text-secondary); + font-size: 0.875rem; + font-weight: 400; } -.openapi-sidebar-header { - margin-bottom: 1rem; + +/* ========================================================================== + Enhanced Schema Expansion States with :has() + ========================================================================== */ + +/* Component items with expanded content */ + +.component-item:has(.component-details.expanded) { + border-color: var(--color-brand); + box-shadow: 0 4px 16px rgba(var(--color-brand-rgb), 0.15); + background: linear-gradient( + 135deg, + var(--color-surface) 0%, + rgba(var(--color-brand-rgb), 0.02) 100% + ); } -.openapi-sidebar-title { - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0 0 0.25rem 0; - line-height: 1.4; + +.component-item:has(.component-details.expanded) .component-header { + background: linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.05) 0%, + rgba(var(--color-brand-rgb), 0.02) 100% + ); + border-bottom: 1px solid rgba(var(--color-brand-rgb), 0.1); } -.openapi-sidebar-version { - display: inline-block; - padding: 0.125rem 0.5rem; - background: var(--color-brand-primary); - color: white; - font-size: 0.75rem; - font-weight: 500; - border-radius: 0.375rem; - margin-left: 0.5rem; + +/* Enhanced chevron rotation for expanded state */ + +.component-item:has(.component-details.expanded) .chevron { + transform: rotate(90deg); + color: var(--color-brand); } -.openapi-sidebar-description { - font-size: 0.875rem; - color: var(--color-text-secondary); - line-height: 1.5; - margin: 0.5rem 0 0 0; + +/* Schema-specific expanded state styling */ + +.component-item[data-component="component-schema"]:has(.component-details.expanded) { + border-left: 4px solid var(--color-brand); } -.openapi-sidebar-nav { - list-style: none; - margin: 0; - padding: 0; + +.component-item[data-component="component-schema"]:has(.component-details.expanded) .component-name h4 { + color: var(--color-brand); + font-weight: 700; } -.openapi-sidebar-nav-item { - margin-bottom: 0.25rem; + +/* Complex schemas (with many properties) get enhanced styling when expanded */ + +.component-item[data-property-count^="1"]:has(.component-details.expanded), +.component-item[data-property-count^="2"]:has(.component-details.expanded), +.component-item[data-property-count^="3"]:has(.component-details.expanded) { + border-left: 4px solid var(--color-accent); } -.openapi-sidebar-link { - display: flex; - align-items: center; - padding: 0.5rem 0.75rem; - color: var(--color-text-secondary); - text-decoration: none; - border-radius: 0.5rem; - font-size: 0.875rem; - font-weight: 500; - transition: background-color 0.15s ease, - border-color 0.15s ease, - color 0.15s ease, - transform 0.15s ease, - box-shadow 0.15s ease; - border: 1px solid transparent; + +.component-item[data-property-count^="1"]:has(.component-details.expanded) .component-name h4, +.component-item[data-property-count^="2"]:has(.component-details.expanded) .component-name h4, +.component-item[data-property-count^="3"]:has(.component-details.expanded) .component-name h4 { + color: var(--color-accent); } -.openapi-sidebar-link:hover { - color: var(--color-text-primary); - background: var(--color-surface-hover); + +/* Required schemas get special highlighting when expanded */ + +.component-item[data-has-required="true"]:has(.component-details.expanded) .component-header { + background: linear-gradient( + 135deg, + rgba(var(--color-warning-rgb), 0.08) 0%, + rgba(var(--color-warning-rgb), 0.03) 100% + ); } -.openapi-sidebar-link--active { - color: var(--color-brand-primary); - background: var(--color-brand-background); - border-color: var(--color-brand-border); - font-weight: 600; + +/* Different schema types get unique expanded styling */ + +.component-item[data-schema-type="array"]:has(.component-details.expanded) { + border-left-color: var(--color-success); } -.openapi-sidebar-link-text { - flex: 1; + +.component-item[data-schema-type="object"]:has(.component-details.expanded) { + border-left-color: var(--color-brand); } -.openapi-sidebar-section-header { - margin-bottom: 1rem; + +.component-item[data-schema-type="string"]:has(.component-details.expanded) { + border-left-color: var(--color-info); } -.openapi-sidebar-section-header h4 { - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); - margin: 0; - text-transform: uppercase; - letter-spacing: 0.05em; + +/* Schema-specific enhancements */ + +.component-item[data-component="component-schema"]:has([data-has-properties="true"]) { + border-left: 3px solid var(--color-brand); } -.openapi-sidebar-endpoints { - list-style: none; - margin: 0; - padding: 0; + +.component-item[data-component="component-schema"]:has([data-has-required="true"]) .component-header { + background: rgba(var(--color-accent-rgb), 0.05); } -.openapi-sidebar-tag-group { - margin-bottom: 1rem; + +.component-item[data-schema-type="object"]:has([data-property-count]) .component-name::after { + content: " (" attr(data-property-count) " properties)"; + color: var(--color-text-secondary); + font-size: 0.75rem; + font-weight: 400; } -.openapi-sidebar-tag-header { - display: flex; - align-items: center; - margin-bottom: 0.5rem; + +.component-item[data-schema-type="array"] .component-header { + background: linear-gradient(135deg, rgba(var(--color-info-rgb), 0.05), rgba(var(--color-accent-rgb), 0.05)); } -.openapi-sidebar-tag-toggle { - display: flex; - align-items: center; - justify-content: center; - width: 1.25rem; - height: 1.25rem; - padding: 0; - margin-right: 0.5rem; - background: none; - border: none; - color: var(--color-text-secondary); - cursor: pointer; - border-radius: 0.25rem; - transition: background-color 0.15s ease, - color 0.15s ease, - transform 0.15s ease; + +.component-item[data-schema-type="string"] .component-icon { + color: var(--color-accent); } -.openapi-sidebar-tag-toggle:hover { - color: var(--color-text-primary); - background: var(--color-surface-hover); + +/* Parameter-specific enhancements */ + +.component-item[data-component="component-parameter"][data-param-required="true"] { + border-left: 3px solid var(--color-accent); } -.openapi-sidebar-chevron { - width: 0.875rem; - height: 0.875rem; - transition: transform 0.15s ease; + +.component-item[data-component="component-parameter"][data-param-required="true"] .component-header { + background: rgba(var(--color-accent-rgb), 0.08); } -.openapi-sidebar-tag-toggle--expanded .openapi-sidebar-chevron { - transform: rotate(90deg); + +.component-item[data-param-in="path"] .component-header { + background: linear-gradient(135deg, rgba(var(--color-danger-rgb), 0.05), rgba(var(--color-danger-rgb), 0.05)); } -.openapi-sidebar-tag-name { - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); - text-transform: capitalize; + +.component-item[data-param-in="query"] .component-header { + background: linear-gradient(135deg, rgba(var(--color-info-rgb), 0.05), rgba(var(--color-info-rgb), 0.05)); } -.openapi-sidebar-endpoints-list { - list-style: none; - margin: 0; - padding: 0; - overflow: hidden; - transition: max-height 0.15s ease, opacity 0.15s ease; + +.component-item[data-param-in="header"] .component-header { + background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.05), rgba(var(--color-accent-rgb), 0.05)); } -.openapi-sidebar-endpoint { - margin-bottom: 0.125rem; + +/* Enhanced hover effects based on content */ + +.component-item:has([data-has-description="true"]):hover { + transform: translateY(-2px); + box-shadow: + 0 4px 12px rgba(var(--color-brand-rgb), 0.15), + 0 2px 4px rgba(0, 0, 0, 0.08); } -.openapi-sidebar-endpoint-link { - display: flex; - align-items: flex-start; - padding: 0.5rem 0.75rem; - color: var(--color-text-secondary); - text-decoration: none; - border-radius: 0.375rem; - font-size: 0.8125rem; - transition: background-color 0.15s ease, - border-color 0.15s ease, - color 0.15s ease, - transform 0.15s ease; - border: 1px solid transparent; - margin-left: 1.75rem; - gap: 0.5rem; + +/* Responsive adaptations */ + +.components-section:has(.component-item:nth-child(n+10)) { + --large-section: true; } -.openapi-sidebar-endpoint-link:hover { - color: var(--color-text-primary); - background: var(--color-surface-hover); + +.components-section:has(.component-item:nth-child(n+10)) .components-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 1rem; } -.openapi-sidebar-endpoint-link--active { - color: var(--color-brand-primary); - background: var(--color-brand-background); - border-color: var(--color-brand-border); - font-weight: 500; + +/* Section with only one item gets special treatment */ + +.components-section:has(.component-item:only-child) .component-item { + max-width: 600px; + margin: 0 auto; } -.openapi-sidebar-method { - display: inline-block; - padding: 0.125rem 0.375rem; - font-size: 0.6875rem; - font-weight: 600; - text-transform: uppercase; - border-radius: 0.25rem; - min-width: 3rem; - text-align: center; - flex-shrink: 0; - letter-spacing: 0.025em; + +/* Enhanced focus states for accessibility */ + +.component-item:has(.component-header:focus-visible) { + outline: 2px solid var(--color-brand); + outline-offset: 2px; } -.openapi-sidebar-method--get { - background: var(--http-get-bg); - color: var(--http-get-text); + +/* OpenAPI Endpoints */ + +/* ========================================================================== + Endpoints Section + ========================================================================== */ + +.openapi-endpoints { + padding: 2rem 0; } -.openapi-sidebar-method--post { - background: var(--http-post-bg); - color: var(--http-post-text); + +/* Endpoint Groups */ + +.endpoint-group { + margin-bottom: 2rem; + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-radius: 0.75rem; + overflow: hidden; } -.openapi-sidebar-method--put { - background: var(--http-put-bg); - color: var(--http-put-text); + +.endpoint-group-header { + padding: 1rem 1.5rem; + background: var(--color-bg-secondary); + border-bottom: 1px solid var(--color-border-primary); + cursor: pointer; + transition: + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); + display: flex; + align-items: center; + justify-content: space-between; } -.openapi-sidebar-method--patch { - background: var(--http-patch-bg); - color: var(--http-patch-text); + +.endpoint-group-header:hover { + background: var(--color-bg-tertiary); } -.openapi-sidebar-method--delete { - background: var(--http-delete-bg); - color: var(--http-delete-text); + +.endpoint-group-title { + display: flex; + align-items: center; + gap: 0.75rem; } -.openapi-sidebar-method--head, -.openapi-sidebar-method--options { - background: var(--http-head-bg); - color: var(--http-head-text); + +.endpoint-group-title h3 { + margin: 0; + font-size: 1.25rem; + font-weight: 600; + color: var(--color-text-primary); } -.openapi-sidebar-endpoint-path { - flex: 1; + +.endpoint-count { + background: rgba(var(--color-brand-rgb), 0.1); + color: var(--color-brand); + padding: 0.25rem 0.75rem; + border-radius: 1rem; + font-size: 0.8rem; font-weight: 500; - color: var(--color-text-primary); - line-height: 1.3; - word-break: break-all; } -.openapi-sidebar-endpoint-summary { - display: block; - font-size: 0.75rem; - color: var(--color-text-tertiary); - line-height: 1.3; - margin-top: 0.125rem; - font-weight: 400; + +.endpoint-group-toggle { + display: flex; + align-items: center; + justify-content: center; + width: 1.5rem; + height: 1.5rem; } -@media (max-width: 768px) { - .openapi-sidebar-section { - margin-bottom: 1.5rem; - padding-bottom: 1rem; - } - .openapi-sidebar-title { - font-size: 1rem; - } - .openapi-sidebar-endpoint-link { - margin-left: 1.5rem; - padding: 0.375rem 0.5rem; - } - .openapi-sidebar-method { - min-width: 2.5rem; - font-size: 0.625rem; - } + +.endpoint-group-toggle .chevron { + width: 1rem; + height: 1rem; + transition: transform var(--timing-fast) var(--easing-standard); } -@media (prefers-color-scheme: dark) { - .openapi-sidebar-version { - background: var(--color-brand-primary-dark, var(--color-brand-primary)); - } + +.endpoint-group-header[aria-expanded="true"] .chevron { + transform: rotate(90deg); } -.openapi-sidebar-link:focus-visible, -.openapi-sidebar-endpoint-link:focus-visible, -.openapi-sidebar-tag-toggle:focus-visible { - outline: 2px solid var(--color-brand-primary); - outline-offset: 2px; + +.endpoint-group-content { + /* Use height-based collapse (consistent with response-details) */ + max-height: 0; + opacity: 0; + overflow: hidden; + padding: 0; + + /* Configure collapse behavior */ + --collapse-height-collapsed: 0; + --collapse-height-expanded: 3000px; /* Larger for endpoint lists */ + --collapse-opacity-collapsed: 0; + --collapse-opacity-expanded: 1; + --collapse-overflow-collapsed: hidden; + --collapse-overflow-expanded: visible; + --collapse-padding-collapsed: 0; + --collapse-padding-expanded: 0; + --collapse-timing: 0.3s; + --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); } -html { - scroll-behavior: smooth; + +/* Remove old class-based approach - component-states.css handles this */ + +/* Endpoint Items within Groups */ + +.endpoint-item { + background: var(--color-surface); + border: none; + border-bottom: 1px solid var(--color-border-primary); + border-radius: 0; + margin-bottom: 0; + overflow: hidden; + transition: + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); } -@media (prefers-reduced-motion: reduce) { - html { - scroll-behavior: auto; - } - .openapi-sidebar-chevron, - .openapi-sidebar-endpoints-list { - transition: none; - } + +.endpoint-item:last-child { + border-bottom: none; } -.api-overview .api-endpoint-groups { - margin: 2rem 0; + +.endpoint-item:hover { + background: var(--color-bg-secondary); } -.endpoint-groups-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: 1.5rem; - margin-top: 1.5rem; + +/* Endpoint Header */ + +.endpoint-header { + padding: 0.75rem 1rem; + display: flex; + align-items: center; + gap: 0.75rem; + cursor: pointer; + transition: + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); } -.card--endpoint-group { - padding: 1.5rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - transition: background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease, - box-shadow 0.2s ease; + +/* Keyboard focus visibility */ + +.endpoint-group-header:focus-visible, +.endpoint-header:focus-visible { + outline: 2px solid var(--color-brand); + outline-offset: 2px; + border-radius: 0.5rem; } -.card--endpoint-group:hover { - border-color: var(--color-brand-primary); - box-shadow: var(--elevation-hover-2); + +.endpoint-header:hover { + background: var(--color-bg-secondary); } -.card--endpoint-group h3 { - margin: 0 0 0.5rem 0; - font-size: 1.125rem; - font-weight: 600; + +.endpoint-header__method { + shrink: 0; } -.card--endpoint-group h3 a { + +.endpoint-header__path { + flex: 1; + min-width: 0; +} + +.endpoint-header__summary { + flex: 2; + min-width: 0; +} + +.endpoint-header__meta { + shrink: 0; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.endpoint-header__toggle { + shrink: 0; + display: flex; + align-items: center; + justify-content: center; + width: 1.5rem; + height: 1.5rem; +} + +.endpoint-path { + font-family: var(--font-family-mono); + font-size: 0.875rem; + font-weight: 600; color: var(--color-text-primary); - text-decoration: none; } -.card--endpoint-group h3 a:hover { - color: var(--color-brand-primary); + +.endpoint-summary { + font-size: 0.875rem; + color: var(--color-text-primary); + font-weight: 500; } -.card--endpoint-group p { - margin: 0 0 1rem 0; + +.endpoint-operation-id { + font-size: 0.75rem; color: var(--color-text-secondary); - font-size: 0.875rem; - line-height: 1.5; } -.endpoint-count { + +.operation-id-label { + font-weight: 500; +} + +.endpoint-tags { + display: flex; + gap: 0.375rem; +} + +.endpoint-tag { + background: rgba(var(--color-brand-rgb), 0.1); + color: var(--color-brand); + padding: 0.125rem 0.5rem; + border-radius: 1rem; font-size: 0.75rem; - color: var(--color-text-tertiary); font-weight: 500; +} + +/* HTTP Method Badges */ + +.http-method { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.375rem 0.75rem; + border-radius: 0.375rem; + font-size: 0.75rem; + font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; + min-width: 4rem; } -.api-tag-header { - margin-bottom: 2rem; - padding-bottom: 1.5rem; - border-bottom: 1px solid var(--color-border-light); + +/* Old hex-based method colors commented out in favor of tokens per themes/milodocs/init */ + +/* .http-method--get { background: #22c55e; color: white; } +.http-method--post { background: #3b82f6; color: white; } +.http-method--put { background: #f59e0b; color: white; } +.http-method--patch { background: #8b5cf6; color: white; } +.http-method--delete { background: #ef4444; color: white; } +.http-method--head { background: #6b7280; color: white; } +.http-method--options { background: #9333ea; color: white; } */ + +.http-method--get { background: var(--http-get-bg); color: var(--http-get-text); } + +.http-method--post { background: var(--http-post-bg); color: var(--http-post-text); } + +.http-method--put { background: var(--http-put-bg); color: var(--http-put-text); } + +.http-method--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } + +.http-method--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } + +.http-method--head { background: var(--http-head-bg); color: var(--http-head-text); } + +.http-method--options { background: var(--http-options-bg); color: var(--http-options-text); } + +/* Endpoint Details */ + +.endpoint-details { + display: none; + padding: 1.5rem; + background: var(--color-surface); + border-top: 1px solid var(--color-border-primary); } -.api-tag-breadcrumb { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin-bottom: 0.5rem; + +.endpoint-details.expanded { + display: block; } -.api-tag-breadcrumb a { - color: var(--color-brand-primary); - text-decoration: none; + +.endpoint-section { + margin-bottom: 2rem; } -.api-tag-breadcrumb a:hover { - text-decoration: underline; + +.endpoint-section:last-child { + margin-bottom: 0; } -.api-tag-header h1 { - margin: 0 0 0.5rem 0; - font-size: 2rem; - font-weight: 700; + +.endpoint-section h4 { + margin: 0 0 1rem 0; + font-size: 1.125rem; + font-weight: 600; color: var(--color-text-primary); + display: flex; + align-items: center; + gap: 0.5rem; } -.api-tag-description { - margin: 0; - color: var(--color-text-secondary); + +.endpoint-description { font-size: 1rem; line-height: 1.6; + color: var(--color-text-primary); + margin-bottom: 1.5rem; } -.card--endpoint-summary { - padding: 1.25rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - margin-bottom: 1rem; - transition: background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease, - box-shadow 0.2s ease; + +/* Chevron Icon */ + +.chevron { + width: 1rem; + height: 1rem; + transition: transform var(--timing-fast) var(--easing-standard); } -.card--endpoint-summary:hover { - border-color: var(--color-brand-border); - box-shadow: var(--elevation-hover-1); + +.endpoint-header[aria-expanded="true"] .chevron { + transform: rotate(90deg); } -.endpoint-summary-header { - display: flex; - align-items: flex-start; - gap: 1rem; + +/* ========================================================================== + :has() Content-Aware Endpoints Enhancements + ========================================================================== */ + +/* API endpoint viewer adapts based on content type */ + +.openapi-spec[data-viewer-type="endpoint"]:has([data-has-parameters="true"]) { + --has-params: true; } -.endpoint-summary-info { - flex: 1; + +.openapi-spec[data-viewer-type="endpoint"]:has([data-has-request-body="true"]) { + --has-body: true; } -.endpoint-summary-info h3 { - margin: 0 0 0.5rem 0; - font-size: 1rem; - font-weight: 600; + +.openapi-spec[data-viewer-type="endpoint"]:has([data-has-responses="true"]) { + --has-responses: true; } -.endpoint-summary-info h3 a { - color: var(--color-text-primary); - text-decoration: none; - font-family: var(--font-mono, monospace); + +/* Method-specific styling enhancements */ + +.openapi-spec[data-method="GET"]:has([data-has-parameters="true"]) .api-endpoint-header { + border-left: 4px solid rgba(var(--color-info-rgb), 0.5); } -.endpoint-summary-info h3 a:hover { - color: var(--color-brand-primary); + +.openapi-spec[data-method="POST"]:has([data-has-request-body="true"]) .api-endpoint-header { + border-left: 4px solid rgba(var(--color-success-rgb), 0.5); } -.endpoint-summary-description { - margin: 0; - color: var(--color-text-secondary); - font-size: 0.875rem; - line-height: 1.5; + +.openapi-spec[data-method="PUT"]:has([data-has-request-body="true"]) .api-endpoint-header { + border-left: 4px solid rgba(var(--color-warning-rgb), 0.5); } -.api-endpoint-header { - margin-bottom: 2rem; - padding-bottom: 1.5rem; - border-bottom: 1px solid var(--color-border-light); -} -.api-endpoint-breadcrumb { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin-bottom: 1rem; -} -.api-endpoint-breadcrumb a { - color: var(--color-brand-primary); - text-decoration: none; -} -.api-endpoint-breadcrumb a:hover { - text-decoration: underline; -} -.endpoint-title-section { - margin-top: 1rem; + +.openapi-spec[data-method="DELETE"]:has([data-has-responses="true"]) .api-endpoint-header { + border-left: 4px solid rgba(var(--color-danger-rgb), 0.5); } -.endpoint-method-path { - display: flex; - align-items: center; - gap: 0.75rem; - margin-bottom: 0.75rem; + +/* Enhanced endpoint header based on content */ + +.api-endpoint-header:has([data-has-summary="true"]):has([data-has-description="true"]) { + padding: 2rem 1.5rem; + background: linear-gradient( + 135deg, + var(--color-surface) 0%, + var(--color-bg-secondary) 100% + ); } -.endpoint-path { - font-family: var(--font-mono, monospace); - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); - background: var(--color-surface-alt); - padding: 0.375rem 0.75rem; - border-radius: 0.375rem; - border: 1px solid var(--color-border-primary); + +/* Endpoint item adapts based on available sections */ + +.endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) { + --sections: comprehensive; + border: 2px solid var(--color-border-primary); + border-radius: 1rem; + background: var(--color-surface); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } -.api-endpoint-header h1 { - margin: 0 0 0.75rem 0; - font-size: 1.875rem; - font-weight: 700; - color: var(--color-text-primary); - line-height: 1.3; + +.endpoint-item:has([data-has-security="true"]) { + border-left: 3px solid var(--color-accent); } -.endpoint-description { - margin: 0; - color: var(--color-text-secondary); - font-size: 1rem; - line-height: 1.6; + +.endpoint-item:has([data-has-examples="true"]) .endpoint-details { + background: linear-gradient( + 135deg, + var(--color-surface) 0%, + rgba(var(--color-brand-rgb), 0.02) 100% + ); } -.method-badge { - display: inline-block; - padding: 0.25rem 0.75rem; + +/* Parameter count indicators */ + +.endpoint-item[data-parameter-count]:not([data-parameter-count="0"])::before { + content: attr(data-parameter-count) " params"; + position: absolute; + top: 0.5rem; + right: 0.5rem; + background: rgba(var(--color-brand-rgb), 0.1); + color: var(--color-brand); font-size: 0.75rem; - font-weight: 700; - text-transform: uppercase; - border-radius: 0.375rem; - letter-spacing: 0.025em; - flex-shrink: 0; - min-width: 4rem; - text-align: center; -} -.method-badge--get { - background: var(--http-get-bg); - color: var(--http-get-text); -} -.method-badge--post { - background: var(--http-post-bg); - color: var(--http-post-text); -} -.method-badge--put { - background: var(--http-put-bg); - color: var(--http-put-text); -} -.method-badge--patch { - background: var(--http-patch-bg); - color: var(--http-patch-text); -} -.method-badge--delete { - background: var(--http-delete-bg); - color: var(--http-delete-text); + padding: 0.25rem 0.5rem; + border-radius: 1rem; + font-weight: 500; } -.method-badge--head, -.method-badge--options { - background: var(--http-head-bg); - color: var(--http-head-text); + +/* Response count indicators */ + +.endpoint-item[data-response-count]:not([data-response-count="0"])::after { + content: attr(data-response-count) " responses"; + position: absolute; + top: 2.5rem; + right: 0.5rem; + background: rgba(var(--color-accent-rgb), 0.1); + color: var(--color-accent); + font-size: 0.75rem; + padding: 0.25rem 0.5rem; + border-radius: 1rem; + font-weight: 500; } -.page-content { - margin-top: 2rem; - padding-top: 2rem; - border-top: 1px solid var(--color-border-light); + +/* Endpoint group with many endpoints gets grid layout */ + +.endpoint-group:has(.endpoint-item:nth-child(n+6)) .endpoint-group-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + gap: 1rem; } -.page-content h2:first-child { - margin-top: 0; + +/* Enhanced hover effects for content-rich endpoints */ + +.endpoint-item:has([data-has-examples="true"]):hover { + transform: translateY(-2px); + box-shadow: + var(--elevation-hover-2), + var(--elevation-brand-subtle); } + +/* Responsive adaptations for endpoints */ + @media (max-width: 768px) { - .endpoint-groups-grid { - grid-template-columns: 1fr; - gap: 1rem; - } - .endpoint-group-card { - padding: 1rem; - } - .endpoint-summary-header { - flex-direction: column; - gap: 0.75rem; - } - .endpoint-method-path { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } - .endpoint-path { - font-size: 1rem; - word-break: break-all; + .endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) { + border-radius: 0.5rem; + margin: 0.5rem 0; } - .api-endpoint-header h1 { - font-size: 1.5rem; + + .endpoint-item[data-parameter-count]:not([data-parameter-count="0"])::before, + .endpoint-item[data-response-count]:not([data-response-count="0"])::after { + position: static; + display: inline-block; + margin: 0.25rem; } } -.api-endpoint { - container-type: inline-size; - container-name: endpoint-page; -} -.api-endpoint .endpoint-details { - display: block; + +/* Reduced motion: remove transitions for interactive rows/headers */ + +@media (prefers-reduced-motion: reduce) { + .endpoint-group-header, + .endpoint-item, + .endpoint-header { + transition: none !important; + } } -.api-endpoint-header:has(.endpoint-description) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-brand-rgb), 0.02) 100%); - border-left: 4px solid rgba(var(--color-brand-rgb), 0.3); + +/* OpenAPI Header */ + +/* ========================================================================== + OpenAPI Header + ========================================================================== */ + +.openapi-header { + background: linear-gradient( + 135deg, + var(--color-surface) 0%, + var(--color-bg-secondary) 100% + ); + border: 2px solid var(--color-border-primary); + border-radius: 1.5rem; padding: 2rem; - border-radius: 0.75rem; margin-bottom: 2rem; + position: relative; + overflow: hidden; } -.api-endpoint-header:has(.method-badge--get) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(34, 197, 94, 0.02) 100%); - border-left-color: rgba(34, 197, 94, 0.3); -} -.api-endpoint-header:has(.method-badge--post) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(59, 130, 246, 0.02) 100%); - border-left-color: rgba(59, 130, 246, 0.3); -} -.api-endpoint-header:has(.method-badge--put) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(245, 158, 11, 0.02) 100%); - border-left-color: rgba(245, 158, 11, 0.3); -} -.api-endpoint-header:has(.method-badge--delete) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(239, 68, 68, 0.02) 100%); - border-left-color: rgba(239, 68, 68, 0.3); + +.openapi-header::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 135deg, + rgba(var(--color-brand-rgb), 0.05) 0%, + transparent 50%, + rgba(var(--color-accent-rgb), 0.05) 100% + ); + pointer-events: none; } -.api-endpoint-header:has(.method-badge--patch) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(168, 85, 247, 0.02) 100%); - border-left-color: rgba(168, 85, 247, 0.3); + +.openapi-header__meta { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1rem; + position: relative; } -.api-endpoint-breadcrumb { - margin-bottom: 1.5rem; + +.openapi-header__badge { + display: inline-flex; + align-items: center; + padding: 0.5rem 1rem; + background: rgba(var(--color-brand-rgb, 59, 130, 246), 0.1); + border: 1px solid rgba(var(--color-brand-rgb, 59, 130, 246), 0.2); + border-radius: 2rem; font-size: 0.875rem; - color: var(--color-text-muted); + font-weight: 600; + color: var(--color-brand, #3b82f6); + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease; } -.api-endpoint-breadcrumb a { - color: var(--color-brand); - text-decoration: none; - transition: color 0.2s ease; + +.openapi-header__badge:hover { + background: rgba(var(--color-brand-rgb, 59, 130, 246), 0.15); + border-color: rgba(var(--color-brand-rgb, 59, 130, 246), 0.3); + transform: translateY(-1px); } -.api-endpoint-breadcrumb a:hover { - color: var(--color-brand-dark); - text-decoration: underline; + +/* Version Badge */ + +.openapi-header__badge--version { + background: rgba(var(--color-accent-rgb, 139, 92, 246), 0.1); + border-color: rgba(var(--color-accent-rgb, 139, 92, 246), 0.2); + color: var(--color-accent, #8b5cf6); } -.api-endpoint-content:has(.endpoint-section:nth-child(n+3)) { - display: grid; - gap: 2rem; + +.openapi-header__badge--version:hover { + background: rgba(var(--color-accent-rgb, 139, 92, 246), 0.15); + border-color: rgba(var(--color-accent-rgb, 139, 92, 246), 0.3); } -.endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) { - container-type: inline-size; + +/* API Type Badge */ + +.openapi-header__badge--type[data-api-type="REST"] { + background: rgba(var(--color-info-rgb), 0.1); + border-color: rgba(var(--color-info-rgb), 0.2); + color: var(--color-info); } -.endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) .endpoint-details { - display: grid; - gap: 2.5rem; + +.openapi-header__badge--type[data-api-type="GraphQL"] { + background: rgba(var(--color-danger-rgb), 0.1); + border-color: rgba(var(--color-danger-rgb), 0.2); + color: var(--color-danger); } -.endpoint-item:has([data-parameter-count="0"]) .endpoint-details { - gap: 1.5rem; + +/* Maturity Badge */ + +.openapi-header__badge--maturity[data-maturity="stable"] { + background: rgba(var(--color-success-rgb), 0.1); + border-color: rgba(var(--color-success-rgb), 0.2); + color: var(--color-success); } -.endpoint-item:has([data-parameter-count^="1"]) .endpoint-section, -.endpoint-item:has([data-parameter-count^="2"]) .endpoint-section, -.endpoint-item:has([data-parameter-count^="3"]) .endpoint-section { - border: 1px solid rgba(var(--color-border-rgb), 0.5); - border-radius: 0.5rem; - padding: 1.5rem; - background: rgba(var(--color-surface-rgb), 0.5); + +.openapi-header__badge--maturity[data-maturity="beta"] { + background: rgba(var(--color-warning-rgb), 0.1); + border-color: rgba(var(--color-warning-rgb), 0.2); + color: var(--color-warning); } -.endpoint-details:has(.endpoint-parameters .parameter-item:nth-child(n+5)) { - grid-template-columns: 1fr 1fr; - gap: 2rem; + +.openapi-header__badge--maturity[data-maturity="alpha"] { + background: rgba(var(--color-danger-rgb), 0.1); + border-color: rgba(var(--color-danger-rgb), 0.2); + color: var(--color-danger); } -@container endpoint-page (max-width: 768px) { - .endpoint-details:has(.endpoint-parameters .parameter-item:nth-child(n+5)) { - grid-template-columns: 1fr; - } + +/* Stability Badge */ + +.openapi-header__badge--stability { + background: rgba(var(--color-security-rgb), 0.1); + border-color: rgba(var(--color-security-rgb), 0.2); + color: var(--color-security); } -.endpoint-details:has(.endpoint-request-body) .endpoint-section { - border-left: 3px solid rgba(var(--color-brand-rgb), 0.2); - padding-left: 1rem; + +.openapi-version { + font-family: var(--font-family-mono); } -.endpoint-details:has(.endpoint-responses .response-item:nth-child(n+3)) { - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-success-rgb), 0.01) 100%); - border-radius: 0.75rem; - padding: 1.5rem; + +.openapi-header__version { + display: inline-flex; + align-items: center; + padding: 0.5rem 1rem; + background: rgba(var(--color-accent-rgb), 0.1); + border: 1px solid rgba(var(--color-accent-rgb), 0.2); + border-radius: 2rem; + font-size: 0.875rem; + font-weight: 600; + color: var(--color-accent); } -.endpoint-details:has(.endpoint-security) { - border-top: 1px solid rgba(var(--color-border-rgb), 0.3); - padding-top: 2rem; + +.api-version { + font-family: var(--font-family-mono); } -.endpoint-details:has(.endpoint-examples .example-tabs .tab-button:nth-child(n+4)) { - background: rgba(var(--color-accent-rgb), 0.02); - border-radius: 0.5rem; - padding: 1rem; + +.openapi-header__version-stat { + min-width: auto; + flex: none; + min-height: auto; + padding: 0.5rem 1rem; } -.api-endpoint[data-method="GET"] { - --endpoint-accent: rgba(34, 197, 94, 0.1); + +.openapi-header__version-stat .overview-stat__value { + font-family: var(--font-family-mono); + font-size: 0.875rem; } -.api-endpoint[data-method="GET"]:has([data-has-responses="true"]) { - background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); + +.openapi-header__title { + font-family: var(--font-family-brand); + font-size: 3rem; + font-weight: 800; + margin: 0 0 1rem 0; + color: var(--color-text-primary); + position: relative; } -.api-endpoint[data-method="POST"] { - --endpoint-accent: rgba(59, 130, 246, 0.1); + +.openapi-header__summary { + font-size: 1.25rem; + color: var(--color-text-secondary); + margin-bottom: 1rem; + position: relative; } -.api-endpoint[data-method="POST"]:has([data-has-request-body="true"]) { - background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); + +.openapi-header__description { + font-size: 1rem; + line-height: 1.6; + color: var(--color-text-primary); + margin-bottom: 1.5rem; + position: relative; } -.api-endpoint[data-method="PUT"], -.api-endpoint[data-method="PATCH"] { - --endpoint-accent: rgba(245, 158, 11, 0.1); + +.openapi-header__info { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + position: relative; } -.api-endpoint[data-method="PUT"]:has([data-has-request-body="true"]):has([data-has-responses="true"]), -.api-endpoint[data-method="PATCH"]:has([data-has-request-body="true"]):has([data-has-responses="true"]) { - background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); + +.openapi-contact, +.openapi-license, +.openapi-terms { + background: rgba(255, 255, 255, 0.5); + padding: 1.5rem; + border-radius: 1rem; + border: 1px solid var(--color-border-primary); } -.api-endpoint[data-method="DELETE"] { - --endpoint-accent: rgba(239, 68, 68, 0.1); + +.openapi-contact h3, +.openapi-license h3, +.openapi-terms h3 { + margin: 0 0 1rem 0; + font-size: 1.125rem; + font-weight: 600; + color: var(--color-text-primary); } -.api-endpoint[data-method="DELETE"]:has([data-has-responses="true"]) { - background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); + +.contact-name, +.contact-email, +.contact-url, +.license-name, +.terms-link { + margin-bottom: 0.5rem; } -.api-endpoint[data-has-parameters="false"][data-has-request-body="false"] .endpoint-details { - gap: 1rem; + +.contact-email a, +.contact-url a, +.license-name a, +.terms-link a { + color: var(--color-brand); + text-decoration: none; + transition: color 0.2s ease; } -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="1"]) .endpoint-details, -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="2"]) .endpoint-details, -.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="3"]) .endpoint-details { - border: 1px solid rgba(var(--color-border-rgb), 0.2); - border-radius: 1rem; - padding: 2rem; - background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-accent-rgb), 0.01) 100%); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + +.contact-email a:hover, +.contact-url a:hover, +.license-name a:hover, +.terms-link a:hover { + color: var(--color-accent); + text-decoration: underline; } -@container endpoint-page (max-width: 768px) { - .api-endpoint-header:has(.endpoint-description) { - padding: 1.5rem; - margin-bottom: 1.5rem; - } - .endpoint-details:has(.endpoint-parameters .parameter-item:nth-child(n+3)) { - grid-template-columns: 1fr; - } - .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="1"]) .endpoint-details, - .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="2"]) .endpoint-details, - .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="3"]) .endpoint-details { - padding: 1rem; - } + +/* ========================================================================== + :has() Content-Aware Header Enhancements + ========================================================================== */ + +/* Header with description gets enhanced layout */ + +.openapi-header:has(.openapi-header__description) { + padding-bottom: 2.5rem; } -@media (prefers-reduced-motion: reduce) { - .api-endpoint-header:has(.endpoint-description), - .endpoint-details:has(.endpoint-responses .response-item:nth-child(n+3)) { - background: var(--color-surface); - transition: none; - } + +.openapi-header:has(.openapi-header__description) .openapi-header__title { + margin-bottom: 1.25rem; } -.openapi-endpoints { - padding: 2rem 0; + +/* Header without info section is more compact */ + +.openapi-header:not(:has(.openapi-header__info *)) .openapi-header__description { + margin-bottom: 0; } -.endpoint-group { - margin-bottom: 2rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; - overflow: hidden; + +/* Meta section adapts based on version presence */ + +.openapi-header__meta:has(.openapi-header__version-stat) { + gap: 1.5rem; + align-items: stretch; } -.endpoint-group-header { - padding: 1rem 1.5rem; - background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border-primary); - cursor: pointer; - transition: background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: flex; - align-items: center; - justify-content: space-between; + +/* Info section adapts to number of sections */ + +.openapi-header__info:has(.openapi-contact:only-child) { + grid-template-columns: 1fr; + max-width: 400px; } -.endpoint-group-header:hover { - background: var(--color-bg-tertiary); + +.openapi-header__info:has(.openapi-contact + .openapi-license:not(+ *)) { + grid-template-columns: repeat(2, 1fr); } -.endpoint-group-title { - display: flex; - align-items: center; - gap: 0.75rem; + +.openapi-header__info:has(.openapi-contact + .openapi-license + .openapi-terms) { + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } -.endpoint-group-title h3 { - margin: 0; - font-size: 1.25rem; - font-weight: 600; - color: var(--color-text-primary); + +/* Enhanced contact styling based on available info */ + +.openapi-contact:has(.contact-email):has(.contact-url) { + background: linear-gradient(135deg, rgba(var(--color-brand-rgb), 0.05), rgba(var(--color-accent-rgb), 0.05)); + border-color: rgba(var(--color-brand-rgb), 0.15); } -.endpoint-count { - background: rgba(var(--color-brand-rgb), 0.1); + +.openapi-contact:has(.contact-name) h3 { color: var(--color-brand); - padding: 0.25rem 0.75rem; - border-radius: 1rem; - font-size: 0.8rem; - font-weight: 500; } -.endpoint-group-toggle { - display: flex; - align-items: center; - justify-content: center; - width: 1.5rem; - height: 1.5rem; + +/* License with URL gets enhanced styling */ + +.openapi-license:has(a) .license-name a { + color: var(--color-brand); + font-weight: 600; + text-decoration: none; + transition: all 0.2s ease; } -.endpoint-group-toggle .chevron { - width: 1rem; - height: 1rem; - transition: transform var(--timing-fast) var(--easing-standard); + +.openapi-license:has(a) .license-name a:hover { + color: var(--color-accent); + text-decoration: underline; } -.endpoint-group-header[aria-expanded="true"] .chevron { - transform: rotate(90deg); + +/* Header with full info gets enhanced spacing */ + +.openapi-header:has(.openapi-contact):has(.openapi-license):has(.openapi-terms) { + padding: 2.5rem; } -.endpoint-group-content { - max-height: 0; - opacity: 0; - overflow: hidden; - padding: 0; - --collapse-height-collapsed: 0; - --collapse-height-expanded: 3000px; - --collapse-opacity-collapsed: 0; - --collapse-opacity-expanded: 1; - --collapse-overflow-collapsed: hidden; - --collapse-overflow-expanded: visible; - --collapse-padding-collapsed: 0; - --collapse-padding-expanded: 0; - --collapse-timing: 0.3s; - --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); + +/* Responsive adaptations using :has() */ + +@media (max-width: 768px) { + .openapi-header:has(.openapi-header__info) { + padding: 1.5rem; + } + + .openapi-header__info:has(.openapi-contact + .openapi-license + .openapi-terms) { + grid-template-columns: 1fr; + gap: 1rem; + } + + .openapi-header__meta:has(.openapi-header__version-stat) { + flex-direction: column; + gap: 0.75rem; + align-items: flex-start; + } } -.endpoint-item { + +/* OpenAPI Navigation */ + +/* ========================================================================== + Endpoints Navigation + ========================================================================== */ + +.endpoints-nav { + margin-bottom: 2rem; + padding: 1.5rem; background: var(--color-surface); - border: none; - border-bottom: 1px solid var(--color-border-primary); - border-radius: 0; - margin-bottom: 0; - overflow: hidden; - transition: background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} -.endpoint-item:last-child { - border-bottom: none; -} -.endpoint-item:hover { - background: var(--color-bg-secondary); -} -.endpoint-header { - padding: 0.75rem 1rem; - display: flex; - align-items: center; - gap: 0.75rem; - cursor: pointer; - transition: background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); -} -.endpoint-group-header:focus-visible, -.endpoint-header:focus-visible { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - border-radius: 0.5rem; -} -.endpoint-header:hover { - background: var(--color-bg-secondary); + border: 1px solid var(--color-border-primary); + border-radius: 1rem; } -.endpoint-header__method { - flex-shrink: 0; + +.endpoints-nav__section { + margin-bottom: 1.5rem; } -.endpoint-header__path { - flex: 1; - min-width: 0; + +.endpoints-nav__section:last-child { + margin-bottom: 0; } -.endpoint-header__summary { - flex: 2; - min-width: 0; + +.endpoints-nav__header { + font-weight: 600; + color: var(--color-text-primary); + margin-bottom: 1rem; } -.endpoint-header__meta { - flex-shrink: 0; + +.endpoints-nav__tags, +.endpoints-nav__methods { display: flex; - align-items: center; + flex-wrap: wrap; gap: 0.5rem; } -.endpoint-header__toggle { - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - width: 1.5rem; - height: 1.5rem; + +.endpoints-nav__search { + position: relative; } -.endpoint-path { - font-family: var(--font-family-mono); + +.endpoint-search { + width: 100%; + padding: 0.75rem 2rem 0.75rem 0.75rem; font-size: 0.875rem; - font-weight: 600; + border-radius: 0.5rem; + border: 1px solid var(--color-border-primary); + background: var(--color-surface); color: var(--color-text-primary); + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + box-shadow 0.2s ease; } -.endpoint-summary { - font-size: 0.875rem; - color: var(--color-text-primary); - font-weight: 500; + +.endpoint-search:focus { + outline: none; + border-color: var(--color-brand); + box-shadow: 0 0 0 2px rgba(var(--color-brand-rgb), 0.2); } -.endpoint-operation-id { - font-size: 0.75rem; + +.search-icon { + position: absolute; + right: 0.5rem; + top: 50%; + transform: translateY(-50%); + width: 1rem; + height: 1rem; color: var(--color-text-secondary); } -.operation-id-label { + +.tag-filter, +.method-filter { + background: var(--color-bg-secondary); + border: 1px solid var(--color-border-primary); + border-radius: 2rem; + padding: 0.5rem 1rem; + font-size: 0.875rem; font-weight: 500; + color: var(--color-text-secondary); + cursor: pointer; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease; } -.endpoint-tags { - display: flex; - gap: 0.375rem; + +.tag-filter:hover, +.tag-filter--active { + background: var(--color-brand); + border-color: var(--color-brand); + color: var(--color-text-inverse); } -.endpoint-tag { - background: rgba(var(--color-brand-rgb), 0.1); + +.method-filter:hover, +.method-filter--active { + border-color: var(--color-brand); color: var(--color-brand); - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 500; -} -.http-method { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.375rem 0.75rem; - border-radius: 0.375rem; - font-size: 0.75rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; - min-width: 4rem; } -.http-method--get { - background: var(--http-get-bg); - color: var(--http-get-text); + +/* Method-specific colors */ + +/* Old hex-based method filter colors commented out in favor of tokens per themes/milodocs/init */ + +/* .method-filter--get { border-color: #22c55e; color: #22c55e; } +.method-filter--post { border-color: #3b82f6; color: #3b82f6; } +.method-filter--put { border-color: #f59e0b; color: #f59e0b; } +.method-filter--patch { border-color: #8b5cf6; color: #8b5cf6; } +.method-filter--delete { border-color: #ef4444; color: #ef4444; } */ + +.method-filter--get { border-color: var(--http-get-bg); color: var(--http-get-bg); } + +.method-filter--post { border-color: var(--http-post-bg); color: var(--http-post-bg); } + +.method-filter--put { border-color: var(--http-put-bg); color: var(--http-put-bg); } + +.method-filter--patch { border-color: var(--http-patch-bg); color: var(--http-patch-bg); } + +.method-filter--delete { border-color: var(--http-delete-bg); color: var(--http-delete-bg); } + +/* .method-filter--get.method-filter--active { background: #22c55e; border-color: #22c55e; color: white; } */ + +.method-filter--get.method-filter--active { background: var(--http-get-bg); border-color: var(--http-get-bg); color: var(--http-get-text); } + +/* .method-filter--post.method-filter--active { background: #3b82f6; border-color: #3b82f6; color: white; } */ + +.method-filter--post.method-filter--active { background: var(--http-post-bg); border-color: var(--http-post-bg); color: var(--http-post-text); } + +/* .method-filter--put.method-filter--active { background: #f59e0b; border-color: #f59e0b; color: white; } */ + +.method-filter--put.method-filter--active { background: var(--http-put-bg); border-color: var(--http-put-bg); color: var(--http-put-text); } + +/* .method-filter--patch.method-filter--active { background: #8b5cf6; border-color: #8b5cf6; color: white; } */ + +.method-filter--patch.method-filter--active { background: var(--http-patch-bg); border-color: var(--http-patch-bg); color: var(--http-patch-text); } + +/* .method-filter--delete.method-filter--active { background: #ef4444; border-color: #ef4444; color: white; } */ + +.method-filter--delete.method-filter--active { background: var(--http-delete-bg); border-color: var(--http-delete-bg); color: var(--http-delete-text); } + +/* OpenAPI Overview - Modern Info-Dense Layout */ + +/* ========================================================================== + Overview Section + ========================================================================== */ + +.openapi-overview { + padding: 1.5rem 0; + margin-bottom: 1rem; } -.http-method--post { - background: var(--http-post-bg); - color: var(--http-post-text); + +/* Header */ + +.overview-header { + margin-bottom: 1.5rem; + text-align: left; } -.http-method--put { - background: var(--http-put-bg); - color: var(--http-put-text); + +.overview-title { + font-family: var(--font-family-brand); + font-size: 1.75rem; + font-weight: 700; + color: var(--color-text-primary); + margin: 0 0 0.25rem 0; } -.http-method--patch { - background: var(--http-patch-bg); - color: var(--http-patch-text); + +/* Enhanced gradient text with fallback */ + +@supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) { + .overview-title { + background: linear-gradient(135deg, var(--color-brand, #3b82f6), var(--color-accent, #8b5cf6)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + color: transparent; + } } -.http-method--delete { - background: var(--http-delete-bg); - color: var(--http-delete-text); + +.overview-subtitle { + font-size: 0.875rem; + color: var(--color-text-secondary); + margin: 0; + opacity: 0.8; } -.http-method--head { - background: var(--http-head-bg); - color: var(--http-head-text); + +/* Content Container */ + +.overview-content { + display: flex; + flex-direction: column; + gap: 1.5rem; } -.http-method--options { - background: var(--http-options-bg); - color: var(--http-options-text); + +/* ========================================================================== + Stats Bar - Horizontal info-dense layout + ========================================================================== */ + +.overview-stats { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + align-items: stretch; } -.endpoint-details { - display: none; - padding: 1.5rem; - background: var(--color-surface); - border-top: 1px solid var(--color-border-primary); + +.overview-stat { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem 1rem; + background: linear-gradient( + 135deg, + var(--color-surface) 0%, + var(--color-bg-secondary) 100% + ); + border: 1px solid var(--color-border-primary); + border-radius: 0.5rem; + transition: + background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), + border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), + color 0.2s cubic-bezier(0.4, 0, 0.2, 1), + transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), + box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); + min-height: 60px; + position: relative; + overflow: hidden; + flex: 1; + min-width: 140px; } -.endpoint-details.expanded { - display: block; + +.overview-stat::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(var(--color-brand-rgb), 0.03); + opacity: 0; + transition: opacity 0.2s ease; } -.endpoint-section { - margin-bottom: 2rem; + +.overview-stat:hover { + transform: translateY(-2px); + border-color: var(--color-brand); + box-shadow: var(--elevation-hover-2); } -.endpoint-section:last-child { - margin-bottom: 0; + +.overview-stat:hover::before { + opacity: 1; } -.endpoint-section h4 { - margin: 0 0 1rem 0; - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); + +/* Stat Icon - Container-based sizing following theme patterns */ + +.overview-stat__icon { + width: 1.25rem; + height: 1.25rem; + color: var(--color-text-secondary); + shrink: 0; + transition: color 0.2s ease; display: flex; align-items: center; - gap: 0.5rem; -} -.endpoint-description { - font-size: 1rem; - line-height: 1.6; - color: var(--color-text-primary); - margin-bottom: 1.5rem; + justify-content: center; } -.chevron { - width: 1rem; - height: 1rem; - transition: transform var(--timing-fast) var(--easing-standard); + +/* SVG naturally fills container */ + +.overview-stat__icon svg { + width: 100%; + height: 100%; + display: block; } -.endpoint-header[aria-expanded="true"] .chevron { - transform: rotate(90deg); + +.overview-stat:hover .overview-stat__icon { + color: var(--color-brand); } -.openapi-spec[data-viewer-type="endpoint"]:has([data-has-parameters="true"]) { - --has-params: true; + +/* Stat Content */ + +.overview-stat__content { + display: flex; + flex-direction: column; + gap: 0.125rem; + min-width: 0; + flex: 1; } -.openapi-spec[data-viewer-type="endpoint"]:has([data-has-request-body="true"]) { - --has-body: true; + +.overview-stat__label { + font-size: 0.75rem; + font-weight: 500; + color: var(--color-text-tertiary); + text-transform: uppercase; + letter-spacing: 0.025em; + line-height: 1; } -.openapi-spec[data-viewer-type="endpoint"]:has([data-has-responses="true"]) { - --has-responses: true; + +.overview-stat__value { + font-size: 1rem; + font-weight: 600; + color: var(--color-text-primary); + line-height: 1.2; + word-break: break-word; } -.openapi-spec[data-method="GET"]:has([data-has-parameters="true"]) .api-endpoint-header { - border-left: 4px solid rgba(var(--color-info-rgb), 0.5); + +/* Stat Variants */ + +.overview-stat--primary { + background: linear-gradient(135deg, var(--color-brand), var(--color-accent)); + color: var(--color-text-inverse); + border-color: transparent; } -.openapi-spec[data-method="POST"]:has([data-has-request-body="true"]) .api-endpoint-header { - border-left: 4px solid rgba(var(--color-success-rgb), 0.5); + +.overview-stat--primary .overview-stat__icon, +.overview-stat--primary .overview-stat__label, +.overview-stat--primary .overview-stat__value { + color: currentColor; } -.openapi-spec[data-method="PUT"]:has([data-has-request-body="true"]) .api-endpoint-header { - border-left: 4px solid rgba(var(--color-warning-rgb), 0.5); + +.overview-stat--primary .overview-stat__label { + opacity: 0.8; } -.openapi-spec[data-method="DELETE"]:has([data-has-responses="true"]) .api-endpoint-header { - border-left: 4px solid rgba(var(--color-danger-rgb), 0.5); + +.overview-stat--primary:hover { + transform: translateY(-3px); + box-shadow: + 0 8px 20px rgba(var(--color-brand-rgb), 0.25), + 0 4px 8px rgba(0, 0, 0, 0.1); } -.api-endpoint-header:has([data-has-summary="true"]):has([data-has-description="true"]) { - padding: 2rem 1.5rem; - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - var(--color-bg-secondary) 100% - ); + +/* ========================================================================== + Description Section + ========================================================================== */ + +.overview-description { + padding: 1rem 1.25rem; + background: var(--color-bg-secondary); + border: 1px solid var(--color-border-primary); + border-radius: 0.5rem; + border-left: 3px solid var(--color-brand); } -.endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) { - --sections: comprehensive; - border: 2px solid var(--color-border-primary); - border-radius: 1rem; - background: var(--color-surface); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); + +.overview-description p { + margin: 0; + color: var(--color-text-secondary); + line-height: 1.6; + font-size: 0.875rem; } -.endpoint-item:has([data-has-security="true"]) { - border-left: 3px solid var(--color-accent); + +/* ========================================================================== + Documentation Links + ========================================================================== */ + +.overview-documentation { + margin-top: 0.5rem; } -.endpoint-item:has([data-has-examples="true"]) .endpoint-details { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - rgba(var(--color-brand-rgb), 0.02) 100% - ); + +.overview-documentation__title { + font-size: 1rem; + font-weight: 600; + color: var(--color-text-primary); + margin: 0 0 1rem 0; } -.endpoint-item[data-parameter-count]:not([data-parameter-count="0"])::before { - content: attr(data-parameter-count) " params"; - position: absolute; - top: 0.5rem; - right: 0.5rem; - background: rgba(var(--color-brand-rgb), 0.1); - color: var(--color-brand); - font-size: 0.75rem; - padding: 0.25rem 0.5rem; - border-radius: 1rem; - font-weight: 500; -} -.endpoint-item[data-response-count]:not([data-response-count="0"])::after { - content: attr(data-response-count) " responses"; - position: absolute; - top: 2.5rem; - right: 0.5rem; - background: rgba(var(--color-accent-rgb), 0.1); - color: var(--color-accent); - font-size: 0.75rem; - padding: 0.25rem 0.5rem; - border-radius: 1rem; - font-weight: 500; -} -.endpoint-group:has(.endpoint-item:nth-child(n+6)) .endpoint-group-content { + +.overview-documentation__grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); - gap: 1rem; -} -.endpoint-item:has([data-has-examples="true"]):hover { - transform: translateY(-2px); - box-shadow: var(--elevation-hover-2), - var(--elevation-brand-subtle); -} -@media (max-width: 768px) { - .endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) { - border-radius: 0.5rem; - margin: 0.5rem 0; - } - .endpoint-item[data-parameter-count]:not([data-parameter-count="0"])::before, - .endpoint-item[data-response-count]:not([data-response-count="0"])::after { - position: static; - display: inline-block; - margin: 0.25rem; - } -} -@media (prefers-reduced-motion: reduce) { - .endpoint-group-header, - .endpoint-item, - .endpoint-header { - transition: none !important; - } + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 0.75rem; + margin-top: 1.5rem; } -.parameters-container { + +.overview-doc-link { display: flex; - flex-direction: column; - gap: 2rem; -} -.parameters-section { + align-items: center; + gap: 0.75rem; + padding: 0.875rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; + border-radius: 0.5rem; + text-decoration: none; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease, + box-shadow 0.2s ease; + position: relative; overflow: hidden; } -.parameters-section-header { - padding: 1rem 1.5rem; - background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border-primary); + +.overview-doc-link::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(var(--color-brand-rgb), 0.03); + opacity: 0; + transition: opacity 0.2s ease; } -.parameters-section-title { - margin: 0; - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); + +.overview-doc-link:hover { + transform: translateY(-2px); + border-color: var(--color-brand); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } -.parameter-group-header { - padding: 0.75rem 1rem; - background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border-primary); - cursor: pointer; - transition: background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); + +.overview-doc-link:hover::before { + opacity: 1; +} + +.overview-doc-link__icon { + width: 1.125rem; + height: 1.125rem; + color: var(--color-text-secondary); + shrink: 0; + transition: color 0.2s ease; display: flex; align-items: center; - justify-content: space-between; + justify-content: center; } -.parameter-group-header:hover { - background: var(--color-bg-tertiary); + +/* SVG naturally fills container */ + +.overview-doc-link__icon svg { + width: 100%; + height: 100%; + display: block; } -.parameter-group-title { - margin: 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); + +.overview-doc-link:hover .overview-doc-link__icon { + color: var(--color-brand); +} + +.overview-doc-link__content { display: flex; - align-items: center; - gap: 0.5rem; + flex-direction: column; + gap: 0.125rem; + flex: 1; + min-width: 0; } -.parameter-count { - background: rgba(var(--color-brand-rgb), 0.1); + +.overview-doc-link__title { + font-size: 0.875rem; + font-weight: 500; + color: var(--color-text-primary); + line-height: 1.3; + transition: color 0.2s ease; +} + +.overview-doc-link:hover .overview-doc-link__title { color: var(--color-brand); - padding: 0.125rem 0.5rem; - border-radius: 1rem; +} + +.overview-doc-link__description { font-size: 0.75rem; - font-weight: 500; + color: var(--color-text-tertiary); + line-height: 1.4; } -.parameter-group-toggle { + +.overview-doc-link__arrow { + width: 1rem; + height: 1rem; + color: var(--color-text-tertiary); + shrink: 0; + transition: + color 0.2s ease, + transform 0.2s ease; display: flex; align-items: center; justify-content: center; - width: 1.25rem; - height: 1.25rem; } -.parameter-group-toggle .chevron { - width: 0.875rem; - height: 0.875rem; - transition: transform var(--timing-fast) var(--easing-standard); + +/* SVG naturally fills container */ + +.overview-doc-link__arrow svg { + width: 100%; + height: 100%; + display: block; } -.parameter-group-header[aria-expanded="true"] .chevron { - transform: rotate(90deg); + +.overview-doc-link:hover .overview-doc-link__arrow { + color: var(--color-brand); + transform: translateX(2px) translateY(-2px); } -.parameter-list { - max-height: 0; - opacity: 0; - overflow: hidden; - padding: 0; - --collapse-height-collapsed: 0; - --collapse-height-expanded: 1500px; - --collapse-opacity-collapsed: 0; - --collapse-opacity-expanded: 1; - --collapse-overflow-collapsed: hidden; - --collapse-overflow-expanded: visible; - --collapse-padding-collapsed: 0; - --collapse-padding-expanded: 1rem; - --collapse-timing: 0.3s; - --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); + +/* ========================================================================== + Responsive Design + ========================================================================== */ + +@media (max-width: 768px) { + .overview-stats { flex-direction: column; gap: 0.5rem; } + + .overview-stat { min-width: unset; } + + .overview-documentation__grid { grid-template-columns: 1fr; } + + .overview-title { font-size: 1.5rem; } } -.parameters-list { - padding: 0; + +@media (max-width: 480px) { + .overview-stat { + gap: 0.5rem; + padding: 0.625rem 0.75rem; + min-height: 50px; + } + + .overview-stat__icon { + width: 1rem; + height: 1rem; + } + + .overview-doc-link { + gap: 0.5rem; + padding: 0.75rem; + } } -.parameter-item { - padding: 1rem 1.5rem; - border-bottom: 1px solid var(--color-border-primary); - transition: background-color 0.2s ease; + +/* ========================================================================== + :has() Content-Aware Overview Enhancements + ========================================================================== */ + +/* Overview with documentation gets enhanced layout */ + +.openapi-overview:has(.overview-documentation) { + padding-bottom: 2rem; } -.parameter-item:last-child { - border-bottom: none; + +.openapi-overview:has(.overview-documentation) .overview-stats { + margin-bottom: 2rem; } -.parameter-item:hover { - background: var(--color-bg-secondary); + +/* Stats container adapts based on number of stats */ + +.overview-stats:has(.overview-stat:nth-child(4)) { + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } -.parameter-item--required { - border-left: 4px solid var(--color-brand); + +.overview-stats:has(.overview-stat:nth-child(3)) { + grid-template-columns: repeat(3, 1fr); } -.parameter-header { - display: flex; - align-items: flex-start; - justify-content: space-between; - margin-bottom: 0.75rem; + +.overview-stats:has(.overview-stat:nth-child(2)) { + grid-template-columns: repeat(2, 1fr); } -.parameter-name { - display: flex; - align-items: center; - gap: 0.5rem; + +/* Enhanced hover effects for overview with documentation */ + +.openapi-overview:has(.overview-documentation) .overview-stat:hover { + transform: translateY(-3px); + box-shadow: var(--elevation-hover-4); } -.parameter-name code { - font-family: var(--font-family-mono); - font-weight: 600; - color: var(--color-brand); - background: rgba(var(--color-brand-rgb), 0.1); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - font-size: 0.875rem; + +/* Documentation section gets enhanced styling when stats are present */ + +.openapi-overview:has(.overview-stats) .overview-documentation { + border-top: 1px solid var(--color-border-primary); + padding-top: 1.5rem; + margin-top: 1.5rem; } -.parameter-required { - background: rgba(var(--color-danger-rgb), 0.1); - color: var(--color-danger); - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 600; + +/* Single stat gets special treatment */ + +.overview-stats:has(.overview-stat:only-child) .overview-stat { + max-width: 300px; + margin: 0 auto; } -.parameter-type { - display: flex; - align-items: center; - gap: 0.375rem; + +/* API type specific enhancements */ + +[data-api-type="REST"] .overview-stat--secondary { + background: linear-gradient(135deg, rgba(var(--color-info-rgb), 0.1), rgba(var(--color-security-rgb), 0.1)); + border-color: rgba(var(--color-info-rgb), 0.2); } -.parameter-description { - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-secondary); - margin-bottom: 0.75rem; + +[data-api-type="GraphQL"] .overview-stat--secondary { + background: linear-gradient(135deg, rgba(var(--color-danger-rgb), 0.1), rgba(var(--color-warning-rgb), 0.1)); + border-color: rgba(var(--color-danger-rgb), 0.2); } -.parameter-constraints { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; + +/* Maturity-based styling */ + +[data-maturity="stable"] .overview-stat--accent { + background: linear-gradient(135deg, rgba(var(--color-success-rgb), 0.1), rgba(var(--color-success-rgb), 0.1)); + border-color: rgba(var(--color-success-rgb), 0.2); } -.constraint-item { - background: var(--color-bg-tertiary); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - font-size: 0.75rem; - color: var(--color-text-secondary); + +[data-maturity="beta"] .overview-stat--accent { + background: linear-gradient(135deg, rgba(var(--color-warning-rgb), 0.1), rgba(var(--color-warning-rgb), 0.1)); + border-color: rgba(var(--color-warning-rgb), 0.2); } -.constraint-label { - font-weight: 600; + +[data-maturity="alpha"] .overview-stat--warning { + background: linear-gradient(135deg, rgba(var(--color-danger-rgb), 0.1), rgba(var(--color-danger-rgb), 0.1)); + border-color: rgba(var(--color-danger-rgb), 0.2); } -.constraint-value { - font-family: var(--font-family-mono); - color: var(--color-brand); + +/* OpenAPI Generated Pages Styles */ + +/* Styling for API overview, tag, and endpoint pages generated by content adapter */ + +/* ========================================================================== + API Overview Page + ========================================================================== */ + +.api-overview .api-endpoint-groups { + margin: 2rem 0; } -.responses-container { - display: flex; - flex-direction: column; - gap: 1rem; + +.endpoint-groups-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 1.5rem; + margin-top: 1.5rem; } -.response-item { + +.card--endpoint-group { + padding: 1.5rem; background: var(--color-surface); border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - overflow: hidden; + border-radius: 0.75rem; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease, + box-shadow 0.2s ease; } -.response-header { - padding: 0.75rem 1rem; - background: var(--color-bg-secondary); - cursor: pointer; - transition: background-color var(--timing-fast) var(--easing-standard), - border-color var(--timing-fast) var(--easing-standard), - color var(--timing-fast) var(--easing-standard), - transform var(--timing-fast) var(--easing-standard); - display: flex; - align-items: center; - justify-content: space-between; + +.card--endpoint-group:hover { + border-color: var(--color-brand-primary); + box-shadow: var(--elevation-hover-2); } -.response-header:hover { - background: var(--color-bg-tertiary); + +.card--endpoint-group h3 { + margin: 0 0 0.5rem 0; + font-size: 1.125rem; + font-weight: 600; } -.response-status { - display: flex; - align-items: center; - gap: 0.75rem; - flex: 1; + +.card--endpoint-group h3 a { + color: var(--color-text-primary); + text-decoration: none; } -.response-toggle { - display: flex; - align-items: center; - justify-content: center; - width: 1.25rem; - height: 1.25rem; + +.card--endpoint-group h3 a:hover { + color: var(--color-brand-primary); } -.response-toggle .chevron { - width: 0.875rem; - height: 0.875rem; - transition: transform var(--timing-fast) var(--easing-standard); + +.card--endpoint-group p { + margin: 0 0 1rem 0; + color: var(--color-text-secondary); + font-size: 0.875rem; + line-height: 1.5; } -.response-header[aria-expanded="true"] .chevron { - transform: rotate(90deg); + +.endpoint-count { + font-size: 0.75rem; + color: var(--color-text-tertiary); + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; } -.response-details { - border-top: 1px solid var(--color-border-primary); - --collapse-height-collapsed: 0; - --collapse-height-expanded: 2000px; - --collapse-opacity-collapsed: 0; - --collapse-opacity-expanded: 1; - --collapse-overflow-collapsed: hidden; - --collapse-overflow-expanded: visible; - --collapse-padding-collapsed: 0; - --collapse-padding-expanded: 1rem; - --collapse-timing: 0.3s; - --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); - max-height: 0; - opacity: 0; - overflow: hidden; - padding: 0; + +/* ========================================================================== + API Tag Page + ========================================================================== */ + +.api-tag-header { + margin-bottom: 2rem; + padding-bottom: 1.5rem; + border-bottom: 1px solid var(--color-border-light); } -.response-description { + +.api-tag-breadcrumb { font-size: 0.875rem; color: var(--color-text-secondary); - margin: 0; + margin-bottom: 0.5rem; } -.status-code { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.25rem 0.75rem; - border-radius: 0.375rem; - font-size: 0.8rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; - min-width: 3rem; + +.api-tag-breadcrumb a { + color: var(--color-brand-primary); + text-decoration: none; } -.status-code--2xx { - background: var(--status-2xx-bg); - color: var(--status-2xx-text); + +.api-tag-breadcrumb a:hover { + text-decoration: underline; } -.status-code--3xx { - background: var(--status-3xx-bg); - color: var(--status-3xx-text); + +.api-tag-header h1 { + margin: 0 0 0.5rem 0; + font-size: 2rem; + font-weight: 700; + color: var(--color-text-primary); } -.status-code--4xx { - background: var(--status-4xx-bg); - color: var(--status-4xx-text); + +.api-tag-description { + margin: 0; + color: var(--color-text-secondary); + font-size: 1rem; + line-height: 1.6; } -.status-code--5xx { - background: var(--status-5xx-bg); - color: var(--status-5xx-text); + +.card--endpoint-summary { + padding: 1.25rem; + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-radius: 0.5rem; + margin-bottom: 1rem; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease, + box-shadow 0.2s ease; } -.status-code--dxx { - background: var(--status-dxx-bg); - color: var(--status-dxx-text); + +.card--endpoint-summary:hover { + border-color: var(--color-brand-border); + box-shadow: var(--elevation-hover-1); } -.response-content { - margin-top: 1rem; + +.endpoint-summary-header { + display: flex; + align-items: flex-start; + gap: 1rem; } -.response-content h6 { - margin: 0 0 0.75rem 0; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); - text-transform: uppercase; - letter-spacing: 0.05em; + +.endpoint-summary-info { + flex: 1; } -.response-media-type { - margin-bottom: 1rem; - padding: 0.75rem; - background: var(--color-bg-tertiary); - border-radius: 0.375rem; - border: 1px solid var(--color-border-primary); -} -.media-type-label { - font-family: var(--font-family-mono); - font-size: 0.8rem; + +.endpoint-summary-info h3 { + margin: 0 0 0.5rem 0; + font-size: 1rem; font-weight: 600; - color: var(--color-brand); - margin-bottom: 0.5rem; } -.response-schema { - margin-top: 0.75rem; + +.endpoint-summary-info h3 a { + color: var(--color-text-primary); + text-decoration: none; + font-family: var(--font-mono, monospace); } -.response-headers { - margin-bottom: 1rem; + +.endpoint-summary-info h3 a:hover { + color: var(--color-brand-primary); } -.response-headers h6 { - margin: 0 0 0.75rem 0; + +.endpoint-summary-description { + margin: 0; + color: var(--color-text-secondary); font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); + line-height: 1.5; } -.headers-list { - display: flex; - flex-direction: column; - gap: 0.5rem; + +/* ========================================================================== + API Endpoint Page + ========================================================================== */ + +.api-endpoint-header { + margin-bottom: 2rem; + padding-bottom: 1.5rem; + border-bottom: 1px solid var(--color-border-light); } -.header-item { - padding: 0.5rem 0.75rem; - background: var(--color-bg-tertiary); - border-radius: 0.25rem; - border: 1px solid var(--color-border-primary); + +.api-endpoint-breadcrumb { + font-size: 0.875rem; + color: var(--color-text-secondary); + margin-bottom: 1rem; } -.header-name { + +.api-endpoint-breadcrumb a { + color: var(--color-brand-primary); + text-decoration: none; +} + +.api-endpoint-breadcrumb a:hover { + text-decoration: underline; +} + +.endpoint-title-section { + margin-top: 1rem; +} + +.endpoint-method-path { display: flex; align-items: center; - gap: 0.5rem; - margin-bottom: 0.25rem; + gap: 0.75rem; + margin-bottom: 0.75rem; } -.header-name code { - font-family: var(--font-family-mono); - font-size: 0.8rem; + +.endpoint-path { + font-family: var(--font-mono, monospace); + font-size: 1.125rem; font-weight: 600; - color: var(--color-brand); + color: var(--color-text-primary); + background: var(--color-surface-alt); + padding: 0.375rem 0.75rem; + border-radius: 0.375rem; + border: 1px solid var(--color-border-primary); } -.header-required { - background: rgba(var(--color-danger-rgb), 0.1); - color: var(--color-danger); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; - font-size: 0.7rem; - font-weight: 600; - text-transform: uppercase; + +.api-endpoint-header h1 { + margin: 0 0 0.75rem 0; + font-size: 1.875rem; + font-weight: 700; + color: var(--color-text-primary); + line-height: 1.3; } -.header-description { - font-size: 0.8rem; + +.endpoint-description { + margin: 0; color: var(--color-text-secondary); - margin-bottom: 0.25rem; + font-size: 1rem; + line-height: 1.6; } -.header-type { - display: flex; - align-items: center; - gap: 0.25rem; + +/* ========================================================================== + Method Badges (Enhanced) + ========================================================================== */ + +.method-badge { + display: inline-block; + padding: 0.25rem 0.75rem; + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + border-radius: 0.375rem; + letter-spacing: 0.025em; + shrink: 0; + min-width: 4rem; + text-align: center; } -.schema-container { - background: transparent; - border: none; - border-left: 2px solid var(--color-border-primary); - border-radius: 0; - padding: 0.5rem 0 0.5rem 0.75rem; - margin: 0.5rem 0; + +/* Old hex-based method colors commented out in favor of tokens per themes/milodocs/init */ + +/* .method-badge--get { background: #10b981; color: white; } */ + +.method-badge--get { background: var(--http-get-bg); color: var(--http-get-text); } + +/* .method-badge--post { background: #3b82f6; color: white; } */ + +.method-badge--post { background: var(--http-post-bg); color: var(--http-post-text); } + +/* .method-badge--put { background: #f59e0b; color: white; } */ + +.method-badge--put { background: var(--http-put-bg); color: var(--http-put-text); } + +/* .method-badge--patch { background: #8b5cf6; color: white; } */ + +.method-badge--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } + +/* .method-badge--delete { background: #ef4444; color: white; } */ + +.method-badge--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } + +/* .method-badge--head, .method-badge--options { background: #6b7280; color: white; } */ + +.method-badge--head, +.method-badge--options { + background: var(--http-head-bg); + color: var(--http-head-text); } -.schema-container[data-level="0"] { - background: var(--color-bg-secondary); + +/* ========================================================================== + Page Content Integration + ========================================================================== */ + +.page-content { + margin-top: 2rem; + padding-top: 2rem; + border-top: 1px solid var(--color-border-light); +} + +.page-content h2:first-child { + margin-top: 0; +} + +/* ========================================================================== + Responsive Design + ========================================================================== */ + +@media (max-width: 768px) { + .endpoint-groups-grid { + grid-template-columns: 1fr; + gap: 1rem; + } + + .endpoint-group-card { + padding: 1rem; + } + + .endpoint-summary-header { + flex-direction: column; + gap: 0.75rem; + } + + .endpoint-method-path { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } + + .endpoint-path { + font-size: 1rem; + word-break: break-all; + } + + .api-endpoint-header h1 { + font-size: 1.5rem; + } +} + +/* ========================================================================== + Dark Mode Adjustments + ========================================================================== */ + +/* Dark mode handled via CSS variables in :root/.dark */ + +/* OpenAPI Parameters */ + +/* ========================================================================== + Parameters + ========================================================================== */ + +.parameters-container { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.parameters-section { + background: var(--color-surface); border: 1px solid var(--color-border-primary); - border-radius: 0.375rem; - padding: 0.75rem; - border-left: none; + border-radius: 0.75rem; + overflow: hidden; } -.schema-container[data-level="1"] { - margin-left: 1rem; - border-left: 3px solid var(--color-brand); + +.parameters-section-header { + padding: 1rem 1.5rem; + background: var(--color-bg-secondary); + border-bottom: 1px solid var(--color-border-primary); } -.schema-container[data-level="2"] { - margin-left: 2rem; - border-left: 3px solid var(--color-accent); + +.parameters-section-title { + margin: 0; + font-size: 1.125rem; + font-weight: 600; + color: var(--color-text-primary); } -.schema-header { + +/* Parameter Group Headers */ + +.parameter-group-header { + padding: 0.75rem 1rem; + background: var(--color-bg-secondary); + border-bottom: 1px solid var(--color-border-primary); + cursor: pointer; + transition: + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); display: flex; align-items: center; justify-content: space-between; - margin-bottom: 0.5rem; } -.schema-title { + +.parameter-group-header:hover { + background: var(--color-bg-tertiary); +} + +.parameter-group-title { margin: 0; - font-size: 1.125rem; + font-size: 1rem; font-weight: 600; color: var(--color-text-primary); -} -.schema-type-info { display: flex; align-items: center; gap: 0.5rem; } -.type-nullable, -.type-readonly, -.type-writeonly { - background: rgba(var(--color-text-secondary-rgb, 107, 114, 128), 0.1); - color: var(--color-text-secondary); - padding: 0.125rem 0.5rem; + +.parameter-count { + background: rgba(var(--color-brand-rgb), 0.1); + color: var(--color-brand); + padding: 0.125rem 0.5rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 500; } -.schema-description { - font-size: 0.875rem; - line-height: 1.5; - color: var(--color-text-secondary); - margin-bottom: 1rem; -} -.schema-constraints { + +.parameter-group-toggle { display: flex; - flex-wrap: wrap; - gap: 1rem; - margin-bottom: 1.5rem; - padding: 1rem; - background: var(--color-bg-tertiary); - border-radius: 0.5rem; - border: 1px solid var(--color-border-secondary); + align-items: center; + justify-content: center; + width: 1.25rem; + height: 1.25rem; } -.schema-properties { - margin-bottom: 1.5rem; + +.parameter-group-toggle .chevron { + width: 0.875rem; + height: 0.875rem; + transition: transform var(--timing-fast) var(--easing-standard); } -.schema-properties h6 { - margin: 0 0 1rem 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - padding: 0.5rem 0; - border-bottom: 1px solid var(--color-border-primary); + +.parameter-group-header[aria-expanded="true"] .chevron { + transform: rotate(90deg); } -.properties-list { - display: flex; - flex-direction: column; - gap: 0; - border: 1px solid var(--color-border-primary); - border-radius: 0.375rem; + +.parameter-list { + /* Height-based collapse (consistent with all components) */ + max-height: 0; + opacity: 0; overflow: hidden; + padding: 0; + + /* Configure collapse behavior */ + --collapse-height-collapsed: 0; + --collapse-height-expanded: 1500px; /* Good for parameter lists */ + --collapse-opacity-collapsed: 0; + --collapse-opacity-expanded: 1; + --collapse-overflow-collapsed: hidden; + --collapse-overflow-expanded: visible; + --collapse-padding-collapsed: 0; + --collapse-padding-expanded: 1rem; + --collapse-timing: 0.3s; + --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); } -.property-item { - background: var(--color-surface); - border: none; + +/* Remove old class-based approach - component-states.css handles this */ + +.parameters-list { + padding: 0; +} + +.parameter-item { + padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border-primary); - border-radius: 0; - padding: 1rem 0.75rem; - display: flex; - flex-direction: column; - gap: 0.5rem; - position: relative; - transition: background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; + transition: background-color 0.2s ease; } -.property-item:last-child { + +.parameter-item:last-child { border-bottom: none; } -.property-item:hover { + +.parameter-item:hover { background: var(--color-bg-secondary); - transform: translateX(2px); } -.property-item--required { - border-left: 3px solid var(--color-brand); + +.parameter-item--required { + border-left: 4px solid var(--color-brand); } -.property-header { - margin-bottom: 0; + +.parameter-header { display: flex; - align-items: center; - gap: 0.375rem; + align-items: flex-start; + justify-content: space-between; + margin-bottom: 0.75rem; } -.property-name { + +.parameter-name { display: flex; align-items: center; gap: 0.5rem; } -.property-name code { + +.parameter-name code { font-family: var(--font-family-mono); font-weight: 600; color: var(--color-brand); @@ -11545,7 +16262,8 @@ html { border-radius: 0.25rem; font-size: 0.875rem; } -.property-required { + +.parameter-required { background: rgba(var(--color-danger-rgb), 0.1); color: var(--color-danger); padding: 0.125rem 0.5rem; @@ -11553,679 +16271,1027 @@ html { font-size: 0.75rem; font-weight: 600; } -.property-schema { - margin-left: 0; -} -.property-meta { - display: flex; - align-items: center; - gap: 0.75rem; - margin-top: 0.25rem; -} -.property-type { + +.parameter-type { display: flex; align-items: center; gap: 0.375rem; } -.property-type .type-badge { - font-size: 0.75rem; - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.025em; -} -.property-format { - font-size: 0.75rem; - color: var(--color-text-secondary); - background: var(--color-bg-secondary); - padding: 0.125rem 0.375rem; - border-radius: 0.25rem; -} -.property-description { - margin-top: 0.5rem; + +.parameter-description { font-size: 0.875rem; + line-height: 1.5; color: var(--color-text-secondary); - line-height: 1.4; + margin-bottom: 0.75rem; } -.property-constraints { - margin-top: 0.5rem; + +.parameter-constraints { display: flex; flex-wrap: wrap; gap: 0.5rem; } -.property-constraint { - font-size: 0.75rem; - color: var(--color-text-secondary); - background: var(--color-bg-secondary); + +.constraint-item { + background: var(--color-bg-tertiary); padding: 0.25rem 0.5rem; border-radius: 0.25rem; - border: 1px solid var(--color-border-secondary); -} -.constraint-modifier { - font-size: 0.7rem; - color: var(--color-warning); - font-style: italic; - margin-left: 0.25rem; -} -.schema-array-info { - margin-bottom: 1.5rem; + font-size: 0.75rem; + color: var(--color-text-secondary); } -.schema-array-info h6 { - margin: 0 0 1rem 0; - font-size: 1rem; + +.constraint-label { font-weight: 600; - color: var(--color-text-primary); - padding: 0.5rem 0; - border-bottom: 1px solid var(--color-border-primary); } -.array-constraints { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-bottom: 1rem; + +.constraint-value { + font-family: var(--font-family-mono); + color: var(--color-brand); } -.array-constraints .constraint { + +/* OpenAPI Responses */ + +/* ========================================================================== + Response Sections + ========================================================================== */ + +.responses-container { display: flex; - align-items: center; - gap: 0.25rem; - font-size: 0.875rem; - background: var(--color-bg-secondary); - padding: 0.5rem 0.75rem; - border-radius: 0.375rem; - border: 1px solid var(--color-border-secondary); + flex-direction: column; + gap: 1rem; } -.array-item-schema { - background: var(--color-bg-secondary); + +.response-item { + background: var(--color-surface); border: 1px solid var(--color-border-primary); border-radius: 0.5rem; - padding: 1rem; - margin-top: 0.5rem; + overflow: hidden; } -.schema-composition { - margin-bottom: 1.5rem; + +.response-header { + padding: 0.75rem 1rem; + background: var(--color-bg-secondary); + cursor: pointer; + transition: + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard), + color var(--timing-fast) var(--easing-standard), + transform var(--timing-fast) var(--easing-standard); + display: flex; + align-items: center; + justify-content: space-between; } -.schema-composition h6 { - margin: 0 0 1rem 0; - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - padding: 0.5rem 0; - border-bottom: 1px solid var(--color-border-primary); + +.response-header:hover { + background: var(--color-bg-tertiary); } -.composition-list { + +.response-status { display: flex; - flex-direction: column; - gap: 1rem; + align-items: center; + gap: 0.75rem; + flex: 1; } -.composition-item { - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 0.5rem; - padding: 1rem; - position: relative; + +.response-toggle { + display: flex; + align-items: center; + justify-content: center; + width: 1.25rem; + height: 1.25rem; } -.composition-index { - font-size: 0.875rem; - font-weight: 600; - color: var(--color-brand); - margin-bottom: 0.5rem; - text-transform: uppercase; - letter-spacing: 0.025em; -} -.schema-container:has(.schema-properties) { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - rgba(var(--color-brand-rgb), 0.01) 100% - ); - border-left: 3px solid rgba(var(--color-brand-rgb), 0.3); -} -.schema-container:has(.schema-array-info) { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - rgba(var(--color-success-rgb), 0.01) 100% - ); - border-left: 3px solid rgba(var(--color-success-rgb), 0.3); -} -.schema-container:has(.schema-composition) { - background: linear-gradient( - 135deg, - var(--color-surface) 0%, - rgba(var(--color-accent-rgb), 0.01) 100% - ); - border-left: 3px solid rgba(var(--color-accent-rgb), 0.3); -} -.schema-properties:has(.properties-list .property-item:nth-child(n+5)) { - border: 2px solid rgba(var(--color-brand-rgb), 0.1); - border-radius: 0.5rem; - padding: 1rem; - background: rgba(var(--color-brand-rgb), 0.02); -} -.schema-properties:has(.properties-list .property-item:nth-child(n+10)) { - border-color: rgba(var(--color-accent-rgb), 0.2); - background: rgba(var(--color-accent-rgb), 0.03); -} -.properties-list:has(.property-item--required:nth-child(n+3)) { - border-left: 4px solid var(--color-warning); - padding-left: 0.5rem; -} -.property-item:has(.property-constraints) { - border-left: 2px solid rgba(var(--color-info-rgb), 0.4); - background: rgba(var(--color-info-rgb), 0.02); + +.response-toggle .chevron { + width: 0.875rem; + height: 0.875rem; + transition: transform var(--timing-fast) var(--easing-standard); } -.property-item:has(.property-meta .property-format) { - border-left-color: rgba(var(--color-accent-rgb), 0.4); - background: rgba(var(--color-accent-rgb), 0.02); + +.response-header[aria-expanded="true"] .chevron { + transform: rotate(90deg); } -.schema-constraints:has(.constraint:nth-child(n+3)) { - background: rgba(var(--color-bg-secondary-rgb), 0.5); - border: 1px solid var(--color-border-secondary); - border-radius: 0.5rem; - padding: 1rem; + +.response-details { + border-top: 1px solid var(--color-border-primary); + + /* Use height-based collapse (not display-based) for smooth animations */ + --collapse-height-collapsed: 0; + --collapse-height-expanded: 2000px; + --collapse-opacity-collapsed: 0; + --collapse-opacity-expanded: 1; + --collapse-overflow-collapsed: hidden; + --collapse-overflow-expanded: visible; + --collapse-padding-collapsed: 0; + --collapse-padding-expanded: 1rem; + --collapse-timing: 0.3s; + --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); + + /* Start collapsed */ + max-height: 0; + opacity: 0; + overflow: hidden; + padding: 0; } -.schema-constraints:has(.constraint-modifier) { - border-left: 3px solid var(--color-warning); + +.response-description { + font-size: 0.875rem; + color: var(--color-text-secondary); + margin: 0; } -.schema-array-info:has(.array-constraints .constraint:nth-child(n+2)) { - border: 1px solid rgba(var(--color-success-rgb), 0.2); - border-radius: 0.5rem; - padding: 1rem; - background: rgba(var(--color-success-rgb), 0.02); + +/* Status Code Badges */ + +.status-code { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.25rem 0.75rem; + border-radius: 0.375rem; + font-size: 0.8rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + min-width: 3rem; } -.schema-composition:has(.composition-item:nth-child(n+3)) { - border: 2px solid rgba(var(--color-accent-rgb), 0.2); - border-radius: 0.75rem; - padding: 1.5rem; - background: rgba(var(--color-accent-rgb), 0.02); + +/* Old hex-based status colors commented out in favor of tokens per themes/milodocs/init */ + +/* .status-code--2xx { background: #22c55e; color: white; } +.status-code--3xx { background: #3b82f6; color: white; } +.status-code--4xx { background: #f59e0b; color: white; } +.status-code--5xx { background: #ef4444; color: white; } +.status-code--dxx { background: #6b7280; color: white; } */ + +.status-code--2xx { background: var(--status-2xx-bg); color: var(--status-2xx-text); } + +.status-code--3xx { background: var(--status-3xx-bg); color: var(--status-3xx-text); } + +.status-code--4xx { background: var(--status-4xx-bg); color: var(--status-4xx-text); } + +.status-code--5xx { background: var(--status-5xx-bg); color: var(--status-5xx-text); } + +.status-code--dxx { background: var(--status-dxx-bg); color: var(--status-dxx-text); } + +/* Response Content */ + +.response-content { + margin-top: 1rem; } -.schema-container[data-level="1"]:has(.schema-properties) { - background: rgba(var(--color-bg-secondary-rgb), 0.3); - border-left-width: 2px; + +.response-content h6 { + margin: 0 0 0.75rem 0; + font-size: 0.875rem; + font-weight: 600; + color: var(--color-text-primary); + text-transform: uppercase; + letter-spacing: 0.05em; } -.schema-container[data-level="2"]:has(.schema-properties) { - background: rgba(var(--color-bg-secondary-rgb), 0.2); - border-left-width: 1px; + +.response-media-type { + margin-bottom: 1rem; + padding: 0.75rem; + background: var(--color-bg-tertiary); + border-radius: 0.375rem; + border: 1px solid var(--color-border-primary); } -.schema-header:has(.type-badge--object) + .schema-constraints, -.schema-header:has(.type-badge--object) + * .schema-constraints { - border-top: 2px solid rgba(var(--color-brand-rgb), 0.1); + +.media-type-label { + font-family: var(--font-family-mono); + font-size: 0.8rem; + font-weight: 600; + color: var(--color-brand); + margin-bottom: 0.5rem; } -.schema-header:has(.type-badge--array) + .schema-array-info { - border-top: 2px solid rgba(var(--color-success-rgb), 0.1); + +.response-schema { + margin-top: 0.75rem; } -.schema-header:has(.type-badge--string) + .schema-constraints { - border-top: 2px solid rgba(var(--color-info-rgb), 0.1); + +/* Response Headers */ + +.response-headers { + margin-bottom: 1rem; } -.schema-container:has(.schema-ref) { - background: linear-gradient( - 135deg, - rgba(var(--color-accent-rgb), 0.05) 0%, - var(--color-surface) 100% - ); - border: 1px dashed rgba(var(--color-accent-rgb), 0.3); + +.response-headers h6 { + margin: 0 0 0.75rem 0; + font-size: 0.875rem; + font-weight: 600; + color: var(--color-text-primary); } -.schema-container:has(.schema-ref-error) { - background: rgba(var(--color-danger-rgb), 0.05); - border: 1px solid rgba(var(--color-danger-rgb), 0.2); + +.headers-list { + display: flex; + flex-direction: column; + gap: 0.5rem; } -.schema-ref { - margin: 0.5rem 0; - padding: 0.5rem; - background: rgba(var(--color-brand-rgb), 0.05); - border-left: 3px solid var(--color-brand); - border-radius: 0 0.25rem 0.25rem 0; + +.header-item { + padding: 0.5rem 0.75rem; + background: var(--color-bg-tertiary); + border-radius: 0.25rem; + border: 1px solid var(--color-border-primary); } -.ref-header { + +.header-name { display: flex; align-items: center; gap: 0.5rem; - margin-bottom: 0.5rem; -} -.ref-label { - font-size: 0.75rem; - font-weight: 600; - color: var(--color-text-secondary); - text-transform: uppercase; - letter-spacing: 0.05em; + margin-bottom: 0.25rem; } -.ref-name { + +.header-name code { font-family: var(--font-family-mono); - font-size: 0.875rem; + font-size: 0.8rem; font-weight: 600; color: var(--color-brand); } -.schema-ref-error { - padding: 0.75rem; - background: rgba(239, 68, 68, 0.05); - border: 1px solid rgba(239, 68, 68, 0.2); - border-radius: 0.375rem; - margin: 0.5rem 0; -} -.schema-ref-error .error-message { + +.header-required { + background: rgba(var(--color-danger-rgb), 0.1); color: var(--color-danger); - font-weight: 500; - margin-bottom: 0.5rem; -} -.debug-info { - font-size: 0.75rem; - color: var(--color-text-secondary); - background: var(--color-bg-tertiary); - padding: 0.5rem; + padding: 0.125rem 0.375rem; border-radius: 0.25rem; - margin-top: 0.5rem; + font-size: 0.7rem; + font-weight: 600; + text-transform: uppercase; } -.debug-info p { - margin: 0.25rem 0; + +.header-description { + font-size: 0.8rem; + color: var(--color-text-secondary); + margin-bottom: 0.25rem; } -.debug-info code { - font-family: var(--font-family-mono); - background: rgba(0, 0, 0, 0.1); - padding: 0.125rem 0.25rem; - border-radius: 0.125rem; + +.header-type { + display: flex; + align-items: center; + gap: 0.25rem; } -.schema-array-items, -.schema-object-properties { - margin-top: 0.75rem; -} -.schema-array-items h6, -.schema-object-properties h6 { - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-secondary); - margin-bottom: 0.5rem; -} -.type-badge { - display: inline-block; - padding: 0.125rem 0.5rem; - border-radius: 1rem; - font-size: 0.75rem; - font-weight: 600; - text-transform: lowercase; -} -.type-badge--string { - background: var(--type-string-bg); - color: var(--type-string-text); -} -.type-badge--number { - background: var(--type-number-bg); - color: var(--type-number-text); -} -.type-badge--integer { - background: var(--type-integer-bg); - color: var(--type-integer-text); -} -.type-badge--boolean { - background: var(--type-boolean-bg); - color: var(--type-boolean-text); -} -.type-badge--array { - background: var(--type-array-bg); - color: var(--type-array-text); -} -.type-badge--object { - background: var(--type-object-bg); - color: var(--type-object-text); -} -.type-badge--null { - background: var(--type-null-bg); - color: var(--type-null-text); -} -.type-format { - font-size: 0.75rem; - color: var(--color-text-secondary); - font-style: italic; - margin-left: 0.25rem; + +/* OpenAPI Responsive Styles */ + +/* ========================================================================== + Responsive & Mobile + ========================================================================== */ + +@media (max-width: 768px) { + .openapi-header { + padding: 2rem 1.5rem; + } + + .openapi-header__title { + font-size: 2rem; + } + + .openapi-header__info { + grid-template-columns: 1fr; + gap: 1rem; + } + + .section-title { + font-size: 2rem; + } + + .overview-grid { + grid-template-columns: 1fr; + gap: 1rem; + } + + .endpoints-nav { + padding: 1rem; + } + + .endpoints-nav__tags, + .endpoints-nav__methods { + gap: 0.375rem; + } + + .tag-filter, + .method-filter { + padding: 0.375rem 0.75rem; + font-size: 0.8rem; + } + + .endpoint-header { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + padding: 1rem; + } + + .endpoint-header__method { + align-self: flex-start; + } + + .endpoint-header__toggle { + position: absolute; + top: 1rem; + right: 1rem; + } + + .endpoint-details { + padding: 1rem; + } + + .property-item { + grid-template-columns: 1fr; + gap: 0.5rem; + } + + .code-tabs-nav { + flex-wrap: wrap; + } + + .code-tab { + padding: 0.75rem 1rem; + font-size: 0.8rem; + } + + .code-example-header { + padding: 0.75rem 1rem; + } + + .parameters-section-header, + .parameter-item { + padding: 0.75rem 1rem; + } } -.code-examples { - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 1rem; - overflow: hidden; + +@media (max-width: 480px) { + .openapi-header { + padding: 1.5rem 1rem; + } + + .openapi-header__title { + font-size: 1.75rem; + } + + .section-title { + font-size: 1.75rem; + } + + .overview-stat { + gap: 0.5rem; + padding: 0.625rem 0.75rem; + min-height: 50px; + } + + .overview-stat__icon { + width: 1rem; + height: 1rem; + } + + .overview-doc-link { + gap: 0.5rem; + padding: 0.75rem; + } + + .endpoint-header { + padding: 0.75rem; + } + + .endpoint-details { + padding: 0.75rem; + } } -.code-tabs-nav { - display: flex; - background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border-primary); + +/* ========================================================================== + Print Styles + ========================================================================== */ + +@media print { + .openapi-spec { + background: white !important; + color: black !important; + } + + .endpoint-details { + display: block !important; + } + + .code-tab-panel { + display: block !important; + } + + .endpoints-nav, + .copy-button, + .endpoint-header__toggle { + display: none !important; + } } -.code-tab { + +/* OpenAPI Schemas */ + +/* ========================================================================== + Schemas + ========================================================================== */ + +.schema-container { background: transparent; border: none; - padding: 0.75rem 1rem; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-secondary); - cursor: pointer; - transition: background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; - border-bottom: 3px solid transparent; -} -.code-tab:hover, -.code-tab--active { - color: var(--color-brand); - background: rgba(var(--color-brand-rgb), 0.05); - border-bottom-color: var(--color-brand); -} -.code-tabs-content { - position: relative; + border-left: 2px solid var(--color-border-primary); + border-radius: 0; + padding: 0.5rem 0 0.5rem 0.75rem; + margin: 0.5rem 0; } -.code-tab-panel { - display: none; + +.schema-container[data-level="0"] { + background: var(--color-bg-secondary); + border: 1px solid var(--color-border-primary); + border-radius: 0.375rem; + padding: 0.75rem; + border-left: none; } -.code-tab-panel--active { - display: block; + +.schema-container[data-level="1"] { + margin-left: 1rem; + border-left: 3px solid var(--color-brand); } -.code-example { - position: relative; + +.schema-container[data-level="2"] { + margin-left: 2rem; + border-left: 3px solid var(--color-accent); } -.code-example-header { + +.schema-header { display: flex; align-items: center; justify-content: space-between; - padding: 0.625rem 1rem; - background: var(--color-bg-tertiary); - border-bottom: 1px solid var(--color-border-primary); + margin-bottom: 0.5rem; } -.code-example-title { - font-size: 0.875rem; + +.schema-title { + margin: 0; + font-size: 1.125rem; font-weight: 600; color: var(--color-text-primary); } -.copy-button { + +.schema-type-info { display: flex; align-items: center; - justify-content: center; - width: 1.75rem; - height: 1.75rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - border-radius: 0.375rem; - color: var(--color-text-secondary); - cursor: pointer; - transition: background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.2s ease; + gap: 0.5rem; } -.copy-button:hover { - background: var(--color-brand); - border-color: var(--color-brand); - color: var(--color-text-inverse); -} -.copy-button svg { - width: 0.95rem; - height: 0.95rem; -} -.code-example pre { - margin: 0; - padding: 0.875rem 1rem; - background: var(--color-bg-code); - overflow-x: auto; + +.type-nullable, +.type-readonly, +.type-writeonly { + background: rgba(var(--color-text-secondary-rgb, 107, 114, 128), 0.1); + color: var(--color-text-secondary); + padding: 0.125rem 0.5rem; + border-radius: 1rem; + font-size: 0.75rem; + font-weight: 500; } -.code-example code { - font-family: var(--font-family-mono); + +.schema-description { font-size: 0.875rem; line-height: 1.5; - color: var(--color-text-code); -} -.openapi-components { - padding: 2rem 0; + color: var(--color-text-secondary); + margin-bottom: 1rem; } -.components-section { - margin-bottom: 3rem; + +.schema-constraints { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin-bottom: 1.5rem; + padding: 1rem; + background: var(--color-bg-tertiary); + border-radius: 0.5rem; + border: 1px solid var(--color-border-secondary); } -.components-section:last-child { - margin-bottom: 0; + +.schema-properties { + margin-bottom: 1.5rem; } -.components-section-title { - font-size: 1.5rem; + +.schema-properties h6 { + margin: 0 0 1rem 0; + font-size: 1rem; font-weight: 600; color: var(--color-text-primary); - margin: 0 0 1.5rem 0; - padding-bottom: 0.5rem; - border-bottom: 2px solid var(--color-border-primary); + padding: 0.5rem 0; + border-bottom: 1px solid var(--color-border-primary); } -.components-list { + +.properties-list { display: flex; flex-direction: column; - gap: 1rem; -} -.component-item { - background: var(--color-surface); + gap: 0; border: 1px solid var(--color-border-primary); - border-radius: 0.75rem; + border-radius: 0.375rem; overflow: hidden; - transition: background-color 0.2s ease, +} + +.property-item { + background: var(--color-surface); + border: none; + border-bottom: 1px solid var(--color-border-primary); + border-radius: 0; + padding: 1rem 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + position: relative; + transition: + background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, - transform 0.2s ease, - box-shadow 0.2s ease; + transform 0.2s ease; } -.component-item:hover { - border-color: var(--color-brand); - box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.1); + +.property-item:last-child { + border-bottom: none; } -.component-header { - padding: 1rem 1.5rem; + +.property-item:hover { + background: var(--color-bg-secondary); + transform: translateX(2px); +} + +.property-item--required { + border-left: 3px solid var(--color-brand); +} + +.property-header { + margin-bottom: 0; display: flex; align-items: center; - gap: 1rem; - cursor: pointer; - transition: background-color 0.2s ease; + gap: 0.375rem; } -.component-header:hover { - background: var(--color-bg-secondary); + +.property-name { + display: flex; + align-items: center; + gap: 0.5rem; } -.component-icon { - width: 1.5rem; - height: 1.5rem; + +.property-name code { + font-family: var(--font-family-mono); + font-weight: 600; color: var(--color-brand); - flex-shrink: 0; -} -.component-name { - flex: 1; - min-width: 0; + background: rgba(var(--color-brand-rgb), 0.1); + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; + font-size: 0.875rem; } -.component-name h4 { - margin: 0 0 0.25rem 0; - font-size: 1rem; + +.property-required { + background: rgba(var(--color-danger-rgb), 0.1); + color: var(--color-danger); + padding: 0.125rem 0.5rem; + border-radius: 1rem; + font-size: 0.75rem; font-weight: 600; - color: var(--color-text-primary); } -.component-type { + +.property-schema { + margin-left: 0; +} + +/* Enhanced property information layout */ + +.property-meta { + display: flex; + align-items: center; + gap: 0.75rem; + margin-top: 0.25rem; +} + +.property-type { display: flex; align-items: center; gap: 0.375rem; } -.component-toggle { - width: 1.5rem; - height: 1.5rem; + +.property-type .type-badge { + font-size: 0.75rem; + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.025em; +} + +.property-format { + font-size: 0.75rem; color: var(--color-text-secondary); - flex-shrink: 0; + background: var(--color-bg-secondary); + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; } -.component-toggle .chevron { - width: 1rem; - height: 1rem; - transition: transform var(--timing-fast) var(--easing-standard); + +.property-description { + margin-top: 0.5rem; + font-size: 0.875rem; + color: var(--color-text-secondary); + line-height: 1.4; } -.component-header[aria-expanded="true"] .chevron { - transform: rotate(90deg); + +.property-constraints { + margin-top: 0.5rem; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; } -.component-details { - border-top: 1px solid var(--color-border-primary); - max-height: 0; - opacity: 0; - overflow: hidden; - padding: 0; - --collapse-height-collapsed: 0; - --collapse-height-expanded: 3000px; - --collapse-opacity-collapsed: 0; - --collapse-opacity-expanded: 1; - --collapse-overflow-collapsed: hidden; - --collapse-overflow-expanded: visible; - --collapse-padding-collapsed: 0; - --collapse-padding-expanded: 1.5rem; - --collapse-timing: 0.3s; - --collapse-easing: cubic-bezier(0.4, 0, 0.2, 1); + +.property-constraint { + font-size: 0.75rem; + color: var(--color-text-secondary); + background: var(--color-bg-secondary); + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; + border: 1px solid var(--color-border-secondary); } -@keyframes schema-expand { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0); - } + +/* Enhanced constraint styling */ + +.constraint-modifier { + font-size: 0.7rem; + color: var(--color-warning); + font-style: italic; + margin-left: 0.25rem; } -.openapi-components:has(.components-section[data-section-type="schemas"]) { - --primary-section: schemas; + +/* Array schema styling */ + +.schema-array-info { + margin-bottom: 1.5rem; } -.openapi-components:has(.components-section[data-section-type="parameters"]) { - --secondary-section: parameters; + +.schema-array-info h6 { + margin: 0 0 1rem 0; + font-size: 1rem; + font-weight: 600; + color: var(--color-text-primary); + padding: 0.5rem 0; + border-bottom: 1px solid var(--color-border-primary); } -.components-section:has([data-item-count^="1"]) .components-section-title::after, -.components-section:has([data-item-count^="2"]) .components-section-title::after, -.components-section:has([data-item-count^="3"]) .components-section-title::after { - content: " (" attr(data-item-count) ")"; - color: var(--color-text-secondary); + +.array-constraints { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 1rem; +} + +.array-constraints .constraint { + display: flex; + align-items: center; + gap: 0.25rem; font-size: 0.875rem; - font-weight: 400; + background: var(--color-bg-secondary); + padding: 0.5rem 0.75rem; + border-radius: 0.375rem; + border: 1px solid var(--color-border-secondary); } -.component-item:has(.component-details.expanded) { - border-color: var(--color-brand); - box-shadow: 0 4px 16px rgba(var(--color-brand-rgb), 0.15); + +.array-item-schema { + background: var(--color-bg-secondary); + border: 1px solid var(--color-border-primary); + border-radius: 0.5rem; + padding: 1rem; + margin-top: 0.5rem; +} + +/* Enhanced schema composition styling */ + +.schema-composition { + margin-bottom: 1.5rem; +} + +.schema-composition h6 { + margin: 0 0 1rem 0; + font-size: 1rem; + font-weight: 600; + color: var(--color-text-primary); + padding: 0.5rem 0; + border-bottom: 1px solid var(--color-border-primary); +} + +.composition-list { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.composition-item { + background: var(--color-bg-secondary); + border: 1px solid var(--color-border-primary); + border-radius: 0.5rem; + padding: 1rem; + position: relative; +} + +.composition-index { + font-size: 0.875rem; + font-weight: 600; + color: var(--color-brand); + margin-bottom: 0.5rem; + text-transform: uppercase; + letter-spacing: 0.025em; +} + +/* ========================================================================== + :has() Content-Aware Schema Enhancements + ========================================================================== */ + +/* Schema containers adapt based on content type and complexity */ + +.schema-container:has(.schema-properties) { background: linear-gradient( 135deg, var(--color-surface) 0%, - rgba(var(--color-brand-rgb), 0.02) 100% + rgba(var(--color-brand-rgb), 0.01) 100% ); + border-left: 3px solid rgba(var(--color-brand-rgb), 0.3); } -.component-item:has(.component-details.expanded) .component-header { + +.schema-container:has(.schema-array-info) { background: linear-gradient( 135deg, - rgba(var(--color-brand-rgb), 0.05) 0%, - rgba(var(--color-brand-rgb), 0.02) 100% + var(--color-surface) 0%, + rgba(var(--color-success-rgb), 0.01) 100% ); - border-bottom: 1px solid rgba(var(--color-brand-rgb), 0.1); -} -.component-item:has(.component-details.expanded) .chevron { - transform: rotate(90deg); - color: var(--color-brand); -} -.component-item[data-component="component-schema"]:has(.component-details.expanded) { - border-left: 4px solid var(--color-brand); -} -.component-item[data-component="component-schema"]:has(.component-details.expanded) .component-name h4 { - color: var(--color-brand); - font-weight: 700; -} -.component-item[data-property-count^="1"]:has(.component-details.expanded), -.component-item[data-property-count^="2"]:has(.component-details.expanded), -.component-item[data-property-count^="3"]:has(.component-details.expanded) { - border-left: 4px solid var(--color-accent); -} -.component-item[data-property-count^="1"]:has(.component-details.expanded) .component-name h4, -.component-item[data-property-count^="2"]:has(.component-details.expanded) .component-name h4, -.component-item[data-property-count^="3"]:has(.component-details.expanded) .component-name h4 { - color: var(--color-accent); + border-left: 3px solid rgba(var(--color-success-rgb), 0.3); } -.component-item[data-has-required="true"]:has(.component-details.expanded) .component-header { + +.schema-container:has(.schema-composition) { background: linear-gradient( 135deg, - rgba(var(--color-warning-rgb), 0.08) 0%, - rgba(var(--color-warning-rgb), 0.03) 100% + var(--color-surface) 0%, + rgba(var(--color-accent-rgb), 0.01) 100% ); + border-left: 3px solid rgba(var(--color-accent-rgb), 0.3); } -.component-item[data-schema-type="array"]:has(.component-details.expanded) { - border-left-color: var(--color-success); -} -.component-item[data-schema-type="object"]:has(.component-details.expanded) { - border-left-color: var(--color-brand); -} -.component-item[data-schema-type="string"]:has(.component-details.expanded) { - border-left-color: var(--color-info); + +/* Schema properties section enhances based on property count */ + +.schema-properties:has(.properties-list .property-item:nth-child(n+5)) { + border: 2px solid rgba(var(--color-brand-rgb), 0.1); + border-radius: 0.5rem; + padding: 1rem; + background: rgba(var(--color-brand-rgb), 0.02); } -.component-item[data-component="component-schema"]:has([data-has-properties="true"]) { - border-left: 3px solid var(--color-brand); + +.schema-properties:has(.properties-list .property-item:nth-child(n+10)) { + border-color: rgba(var(--color-accent-rgb), 0.2); + background: rgba(var(--color-accent-rgb), 0.03); } -.component-item[data-component="component-schema"]:has([data-has-required="true"]) .component-header { - background: rgba(var(--color-accent-rgb), 0.05); + +/* Properties adapt to required field density */ + +.properties-list:has(.property-item--required:nth-child(n+3)) { + border-left: 4px solid var(--color-warning); + padding-left: 0.5rem; } -.component-item[data-schema-type="object"]:has([data-property-count]) .component-name::after { - content: " (" attr(data-property-count) " properties)"; - color: var(--color-text-secondary); - font-size: 0.75rem; - font-weight: 400; + +/* Individual property items enhance based on content */ + +.property-item:has(.property-constraints) { + border-left: 2px solid rgba(var(--color-info-rgb), 0.4); + background: rgba(var(--color-info-rgb), 0.02); } -.component-item[data-schema-type="array"] .component-header { - background: linear-gradient(135deg, rgba(var(--color-info-rgb), 0.05), rgba(var(--color-accent-rgb), 0.05)); + +.property-item:has(.property-meta .property-format) { + border-left-color: rgba(var(--color-accent-rgb), 0.4); + background: rgba(var(--color-accent-rgb), 0.02); } -.component-item[data-schema-type="string"] .component-icon { - color: var(--color-accent); + +/* Schema constraints section adapts to constraint complexity */ + +.schema-constraints:has(.constraint:nth-child(n+3)) { + background: rgba(var(--color-bg-secondary-rgb), 0.5); + border: 1px solid var(--color-border-secondary); + border-radius: 0.5rem; + padding: 1rem; } -.component-item[data-component="component-parameter"][data-param-required="true"] { - border-left: 3px solid var(--color-accent); + +.schema-constraints:has(.constraint-modifier) { + border-left: 3px solid var(--color-warning); } -.component-item[data-component="component-parameter"][data-param-required="true"] .component-header { - background: rgba(var(--color-accent-rgb), 0.08); + +/* Array info enhances based on constraints */ + +.schema-array-info:has(.array-constraints .constraint:nth-child(n+2)) { + border: 1px solid rgba(var(--color-success-rgb), 0.2); + border-radius: 0.5rem; + padding: 1rem; + background: rgba(var(--color-success-rgb), 0.02); } -.component-item[data-param-in="path"] .component-header { - background: linear-gradient(135deg, rgba(var(--color-danger-rgb), 0.05), rgba(var(--color-danger-rgb), 0.05)); + +/* Schema composition gets enhanced styling */ + +.schema-composition:has(.composition-item:nth-child(n+3)) { + border: 2px solid rgba(var(--color-accent-rgb), 0.2); + border-radius: 0.75rem; + padding: 1.5rem; + background: rgba(var(--color-accent-rgb), 0.02); } -.component-item[data-param-in="query"] .component-header { - background: linear-gradient(135deg, rgba(var(--color-info-rgb), 0.05), rgba(var(--color-info-rgb), 0.05)); + +/* Nested schema containers get reduced visual weight */ + +.schema-container[data-level="1"]:has(.schema-properties) { + background: rgba(var(--color-bg-secondary-rgb), 0.3); + border-left-width: 2px; } -.component-item[data-param-in="header"] .component-header { - background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.05), rgba(var(--color-accent-rgb), 0.05)); + +.schema-container[data-level="2"]:has(.schema-properties) { + background: rgba(var(--color-bg-secondary-rgb), 0.2); + border-left-width: 1px; } -.component-item:has([data-has-description="true"]):hover { - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.15), - 0 2px 4px rgba(0, 0, 0, 0.08); + +/* Type-specific enhancements */ + +.schema-header:has(.type-badge--object) + .schema-constraints, +.schema-header:has(.type-badge--object) + * .schema-constraints { + border-top: 2px solid rgba(var(--color-brand-rgb), 0.1); } -.components-section:has(.component-item:nth-child(n+10)) { - --large-section: true; + +.schema-header:has(.type-badge--array) + .schema-array-info { + border-top: 2px solid rgba(var(--color-success-rgb), 0.1); } -.components-section:has(.component-item:nth-child(n+10)) .components-list { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 1rem; + +.schema-header:has(.type-badge--string) + .schema-constraints { + border-top: 2px solid rgba(var(--color-info-rgb), 0.1); } -.components-section:has(.component-item:only-child) .component-item { - max-width: 600px; - margin: 0 auto; + +/* Reference schemas get special styling */ + +.schema-container:has(.schema-ref) { + background: linear-gradient( + 135deg, + rgba(var(--color-accent-rgb), 0.05) 0%, + var(--color-surface) 100% + ); + border: 1px dashed rgba(var(--color-accent-rgb), 0.3); } -.component-item:has(.component-header:focus-visible) { - outline: 2px solid var(--color-brand); - outline-offset: 2px; + +/* Error and debug styling adaptations */ + +.schema-container:has(.schema-ref-error) { + background: rgba(var(--color-danger-rgb), 0.05); + border: 1px solid rgba(var(--color-danger-rgb), 0.2); } -.openapi-security { - padding: 2rem 0; + +/* Schema References */ + +.schema-ref { + margin: 0.5rem 0; + padding: 0.5rem; + background: rgba(var(--color-brand-rgb), 0.05); + border-left: 3px solid var(--color-brand); + border-radius: 0 0.25rem 0.25rem 0; } -.security-requirements { + +.ref-header { display: flex; - flex-direction: column; - gap: 1.5rem; -} -.security-requirement { + align-items: center; + gap: 0.5rem; + margin-bottom: 0.5rem; +} + +.ref-label { + font-size: 0.75rem; + font-weight: 600; + color: var(--color-text-secondary); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.ref-name { + font-family: var(--font-family-mono); + font-size: 0.875rem; + font-weight: 600; + color: var(--color-brand); +} + +.schema-ref-error { + padding: 0.75rem; + background: rgba(239, 68, 68, 0.05); + border: 1px solid rgba(239, 68, 68, 0.2); + border-radius: 0.375rem; + margin: 0.5rem 0; +} + +.schema-ref-error .error-message { + color: var(--color-danger); + font-weight: 500; + margin-bottom: 0.5rem; +} + +.debug-info { + font-size: 0.75rem; + color: var(--color-text-secondary); + background: var(--color-bg-tertiary); + padding: 0.5rem; + border-radius: 0.25rem; + margin-top: 0.5rem; +} + +.debug-info p { + margin: 0.25rem 0; +} + +.debug-info code { + font-family: var(--font-family-mono); + background: rgba(0, 0, 0, 0.1); + padding: 0.125rem 0.25rem; + border-radius: 0.125rem; +} + +/* Array and Object Indicators */ + +.schema-array-items, +.schema-object-properties { + margin-top: 0.75rem; +} + +.schema-array-items h6, +.schema-object-properties h6 { + font-size: 0.875rem; + font-weight: 600; + color: var(--color-text-secondary); + margin-bottom: 0.5rem; +} + +/* Type Badges */ + +.type-badge { + display: inline-block; + padding: 0.125rem 0.5rem; + border-radius: 1rem; + font-size: 0.75rem; + font-weight: 600; + text-transform: lowercase; +} + +/* Old hex-based type colors commented out in favor of tokens per themes/milodocs/init */ + +/* .type-badge--string { background: rgba(34, 197, 94, 0.1); color: #059669; } +.type-badge--number, +.type-badge--integer { background: rgba(59, 130, 246, 0.1); color: #2563eb; } +.type-badge--boolean { background: rgba(168, 85, 247, 0.1); color: #7c3aed; } +.type-badge--array { background: rgba(245, 158, 11, 0.1); color: #d97706; } +.type-badge--object { background: rgba(239, 68, 68, 0.1); color: #dc2626; } +.type-badge--null { background: rgba(107, 114, 128, 0.1); color: #4b5563; } */ + +.type-badge--string { background: var(--type-string-bg); color: var(--type-string-text); } + +.type-badge--number { background: var(--type-number-bg); color: var(--type-number-text); } + +.type-badge--integer { background: var(--type-integer-bg); color: var(--type-integer-text); } + +.type-badge--boolean { background: var(--type-boolean-bg); color: var(--type-boolean-text); } + +.type-badge--array { background: var(--type-array-bg); color: var(--type-array-text); } + +.type-badge--object { background: var(--type-object-bg); color: var(--type-object-text); } + +.type-badge--null { background: var(--type-null-bg); color: var(--type-null-text); } + +.type-format { + font-size: 0.75rem; + color: var(--color-text-secondary); + font-style: italic; + margin-left: 0.25rem; +} + +/* OpenAPI Security */ + +/* ========================================================================== + Security Section + ========================================================================== */ + +.openapi-security { + padding: 2rem 0; +} + +.security-requirements { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.security-requirement { background: var(--color-surface); border: 1px solid var(--color-border-primary); border-radius: 0.75rem; padding: 1.5rem; } + .security-scheme { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; } + .security-scheme:last-child { margin-bottom: 0; } + .security-icon { width: 2rem; height: 2rem; @@ -12235,18 +17301,21 @@ html { align-items: center; justify-content: center; color: var(--color-brand); - flex-shrink: 0; + shrink: 0; } + .security-info { flex: 1; min-width: 0; } + .security-name { font-size: 1rem; font-weight: 600; color: var(--color-text-primary); margin: 0 0 0.5rem 0; } + .security-type { display: inline-block; background: rgba(var(--color-accent-rgb), 0.1); @@ -12259,26 +17328,31 @@ html { letter-spacing: 0.05em; margin-bottom: 0.75rem; } + .security-description { font-size: 0.875rem; line-height: 1.5; color: var(--color-text-secondary); margin-bottom: 1rem; } + .security-scopes { margin-top: 1rem; } + .security-scopes h5 { margin: 0 0 0.5rem 0; font-size: 0.875rem; font-weight: 600; color: var(--color-text-primary); } + .scopes-list { display: flex; flex-wrap: wrap; gap: 0.375rem; } + .scope-item { background: var(--color-bg-secondary); color: var(--color-text-primary); @@ -12288,6 +17362,7 @@ html { font-weight: 500; border: 1px solid var(--color-border-primary); } + .security-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); @@ -12296,14 +17371,17 @@ html { padding-top: 1rem; border-top: 1px solid var(--color-border-primary); } + .security-detail { font-size: 0.875rem; } + .security-detail strong { color: var(--color-text-primary); display: block; margin-bottom: 0.25rem; } + .security-detail code { font-family: var(--font-family-mono); background: rgba(var(--color-brand-rgb), 0.1); @@ -12312,2968 +17390,1336 @@ html { border-radius: 0.125rem; font-size: 0.8rem; } -@media (max-width: 768px) { - .openapi-header { - padding: 2rem 1.5rem; - } - .openapi-header__title { - font-size: 2rem; - } - .openapi-header__info { - grid-template-columns: 1fr; - gap: 1rem; - } - .section-title { - font-size: 2rem; - } - .overview-grid { - grid-template-columns: 1fr; - gap: 1rem; - } - .endpoints-nav { - padding: 1rem; - } - .endpoints-nav__tags, - .endpoints-nav__methods { - gap: 0.375rem; - } - .tag-filter, - .method-filter { - padding: 0.375rem 0.75rem; - font-size: 0.8rem; - } - .endpoint-header { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - padding: 1rem; - } - .endpoint-header__method { - align-self: flex-start; - } - .endpoint-header__toggle { - position: absolute; - top: 1rem; - right: 1rem; - } - .endpoint-details { - padding: 1rem; - } - .property-item { - grid-template-columns: 1fr; - gap: 0.5rem; - } - .code-tabs-nav { - flex-wrap: wrap; - } - .code-tab { - padding: 0.75rem 1rem; - font-size: 0.8rem; - } - .code-example-header { - padding: 0.75rem 1rem; - } - .parameters-section-header, - .parameter-item { - padding: 0.75rem 1rem; - } -} -@media (max-width: 480px) { - .openapi-header { - padding: 1.5rem 1rem; - } - .openapi-header__title { - font-size: 1.75rem; - } - .section-title { - font-size: 1.75rem; - } - .overview-stat { - gap: 0.5rem; - padding: 0.625rem 0.75rem; - min-height: 50px; - } - .overview-stat__icon { - width: 1rem; - height: 1rem; - } - .overview-doc-link { - gap: 0.5rem; - padding: 0.75rem; - } - .endpoint-header { - padding: 0.75rem; - } - .endpoint-details { - padding: 0.75rem; - } + +/* OpenAPI Servers */ + +/* ========================================================================== + Servers Section + ========================================================================== */ + +.openapi-servers { + padding: 2rem 0; } -@media print { - .openapi-spec { - background: white !important; - color: black !important; - } - .endpoint-details { - display: block !important; - } - .code-tab-panel { - display: block !important; - } - .endpoints-nav, - .copy-button, - .endpoint-header__toggle { - display: none !important; - } + +.servers-list { + display: flex; + flex-direction: column; + gap: 1.5rem; } -[data-component="tabs"], -.tabs { - margin: 1.5rem 0; + +.server-item { + background: var(--color-surface); + border: 1px solid var(--color-border-primary); border-radius: 1rem; - background: var(--glass-bg); - border: 1px solid var(--glass-border-color); - box-shadow: var(--glass-shadow); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - overflow: hidden; - position: relative; -} -@media (prefers-color-scheme: light) { - [data-component="tabs"], - .tabs { - border-color: var(--color-border-primary); - } -} -[data-component="tabs"] [data-tab-id], -.tabs__nav { - background: var(--glass-bg); - border-bottom: 1px solid var(--glass-border-color); - padding: 0.5rem 0.5rem; - display: flex; - flex-wrap: wrap; - gap: 0.25rem; + padding: 2rem; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease, + box-shadow 0.2s ease; } -@media (prefers-color-scheme: light) { - [data-component="tabs"] [data-tab-id], - .tabs__nav { - border-bottom-color: var(--color-border-primary); - } + +.server-item:hover { + border-color: var(--color-brand); + box-shadow: 0 4px 16px rgba(var(--color-brand-rgb), 0.1); } -[data-component="tabs"] button[data-tab-option], -.tabs__button { - position: relative; - border-radius: 0.625rem; + +.server-url { + font-family: var(--font-family-mono); + font-size: 1.125rem; font-weight: 600; - transition: background-color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard); - border: 1px solid var(--glass-border-color); - cursor: pointer; - white-space: nowrap; - background: var(--glass-bg); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - padding: 0.25rem 0.5rem; + color: var(--color-brand); + margin-bottom: 1rem; + word-break: break-all; } -[data-component="tabs"] button[data-tab-option]:not(.bg-brand), -.tabs__button:not(.bg-brand) { - background: var(--glass-bg) !important; - color: var(--color-text-primary) !important; - border-color: var(--glass-border-color); + +.server-description { + font-size: 1rem; + line-height: 1.6; + color: var(--color-text-secondary); + margin-bottom: 1.5rem; } -@media (prefers-color-scheme: light) { - [data-component="tabs"] button[data-tab-option]:not(.bg-brand), - .tabs__button:not(.bg-brand) { - border-color: var(--color-border-primary); - } + +.server-variables { + margin-top: 1.5rem; } -[data-component="tabs"] button[data-tab-option]:not(.bg-brand):hover, -.tabs__button:not(.bg-brand):hover { - background: var(--color-surface-hover) !important; - color: var(--color-brand) !important; - border-color: rgba(var(--color-brand-rgb), 0.35); - transform: translateY(-1px); - box-shadow: var(--elevation-2); + +.server-variables h4 { + margin: 0 0 1rem 0; + font-size: 1rem; + font-weight: 600; + color: var(--color-text-primary); } -[data-component="tabs"] button.bg-brand, -.tabs__button.bg-brand { - background: var(--color-brand) !important; - color: var(--color-text-inverse, #fff) !important; - border-color: var(--color-brand); - box-shadow: var(--elevation-brand-subtle); - transform: translateY(-1px); + +.variables-list { + display: flex; + flex-direction: column; + gap: 1rem; } -[data-component="tabs"].tabs--subtle button.bg-brand, -.tabs.tabs--subtle .tabs__button.bg-brand { - background: linear-gradient( - 135deg, - rgba(var(--color-brand-rgb), 0.08) 0%, - transparent 50%, - rgba(var(--color-brand-rgb), 0.06) 100% - ), - var(--glass-bg) !important; - color: var(--color-text-primary) !important; - border-color: rgba(var(--color-brand-rgb), 0.45); - box-shadow: 0 2px 8px rgba(var(--color-brand-rgb), 0.18), var(--elevation-2); + +.variable-item { + background: var(--color-bg-secondary); + padding: 1rem; + border-radius: 0.5rem; + border: 1px solid var(--color-border-primary); } -@media (prefers-color-scheme: dark) { - [data-component="tabs"] button.bg-brand, - .tabs__button.bg-brand { - background: var(--color-brand) !important; - color: var(--color-text-inverse, #fff) !important; - border-color: var(--color-brand); - box-shadow: var(--elevation-brand-medium); - } + +.variable-name { + font-family: var(--font-family-mono); + font-weight: 600; + color: var(--color-brand); + margin-bottom: 0.5rem; } -[data-component="tabs"] button[data-tab-option]:focus-visible, -.tabs__button:focus-visible { - outline: 2px solid var(--color-brand); - outline-offset: 2px; - box-shadow: 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(var(--color-brand-rgb), 0.15); + +.variable-description { + font-size: 0.875rem; + color: var(--color-text-secondary); + margin-bottom: 0.5rem; } -[data-component="tabs"] .w-full, -.tabs__content { - min-height: 200px; - position: relative; - overflow: hidden; - border-top: 1px solid var(--glass-border-color); - transition: height var(--timing-medium) var(--easing-standard); - isolation: isolate; + +.variable-default { + font-size: 0.875rem; + color: var(--color-text-primary); } -[data-component="tabs"] [data-tabcontent], -.tabs__panel { - padding: 1.25rem 1.5rem; - background: transparent; - position: absolute; - top: 0; - left: 0; - right: 0; - will-change: opacity, transform; - backface-visibility: hidden; - transform: var(--transform-slide-in-up); - opacity: 0; - visibility: hidden; - pointer-events: none; - transition: opacity var(--timing-medium) var(--easing-standard), - transform var(--timing-medium) var(--easing-standard), - visibility 0s linear var(--timing-medium); + +.variable-default strong { + color: var(--color-text-primary); } -[data-component="tabs"] [data-tabcontent].is-active, -.tabs__panel.is-active { - opacity: 1; - transform: var(--transform-translate-none); - visibility: visible; - pointer-events: auto; - transition-delay: 0s, 0s, 0s; - animation: slideInUp var(--timing-medium) var(--easing-standard); + +.variable-default code { + font-family: var(--font-family-mono); + background: rgba(var(--color-brand-rgb), 0.1); + padding: 0.125rem 0.25rem; + border-radius: 0.125rem; + color: var(--color-brand); } -[data-component="tabs"] [data-tabcontent] > *:first-child, -.tabs__panel > *:first-child { - margin-top: 0; + +/* OpenAPI Sidebar Styles */ + +/* Inspired by Mintlify's clean, hierarchical design */ + +/* ========================================================================== + OpenAPI Sidebar Base + ========================================================================== */ + +.openapi-sidebar-section { + margin-bottom: 2rem; + padding-bottom: 1.5rem; + border-bottom: 1px solid var(--color-border-light); } -[data-component="tabs"] [data-tabcontent] > *:last-child, -.tabs__panel > *:last-child { - margin-bottom: 0; + +.openapi-sidebar-section:last-child { + border-bottom: none; } -[data-component="tabs"] [data-tabcontent] *, -.tabs__panel * { - transition: none; + +.openapi-sidebar-header { + margin-bottom: 1rem; } -[data-component="tabs"].tabs--compact .tabs__nav, -.tabs.tabs--compact .tabs__nav { - padding: 0.25rem 0.25rem; - gap: 0.125rem; + +.openapi-sidebar-title { + font-size: 1.125rem; + font-weight: 600; + color: var(--color-text-primary); + margin: 0 0 0.25rem 0; + line-height: 1.4; } -[data-component="tabs"].tabs--compact button[data-tab-option], -.tabs.tabs--compact .tabs__button { - padding: 0.375rem 0.5rem; + +.openapi-sidebar-version { + display: inline-block; + padding: 0.125rem 0.5rem; + background: var(--color-brand-primary); + color: white; + font-size: 0.75rem; + font-weight: 500; + border-radius: 0.375rem; + margin-left: 0.5rem; +} + +.openapi-sidebar-description { font-size: 0.875rem; + color: var(--color-text-secondary); + line-height: 1.5; + margin: 0.5rem 0 0 0; } -[data-component="tabs"] button[data-tab-option]:not(.bg-brand)::after, -.tabs__button:not(.bg-brand)::after { - content: ""; - position: absolute; - left: 0.5rem; - right: 0.5rem; - bottom: 0.25rem; - height: 2px; - background: rgba(var(--color-brand-rgb), 0.35); - transform: scaleX(0); - transform-origin: left center; - transition: transform var(--timing-medium) var(--easing-standard); + +/* ========================================================================== + Navigation Links + ========================================================================== */ + +.openapi-sidebar-nav { + list-style: none; + margin: 0; + padding: 0; } -[data-component="tabs"] button[data-tab-option]:not(.bg-brand):hover::after, -.tabs__button:not(.bg-brand):hover::after { - transform: scaleX(1); + +.openapi-sidebar-nav-item { + margin-bottom: 0.25rem; } -@media (max-width: 640px) { - [data-component="tabs"] [data-tab-id], - .tabs__nav { - flex-direction: column; - align-items: stretch; - } - [data-component="tabs"] button[data-tab-option], - .tabs__button { - text-align: left; - justify-content: flex-start; - } - [data-component="tabs"] [data-tabcontent], - .tabs__panel { - padding: 1.5rem; - } + +.openapi-sidebar-link { + display: flex; + align-items: center; + padding: 0.5rem 0.75rem; + color: var(--color-text-secondary); + text-decoration: none; + border-radius: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + transition: + background-color 0.15s ease, + border-color 0.15s ease, + color 0.15s ease, + transform 0.15s ease, + box-shadow 0.15s ease; + border: 1px solid transparent; } -@media print { - [data-component="tabs"] [data-tab-id], - .tabs__nav { - display: none; - } - [data-component="tabs"] [data-tabcontent], - .tabs__panel { - position: static !important; - display: block !important; - opacity: 1 !important; - visibility: visible !important; - pointer-events: auto !important; - transform: none !important; - page-break-inside: avoid; - } - [data-component="tabs"] [data-tabcontent]:not(:first-of-type), - .tabs__panel:not(:first-of-type) { - margin-top: 2rem; - border-top: 1px solid var(--color-border-primary); - padding-top: 2rem; - } - [data-component="tabs"] [data-tabcontent]::before, - .tabs__panel::before { - content: "Tab: " attr(data-tabcontent); - display: block; - font-weight: bold; - margin-bottom: 1rem; - color: var(--color-text-secondary); - font-size: 0.875rem; - text-transform: capitalize; - } + +.openapi-sidebar-link:hover { + color: var(--color-text-primary); + background: var(--color-surface-hover); } -@media (prefers-color-scheme: dark) { - [data-component="tabs"], .tabs { - box-shadow: var(--elevation-4); - } - [data-component="tabs"] button.bg-brand, .tabs__button.bg-brand { - box-shadow: var(--elevation-brand-medium); - } + +.openapi-sidebar-link--active { + color: var(--color-brand-primary); + background: var(--color-brand-background); + border-color: var(--color-brand-border); + font-weight: 600; } -@media (prefers-color-scheme: dark) { - [data-component="tabs"]::after, - .tabs::after { - background: linear-gradient( - to bottom, - rgba(0,0,0,0) 0%, - rgba(0,0,0,0.18) 55%, - rgba(0,0,0,0.28) 100% - ); - } + +.openapi-sidebar-link-text { + flex: 1; } -.code-block-enhanced { - background: var(--glass-bg); - border-radius: 0.75rem; - border: 1px solid var(--glass-border-color); - backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); - box-shadow: var(--glass-shadow); - overflow: hidden; + +/* ========================================================================== + Section Headers + ========================================================================== */ + +.openapi-sidebar-section-header { + margin-bottom: 1rem; } -@media (prefers-color-scheme: light) { - .code-block-enhanced { - border-color: var(--color-border-primary); - } + +.openapi-sidebar-section-header h4 { + font-size: 0.875rem; + font-weight: 600; + color: var(--color-text-primary); + margin: 0; + text-transform: uppercase; + letter-spacing: 0.05em; } -.code-block-enhanced .code-header { + +/* ========================================================================== + Tag Groups + ========================================================================== */ + +.openapi-sidebar-endpoints { + list-style: none; + margin: 0; + padding: 0; +} + +.openapi-sidebar-tag-group { + margin-bottom: 1rem; +} + +.openapi-sidebar-tag-header { display: flex; - justify-content: space-between; align-items: center; - gap: 0.75rem; - padding: 0.5rem 0.75rem; - background: var(--glass-bg); - border-bottom: 1px solid var(--glass-border-color); -} -@media (prefers-color-scheme: light) { - .code-block-enhanced .code-header { - border-bottom-color: var(--color-border-primary); - } + margin-bottom: 0.5rem; } -.code-block-enhanced .code-language { + +.openapi-sidebar-tag-toggle { + display: flex; + align-items: center; + justify-content: center; + width: 1.25rem; + height: 1.25rem; + padding: 0; + margin-right: 0.5rem; + background: none; + border: none; color: var(--color-text-secondary); + cursor: pointer; + border-radius: 0.25rem; + transition: + background-color 0.15s ease, + color 0.15s ease, + transform 0.15s ease; +} + +.openapi-sidebar-tag-toggle:hover { + color: var(--color-text-primary); + background: var(--color-surface-hover); +} + +.openapi-sidebar-chevron { + width: 0.875rem; + height: 0.875rem; + transition: transform 0.15s ease; +} + +.openapi-sidebar-tag-toggle--expanded .openapi-sidebar-chevron { + transform: rotate(90deg); +} + +.openapi-sidebar-tag-name { + font-size: 0.875rem; font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.04em; - font-size: 0.75rem; + color: var(--color-text-primary); + text-transform: capitalize; } -.code-block-enhanced .code-actions .btn { - border-radius: 0.5rem; + +/* ========================================================================== + Endpoints List + ========================================================================== */ + +.openapi-sidebar-endpoints-list { + list-style: none; + margin: 0; + padding: 0; + overflow: hidden; + transition: max-height 0.15s ease, opacity 0.15s ease; } -.code-block-enhanced .code-actions .btn.btn--ghost { - background: var(--glass-bg); - border: 1px solid var(--glass-border-color); + +.openapi-sidebar-endpoints-list--expanded { + /* Animation handled by display property changes in JS */ } -.code-block-enhanced .code-actions .btn.btn--ghost:hover { - background: var(--color-surface-hover); - color: var(--color-brand); - border-color: rgba(var(--color-brand-rgb), 0.35); + +.openapi-sidebar-endpoint { + margin-bottom: 0.125rem; } -.code-block-enhanced .code-content { - background: transparent; + +.openapi-sidebar-endpoint-link { + display: flex; + align-items: flex-start; + padding: 0.5rem 0.75rem; + color: var(--color-text-secondary); + text-decoration: none; + border-radius: 0.375rem; + font-size: 0.8125rem; + transition: + background-color 0.15s ease, + border-color 0.15s ease, + color 0.15s ease, + transform 0.15s ease; + border: 1px solid transparent; + margin-left: 1.75rem; /* Indent under tag */ + gap: 0.5rem; } -.code-block-enhanced .code-content .highlight, -.code-block-enhanced .code-content .highlight pre, -.code-block-enhanced .code-content pre, -.code-block-enhanced .code-content code { - background: transparent; + +.openapi-sidebar-endpoint-link:hover { + color: var(--color-text-primary); + background: var(--color-surface-hover); } -.code-block-enhanced .code-content pre { - margin: 0; - padding: 0.75rem 1rem; + +.openapi-sidebar-endpoint-link--active { + color: var(--color-brand-primary); + background: var(--color-brand-background); + border-color: var(--color-brand-border); + font-weight: 500; } -.code-block-enhanced .code-content code { - display: block; + +/* ========================================================================== + HTTP Method Badges + ========================================================================== */ + +.openapi-sidebar-method { + display: inline-block; + padding: 0.125rem 0.375rem; + font-size: 0.6875rem; + font-weight: 600; + text-transform: uppercase; + border-radius: 0.25rem; + min-width: 3rem; + text-align: center; + shrink: 0; + letter-spacing: 0.025em; } -@media (prefers-color-scheme: dark) { - .code-block-enhanced { - box-shadow: var(--elevation-4); - } + +.openapi-sidebar-method--get { background: var(--http-get-bg); color: var(--http-get-text); } + +.openapi-sidebar-method--post { background: var(--http-post-bg); color: var(--http-post-text); } + +.openapi-sidebar-method--put { background: var(--http-put-bg); color: var(--http-put-text); } + +.openapi-sidebar-method--patch { background: var(--http-patch-bg); color: var(--http-patch-text); } + +.openapi-sidebar-method--delete { background: var(--http-delete-bg); color: var(--http-delete-text); } + +.openapi-sidebar-method--head, +.openapi-sidebar-method--options { background: var(--http-head-bg); color: var(--http-head-text); } + +/* ========================================================================== + Endpoint Details + ========================================================================== */ + +.openapi-sidebar-endpoint-path { + flex: 1; + font-weight: 500; + color: var(--color-text-primary); + line-height: 1.3; + word-break: break-all; } -.code-block-enhanced .code-actions .copy-code .btn__icon { - margin-right: 0; - width: 1rem; - height: 1rem; + +.openapi-sidebar-endpoint-summary { display: block; + font-size: 0.75rem; + color: var(--color-text-tertiary); + line-height: 1.3; + margin-top: 0.125rem; + font-weight: 400; } -@layer components { - [data-component="object-model"] { - --om-pad-x: 0rem; - --om-chevron: 1rem; - --om-gap: 0.5rem; - --om-indent: calc(var(--om-pad-x) + var(--om-chevron) + var(--om-gap)); - } - .object-model__title, - .object-model__heading { - scroll-margin-top: var(--header-offset); - } - .object-model__heading, - .object-model__subheading { - color: var(--color-text-primary); - } - .object-model__heading-badge { - display: inline-block; - padding: 0.25rem 0.5rem; - border-radius: 0.5rem; - background: var(--color-surface); - border: 1px solid var(--color-border-primary); - color: var(--color-text-primary); - } - .object-model__intro-text, - .object-model__summary { - color: var(--color-text-primary); - } - .object-model__list { - background: transparent; - border: 0; - box-shadow: none; - overflow: visible; - color: var(--color-text-primary); - list-style: none; - padding-left: 0; - } - .object-model__item, - .object-model__field, - .object-model__options { - color: inherit; - } - .object-model__details > summary::-webkit-details-marker { - display: none; - } - .object-model__details > summary { - list-style: none; - } - .object-model__options { - list-style: none; - padding-inline-start: 0; - margin-left: 0.5em; - padding-left: var(--om-indent); - padding-top: 0.25rem; - } - .article-content[data-component="object-model"] .object-model__list li, - .article-content[data-component="object-model"] .object-model__list li li { - margin-left: 0; - padding-left: 0; - } - .object-model__summary-row { - border-radius: var(--radius-md); - --tw-outline-style: none; - outline-style: none; - &:focus-visible { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - &:focus-visible { - --tw-ring-color: var(--color-indigo-500); - } - @media (prefers-color-scheme: dark) { - &:focus-visible { - --tw-ring-color: var(--color-indigo-400); - } - } - } - .object-model__summary-row:hover { - background-color: rgba(var(--color-brand-rgb), 0.03); - } - .object-model__name { - color: var(--color-text-primary); - } - .object-model__description { - color: var(--color-text-primary); - } - .object-model__chevron { - color: var(--color-text-secondary); - } - .object-model__dash { - color: var(--color-border-primary); - } - .object-model__option-key code { - color: var(--color-text-primary); - font-weight: 600; - } - .object-model__option-value, - .object-model__option-value p, - .object-model__option-value a { - color: var(--color-text-primary); - } - .object-model__option-value { - display: inline; - margin-left: 0.375rem; - } - .object-model__option-value p { - display: inline; - margin: 0; - } - .object-model__option-value a:hover { - color: var(--color-brand); - } - .object-model__option-item { - display: block; - padding: 0.125rem 0; - font-size: 0.875rem; - line-height: 1.45; - } - .object-model__option-key { - color: var(--color-text-secondary); - white-space: nowrap; - } - .object-model__option-value { - color: var(--color-text-primary); - } - .object-model__option-item > strong { - margin-right: 0.375rem; - font-weight: 600; - } - .object-model__option-item code { - white-space: nowrap; - } - .object-model__row, - .object-model__summary-row { - padding-block: calc(var(--spacing) * 1.5); - @media (width >= 48rem) { - padding-block: calc(var(--spacing) * 2); - } - } - .object-model__details:not([open]) .object-model__summary-row { - box-shadow: none; - } - .object-model__details[open] .object-model__summary-row { - box-shadow: none; - } - .object-model__item + .object-model__item { - margin-top: 0.25rem; - } -} -@layer theme { - :root, :host { - --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", - "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", - "Courier New", monospace; - --color-red-50: oklch(97.1% 0.013 17.38); - --color-red-100: oklch(93.6% 0.032 17.717); - --color-red-200: oklch(88.5% 0.062 18.334); - --color-red-400: oklch(70.4% 0.191 22.216); - --color-red-500: oklch(63.7% 0.237 25.331); - --color-red-600: oklch(57.7% 0.245 27.325); - --color-red-700: oklch(50.5% 0.213 27.518); - --color-red-800: oklch(44.4% 0.177 26.899); - --color-red-900: oklch(39.6% 0.141 25.723); - --color-yellow-50: oklch(98.7% 0.026 102.212); - --color-yellow-100: oklch(97.3% 0.071 103.193); - --color-yellow-200: oklch(94.5% 0.129 101.54); - --color-yellow-300: oklch(90.5% 0.182 98.111); - --color-yellow-400: oklch(85.2% 0.199 91.936); - --color-yellow-500: oklch(79.5% 0.184 86.047); - --color-yellow-700: oklch(55.4% 0.135 66.442); - --color-yellow-800: oklch(47.6% 0.114 61.907); - --color-yellow-900: oklch(42.1% 0.095 57.708); - --color-green-100: oklch(96.2% 0.044 156.743); - --color-green-500: oklch(72.3% 0.219 149.579); - --color-green-600: oklch(62.7% 0.194 149.214); - --color-blue-50: oklch(97% 0.014 254.604); - --color-blue-100: oklch(93.2% 0.032 255.585); - --color-blue-200: oklch(88.2% 0.059 254.128); - --color-blue-300: oklch(80.9% 0.105 251.813); - --color-blue-500: oklch(62.3% 0.214 259.815); - --color-blue-600: oklch(54.6% 0.245 262.881); - --color-blue-800: oklch(42.4% 0.199 265.638); - --color-blue-900: oklch(37.9% 0.146 265.522); - --color-indigo-400: oklch(67.3% 0.182 276.935); - --color-indigo-500: oklch(58.5% 0.233 277.117); - --color-gray-50: oklch(98.5% 0.002 247.839); - --color-gray-100: oklch(96.7% 0.003 264.542); - --color-gray-200: oklch(92.8% 0.006 264.531); - --color-gray-300: oklch(87.2% 0.01 258.338); - --color-gray-400: oklch(70.7% 0.022 261.325); - --color-gray-500: oklch(55.1% 0.027 264.364); - --color-gray-600: oklch(44.6% 0.03 256.802); - --color-gray-700: oklch(37.3% 0.034 259.733); - --color-gray-800: oklch(27.8% 0.033 256.848); - --color-gray-900: oklch(21% 0.034 264.665); - --color-zinc-100: oklch(96.7% 0.001 286.375); - --color-zinc-200: oklch(92% 0.004 286.32); - --color-zinc-300: oklch(87.1% 0.006 286.286); - --color-zinc-600: oklch(44.2% 0.017 285.786); - --color-zinc-700: oklch(37% 0.013 285.805); - --color-zinc-800: oklch(27.4% 0.006 286.033); - --color-zinc-900: oklch(21% 0.006 285.885); - --color-black: #000; - --color-white: #fff; - --spacing: 0.25rem; - --breakpoint-xl: 80rem; - --breakpoint-2xl: 96rem; - --container-xs: 20rem; - --container-sm: 24rem; - --container-md: 28rem; - --container-lg: 32rem; - --container-xl: 36rem; - --container-2xl: 42rem; - --container-3xl: 48rem; - --container-4xl: 56rem; - --container-5xl: 64rem; - --container-6xl: 72rem; - --container-7xl: 80rem; - --text-xs: 0.75rem; - --text-xs--line-height: calc(1 / 0.75); - --text-sm: 0.875rem; - --text-sm--line-height: calc(1.25 / 0.875); - --text-base: 1rem; - --text-base--line-height: calc(1.5 / 1); - --text-lg: 1.125rem; - --text-lg--line-height: calc(1.75 / 1.125); - --text-xl: 1.25rem; - --text-xl--line-height: calc(1.75 / 1.25); - --text-2xl: 1.5rem; - --text-2xl--line-height: calc(2 / 1.5); - --text-3xl: 1.875rem; - --text-3xl--line-height: calc(2.25 / 1.875); - --text-4xl: 2.25rem; - --text-4xl--line-height: calc(2.5 / 2.25); - --text-5xl: 3rem; - --text-5xl--line-height: 1; - --font-weight-thin: 100; - --font-weight-light: 300; - --font-weight-normal: 400; - --font-weight-medium: 500; - --font-weight-semibold: 600; - --font-weight-bold: 700; - --font-weight-black: 900; - --tracking-wide: 0.025em; - --leading-tight: 1.25; - --leading-relaxed: 1.625; - --radius-sm: 0.25rem; - --radius-md: 0.375rem; - --radius-lg: 0.5rem; - --radius-xl: 0.75rem; - --radius-2xl: 1rem; - --radius-3xl: 1.5rem; - --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); - --animate-spin: spin 1s linear infinite; - --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; - --default-transition-duration: 150ms; - --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - --default-font-family: var(--font-sans); - --default-mono-font-family: var(--font-mono); - } -} -@layer base { - *, - ::after, - ::before, - ::backdrop, - ::file-selector-button { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0 solid; - } - html, - :host { - line-height: 1.5; - -webkit-text-size-adjust: 100%; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); - font-feature-settings: var(--default-font-feature-settings, normal); - font-variation-settings: var(--default-font-variation-settings, normal); - -webkit-tap-highlight-color: transparent; - } - hr { - height: 0; - color: inherit; - border-top-width: 1px; - } - abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; - } - h1, - h2, - h3, - h4, - h5, - h6 { - font-size: inherit; - font-weight: inherit; - } - a { - color: inherit; - -webkit-text-decoration: inherit; - text-decoration: inherit; - } - b, - strong { - font-weight: bolder; - } - code, - kbd, - samp, - pre { - font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); - font-feature-settings: var(--default-mono-font-feature-settings, normal); - font-variation-settings: var(--default-mono-font-variation-settings, normal); - font-size: 1em; - } - small { - font-size: 80%; - } - sub, - sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - } - sub { - bottom: -0.25em; - } - sup { - top: -0.5em; - } - table { - text-indent: 0; - border-color: inherit; - border-collapse: collapse; - } - :-moz-focusring { - outline: auto; - } - progress { - vertical-align: baseline; - } - summary { - display: list-item; - } - ol, - ul, - menu { - list-style: none; - } - img, - svg, - video, - canvas, - audio, - iframe, - embed, - object { - display: block; - vertical-align: middle; - } - img, - video { - max-width: 100%; - height: auto; - } - button, - input, - select, - optgroup, - textarea, - ::file-selector-button { - font: inherit; - font-feature-settings: inherit; - font-variation-settings: inherit; - letter-spacing: inherit; - color: inherit; - border-radius: 0; - background-color: transparent; - opacity: 1; - } - :where(select:is([multiple], [size])) optgroup { - font-weight: bolder; - } - :where(select:is([multiple], [size])) optgroup option { - padding-inline-start: 20px; - } - ::file-selector-button { - margin-inline-end: 4px; - } - ::-moz-placeholder { - opacity: 1; - } - ::placeholder { - opacity: 1; - } - @supports (not (-webkit-appearance: -apple-pay-button)) or - (contain-intrinsic-size: 1px) { - ::-moz-placeholder { - color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, currentcolor 50%, transparent); - } - } - ::placeholder { - color: currentcolor; - @supports (color: color-mix(in lab, red, red)) { - color: color-mix(in oklab, currentcolor 50%, transparent); - } - } - } - textarea { - resize: vertical; - } - ::-webkit-search-decoration { - -webkit-appearance: none; - } - ::-webkit-date-and-time-value { - min-height: 1lh; - text-align: inherit; - } - ::-webkit-datetime-edit { - display: inline-flex; - } - ::-webkit-datetime-edit-fields-wrapper { - padding: 0; - } - ::-webkit-datetime-edit, - ::-webkit-datetime-edit-year-field, - ::-webkit-datetime-edit-month-field, - ::-webkit-datetime-edit-day-field, - ::-webkit-datetime-edit-hour-field, - ::-webkit-datetime-edit-minute-field, - ::-webkit-datetime-edit-second-field, - ::-webkit-datetime-edit-millisecond-field, - ::-webkit-datetime-edit-meridiem-field { - padding-block: 0; - } - ::-webkit-calendar-picker-indicator { - line-height: 1; - } - :-moz-ui-invalid { - box-shadow: none; - } - button, - input:where([type="button"], [type="reset"], [type="submit"]), - ::file-selector-button { - -webkit-appearance: button; - -moz-appearance: button; - appearance: button; - } - ::-webkit-inner-spin-button, - ::-webkit-outer-spin-button { - height: auto; - } - [hidden]:where(:not([hidden="until-found"])) { - display: none !important; - } -} -@layer utilities { - .\@container { - container-type: inline-size; - } - .pointer-events-none { - pointer-events: none; - } - .collapse { - visibility: collapse; - } - .visible { - visibility: visible; - } - .sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip-path: inset(50%); - white-space: nowrap; - border-width: 0; - } - .absolute { - position: absolute; - } - .fixed { - position: fixed; - } - .relative { - position: relative; - } - .static { - position: static; - } - .sticky { - position: sticky; - } - .inset-0 { - inset: calc(var(--spacing) * 0); - } - .top-0 { - top: calc(var(--spacing) * 0); - } - .top-4 { - top: calc(var(--spacing) * 4); - } - .top-10 { - top: calc(var(--spacing) * 10); - } - .top-16 { - top: calc(var(--spacing) * 16); - } - .top-20 { - top: calc(var(--spacing) * 20); - } - .right-0 { - right: calc(var(--spacing) * 0); - } - .right-2 { - right: calc(var(--spacing) * 2); - } - .right-2\.5 { - right: calc(var(--spacing) * 2.5); - } - .bottom-\[9px\] { - bottom: 9px; - } - .left-0 { - left: calc(var(--spacing) * 0); - } - .left-4 { - left: calc(var(--spacing) * 4); - } - .z-10 { - z-index: 10; - } - .z-40 { - z-index: 40; - } - .z-50 { - z-index: 50; - } - .container { - width: 100%; - @media (width >= 40rem) { - max-width: 40rem; - } - @media (width >= 48rem) { - max-width: 48rem; - } - @media (width >= 64rem) { - max-width: 64rem; - } - @media (width >= 80rem) { - max-width: 80rem; - } - @media (width >= 96rem) { - max-width: 96rem; - } - } - .m-4 { - margin: calc(var(--spacing) * 4); - } - .m-auto { - margin: auto; - } - .mx-2 { - margin-inline: calc(var(--spacing) * 2); - } - .mx-8 { - margin-inline: calc(var(--spacing) * 8); - } - .mx-auto { - margin-inline: auto; - } - .my-1 { - margin-block: calc(var(--spacing) * 1); - } - .my-2 { - margin-block: calc(var(--spacing) * 2); - } - .my-4 { - margin-block: calc(var(--spacing) * 4); - } - .my-10 { - margin-block: calc(var(--spacing) * 10); - } - .my-auto { - margin-block: auto; - } - .mt-1 { - margin-top: calc(var(--spacing) * 1); - } - .mt-2 { - margin-top: calc(var(--spacing) * 2); - } - .mt-3 { - margin-top: calc(var(--spacing) * 3); - } - .mt-4 { - margin-top: calc(var(--spacing) * 4); - } - .mt-6 { - margin-top: calc(var(--spacing) * 6); - } - .mt-8 { - margin-top: calc(var(--spacing) * 8); - } - .mt-12 { - margin-top: calc(var(--spacing) * 12); - } - .-mr-1 { - margin-right: calc(var(--spacing) * -1); - } - .mr-1 { - margin-right: calc(var(--spacing) * 1); - } - .mr-2 { - margin-right: calc(var(--spacing) * 2); - } - .mr-3 { - margin-right: calc(var(--spacing) * 3); + +/* ========================================================================== + Responsive Design + ========================================================================== */ + +@media (max-width: 768px) { + .openapi-sidebar-section { + margin-bottom: 1.5rem; + padding-bottom: 1rem; } - .mb-1 { - margin-bottom: calc(var(--spacing) * 1); + + .openapi-sidebar-title { + font-size: 1rem; } - .mb-2 { - margin-bottom: calc(var(--spacing) * 2); + + .openapi-sidebar-endpoint-link { + margin-left: 1.5rem; + padding: 0.375rem 0.5rem; } - .mb-3 { - margin-bottom: calc(var(--spacing) * 3); + + .openapi-sidebar-method { + min-width: 2.5rem; + font-size: 0.625rem; } - .mb-4 { - margin-bottom: calc(var(--spacing) * 4); +} + +/* ========================================================================== + Dark Mode Support + ========================================================================== */ + +@media (prefers-color-scheme: dark) { + .openapi-sidebar-version { background: var(--color-brand-primary-dark, var(--color-brand-primary)); } +} + +/* ========================================================================== + Focus States + ========================================================================== */ + +.openapi-sidebar-link:focus-visible, +.openapi-sidebar-endpoint-link:focus-visible, +.openapi-sidebar-tag-toggle:focus-visible { + outline: 2px solid var(--color-brand-primary); + outline-offset: 2px; +} + +/* ========================================================================== + Smooth Scrolling Enhancement + ========================================================================== */ + +html { + scroll-behavior: smooth; +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; } - .mb-6 { - margin-bottom: calc(var(--spacing) * 6); + + .openapi-sidebar-chevron, + .openapi-sidebar-endpoints-list { + transition: none; } - .mb-8 { - margin-bottom: calc(var(--spacing) * 8); - } - .ml-1 { - margin-left: calc(var(--spacing) * 1); - } - .ml-2 { - margin-left: calc(var(--spacing) * 2); - } - .ml-3 { - margin-left: calc(var(--spacing) * 3); - } - .ml-4 { - margin-left: calc(var(--spacing) * 4); - } - .ml-8 { - margin-left: calc(var(--spacing) * 8); - } - .line-clamp-2 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - } - .line-clamp-3 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; - } - .block { - display: block; - } - .contents { - display: contents; - } - .flex { - display: flex; - } - .grid { - display: grid; - } - .hidden { - display: none; - } - .inline { - display: inline; - } - .inline-block { - display: inline-block; - } - .inline-flex { - display: inline-flex; - } - .table { - display: table; - } - .h-1 { - height: calc(var(--spacing) * 1); - } - .h-1\.5 { - height: calc(var(--spacing) * 1.5); - } - .h-3 { - height: calc(var(--spacing) * 3); - } - .h-3\.5 { - height: calc(var(--spacing) * 3.5); - } - .h-4 { - height: calc(var(--spacing) * 4); - } - .h-5 { - height: calc(var(--spacing) * 5); - } - .h-6 { - height: calc(var(--spacing) * 6); - } - .h-7 { - height: calc(var(--spacing) * 7); - } - .h-8 { - height: calc(var(--spacing) * 8); - } - .h-10 { - height: calc(var(--spacing) * 10); - } - .h-16 { - height: calc(var(--spacing) * 16); - } - .h-32 { - height: calc(var(--spacing) * 32); - } - .h-48 { - height: calc(var(--spacing) * 48); - } - .h-\[calc\(100vh-4rem\)\] { - height: calc(100vh - 4rem); - } - .h-\[calc\(100vh-5rem\)\] { - height: calc(100vh - 5rem); - } - .h-\[calc\(100vh-6rem\)\] { - height: calc(100vh - 6rem); - } - .h-full { - height: 100%; - } - .h-screen { - height: 100vh; - } - .w-1 { - width: calc(var(--spacing) * 1); - } - .w-3 { - width: calc(var(--spacing) * 3); - } - .w-3\.5 { - width: calc(var(--spacing) * 3.5); - } - .w-3\/4 { - width: calc(3/4 * 100%); - } - .w-4 { - width: calc(var(--spacing) * 4); - } - .w-4\/6 { - width: calc(4/6 * 100%); - } - .w-5 { - width: calc(var(--spacing) * 5); - } - .w-5\/6 { - width: calc(5/6 * 100%); - } - .w-6 { - width: calc(var(--spacing) * 6); - } - .w-7 { - width: calc(var(--spacing) * 7); - } - .w-8 { - width: calc(var(--spacing) * 8); - } - .w-56 { - width: calc(var(--spacing) * 56); - } - .w-80 { - width: calc(var(--spacing) * 80); - } - .w-full { - width: 100%; - } - .max-w-\(--breakpoint-xl\) { - max-width: var(--breakpoint-xl); - } - .max-w-2xl { - max-width: var(--container-2xl); - } - .max-w-3xl { - max-width: var(--container-3xl); - } - .max-w-4xl { - max-width: var(--container-4xl); - } - .max-w-5xl { - max-width: var(--container-5xl); - } - .max-w-6xl { - max-width: var(--container-6xl); - } - .max-w-7xl { - max-width: var(--container-7xl); - } - .max-w-full { - max-width: 100%; - } - .max-w-lg { - max-width: var(--container-lg); - } - .max-w-md { - max-width: var(--container-md); - } - .max-w-prose { - max-width: 65ch; - } - .max-w-sm { - max-width: var(--container-sm); - } - .max-w-xl { - max-width: var(--container-xl); - } - .max-w-xs { - max-width: var(--container-xs); - } - .min-w-0 { - min-width: calc(var(--spacing) * 0); - } - .flex-1 { - flex: 1; - } - .flex-shrink { - flex-shrink: 1; - } - .flex-shrink-0 { - flex-shrink: 0; - } - .shrink { - flex-shrink: 1; - } - .shrink-0 { - flex-shrink: 0; - } - .flex-grow { - flex-grow: 1; - } - .grow { - flex-grow: 1; - } - .border-collapse { - border-collapse: collapse; - } - .-translate-x-full { - --tw-translate-x: -100%; - translate: var(--tw-translate-x) var(--tw-translate-y); - } - .translate-x-0 { - --tw-translate-x: calc(var(--spacing) * 0); - translate: var(--tw-translate-x) var(--tw-translate-y); - } - .scale-0 { - --tw-scale-x: 0%; - --tw-scale-y: 0%; - --tw-scale-z: 0%; - scale: var(--tw-scale-x) var(--tw-scale-y); - } - .scale-100 { - --tw-scale-x: 100%; - --tw-scale-y: 100%; - --tw-scale-z: 100%; - scale: var(--tw-scale-x) var(--tw-scale-y); - } - .rotate-90 { - rotate: 90deg; - } - .transform { - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); - } - .animate-pulse { - animation: var(--animate-pulse); - } - .animate-spin { - animation: var(--animate-spin); - } - .cursor-not-allowed { - cursor: not-allowed; - } - .cursor-pointer { - cursor: pointer; - } - .resize { - resize: both; - } - .resize-none { - resize: none; - } - .list-inside { - list-style-position: inside; - } - .list-disc { - list-style-type: disc; - } - .list-none { - list-style-type: none; - } - .grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - .grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - .grid-cols-\[repeat\(auto-fit\,minmax\(280px\,1fr\)\)\] { - grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); - } - .flex-col { - flex-direction: column; - } - .flex-row { - flex-direction: row; - } - .flex-wrap { - flex-wrap: wrap; - } - .items-center { - align-items: center; - } - .items-end { - align-items: flex-end; - } - .items-start { - align-items: flex-start; - } - .justify-between { - justify-content: space-between; - } - .justify-center { - justify-content: center; - } - .justify-end { - justify-content: flex-end; - } - .gap-1 { - gap: calc(var(--spacing) * 1); - } - .gap-2 { - gap: calc(var(--spacing) * 2); - } - .gap-3 { - gap: calc(var(--spacing) * 3); - } - .gap-4 { - gap: calc(var(--spacing) * 4); - } - .gap-6 { - gap: calc(var(--spacing) * 6); - } - .space-y-1 { - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); - } - } - .space-y-2 { - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); - } - } - .space-y-3 { - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); - } - } - .space-y-4 { - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); - } - } - .space-x-1 { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse))); - } - } - .space-x-2 { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))); - } - } - .space-x-3 { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse))); - } - } - .space-x-4 { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); - } - } - .divide-y { - :where(& > :not(:last-child)) { - --tw-divide-y-reverse: 0; - border-bottom-style: var(--tw-border-style); - border-top-style: var(--tw-border-style); - border-top-width: calc(1px * var(--tw-divide-y-reverse)); - border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); - } - } - .divide-gray-100 { - :where(& > :not(:last-child)) { - border-color: var(--color-gray-100); - } - } - .truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - .overflow-hidden { - overflow: hidden; - } - .overflow-y-auto { - overflow-y: auto; - } - .rounded { - border-radius: 0.25rem; - } - .rounded-2xl { - border-radius: var(--radius-2xl); - } - .rounded-3xl { - border-radius: var(--radius-3xl); - } - .rounded-full { - border-radius: calc(infinity * 1px); - } - .rounded-lg { - border-radius: var(--radius-lg); - } - .rounded-md { - border-radius: var(--radius-md); - } - .rounded-none { - border-radius: 0; - } - .rounded-sm { - border-radius: var(--radius-sm); - } - .rounded-xl { - border-radius: var(--radius-xl); - } - .border { - border-style: var(--tw-border-style); - border-width: 1px; - } - .border-2 { - border-style: var(--tw-border-style); - border-width: 2px; - } - .border-4 { - border-style: var(--tw-border-style); - border-width: 4px; - } - .border-t { - border-top-style: var(--tw-border-style); - border-top-width: 1px; - } - .border-l-4 { - border-left-style: var(--tw-border-style); - border-left-width: 4px; - } - .border-dotted { - --tw-border-style: dotted; - border-style: dotted; - } - .border-blue-200 { - border-color: var(--color-blue-200); - } - .border-blue-300 { - border-color: var(--color-blue-300); - } - .border-gray-100 { - border-color: var(--color-gray-100); - } - .border-gray-200 { - border-color: var(--color-gray-200); - } - .border-gray-300 { - border-color: var(--color-gray-300); - } - .border-red-200 { - border-color: var(--color-red-200); - } - .border-red-400 { - border-color: var(--color-red-400); - } - .border-red-500 { - border-color: var(--color-red-500); - } - .border-transparent { - border-color: transparent; - } - .border-yellow-200 { - border-color: var(--color-yellow-200); - } - .border-yellow-400 { - border-color: var(--color-yellow-400); - } - .border-yellow-500 { - border-color: var(--color-yellow-500); - } - .border-zinc-200 { - border-color: var(--color-zinc-200); - } - .border-t-current { - border-top-color: currentcolor; - } - .border-t-transparent { - border-top-color: transparent; - } - .bg-black { - background-color: var(--color-black); - } - .bg-blue-50 { - background-color: var(--color-blue-50); - } - .bg-blue-100 { - background-color: var(--color-blue-100); - } - .bg-gray-100 { - background-color: var(--color-gray-100); - } - .bg-gray-200 { - background-color: var(--color-gray-200); - } - .bg-green-100 { - background-color: var(--color-green-100); - } - .bg-green-500 { - background-color: var(--color-green-500); - } - .bg-green-600 { - background-color: var(--color-green-600); - } - .bg-red-50 { - background-color: var(--color-red-50); - } - .bg-red-100 { - background-color: var(--color-red-100); - } - .bg-red-600 { - background-color: var(--color-red-600); - } - .bg-white { - background-color: var(--color-white); - } - .bg-yellow-50 { - background-color: var(--color-yellow-50); - } - .bg-yellow-100 { - background-color: var(--color-yellow-100); - } - .bg-zinc-100 { - background-color: var(--color-zinc-100); - } - .bg-zinc-600 { - background-color: var(--color-zinc-600); - } - .object-cover { - -o-object-fit: cover; - object-fit: cover; - } - .p-0 { - padding: calc(var(--spacing) * 0); - } - .p-1 { - padding: calc(var(--spacing) * 1); - } - .p-1\.5 { - padding: calc(var(--spacing) * 1.5); - } - .p-2 { - padding: calc(var(--spacing) * 2); - } - .p-3 { - padding: calc(var(--spacing) * 3); - } - .p-4 { - padding: calc(var(--spacing) * 4); - } - .p-5 { - padding: calc(var(--spacing) * 5); - } - .p-6 { - padding: calc(var(--spacing) * 6); - } - .p-8 { - padding: calc(var(--spacing) * 8); - } - .px-2 { - padding-inline: calc(var(--spacing) * 2); - } - .px-3 { - padding-inline: calc(var(--spacing) * 3); - } - .px-3\.5 { - padding-inline: calc(var(--spacing) * 3.5); - } - .px-4 { - padding-inline: calc(var(--spacing) * 4); - } - .py-1 { - padding-block: calc(var(--spacing) * 1); - } - .py-2 { - padding-block: calc(var(--spacing) * 2); - } - .py-2\.5 { - padding-block: calc(var(--spacing) * 2.5); - } - .py-3 { - padding-block: calc(var(--spacing) * 3); - } - .py-4 { - padding-block: calc(var(--spacing) * 4); - } - .py-8 { - padding-block: calc(var(--spacing) * 8); - } - .pt-2 { - padding-top: calc(var(--spacing) * 2); - } - .pt-3 { - padding-top: calc(var(--spacing) * 3); - } - .pt-4 { - padding-top: calc(var(--spacing) * 4); - } - .pt-5 { - padding-top: calc(var(--spacing) * 5); - } - .pr-1 { - padding-right: calc(var(--spacing) * 1); - } - .pr-2 { - padding-right: calc(var(--spacing) * 2); - } - .pr-12 { - padding-right: calc(var(--spacing) * 12); - } - .pl-0 { - padding-left: calc(var(--spacing) * 0); - } - .pl-2 { - padding-left: calc(var(--spacing) * 2); - } - .pl-4 { - padding-left: calc(var(--spacing) * 4); - } - .text-center { - text-align: center; - } - .text-left { - text-align: left; - } - .text-right { - text-align: right; - } - .text-2xl { - font-size: var(--text-2xl); - line-height: var(--tw-leading, var(--text-2xl--line-height)); - } - .text-3xl { - font-size: var(--text-3xl); - line-height: var(--tw-leading, var(--text-3xl--line-height)); - } - .text-4xl { - font-size: var(--text-4xl); - line-height: var(--tw-leading, var(--text-4xl--line-height)); - } - .text-base { - font-size: var(--text-base); - line-height: var(--tw-leading, var(--text-base--line-height)); - } - .text-lg { - font-size: var(--text-lg); - line-height: var(--tw-leading, var(--text-lg--line-height)); - } - .text-sm { - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); - } - .text-xl { - font-size: var(--text-xl); - line-height: var(--tw-leading, var(--text-xl--line-height)); - } - .text-xs { - font-size: var(--text-xs); - line-height: var(--tw-leading, var(--text-xs--line-height)); - } - .leading-relaxed { - --tw-leading: var(--leading-relaxed); - line-height: var(--leading-relaxed); - } - .leading-tight { - --tw-leading: var(--leading-tight); - line-height: var(--leading-tight); - } - .font-black { - --tw-font-weight: var(--font-weight-black); - font-weight: var(--font-weight-black); - } - .font-bold { - --tw-font-weight: var(--font-weight-bold); - font-weight: var(--font-weight-bold); - } - .font-light { - --tw-font-weight: var(--font-weight-light); - font-weight: var(--font-weight-light); - } - .font-medium { - --tw-font-weight: var(--font-weight-medium); - font-weight: var(--font-weight-medium); - } - .font-semibold { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - } - .font-thin { - --tw-font-weight: var(--font-weight-thin); - font-weight: var(--font-weight-thin); - } - .tracking-wide { - --tw-tracking: var(--tracking-wide); - letter-spacing: var(--tracking-wide); - } - .text-black { - color: var(--color-black); - } - .text-blue-600 { - color: var(--color-blue-600); - } - .text-blue-900 { - color: var(--color-blue-900); - } - .text-current { - color: currentcolor; - } - .text-gray-400 { - color: var(--color-gray-400); - } - .text-gray-500 { - color: var(--color-gray-500); - } - .text-gray-600 { - color: var(--color-gray-600); - } - .text-gray-700 { - color: var(--color-gray-700); - } - .text-gray-900 { - color: var(--color-gray-900); - } - .text-green-100 { - color: var(--color-green-100); - } - .text-green-500 { - color: var(--color-green-500); - } - .text-red-500 { - color: var(--color-red-500); - } - .text-red-600 { - color: var(--color-red-600); - } - .text-red-700 { - color: var(--color-red-700); - } - .text-red-900 { - color: var(--color-red-900); - } - .text-transparent { - color: transparent; - } - .text-white { - color: var(--color-white); - } - .text-yellow-700 { - color: var(--color-yellow-700); - } - .text-yellow-800 { - color: var(--color-yellow-800); - } - .text-zinc-200 { - color: var(--color-zinc-200); - } - .text-zinc-700 { - color: var(--color-zinc-700); - } - .text-zinc-800 { - color: var(--color-zinc-800); - } - .uppercase { - text-transform: uppercase; - } - .italic { - font-style: italic; - } - .ordinal { - --tw-ordinal: ordinal; - font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); - } - .underline { - text-decoration-line: underline; - } - .antialiased { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - .opacity-40 { - opacity: 40%; - } - .opacity-50 { - opacity: 50%; - } - .opacity-60 { - opacity: 60%; - } - .opacity-70 { - opacity: 70%; - } - .shadow { - --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - .shadow-lg { - --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - .shadow-md { - --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - .shadow-sm { - --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - .shadow-xl { - --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - .ring-1 { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - .ring-black { - --tw-ring-color: var(--color-black); - } - .outline { - outline-style: var(--tw-outline-style); - outline-width: 1px; - } - .blur { - --tw-blur: blur(8px); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); - } - .filter { - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); - } - .backdrop-filter { - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - } - .transition { - transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - } - .transition-all { - transition-property: all; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - } - .transition-colors { - transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - } - .transition-opacity { - transition-property: opacity; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - } - .transition-transform { - transition-property: transform, translate, scale, rotate; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - } - .duration-200 { - --tw-duration: 200ms; - transition-duration: 200ms; - } - .duration-300 { - --tw-duration: 300ms; - transition-duration: 300ms; - } - .duration-500 { - --tw-duration: 500ms; - transition-duration: 500ms; - } - .ease-in-out { - --tw-ease: var(--ease-in-out); - transition-timing-function: var(--ease-in-out); - } - .group-open\:rotate-90 { - &:is(:where(.group):is([open], :popover-open, :open) *) { - rotate: 90deg; - } - } - .group-hover\:inline { - &:is(:where(.group):hover *) { - @media (hover: hover) { - display: inline; - } - } - } - .group-hover\:scale-105 { - &:is(:where(.group):hover *) { - @media (hover: hover) { - --tw-scale-x: 105%; - --tw-scale-y: 105%; - --tw-scale-z: 105%; - scale: var(--tw-scale-x) var(--tw-scale-y); - } - } - } - .group-hover\:opacity-100 { - &:is(:where(.group):hover *) { - @media (hover: hover) { - opacity: 100%; - } - } - } - .hover\:bg-gray-50 { - &:hover { - @media (hover: hover) { - background-color: var(--color-gray-50); - } - } - } - .hover\:bg-gray-100 { - &:hover { - @media (hover: hover) { - background-color: var(--color-gray-100); - } - } - } - .hover\:bg-red-700 { - &:hover { - @media (hover: hover) { - background-color: var(--color-red-700); - } - } - } - .hover\:bg-zinc-100 { - &:hover { - @media (hover: hover) { - background-color: var(--color-zinc-100); - } - } - } - .hover\:text-blue-600 { - &:hover { - @media (hover: hover) { - color: var(--color-blue-600); - } - } - } - .hover\:text-blue-800 { - &:hover { - @media (hover: hover) { - color: var(--color-blue-800); - } - } - } - .hover\:text-gray-900 { - &:hover { - @media (hover: hover) { - color: var(--color-gray-900); - } - } - } - .hover\:text-red-800 { - &:hover { - @media (hover: hover) { - color: var(--color-red-800); - } - } - } - .hover\:text-white { - &:hover { - @media (hover: hover) { - color: var(--color-white); - } - } - } - .hover\:text-zinc-900 { - &:hover { - @media (hover: hover) { - color: var(--color-zinc-900); - } - } - } - .hover\:opacity-80 { - &:hover { - @media (hover: hover) { - opacity: 80%; - } - } - } - .hover\:opacity-100 { - &:hover { - @media (hover: hover) { - opacity: 100%; - } - } - } - .focus\:border-blue-500 { - &:focus { - border-color: var(--color-blue-500); - } - } - .focus\:text-blue-600 { - &:focus { - color: var(--color-blue-600); - } - } - .focus\:ring-2 { - &:focus { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - } - .focus\:ring-blue-500 { - &:focus { - --tw-ring-color: var(--color-blue-500); - } - } - .focus\:ring-indigo-500 { - &:focus { - --tw-ring-color: var(--color-indigo-500); - } - } - .focus\:ring-offset-2 { - &:focus { - --tw-ring-offset-width: 2px; - --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - } - } - .focus\:outline-none { - &:focus { - --tw-outline-style: none; - outline-style: none; - } - } - .disabled\:cursor-not-allowed { - &:disabled { - cursor: not-allowed; - } - } - .disabled\:opacity-50 { - &:disabled { - opacity: 50%; - } - } - .sm\:grid-cols-2 { - @media (width >= 40rem) { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - } - .md\:relative { - @media (width >= 48rem) { - position: relative; - } - } - .md\:sticky { - @media (width >= 48rem) { - position: sticky; - } - } - .md\:top-16 { - @media (width >= 48rem) { - top: calc(var(--spacing) * 16); - } - } - .md\:mb-0 { - @media (width >= 48rem) { - margin-bottom: calc(var(--spacing) * 0); - } - } - .md\:block { - @media (width >= 48rem) { - display: block; - } - } - .md\:flex { - @media (width >= 48rem) { - display: flex; - } - } - .md\:hidden { - @media (width >= 48rem) { - display: none; - } - } - .md\:h-\[calc\(100vh-4rem\)\] { - @media (width >= 48rem) { - height: calc(100vh - 4rem); - } - } - .md\:h-full { - @media (width >= 48rem) { - height: 100%; - } - } - .md\:w-1\/5 { - @media (width >= 48rem) { - width: calc(1/5 * 100%); - } - } - .md\:w-32 { - @media (width >= 48rem) { - width: calc(var(--spacing) * 32); - } - } - .md\:w-96 { - @media (width >= 48rem) { - width: calc(var(--spacing) * 96); - } - } - .md\:max-w-80 { - @media (width >= 48rem) { - max-width: calc(var(--spacing) * 80); - } - } - .md\:flex-1 { - @media (width >= 48rem) { - flex: 1; - } - } - .md\:translate-x-0 { - @media (width >= 48rem) { - --tw-translate-x: calc(var(--spacing) * 0); - translate: var(--tw-translate-x) var(--tw-translate-y); - } - } - .md\:grid-cols-2 { - @media (width >= 48rem) { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - } - .md\:grid-cols-3 { - @media (width >= 48rem) { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - } - .md\:flex-row { - @media (width >= 48rem) { - flex-direction: row; - } - } - .md\:gap-5 { - @media (width >= 48rem) { - gap: calc(var(--spacing) * 5); - } - } - .md\:p-6 { - @media (width >= 48rem) { - padding: calc(var(--spacing) * 6); - } - } - .md\:px-0 { - @media (width >= 48rem) { - padding-inline: calc(var(--spacing) * 0); - } - } - .md\:pt-4 { - @media (width >= 48rem) { - padding-top: calc(var(--spacing) * 4); - } - } - .md\:shadow-none { - @media (width >= 48rem) { - --tw-shadow: 0 0 #0000; - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - } - .lg\:mt-0 { - @media (width >= 64rem) { - margin-top: calc(var(--spacing) * 0); - } - } - .lg\:w-3\/5 { - @media (width >= 64rem) { - width: calc(3/5 * 100%); - } - } - .lg\:grid-cols-2 { - @media (width >= 64rem) { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - } - .lg\:grid-cols-3 { - @media (width >= 64rem) { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - } - .lg\:grid-cols-4 { - @media (width >= 64rem) { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - } - .lg\:text-5xl { - @media (width >= 64rem) { - font-size: var(--text-5xl); - line-height: var(--tw-leading, var(--text-5xl--line-height)); - } - } - .xl\:sticky { - @media (width >= 80rem) { - position: sticky; - } - } - .xl\:top-16 { - @media (width >= 80rem) { - top: calc(var(--spacing) * 16); - } - } - .xl\:block { - @media (width >= 80rem) { - display: block; - } - } - .xl\:hidden { - @media (width >= 80rem) { - display: none; - } - } - .xl\:h-\[calc\(100vh-4rem\)\] { - @media (width >= 80rem) { - height: calc(100vh - 4rem); - } - } - .xl\:w-auto { - @media (width >= 80rem) { - width: auto; - } - } - .xl\:max-w-4xl { - @media (width >= 80rem) { - max-width: var(--container-4xl); - } - } - .xl\:translate-x-0 { - @media (width >= 80rem) { - --tw-translate-x: calc(var(--spacing) * 0); - translate: var(--tw-translate-x) var(--tw-translate-y); - } - } - .xl\:grid-cols-3 { - @media (width >= 80rem) { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - } - .xl\:px-8 { - @media (width >= 80rem) { - padding-inline: calc(var(--spacing) * 8); - } - } - .\32 xl\:max-w-\(--breakpoint-2xl\) { - @media (width >= 96rem) { - max-width: var(--breakpoint-2xl); - } - } - .\32 xl\:max-w-5xl { - @media (width >= 96rem) { - max-width: var(--container-5xl); - } - } - .\32 xl\:max-w-7xl { - @media (width >= 96rem) { - max-width: var(--container-7xl); - } - } - .\32 xl\:grid-cols-3 { - @media (width >= 96rem) { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - } - .\32 xl\:px-12 { - @media (width >= 96rem) { - padding-inline: calc(var(--spacing) * 12); - } - } - .dark\:border-gray-600 { - @media (prefers-color-scheme: dark) { - border-color: var(--color-gray-600); - } - } - .dark\:border-gray-700 { - @media (prefers-color-scheme: dark) { - border-color: var(--color-gray-700); - } - } - .dark\:border-yellow-800 { - @media (prefers-color-scheme: dark) { - border-color: var(--color-yellow-800); - } - } - .dark\:border-zinc-800 { - @media (prefers-color-scheme: dark) { - border-color: var(--color-zinc-800); - } - } - .dark\:bg-gray-800 { - @media (prefers-color-scheme: dark) { - background-color: var(--color-gray-800); - } - } - .dark\:bg-yellow-900\/20 { - @media (prefers-color-scheme: dark) { - background-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 20%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-yellow-900) 20%, transparent); - } - } - } - .dark\:bg-zinc-900 { - @media (prefers-color-scheme: dark) { - background-color: var(--color-zinc-900); - } - } - .dark\:text-gray-200 { - @media (prefers-color-scheme: dark) { - color: var(--color-gray-200); - } - } - .dark\:text-gray-400 { - @media (prefers-color-scheme: dark) { - color: var(--color-gray-400); - } - } - .dark\:text-yellow-200 { - @media (prefers-color-scheme: dark) { - color: var(--color-yellow-200); - } - } - .dark\:text-yellow-300 { - @media (prefers-color-scheme: dark) { - color: var(--color-yellow-300); - } - } - .dark\:text-zinc-100 { - @media (prefers-color-scheme: dark) { - color: var(--color-zinc-100); - } - } - .dark\:text-zinc-300 { - @media (prefers-color-scheme: dark) { - color: var(--color-zinc-300); - } +} + +/* + * OpenAPI Single Endpoint Page Styles + * Content-aware styling using :has() selectors + */ + +/* ============================================================================= + Base Single Page Layout + ============================================================================= */ + +.api-endpoint { + /* Content-aware layout adjustments */ + container-type: inline-size; + container-name: endpoint-page; +} + +/* Override the hidden default - single pages should show endpoint details */ + +.api-endpoint .endpoint-details { + display: block; +} + +/* ============================================================================= + Header Enhancements with :has() + ============================================================================= */ + +/* Enhanced header when endpoint has both summary and description */ + +.api-endpoint-header:has(.endpoint-description) { + background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-brand-rgb), 0.02) 100%); + border-left: 4px solid rgba(var(--color-brand-rgb), 0.3); + padding: 2rem; + border-radius: 0.75rem; + margin-bottom: 2rem; +} + +/* Method-specific header styling */ + +.api-endpoint-header:has(.method-badge--get) { + background: linear-gradient(135deg, var(--color-surface) 0%, rgba(34, 197, 94, 0.02) 100%); + border-left-color: rgba(34, 197, 94, 0.3); +} + +.api-endpoint-header:has(.method-badge--post) { + background: linear-gradient(135deg, var(--color-surface) 0%, rgba(59, 130, 246, 0.02) 100%); + border-left-color: rgba(59, 130, 246, 0.3); +} + +.api-endpoint-header:has(.method-badge--put) { + background: linear-gradient(135deg, var(--color-surface) 0%, rgba(245, 158, 11, 0.02) 100%); + border-left-color: rgba(245, 158, 11, 0.3); +} + +.api-endpoint-header:has(.method-badge--delete) { + background: linear-gradient(135deg, var(--color-surface) 0%, rgba(239, 68, 68, 0.02) 100%); + border-left-color: rgba(239, 68, 68, 0.3); +} + +.api-endpoint-header:has(.method-badge--patch) { + background: linear-gradient(135deg, var(--color-surface) 0%, rgba(168, 85, 247, 0.02) 100%); + border-left-color: rgba(168, 85, 247, 0.3); +} + +/* ============================================================================= + Breadcrumb Enhancements + ============================================================================= */ + +.api-endpoint-breadcrumb { + margin-bottom: 1.5rem; + font-size: 0.875rem; + color: var(--color-text-muted); +} + +.api-endpoint-breadcrumb a { + color: var(--color-brand); + text-decoration: none; + transition: color 0.2s ease; +} + +.api-endpoint-breadcrumb a:hover { + color: var(--color-brand-dark); + text-decoration: underline; +} + +/* ============================================================================= + Content Area Enhancements with :has() + ============================================================================= */ + +/* Enhanced spacing for endpoints with multiple sections */ + +.api-endpoint-content:has(.endpoint-section:nth-child(n+3)) { + display: grid; + gap: 2rem; +} + +/* Special layout for complex endpoints */ + +.endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) { + container-type: inline-size; +} + +.endpoint-item:has([data-has-parameters="true"]):has([data-has-request-body="true"]):has([data-has-responses="true"]) .endpoint-details { + display: grid; + gap: 2.5rem; +} + +/* Enhanced visual hierarchy for parameter-heavy endpoints */ + +.endpoint-item:has([data-parameter-count]) { + /* Parameters count specific styling */ +} + +.endpoint-item:has([data-parameter-count="0"]) .endpoint-details { + /* Simplified layout for parameter-less endpoints */ + gap: 1.5rem; +} + +.endpoint-item:has([data-parameter-count^="1"]) .endpoint-section, +.endpoint-item:has([data-parameter-count^="2"]) .endpoint-section, +.endpoint-item:has([data-parameter-count^="3"]) .endpoint-section { + /* Enhanced styling for endpoints with 10+ parameters */ + border: 1px solid rgba(var(--color-border-rgb), 0.5); + border-radius: 0.5rem; + padding: 1.5rem; + background: rgba(var(--color-surface-rgb), 0.5); +} + +/* ============================================================================= + Section-Specific :has() Patterns + ============================================================================= */ + +/* Parameters Section */ + +.endpoint-details:has(.endpoint-parameters) { + /* Enhanced layout when parameters are present */ +} + +.endpoint-details:has(.endpoint-parameters .parameter-item:nth-child(n+5)) { + /* Special handling for parameter-heavy endpoints */ + grid-template-columns: 1fr 1fr; + gap: 2rem; +} + +@container endpoint-page (max-width: 768px) { + .endpoint-details:has(.endpoint-parameters .parameter-item:nth-child(n+5)) { + grid-template-columns: 1fr; } - .dark\:opacity-90 { - @media (prefers-color-scheme: dark) { - opacity: 90%; - } +} + +/* Request Body Section */ + +.endpoint-details:has(.endpoint-request-body) .endpoint-section { + border-left: 3px solid rgba(var(--color-brand-rgb), 0.2); + padding-left: 1rem; +} + +/* Responses Section */ + +.endpoint-details:has(.endpoint-responses) { + /* Enhanced styling when responses are present */ +} + +.endpoint-details:has(.endpoint-responses .response-item:nth-child(n+3)) { + /* Special handling for endpoints with many response types */ + background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-success-rgb), 0.01) 100%); + border-radius: 0.75rem; + padding: 1.5rem; +} + +/* Security Section */ + +.endpoint-details:has(.endpoint-security) { + /* Enhanced styling when security requirements are present */ + border-top: 1px solid rgba(var(--color-border-rgb), 0.3); + padding-top: 2rem; +} + +/* Code Examples Section */ + +.endpoint-details:has(.endpoint-examples) { + /* Enhanced styling when code examples are present */ +} + +.endpoint-details:has(.endpoint-examples .example-tabs .tab-button:nth-child(n+4)) { + /* Special styling for endpoints with many code examples */ + background: rgba(var(--color-accent-rgb), 0.02); + border-radius: 0.5rem; + padding: 1rem; +} + +/* ============================================================================= + Method-Specific Page Styling + ============================================================================= */ + +/* GET endpoints - Success/data focused */ + +.api-endpoint[data-method="GET"] { + --endpoint-accent: rgba(34, 197, 94, 0.1); +} + +.api-endpoint[data-method="GET"]:has([data-has-responses="true"]) { + background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); +} + +/* POST endpoints - Creation focused */ + +.api-endpoint[data-method="POST"] { + --endpoint-accent: rgba(59, 130, 246, 0.1); +} + +.api-endpoint[data-method="POST"]:has([data-has-request-body="true"]) { + background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); +} + +/* PUT/PATCH endpoints - Update focused */ + +.api-endpoint[data-method="PUT"], +.api-endpoint[data-method="PATCH"] { + --endpoint-accent: rgba(245, 158, 11, 0.1); +} + +.api-endpoint[data-method="PUT"]:has([data-has-request-body="true"]):has([data-has-responses="true"]), +.api-endpoint[data-method="PATCH"]:has([data-has-request-body="true"]):has([data-has-responses="true"]) { + background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); +} + +/* DELETE endpoints - Deletion focused */ + +.api-endpoint[data-method="DELETE"] { + --endpoint-accent: rgba(239, 68, 68, 0.1); +} + +.api-endpoint[data-method="DELETE"]:has([data-has-responses="true"]) { + background: linear-gradient(180deg, transparent 0%, var(--endpoint-accent) 100%); +} + +/* ============================================================================= + Complexity-Based Styling + ============================================================================= */ + +/* Simple endpoints (no parameters, no request body) */ + +.api-endpoint[data-has-parameters="false"][data-has-request-body="false"] { + /* Simplified, clean layout */ +} + +.api-endpoint[data-has-parameters="false"][data-has-request-body="false"] .endpoint-details { + gap: 1rem; +} + +/* Complex endpoints (has parameters, request body, and multiple responses) */ + +.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="1"]), +.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="2"]), +.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="3"]) { + /* Enhanced organization for complex endpoints */ +} + +.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="1"]) .endpoint-details, +.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="2"]) .endpoint-details, +.api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="3"]) .endpoint-details { + border: 1px solid rgba(var(--color-border-rgb), 0.2); + border-radius: 1rem; + padding: 2rem; + background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-accent-rgb), 0.01) 100%); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +/* ============================================================================= + Responsive Enhancements + ============================================================================= */ + +@container endpoint-page (max-width: 768px) { + .api-endpoint-header:has(.endpoint-description) { + padding: 1.5rem; + margin-bottom: 1.5rem; } - .dark\:hover\:bg-gray-700 { - @media (prefers-color-scheme: dark) { - &:hover { - @media (hover: hover) { - background-color: var(--color-gray-700); - } - } - } + + .endpoint-details:has(.endpoint-parameters .parameter-item:nth-child(n+3)) { + grid-template-columns: 1fr; } - .dark\:hover\:bg-zinc-800 { - @media (prefers-color-scheme: dark) { - &:hover { - @media (hover: hover) { - background-color: var(--color-zinc-800); - } - } - } + + .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="1"]) .endpoint-details, + .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="2"]) .endpoint-details, + .api-endpoint[data-has-parameters="true"][data-has-request-body="true"]:has([data-response-count^="3"]) .endpoint-details { + padding: 1rem; } - .dark\:hover\:text-white { - @media (prefers-color-scheme: dark) { - &:hover { - @media (hover: hover) { - color: var(--color-white); - } - } - } +} + +/* ============================================================================= + Accessibility Enhancements + ============================================================================= */ + +/* Enhanced focus styles for interactive elements */ + +.api-endpoint:has(:focus-visible) { + /* Container styling when child elements have focus */ +} + +/* Reduced motion preferences */ + +@media (prefers-reduced-motion: reduce) { + .api-endpoint-header:has(.endpoint-description), + .endpoint-details:has(.endpoint-responses .response-item:nth-child(n+3)) { + background: var(--color-surface); + transition: none; } } -@layer components { - .grid-autofit { - grid-template-columns: repeat(auto-fit, minmax(var(--grid-card-min, 280px), 1fr)); - } - @screen md { - .grid-autofit { - gap: calc(var(--spacing) * 8); - } - } - .layout-shell { - width: 100%; - padding-inline: calc(var(--spacing) * 4); - transition-property: all; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - --tw-duration: 300ms; - transition-duration: 300ms; - --tw-ease: var(--ease-in-out); - transition-timing-function: var(--ease-in-out); - @media (width >= 40rem) { - padding-inline: calc(var(--spacing) * 6); - } - @media (width >= 64rem) { - padding-inline: calc(var(--spacing) * 8); - } - @media (width >= 80rem) { - padding-inline: calc(var(--spacing) * 0); - } - } - @screen xl { - .layout-shell { - display: grid; - grid-template-columns: var(--left-rail-width) minmax(0, 1fr) var(--right-rail-width); - gap: var(--layout-gap-xl); - } - } - @screen 2xl { - .layout-shell { - grid-template-columns: var(--left-rail-width-2xl) minmax(0, 1fr) var(--right-rail-width-2xl); - gap: var(--layout-gap-2xl); - } - } - .page-container { - max-width: var(--max-width-content); - } + +/* OpenAPI Code Examples */ + +/* ========================================================================== + Code Examples + ========================================================================== */ + +.code-examples { + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-radius: 1rem; + overflow: hidden; +} + +.code-tabs-nav { + display: flex; + background: var(--color-bg-secondary); + border-bottom: 1px solid var(--color-border-primary); +} + +.code-tab { + background: transparent; + border: none; + padding: 0.75rem 1rem; + font-size: 0.875rem; + font-weight: 600; + color: var(--color-text-secondary); + cursor: pointer; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease; + border-bottom: 3px solid transparent; +} + +.code-tab:hover, +.code-tab--active { + color: var(--color-brand); + background: rgba(var(--color-brand-rgb), 0.05); + border-bottom-color: var(--color-brand); +} + +.code-tabs-content { + position: relative; +} + +.code-tab-panel { + display: none; +} + +.code-tab-panel--active { + display: block; +} + +.code-example { + position: relative; +} + +.code-example-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.625rem 1rem; + background: var(--color-bg-tertiary); + border-bottom: 1px solid var(--color-border-primary); +} + +.code-example-title { + font-size: 0.875rem; + font-weight: 600; + color: var(--color-text-primary); +} + +.copy-button { + display: flex; + align-items: center; + justify-content: center; + width: 1.75rem; + height: 1.75rem; + background: var(--color-surface); + border: 1px solid var(--color-border-primary); + border-radius: 0.375rem; + color: var(--color-text-secondary); + cursor: pointer; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease; +} + +.copy-button:hover { + background: var(--color-brand); + border-color: var(--color-brand); + color: var(--color-text-inverse); +} + +.copy-button svg { + width: 0.95rem; + height: 0.95rem; +} + +.code-example pre { + margin: 0; + padding: 0.875rem 1rem; + background: var(--color-bg-code); + overflow-x: auto; +} + +.code-example code { + font-family: var(--font-family-mono); + font-size: 0.875rem; + line-height: 1.5; + color: var(--color-text-code); +} + +/* =============================================== + Modern CSS Utilities - Native, No Framework + =============================================== */ + +/* Container Queries for Responsive Components */ + +.container { + container-type: inline-size; + max-width: var(--max-width-content); + margin-inline: auto; + padding-inline: var(--space-4); } -@layer base { - :root { - --header-offset: 64px; - } - html:not(.no-transitions) { - transition: color-scheme var(--timing-medium) var(--easing-standard); - } - html:not(.no-transitions) .btn, - html:not(.no-transitions) .nav-link, - html:not(.no-transitions) .collapse__header, - html:not(.no-transitions) .search-container, - html:not(.no-transitions) .toast-notification, - html:not(.no-transitions) .theme-transition { - transition: background-color var(--timing-medium) var(--easing-standard), - color var(--timing-medium) var(--easing-standard), - border-color var(--timing-medium) var(--easing-standard); - } - html.no-transitions, - html.no-transitions * { - transition: none !important; - } - h1 { - font-size: clamp(1.5rem, 3.5vw, 1.75rem); - line-height: 1.2; - font-weight: 900; - letter-spacing: -0.025em; - word-wrap: break-word; - } - h2 { - font-size: clamp(1.25rem, 3vw, 1.375rem); - line-height: 1.33; - font-weight: 700; - letter-spacing: -0.025em; - word-wrap: break-word; - } - h3 { - font-size: clamp(1.0625rem, 2.5vw, 1.1875rem); - line-height: 1.4; - font-weight: 700; - letter-spacing: -0.015em; - word-wrap: break-word; - } - h4 { - font-size: var(--text-lg); - line-height: var(--tw-leading, var(--text-lg--line-height)); - --tw-font-weight: var(--font-weight-bold); - font-weight: var(--font-weight-bold); - letter-spacing: -0.01em; - word-wrap: break-word; - } - h5 { - font-size: var(--text-base); - line-height: var(--tw-leading, var(--text-base--line-height)); - --tw-font-weight: var(--font-weight-bold); - font-weight: var(--font-weight-bold); - word-wrap: break-word; - } - h6 { - font-size: 1rem; - line-height: 1.5; - font-weight: 700; - word-wrap: break-word; - } - main { - font-family: "NVIDIA", "Arial", "Helvetica", sans-serif; - } - html { - font-synthesis: none; - } - body, main { - font-optical-sizing: auto; - font-feature-settings: "kern" 1; - text-rendering: optimizeLegibility; - } - body { - font-size: clamp(1rem, 2vw, 1.0625rem); - line-height: 1.6; - letter-spacing: 0.01em; - } - .article-content > * { - margin-block: calc(var(--spacing) * 3); - } - .article-content { - color: var(--color-text-primary); - font-size: 1rem; - line-height: 1.65; - letter-spacing: 0.01em; - } - @screen md { - .article-content { - font-size: 1.0625rem; - line-height: 1.6; - } - } - .article-content p { - font-size: inherit; - line-height: inherit; - letter-spacing: inherit; - } - .article-content strong { - font-family: "NVIDIA", "Arial", "Helvetica", sans-serif; - font-weight: 600; + +/* Modern Flexbox Utilities */ + +.flex-center { + display: flex; + align-items: center; + justify-content: center; +} + +.flex-between { + display: flex; + align-items: center; + justify-content: space-between; +} + +.flex-start { + display: flex; + align-items: center; + justify-content: flex-start; +} + +.flex-col { + display: flex; + flex-direction: column; +} + +/* Grid Utilities */ + +.grid-auto { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: var(--space-4); +} + +.grid-2 { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-4); +} + +.grid-3 { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-4); +} + +/* Responsive Grid with Container Queries */ + +@container (max-width: 600px) { + .grid-2, .grid-3 { + grid-template-columns: 1fr; } - .article-content li li { - margin-left: calc(var(--spacing) * 12); - padding-block: calc(var(--spacing) * 1); - } -} -@property --tw-font-weight { - syntax: "*"; - inherits: false; -} -@property --tw-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; -} -@property --tw-shadow-color { - syntax: "*"; - inherits: false; -} -@property --tw-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100%; -} -@property --tw-inset-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; -} -@property --tw-inset-shadow-color { - syntax: "*"; - inherits: false; -} -@property --tw-inset-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100%; -} -@property --tw-ring-color { - syntax: "*"; - inherits: false; -} -@property --tw-ring-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; -} -@property --tw-inset-ring-color { - syntax: "*"; - inherits: false; -} -@property --tw-inset-ring-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; -} -@property --tw-ring-inset { - syntax: "*"; - inherits: false; -} -@property --tw-ring-offset-width { - syntax: ""; - inherits: false; - initial-value: 0px; -} -@property --tw-ring-offset-color { - syntax: "*"; - inherits: false; - initial-value: #fff; -} -@property --tw-ring-offset-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; -} -@property --tw-tracking { - syntax: "*"; - inherits: false; -} -@property --tw-duration { - syntax: "*"; - inherits: false; -} -@property --tw-space-y-reverse { - syntax: "*"; - inherits: false; - initial-value: 0; -} -@property --tw-border-style { - syntax: "*"; - inherits: false; - initial-value: solid; -} -@property --tw-space-x-reverse { - syntax: "*"; - inherits: false; - initial-value: 0; -} -@property --tw-translate-x { - syntax: "*"; - inherits: false; - initial-value: 0; -} -@property --tw-translate-y { - syntax: "*"; - inherits: false; - initial-value: 0; -} -@property --tw-translate-z { - syntax: "*"; - inherits: false; - initial-value: 0; -} -@property --tw-scale-x { - syntax: "*"; - inherits: false; - initial-value: 1; -} -@property --tw-scale-y { - syntax: "*"; - inherits: false; - initial-value: 1; -} -@property --tw-scale-z { - syntax: "*"; - inherits: false; - initial-value: 1; -} -@property --tw-rotate-x { - syntax: "*"; - inherits: false; -} -@property --tw-rotate-y { - syntax: "*"; - inherits: false; -} -@property --tw-rotate-z { - syntax: "*"; - inherits: false; -} -@property --tw-skew-x { - syntax: "*"; - inherits: false; -} -@property --tw-skew-y { - syntax: "*"; - inherits: false; -} -@property --tw-divide-y-reverse { - syntax: "*"; - inherits: false; - initial-value: 0; -} -@property --tw-leading { - syntax: "*"; - inherits: false; -} -@property --tw-ordinal { - syntax: "*"; - inherits: false; -} -@property --tw-slashed-zero { - syntax: "*"; - inherits: false; -} -@property --tw-numeric-figure { - syntax: "*"; - inherits: false; -} -@property --tw-numeric-spacing { - syntax: "*"; - inherits: false; -} -@property --tw-numeric-fraction { - syntax: "*"; - inherits: false; -} -@property --tw-outline-style { - syntax: "*"; - inherits: false; - initial-value: solid; -} -@property --tw-blur { - syntax: "*"; - inherits: false; -} -@property --tw-brightness { - syntax: "*"; - inherits: false; -} -@property --tw-contrast { - syntax: "*"; - inherits: false; -} -@property --tw-grayscale { - syntax: "*"; - inherits: false; -} -@property --tw-hue-rotate { - syntax: "*"; - inherits: false; -} -@property --tw-invert { - syntax: "*"; - inherits: false; -} -@property --tw-opacity { - syntax: "*"; - inherits: false; -} -@property --tw-saturate { - syntax: "*"; - inherits: false; -} -@property --tw-sepia { - syntax: "*"; - inherits: false; } -@property --tw-drop-shadow { - syntax: "*"; - inherits: false; + +/* Visual Utilities */ + +.visually-hidden { + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; +} + +.focus-ring { + outline: 2px solid var(--color-border-focus); + outline-offset: 2px; +} + +/* Modern CSS Features */ + +.smooth-scroll { + scroll-behavior: smooth; +} + +.text-balance { + text-wrap: balance; +} + +/* =============================================== + Theme-Aware Utilities + =============================================== */ + +/* Background Colors */ + +.bg-primary { background-color: var(--color-bg-primary); } + +.bg-secondary { background-color: var(--color-bg-secondary); } + +.bg-tertiary { background-color: var(--color-bg-tertiary); } + +.bg-surface { background-color: var(--color-surface); } + +/* Text Colors */ + +.text-primary { color: var(--color-text-primary); } + +.text-secondary { color: var(--color-text-secondary); } + +.text-tertiary { color: var(--color-text-tertiary); } + +/* Border Colors */ + +.border-primary { border-color: var(--color-border-primary); } + +.border-secondary { border-color: var(--color-border-secondary); } + +/* Interactive States */ + +.hover\:bg-surface-hover:hover { + background-color: var(--color-surface-hover); +} + +.hover\:bg-surface-active:active { + background-color: var(--color-surface-active); +} + +/* =============================================== + Typography Scale + =============================================== */ + +.text-xs { font-size: var(--font-size-xs); } + +.text-sm { font-size: var(--font-size-sm); } + +.text-base { font-size: var(--font-size-base); } + +.text-lg { font-size: var(--font-size-lg); } + +.text-xl { font-size: var(--font-size-xl); } + +.text-2xl { font-size: var(--font-size-2xl); } + +.text-3xl { font-size: var(--font-size-3xl); } + +/* =============================================== + Spacing Utilities + =============================================== */ + +.p-0 { padding: 0; } + +.p-1 { padding: var(--space-1); } + +.p-2 { padding: var(--space-2); } + +.p-3 { padding: var(--space-3); } + +.p-4 { padding: var(--space-4); } + +.p-6 { padding: var(--space-6); } + +.p-8 { padding: var(--space-8); } + +.m-0 { margin: 0; } + +.m-1 { margin: var(--space-1); } + +.m-2 { margin: var(--space-2); } + +.m-3 { margin: var(--space-3); } + +.m-4 { margin: var(--space-4); } + +.m-6 { margin: var(--space-6); } + +.m-8 { margin: var(--space-8); } + +/* Auto margins for centering */ + +.mx-auto { margin-left: auto; margin-right: auto; } + +.my-auto { margin-top: auto; margin-bottom: auto; } + +/* =============================================== + Generic Layout Patterns + =============================================== */ + +/* Article Header Patterns */ + +.article-header { + display: flex; + flex-direction: column; + gap: var(--space-4); + margin-bottom: var(--space-6); +} + +.article-description { + display: flex; + align-items: center; + gap: var(--space-4); + margin-bottom: var(--space-6); +} + +.step-validation { + background-color: var(--color-bg-secondary); + border: 1px solid var(--color-border-primary); + border-radius: var(--radius-md); + padding: var(--space-4); + margin: var(--space-4) 0; +} + +/* =============================================== + Typography Enhancements + =============================================== */ + +/* Font Weight Utilities */ + +.font-light { font-weight: 300; } + +.font-normal { font-weight: 400; } + +.font-medium { font-weight: 500; } + +.font-semibold { font-weight: 600; } + +.font-bold { font-weight: 700; } + +.font-black { font-weight: 900; } + +/* Text Opacity Utilities */ + +.text-opacity-80 { opacity: 0.8; } + +.text-opacity-70 { opacity: 0.7; } + +.text-opacity-60 { opacity: 0.6; } + +/* List Styles */ + +.list-disc { list-style-type: disc; } + +.list-inside { list-style-position: inside; } + +/* =============================================== + Advanced Layout Utilities + =============================================== */ + +/* Flexible Sizing */ + +.flex-1 { flex: 1; } + +.flex-shrink-0 { flex-shrink: 0; } + +.w-full { width: 100%; } + +.h-full { height: 100%; } + +/* Specific Sizing (commonly used) */ + +.w-1 { width: 0.25rem; } + +.w-5 { width: 1.25rem; } + +.h-5 { height: 1.25rem; } + +.h-16 { height: 4rem; } + +/* Gap Utilities */ + +.gap-2 { gap: var(--space-2); } + +.gap-3 { gap: var(--space-3); } + +.gap-4 { gap: var(--space-4); } + +.gap-6 { gap: var(--space-6); } + +/* Space Between (for flex/grid children) */ + +.space-y-2 > * + * { margin-top: var(--space-2); } + +.space-y-4 > * + * { margin-top: var(--space-4); } + +/* =============================================== + Interactive Utilities + =============================================== */ + +/* Transition Utilities */ + +.transition-colors { + transition: color var(--timing-fast) var(--easing-standard), + background-color var(--timing-fast) var(--easing-standard), + border-color var(--timing-fast) var(--easing-standard); +} + +.duration-200 { transition-duration: 0.2s; } + +/* Border Radius */ + +.rounded { border-radius: var(--radius-sm); } + +.rounded-md { border-radius: var(--radius-md); } + +.rounded-lg { border-radius: var(--radius-lg); } + +.rounded-full { border-radius: 9999px; } + +/* =============================================== + Responsive Typography Scale + =============================================== */ + +/* Large heading scale for hero sections */ + +.text-4xl { + font-size: var(--font-size-4xl, 2.25rem); + line-height: 1.1; } -@property --tw-drop-shadow-color { - syntax: "*"; - inherits: false; + +.text-5xl { + font-size: var(--font-size-5xl, 3rem); + line-height: 1; } -@property --tw-drop-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100%; + +/* Responsive scaling */ + +@media (min-width: 1024px) { + .lg\:text-5xl { + font-size: var(--font-size-5xl, 3rem); + line-height: 1; + } } -@property --tw-drop-shadow-size { - syntax: "*"; - inherits: false; + +@media (min-width: 768px) { + .md\:grid-cols-2 { + grid-template-columns: repeat(2, 1fr); + } } -@property --tw-backdrop-blur { - syntax: "*"; - inherits: false; + +/* =============================================== + Modern CSS Features - Beyond TailwindCSS + =============================================== */ + +/* Container Queries for Truly Responsive Components */ + +.responsive-grid { + display: grid; + gap: var(--space-4); + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } -@property --tw-backdrop-brightness { - syntax: "*"; - inherits: false; + +@container (max-width: 500px) { + .responsive-grid { + grid-template-columns: 1fr; + } } -@property --tw-backdrop-contrast { - syntax: "*"; - inherits: false; + +/* CSS Subgrid for Perfect Alignment */ + +.subgrid-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-4); } -@property --tw-backdrop-grayscale { - syntax: "*"; - inherits: false; + +.subgrid-item { + display: grid; + grid-template-rows: subgrid; + grid-row: span 3; } -@property --tw-backdrop-hue-rotate { - syntax: "*"; - inherits: false; + +/* Advanced Typography with text-wrap */ + +.balanced-text { + text-wrap: balance; + max-width: 60ch; } -@property --tw-backdrop-invert { - syntax: "*"; - inherits: false; + +.no-wrap { + text-wrap: nowrap; } -@property --tw-backdrop-opacity { - syntax: "*"; - inherits: false; + +/* CSS Scroll-driven Animations */ + +.fade-in-on-scroll { + animation: fade-in linear; + animation-timeline: view(); + animation-range: entry 0% cover 20%; } -@property --tw-backdrop-saturate { - syntax: "*"; - inherits: false; + +@keyframes fade-in { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } } -@property --tw-backdrop-sepia { - syntax: "*"; - inherits: false; + +/* CSS Anchor Positioning (Future) */ + +.tooltip { + position: absolute; + anchor-name: --tooltip; + inset-area: top; + margin-bottom: 5px; } -@property --tw-ease { - syntax: "*"; - inherits: false; + +/* Logical Properties for International Support */ + +.content-block { + margin-block: var(--space-4); + padding-inline: var(--space-4); + border-inline-start: 3px solid var(--color-brand); } -@keyframes spin { - to { - transform: rotate(360deg); + +/* =============================================== + Accessibility Enhancements + =============================================== */ + +/* Reduced Motion Support */ + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + .fade-in-on-scroll { + animation: none; } } -@keyframes pulse { - 50% { - opacity: 0.5; - } -} -@layer properties { - @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { - *, ::before, ::after, ::backdrop { - --tw-font-weight: initial; - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - --tw-tracking: initial; - --tw-duration: initial; - --tw-space-y-reverse: 0; - --tw-border-style: solid; - --tw-space-x-reverse: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-translate-z: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-scale-z: 1; - --tw-rotate-x: initial; - --tw-rotate-y: initial; - --tw-rotate-z: initial; - --tw-skew-x: initial; - --tw-skew-y: initial; - --tw-divide-y-reverse: 0; - --tw-leading: initial; - --tw-ordinal: initial; - --tw-slashed-zero: initial; - --tw-numeric-figure: initial; - --tw-numeric-spacing: initial; - --tw-numeric-fraction: initial; - --tw-outline-style: solid; - --tw-blur: initial; - --tw-brightness: initial; - --tw-contrast: initial; - --tw-grayscale: initial; - --tw-hue-rotate: initial; - --tw-invert: initial; - --tw-opacity: initial; - --tw-saturate: initial; - --tw-sepia: initial; - --tw-drop-shadow: initial; - --tw-drop-shadow-color: initial; - --tw-drop-shadow-alpha: 100%; - --tw-drop-shadow-size: initial; - --tw-backdrop-blur: initial; - --tw-backdrop-brightness: initial; - --tw-backdrop-contrast: initial; - --tw-backdrop-grayscale: initial; - --tw-backdrop-hue-rotate: initial; - --tw-backdrop-invert: initial; - --tw-backdrop-opacity: initial; - --tw-backdrop-saturate: initial; - --tw-backdrop-sepia: initial; - --tw-ease: initial; - } + +/* High Contrast Support */ + +@media (prefers-contrast: high) { + .link-card { + border-width: 2px; + } + + .alert-warning { + border-width: 2px; } } +/* Focus Management */ + +.skip-link { + position: absolute; + top: -40px; + left: 6px; + background: var(--color-bg-primary); + color: var(--color-text-primary); + padding: 8px; + z-index: 1000; + text-decoration: none; + border-radius: var(--radius-sm); +} + +.skip-link:focus { + top: 6px; +} \ No newline at end of file diff --git a/exampleSite/resources/_gen/assets/css/main.css_77ecfdd452157f5ec51441f5c20cb322.json b/exampleSite/resources/_gen/assets/css/main.css_77ecfdd452157f5ec51441f5c20cb322.json new file mode 100644 index 0000000..9913371 --- /dev/null +++ b/exampleSite/resources/_gen/assets/css/main.css_77ecfdd452157f5ec51441f5c20cb322.json @@ -0,0 +1 @@ +{"Target":"/css/main.css","MediaType":"text/css","Data":{}} \ No newline at end of file diff --git a/exampleSite/resources/_gen/assets/css/src/input.css_e03652540c5bbc68d359e86d9fc1015a.json b/exampleSite/resources/_gen/assets/css/src/input.css_e03652540c5bbc68d359e86d9fc1015a.json deleted file mode 100644 index c9beff7..0000000 --- a/exampleSite/resources/_gen/assets/css/src/input.css_e03652540c5bbc68d359e86d9fc1015a.json +++ /dev/null @@ -1 +0,0 @@ -{"Target":"/css/src/input.css","MediaType":"text/css","Data":{}} \ No newline at end of file diff --git a/exampleSite/tailwind.config.js b/exampleSite/tailwind.config.js deleted file mode 100644 index d5aa069..0000000 --- a/exampleSite/tailwind.config.js +++ /dev/null @@ -1,65 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -module.exports = { - content: [ - "content/**/*.md", - "layouts/**/*.html", - "../../layouts/**/*.html", - "../../content/**/*.md", - "assets/js/**/*.js" - ], - theme: { - extend: { - colors: { - brand: "var(--color-brand)", - "brand-1": "var(--color-brand-1)", - "brand-2": "var(--color-brand-2)", - "brand-3": "var(--color-brand-3)", - "brand-4": "var(--color-brand-4)", - "brand-5": "var(--color-brand-5)", - "brand-6": "var(--color-brand-6)", - "brand-7": "var(--color-brand-7)", - - /* Semantic color tokens mapped to CSS variables */ - surface: "var(--color-surface)", - "surface-hover": "var(--color-surface-hover)", - "surface-active": "var(--color-surface-active)", - - text: { - primary: "var(--color-text-primary)", - secondary: "var(--color-text-secondary)", - tertiary: "var(--color-text-tertiary)", - inverse: "var(--color-text-inverse)", - }, - bg: { - primary: "var(--color-bg-primary)", - secondary: "var(--color-bg-secondary)", - tertiary: "var(--color-bg-tertiary)", - inverse: "var(--color-bg-inverse)", - }, - border: { - primary: "var(--color-border-primary)", - secondary: "var(--color-border-secondary)", - focus: "var(--color-border-focus)", - }, - }, - fontFamily: { - "brand": ["NVIDIA", "Arial", "Helvetica", "sans-serif"], - "brand-italic": ["NVIDIA", "Arial", "Helvetica", "sans-serif"], - "nvidia": ["NVIDIA", "Arial", "Helvetica", "sans-serif"], - "nvidia-mono": ["RobotoMono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"], - }, - fontSize: { - // Override default text sizes for better accessibility - 'xs': ['0.875rem', { lineHeight: '1.4' }], // Increased from 0.75rem - 'sm': ['0.875rem', { lineHeight: '1.5' }], // Keep at 0.875rem - 'base': ['1rem', { lineHeight: '1.6' }], // Enhanced line height - 'lg': ['1.125rem', { lineHeight: '1.75' }], // Keep current - 'xl': ['1.25rem', { lineHeight: '1.75' }], // Keep current - '2xl': ['1.5rem', { lineHeight: '2' }], // Keep current - '3xl': ['1.875rem', { lineHeight: '2.25' }], // Keep current - }, - }, - }, - plugins: [], -}; - diff --git a/html_master_plan.md b/html_master_plan.md new file mode 100644 index 0000000..57fc344 --- /dev/null +++ b/html_master_plan.md @@ -0,0 +1,186 @@ +# HTML Master Plan - MiloDocs Enterprise Theme + +## Executive Summary + +**Goal**: Clean, semantic HTML for 143 template files supporting enterprise technical documentation +**Strategy**: Consolidate redundant templates, establish patterns, build incrementally +**Priority**: Core functionality first, specialized content types second + +## Template Consolidation Strategy + +### ✅ COMPLETED (4 files) +- `_default/baseof.html` - Master template foundation +- `_default/single.html` - Technical articles +- `_default/list.html` - Section/listing pages +- `_default/home.html` - Homepage + +### đŸ”Ĩ PHASE 1: Core Navigation & Layout (8 files) +**Priority**: Critical - Site unusable without these + +1. **`partials/header.html`** - Site header with branding +2. **`partials/footer.html`** - Site footer with links +3. **`partials/navigation/sidebar-left.html`** - Primary navigation ✨ Clean up existing +4. **`partials/navigation/sidebar-right.html`** - TOC/metadata ✨ Clean up existing +5. **`partials/navigation/topbar/main.html`** - Top navigation bar ✨ Clean up existing +6. **`partials/navigation/breadcrumbs.html`** - Breadcrumb navigation ✨ Clean up existing +7. **`partials/head.html`** - HTML head with meta ✨ Clean up existing +8. **`404.html`** - Error page + +### 📄 PHASE 2: Article Components (12 files) +**Priority**: High - Core content functionality + +1. **`partials/article/header.html`** - Article headers with metadata +2. **`partials/article/toc.html`** - Table of contents +3. **`partials/article/next-prev.html`** - Page navigation +4. **`partials/article/metadata.html`** - Article metadata display +5. **`partials/article/status-warnings.html`** - Content status alerts +6. **`partials/article/page-resources.html`** - Related downloads/links +7. **`partials/article/related-content.html`** - Related articles +8. **`partials/article/tiles.html`** - Content cards for home/sections +9. **`partials/article/table-of-contents.html`** - Inline TOC +10. **`partials/article/toc-items.html`** - TOC list items (consolidate into main TOC) +11. **`partials/article/child-links.html`** - Child page links +12. **`partials/article/copy-page.html`** - Copy page functionality + +### 🔧 PHASE 3: Specialized Layouts (8 files - Consolidate from 18) +**Priority**: Medium - Content type support + +#### API Documentation (4 files - from 35 files) +1. **`openapi/single.html`** - API documentation pages +2. **`partials/openapi/overview.html`** - API overview section +3. **`partials/openapi/endpoints.html`** - Endpoint listings +4. **`partials/openapi/schemas.html`** - Schema documentation + +**❌ REMOVE**: Most openapi partials (35→4) - Too granular, consolidate into main templates + +#### Specialized Content (4 files) +1. **`notebook/single.html`** - Jupyter notebook display +2. **`_default/glossary.html`** - Glossary/reference pages +3. **`_default/api.html`** - API landing pages (merge with openapi/single.html) +4. **`object-model/single.html`** - Object model documentation + +**❌ REMOVE**: +- `tutorial/single.html`, `tutorial/section.html` (use default layouts) +- `release-notes/section.html` (use default list layout) +- `api-landing.html` (consolidate with api.html) + +### 🎛ī¸ PHASE 4: Essential Shortcodes (12 files - from 27) +**Priority**: Medium - Content enhancement + +#### Keep & Clean (12 files) +1. **`shortcodes/notice.html`** - Alert/callout boxes +2. **`shortcodes/collapse.html`** - Collapsible content +3. **`shortcodes/tab.html`** - Tabbed content +4. **`shortcodes/video.html`** - Video embeds +5. **`shortcodes/mermaid.html`** - Diagrams +6. **`shortcodes/asciinema.html`** - Terminal recordings +7. **`shortcodes/csv.html`** - CSV table display +8. **`shortcodes/quicklinks.html`** - Link collections +9. **`shortcodes/include.html`** - File includes +10. **`shortcodes/readfile.html`** - File content display +11. **`shortcodes/sphinx.html`** - Sphinx documentation +12. **`shortcodes/rst.html`** - reStructuredText support + +#### Remove (15 files) - Minimal value +**❌ REMOVE**: +- Simple text replacements: `productName.html`, `orgName.html`, `prod.html`, `ascii.html`, `shared.html` +- Version helpers: `version.html`, `release/*` (4 files) +- Doc generators: `pdoc.html`, `pdoc-2.html`, `helm.html` +- Simple embeds: `logo.html`, `linkref.html` + +### 🔧 PHASE 5: Utility Partials (8 files - from 20) +**Priority**: Low - Helper functions + +#### Keep & Clean (8 files) +1. **`partials/head/css.html`** - CSS loading ✅ Already clean +2. **`partials/head/js.html`** - JavaScript loading +3. **`partials/utils/meta.html`** - SEO metadata +4. **`partials/utils/layout-config.html`** - Layout configuration +5. **`partials/utils/title-guard.html`** - Title display logic +6. **`partials/utils/page-kind.html`** - Page type detection +7. **`partials/logo.html`** - Site logo component +8. **`partials/welcome.html`** - Empty state message + +#### Remove (12 files) - Overly specific +**❌ REMOVE**: +- Debugging: `css/stats-analyzer.html`, `css/purge-analyzer.html` +- Unused: `searchResultsContainer.html`, `terms.html` +- Consolidate: `utils/breadcrumbs-data.html`, `utils/right-rail.html` (merge into main components) +- Notebook partials (6 files) - consolidate into single notebook template +- API partials (8 files) - too granular + +## Implementation Order + +### Week 1: Core Foundation +- [x] Core layouts (baseof, single, list, home) +- [ ] Navigation partials (header, footer, sidebars, breadcrumbs) +- [ ] 404 page + +### Week 2: Content System +- [ ] Article partials (header, TOC, metadata, navigation) +- [ ] Head/meta partials cleanup + +### Week 3: Specialized Content +- [ ] API documentation templates +- [ ] Notebook display templates +- [ ] Glossary and reference layouts + +### Week 4: Content Enhancement +- [ ] Essential shortcodes cleanup +- [ ] Utility partials consolidation + +### Week 5: Final Cleanup +- [ ] Remove redundant files +- [ ] Test all content types +- [ ] Documentation + +## HTML Quality Standards + +### Semantic Structure +```html + +
+
+

Title

+
+ +
+
+
+ Content... +
+
+``` + +### Data Attributes for JavaScript +```html + + +``` + +### Accessibility Requirements +- All interactive elements have proper ARIA labels +- Semantic HTML elements used correctly +- Focus management for dynamic content +- Screen reader support via live regions +- Keyboard navigation support + +## File Reduction Summary + +- **Before**: 143 HTML files +- **After**: ~50 essential files +- **Reduction**: 65% fewer files to maintain +- **Focus**: Core functionality, better maintainability + +## Next Steps + +1. Execute phases in order +2. Test each phase thoroughly +3. Remove redundant files after replacement +4. Document new patterns for team use + +This consolidation will create a more maintainable, focused codebase while preserving all essential functionality for enterprise technical documentation. diff --git a/html_quality_analysis.md b/html_quality_analysis.md new file mode 100644 index 0000000..c0db900 --- /dev/null +++ b/html_quality_analysis.md @@ -0,0 +1,158 @@ +# HTML Quality Analysis - MiloDocs + +## Current State Assessment + +### Issues Identified + +1. **Mixed CSS Approach** - Templates contain both Tailwind classes AND CSS custom properties (inline styles) +2. **Inconsistent Semantic Structure** - Some good practices mixed with divitis +3. **Class Dependencies** - Many CSS classes that no longer exist, causing visual breaks +4. **Accessibility Gaps** - Missing ARIA labels, focus management issues +5. **Inline Styles** - Using CSS custom properties in style attributes instead of clean semantic classes + +### Examples of Problems + +#### baseof.html +```html + + + +
+``` + +#### single.html +```html + +

{{ .Title }}

+
+ +``` + +#### sidebar-left.html +```html + +
+ + {{/* Search suggestion */}} +
+

What you can do:

+
    +
  • Check the URL for typos
    • +
  • Use the search function to find what you're looking for
    • +
  • Browse our main sections below
    • +
  • Contact us if you think this is an error
    • +
+
+ + {{/* Helpful links */}} + {{ if .Site.Sections }} + + {{ end }} + + + + +{{ end }} \ No newline at end of file diff --git a/layouts/_default/api.html b/layouts/_default/api.html index d8e0354..bcc760c 100644 --- a/layouts/_default/api.html +++ b/layouts/_default/api.html @@ -1,25 +1,151 @@ -{{- define "main" }} -{{- $reference := .Page.Params.reference -}} +{{- define "main" -}} +{{ $reference := .Page.Params.reference }} -{{- range $data, $spec := .Site.Data -}} -{{- if eq $data $reference -}} -{{- with $spec -}} - -
-
- -
-

{{ .info.title }}

-

{{ $.Page.RenderString .info.description }}

-

Version: {{ .info.version }}

-
- - {{- partial "api/paths.html" $spec.paths -}} - - {{- partial "api/components.html" $spec.components -}} +
+ +
+
+ {{ partial "navigation/breadcrumbs.html" . }}
-
-{{- end -}} -{{- end -}} -{{- end -}} -{{- end -}} + + + {{ range $data, $spec := .Site.Data }} + {{ if eq $data $reference }} + {{ with $spec }} + +
+ + {{/* API Information */}} +
+
+

{{ .info.title }}

+ +
+
+ +
+
Version
+
+ {{ .info.version }} +
+
+ + {{ with .info.contact }} +
+
Contact
+
+ {{ if .url }} + + {{ .name | default .url }} + + {{ else }} + {{ .name }} + {{ end }} + {{ with .email }} + {{ . }} + {{ end }} +
+
+ {{ end }} + + {{ with .info.license }} +
+
License
+
+ {{ if .url }} + + {{ .name }} + + {{ else }} + {{ .name }} + {{ end }} +
+
+ {{ end }} + +
+
+
+ + {{ with .info.description }} +
+ {{ $.Page.RenderString . }} +
+ {{ end }} + + {{ with .servers }} +
+

Base URLs

+
    + {{ range . }} +
  • + {{ .url }} + {{ with .description }} + {{ . }} + {{ end }} +
    • + {{ end }} +
+
+ {{ end }} + +
+ + {{/* API Endpoints */}} + {{ with .paths }} +
+

API Endpoints

+ {{ partial "api/paths.html" . }} +
+ {{ end }} + + {{/* API Components */}} + {{ with .components }} +
+

API Components

+ {{ partial "api/components.html" . }} +
+ {{ end }} + + {{/* API Security */}} + {{ with .security }} +
+

Authentication

+ {{ partial "api/security.html" . }} +
+ {{ end }} + + {{/* API Tags */}} + {{ with .tags }} +
+

API Categories

+
+ {{ range . }} +
+

{{ .name }}

+ {{ with .description }} +

{{ . }}

+ {{ end }} +
+ {{ end }} +
+
+ {{ end }} + +
+ + {{ end }} + {{ end }} + {{ end }} + + +{{- end -}} \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 0a64db8..1bd79dd 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,93 +1,105 @@ - + - {{ with (templates.Defer (dict "key" "global")) }} - {{ partial "head.html" . }} - {{ end }} + + + + + {{/* SEO and meta information */}} + {{ partial "head.html" . }} {{ block "head-extra" . }}{{ end }} - -
- {{- partial "header.html" . -}} + + + {{/* Skip link for accessibility */}} + + + {{/* Site header */}} + - {{- block "top-bar" . -}}{{- end -}} - - {{/* Unified layout config via util partial */}} - {{- $cfg := partial "utils/layout-config.html" (dict "site" .Site "page" .) -}} - {{- $rightRail := eq (partial "utils/right-rail.html" (dict "site" .Site "page" .)) "true" -}} - {{- $leftRailWidth := $cfg.leftRailWidth | default "" -}} - {{- $rightRailWidth := $cfg.rightRailWidth | default "" -}} - {{- $densityClass := cond (eq $cfg.density "compact") "layout-density--compact" "layout-density--comfortable" -}} - - {{/* Compose style vars for layout-shell */}} - {{- $styleVars := slice -}} - {{- if not $rightRail -}} - {{- $styleVars = $styleVars | append "--right-rail-width:0" | append "--right-rail-width-2xl:0" -}} - {{- end -}} - {{- with $leftRailWidth -}} - {{- $styleVars = $styleVars | append (printf "--left-rail-width:%s" .) | append (printf "--left-rail-width-2xl:%s" .) -}} - {{- end -}} - {{- with $rightRailWidth -}} - {{- $styleVars = $styleVars | append (printf "--right-rail-width:%s" .) | append (printf "--right-rail-width-2xl:%s" .) -}} - {{- end -}} - - {{/*
*/}} -
- - {{- block "sidebar-left" . -}}{{- end -}} - {{/*
*/}} -
- - {{ block "loading-skeleton" . }} - {{- $lc := partial "utils/layout-config.html" (dict "site" .Site "page" .) -}} - {{- if $lc.skeleton -}} -
-
-
-
-
-
-
-
-
- {{- end -}} + + {{/* Top navigation bar */}} + {{ block "site-navigation" . }} + {{ partial "navigation/topbar/main.html" . }} + {{ end }} + + {{/* Main content area */}} +
+
+ + {{/* Breadcrumb navigation */}} + {{ block "breadcrumbs" . }} + {{ if not .IsHome }} + + {{ end }} {{ end }} - -
- {{- block "page-header" . -}}{{- end -}} - {{- block "pre-content" . -}}{{- end -}} - {{- if .IsHome -}} - {{- block "home" . -}}{{- end -}} - {{- else if or (eq .Kind "section") (eq .Kind "taxonomy") (eq .Kind "term") -}} - {{- block "list" . -}}{{- end -}} - {{- else -}} - {{- if eq .Kind "page" -}}{{- partial "article/summarization.html" . -}}{{- end -}} - {{- block "breadcrumbs" . -}}{{- end -}} - {{- block "content" . -}}{{- end -}} - {{- end -}} - {{- block "post-content" . -}}{{- end -}} - {{- block "innerFooter" . -}}{{- end -}} + {{/* Content layout */}} +
+ + {{/* Left sidebar - Primary navigation */}} + + + {{/* Primary content area */}} +
+ {{/* Page-specific header */}} + {{ block "page-header" . }}{{ end }} + + {{/* Main content blocks */}} + {{- if .IsHome -}} + {{ block "home-content" . }}{{ end }} + {{- else if or (eq .Kind "section") (eq .Kind "taxonomy") (eq .Kind "term") -}} + {{ block "list-content" . }}{{ end }} + {{- else -}} + {{ block "single-content" . }}{{ end }} + {{- end -}} + + {{/* Page footer actions */}} + {{ block "page-footer" . }}{{ end }} +
+ + {{/* Right sidebar - Table of contents, metadata */}} + +
- {{- partial "searchResultsContainer.html" . -}} - - {{- if $rightRail -}} - - {{- end -}}
-
- {{- partial "footer.html" . -}} + + {{/* Site footer */}} +
+ {{ block "site-footer" . }} + {{ partial "footer.html" . }} + {{ end }}
- {{ block "scripts" . }}{{ end }} - + {{/* JavaScript and analytics */}} + {{ block "scripts" . }} + {{ partial "head/js.html" . }} + {{ end }} + - + \ No newline at end of file diff --git a/layouts/_default/glossary.html b/layouts/_default/glossary.html index e0e944b..0fbb005 100644 --- a/layouts/_default/glossary.html +++ b/layouts/_default/glossary.html @@ -1,38 +1,175 @@ {{- define "top-bar" -}} - {{- partial "navigation/topbar/main.html" . -}} + {{ partial "navigation/topbar/main.html" . }} {{- end -}} {{- define "sidebar-left" -}} - {{- partial "navigation/sidebar-left.html" . -}} + {{ partial "navigation/sidebar-left.html" . }} {{- end -}} {{- define "breadcrumbs" -}} -
- {{partial "navigation/breadcrumbs.html" . }} +
+ {{ partial "navigation/breadcrumbs.html" . }}
{{- end -}} {{- define "list" -}} -
-{{- partial "navigation/glossary.html" . -}} -
- {{- partial "glossary/entries.html" . -}} -
+
+ + {{/* Glossary Navigation */}} + + + {{/* Glossary Content */}} +
+ +
+

{{ .Title }}

+ {{ with .Content }} +
+ {{ . }} +
+ {{ end }} + + {{/* Search and filters */}} +
+
+ + + +
+ +
+ + +
+
+
+ + {{/* Glossary Entries */}} +
+ {{ partial "glossary/entries.html" . }} +
+ +
+
{{- end -}} {{- define "content" -}} -
-{{- partial "navigation/glossary.html" . -}} -
- {{- partial "glossary/entries.html" . -}} -
+
+ + {{/* Glossary Navigation */}} + + + {{/* Single Glossary Term */}} +
+ +
+ +
+

{{ .Title }}

+ + {{/* Term metadata */}} +
+ {{ with .Params.category }} + {{ . }} + {{ end }} + + {{ with .Params.acronym }} + + {{ . }} + + {{ end }} + + {{ with .Params.aliases }} +
+ Also known as: + {{ range . }} + {{ . }} + {{ end }} +
+ {{ end }} +
+
+ + {{/* Term definition */}} +
+ {{ .Content }} +
+ + {{/* Related terms */}} + {{ with .Params.related_terms }} +
+

Related Terms

+
    + {{ range . }} + {{ with site.GetPage (printf "/glossary/%s" .) }} +
  • + + {{ .Title }} + + {{ with .Params.short_description }} + {{ . }} + {{ end }} +
    • + {{ end }} + {{ end }} +
+
+ {{ end }} + + {{/* External references */}} + {{ with .Params.external_references }} +
+

External References

+
    + {{ range . }} +
  • + + {{ .title }} + + {{ with .description }} + {{ . }} + {{ end }} +
    • + {{ end }} +
+
+ {{ end }} + +
+ +
+
{{- end -}} -{{- define "innerFooter" -}} -{{- end -}} - {{- define "sidebar-right" -}} - {{- partial "navigation/sidebar-right.html" . -}} + {{ partial "navigation/sidebar-right.html" . }} {{- end -}} \ No newline at end of file diff --git a/layouts/_default/home.html b/layouts/_default/home.html index 5bd855b..b85d125 100644 --- a/layouts/_default/home.html +++ b/layouts/_default/home.html @@ -1,40 +1,164 @@ -{{- define "top-bar" -}} - {{- partial "navigation/topbar/main.html" . -}} -{{- end -}} +{{/* Homepage Layout */}} -{{- define "sidebar-left" -}} - {{- partial "navigation/sidebar-left.html" . -}} -{{- end -}} - -{{- define "breadcrumbs" -}} - {{/*
- {{partial "navigation/breadcrumbs.html" . }} -
*/}} -{{- end -}} - -{{ define "content" }} -
- {{if lt (len .Site.Sections) 1}} - {{- partial "welcome.html" -}} - {{- else -}} - {{ .Content }} - {{- end -}} -
-
- {{- partial "article/tiles.html" . -}} +{{ define "home-content" }} +
+ + {{/* Hero section */}} +
+
+

{{ .Title }}

+ + {{ with .Content }} +
+ {{ . }} +
+ {{ end }} + + {{ with .Params.hero }} + {{ with .cta_text }} +
+ + {{ . }} + +
+ {{ end }} + {{ end }}
-{{ end }} - -{{ define "home" }} - {{- template "content" . -}} -{{ end }} - -{{- define "innerFooter" -}} - {{/*
- {{partial "article/next-prev.html" . }} -
*/}} -{{- end -}} - -{{- define "sidebar-right" -}} - {{- partial "navigation/sidebar-right.html" . -}} -{{- end -}} \ No newline at end of file +
+ + {{/* Quick links section */}} + {{ if .Params.quicklinks }} +
+

Get Started

+ +
+ {{ range .Params.quicklinks }} + + {{ with .icon }} + + {{ end }} +

{{ .title }}

+

{{ .description }}

+ + {{ end }} +
+
+ {{ end }} + + {{/* Featured sections */}} + {{ if .Site.Sections }} +
+

Documentation

+ +
+ {{ range .Site.Sections }} +
+ + {{/* Section icon or image */}} + {{ with .Params.icon }} + + {{ else }} + {{ with .Params.featured_image }} +
+ {{ $.Title }} +
+ {{ end }} + {{ end }} + + {{/* Section content */}} +
+

+ +

+ + {{ with .Params.description }} +

{{ . }}

+ {{ else }} + {{ with .Summary }} +

{{ . }}

+ {{ end }} + {{ end }} + + {{ if .Pages }} +

+ {{ len .Pages }} {{ if eq (len .Pages) 1 }}article{{ else }}articles{{ end }} +

+ {{ end }} +
+ + {{/* Recent articles preview */}} + {{ if .Pages }} +
+

Recent articles:

+ +
+ {{ end }} +
+ {{ end }} +
+
+ {{ else }} + {{/* Welcome message when no content exists */}} +
+ {{ partial "welcome.html" . }} +
+ {{ end }} + + {{/* Latest updates */}} + {{ $recentPages := where .Site.RegularPages "Section" "!=" "" }} + {{ $recentPages = first 6 $recentPages }} + {{ if $recentPages }} +
+

Latest Updates

+ +
+ {{ range $recentPages }} +
+ +
+ {{ .Section | title }} + +
+ +

+ +

+ + {{ with .Summary }} +

+ {{ . | truncate 100 }} +

+ {{ end }} +
+ {{ end }} +
+ +
+ View all updates +
+
+ {{ end }} + +
+{{ end }} \ No newline at end of file diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 67b2e09..31ba846 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,116 +1,163 @@ -{{- define "top-bar" -}} - {{- partial "navigation/topbar/main.html" . -}} -{{- end -}} +{{/* Section/List Layout */}} -{{- define "sidebar-left" -}} - {{- partial "navigation/sidebar-left.html" . -}} -{{- end -}} - -{{- define "breadcrumbs" -}} -
- {{partial "navigation/breadcrumbs.html" . }} -
-{{- end -}} - -{{- define "list" -}} -
-

{{ .Title }}

- {{- with .Content -}} -
+{{ define "list-content" }} +
+ + {{/* Section header */}} +
+

{{ .Title }}

+ + {{ with .Content }} +
{{ . }}
- {{- end -}} + {{ end }} + + {{ if .Pages }} +

+ {{ len .Pages }} {{ if eq (len .Pages) 1 }}article{{ else }}articles{{ end }} +

+ {{ end }}
- - {{- $pages := .Pages -}} - {{- if $pages -}} -
- {{/*
*/}} -
- {{- range $pages -}} -
- {{- with .Params.image -}} -
- {{ $.Title }} + + {{/* Page listings */}} + {{ if .Pages }} +
+

Articles in this section

+ +
+ {{ range .Pages }} +
+ + {{/* Article image */}} + {{ with .Params.featured_image }} +
+ {{ $.Title }}
- {{- end -}} + {{ end }} -
-

- + + {{/* Article metadata */}} +
+ {{ with .Params.category }} + {{ . }} + {{ end }} + + {{ with .Date }} + + {{ end }} + + {{ if .Params.reading_time }} + {{ .ReadingTime }} min read + {{ end }} +
+ + {{/* Article title */}} +

+ -

+

- {{- with .Summary -}} -
+ {{/* Article summary */}} + {{ with .Summary }} +

{{ . | truncate 150 }} +

+ {{ end }} + + {{/* Article tags */}} + {{ with .Params.tags }} +
+ {{ range first 3 . }} + {{ . }} + {{ end }} + {{ if gt (len .) 3 }} + +{{ sub (len .) 3 }} more + {{ end }}
- {{- end -}} + {{ end }} - {{/* Enhanced metadata for list items */}} -
- {{- with .Date -}} - - {{- end -}} - {{- with .Params.tags -}} - - - - - {{ delimit . ", " }} - - {{- end -}} -
- {{- end -}} + {{ end }}
{{/* Pagination */}} - {{- $paginator := .Paginate $pages -}} - {{- if gt $paginator.TotalPages 1 -}} -
-
- {{ range $index, $cell := $decodedNotebook.cells }} - {{/* Add hidden class to all cells except first few */}} - {{ $isInitiallyVisible := lt $index 5 }} -
- {{ if eq $cell.cell_type "markdown" }} - {{ partial "notebook/cell-markdown.html" (dict "cell" $cell "index" $index) }} - {{ else if eq $cell.cell_type "code" }} - {{ partial "notebook/cell-code.html" (dict "cell" $cell "index" $index) }} - {{ else if eq $cell.cell_type "raw" }} - {{ partial "notebook/cell-raw.html" (dict "cell" $cell "index" $index) }} - {{ else }} - {{/* Unknown cell type - render as raw */}} - {{ partial "notebook/cell-raw.html" (dict "cell" $cell "index" $index) }} - {{ end }} -
- {{ end }} + data-initial-visible="5"> + + {{ range $index, $cell := $decodedNotebook.cells }} + {{ $isInitiallyVisible := lt $index 5 }} + +
+ + {{ if eq $cell.cell_type "markdown" }} + {{ partial "notebook/cell-markdown.html" (dict "cell" $cell "index" $index) }} + {{ else if eq $cell.cell_type "code" }} + {{ partial "notebook/cell-code.html" (dict "cell" $cell "index" $index) }} + {{ else if eq $cell.cell_type "raw" }} + {{ partial "notebook/cell-raw.html" (dict "cell" $cell "index" $index) }} + {{ else }} + {{/* Unknown cell type - render as raw */}} +
+ +
+ {{ $cell.cell_type | title }} + [{{ $index }}] +
+ +
+ 
{{ delimit $cell.source "\n" }}
+
+ +
+ {{ end }} + +
+ {{ end }} + + {{/* Load more cells section */}} + +
- - - {{/* Enhanced metadata for JavaScript */}} + {{/* Notebook metadata for JavaScript */}} - {{- else -}} - {{- errorf "Failed to unmarshal notebook: %s" $notebookPath -}} - {{- end -}} - {{- else -}} - {{- errorf "Failed to get notebook resource: %s" $notebookPath -}} - {{- errorf "Current working directory: %s" (os.Getwd) -}} - {{- end -}} - - -{{/* Inline JS removed. Notebook cells use Collapse/Notebook components. */}} - - + + + {{ else }} + + {{ end }} +{{ else }} + +{{ end }} {{- end -}} {{- define "sidebar-right" -}} -{{- partial "navigation/sidebar-right.html" . -}} -{{- end -}} \ No newline at end of file + {{ partial "navigation/sidebar-right.html" . }} +{{- end -}} \ No newline at end of file diff --git a/layouts/object-model/single.html b/layouts/object-model/single.html index c8b4f0f..1aa1a6e 100644 --- a/layouts/object-model/single.html +++ b/layouts/object-model/single.html @@ -1,195 +1,332 @@ {{- define "top-bar" -}} - {{- partial "navigation/topbar/main.html" . -}} + {{ partial "navigation/topbar/main.html" . }} {{- end -}} {{- define "sidebar-left" -}} - {{- partial "navigation/sidebar-left.html" . -}} + {{ partial "navigation/sidebar-left.html" . }} {{- end -}} {{- define "content" -}} -
- {{- $schemaPath := .Params.schema -}} - {{- $schema := index .Site.Data (replace $schemaPath ".yaml" "") -}} - {{- $objectModel := $schema.ObjectModel -}} +{{ $schemaPath := .Params.schema }} -
-

Object Model Reference

+{{ if not $schemaPath }} + + {{ return }} +{{ end }} + +{{ $schema := index .Site.Data (replace $schemaPath ".yaml" "") }} +{{ $objectModel := $schema.ObjectModel }} + +{{ if not $objectModel }} + + {{ return }} +{{ end }} + +
+ +
+

{{ .Title | default "Object Model Reference" }}

+ + {{ with .Content }} +
+ {{ . }} +
+ {{ end }} + {{ with $objectModel.Description }} -
{{ . | markdownify }}
+
+ {{ . | markdownify }} +
{{ end }} -
- - {{ range $modelName, $model := $objectModel.Objects }} -
-
-

- {{ $modelName }} -

- {{ with $model.Description }} -
{{ . | markdownify }}
+ + {{/* Quick navigation */}} +
- -
-
-

Input Attributes

-
    - {{ range $input := $model.Inputs }} -
  • - {{ if $input.options }} -
    - - -
    - {{ $input.name }} - {{ $input.description | markdownify }} -
    -     -
      - {{ range $mapNumber, $mapValue := $input.options }} - {{ range $key, $value := . }} -
    • - {{ $key }} -
      {{ $value | markdownify }}
      -
      • - {{ end }} + {{ with $objectModel.Components }} +
    • + Components + +
      • + {{ end }} +
    + +
+ +
+ + {{/* Objects section */}} + {{ if $objectModel.Objects }} +
+

Objects

+ + {{ range $modelName, $model := $objectModel.Objects }} +
+ +
+

+ {{ $modelName }} + + # + +

+ + {{ with $model.Description }} +
+ {{ . | markdownify }} +
+ {{ end }} +
+ +
+ + {{/* Input Attributes */}} + {{ if $model.Inputs }} +
+

+ Input Attributes +

+ +
+ {{ range $input := $model.Inputs }} +
+ + {{ if $input.options }} +
+ + +
+ {{ $input.name }} +
{{ $input.description | markdownify }}
+
+ + +
+
Options
+
+ {{ range $input.options }} + {{ range $key, $value := . }} +
+
+ {{ $key }} +
+
+ {{ $value | markdownify }} +
+
+ {{ end }} + {{ end }} +
+
+
+ {{ else }} +
+ +
+ {{ $input.name }} +
{{ $input.description | markdownify }}
+
+
+ {{ end }} + +
{{ end }} - - - {{ else }} -
- -
- {{ $input.name }} - {{ $input.description | markdownify }}
{{ end }} - - {{ end }} - -
- - {{ with $model.AioliManaged }} -
-

Managed Attributes

-
    - {{ range $managed := . }} -
  • - {{ if $managed.options }} -
    - - -
    - {{ $managed.name }} - {{ $managed.description | markdownify }} -
    -     -
      - {{ range $mapNumber, $mapValue := $managed.options }} - {{ range $key, $value := . }} -
    • - {{ $key }} -
      {{ $value | markdownify }}
      -
      • + + {{/* Managed Attributes */}} + {{ with $model.AioliManaged }} +
      +

      + Managed Attributes +

      + +
      + {{ range $managed := . }} +
      + + {{ if $managed.options }} +
      + + +
      + {{ $managed.name }} +
      {{ $managed.description | markdownify }}
      +
      +       + +
      +
      Options
      +
      + {{ range $managed.options }} + {{ range $key, $value := . }} +
      +
      + {{ $key }} +
      +
      + {{ $value | markdownify }} +
      +
      + {{ end }} + {{ end }} +
      +
      +
      + {{ else }} +
      + +
      + {{ $managed.name }} +
      {{ $managed.description | markdownify }}
      +
      +
      {{ end }} - {{ end }} -
    -
    - {{ else }} -
    - -
    - {{ $managed.name }} - {{ $managed.description | markdownify }} -
    + +
    + {{ end }}
- {{ end }} - - {{ end }} - -
+
+ {{ end }} + +
+ {{ end }} - - - {{ end }} - - {{ with $objectModel.Components }} -
- {{ range $componentName, $component := . }} -
-
-

- {{ $componentName }} -

- {{ with $component.Description }} -
{{ . | markdownify }}
- {{ end }} -
- -
-

Attributes

-
    - {{ range $attribute := $component.Attributes }} -
  • - {{ if $attribute.options }} -
    - - -
    - {{ $attribute.name }} - {{ $attribute.description | markdownify }} -
    -     -
      - {{ range $mapNumber, $mapValue := $attribute.options }} - {{ range $key, $value := . }} -
    • - {{ $key }} -
      {{ $value | markdownify }}
      -
      • - {{ end }} +
+ {{ end }} + + {{/* Components section */}} + {{ with $objectModel.Components }} +
+

Components

+ + {{ range $componentName, $component := . }} +
+ +
+

+ {{ $componentName }} + + # + +

+ + {{ with $component.Description }} +
+ {{ . | markdownify }} +
+ {{ end }} +
+ +
+
+

+ Attributes +

+ +
+ {{ range $attribute := $component.Attributes }} +
+ + {{ if $attribute.options }} +
+ + +
+ {{ $attribute.name }} +
{{ $attribute.description | markdownify }}
+
+ + +
+
Options
+
+ {{ range $attribute.options }} + {{ range $key, $value := . }} +
+
+ {{ $key }} +
+
+ {{ $value | markdownify }} +
+
+ {{ end }} + {{ end }} +
+
+
+ {{ else }} +
+ +
+ {{ $attribute.name }} +
{{ $attribute.description | markdownify }}
+
+
{{ end }} - - - {{ else }} -
- -
- {{ $attribute.name }} - {{ $attribute.description | markdownify }} +
-
- {{ end }} - - {{ end }} - -
+ {{ end }} +
+
+
+
+ {{ end }}
{{ end }} - {{ end }} - - {{/* page end */}} + + + {{- end -}} {{- define "sidebar-right" -}} -{{- partial "navigation/sidebar-right.html" . -}} + {{ partial "navigation/sidebar-right.html" . }} {{- end -}} \ No newline at end of file diff --git a/layouts/openapi/single.html b/layouts/openapi/single.html index 61874f3..b7290e3 100644 --- a/layouts/openapi/single.html +++ b/layouts/openapi/single.html @@ -1,83 +1,176 @@ {{- define "top-bar" -}} - {{- partial "navigation/topbar/main.html" . -}} + {{ partial "navigation/topbar/main.html" . }} {{- end -}} {{- define "sidebar-left" -}} - {{- partial "navigation/sidebar-left.html" . -}} + {{ partial "navigation/sidebar-left.html" . }} {{- end -}} {{- define "content" -}} -{{- $apiData := .Params.api_data -}} -{{- $currentMethod := .Params.endpoint.method -}} -{{- $currentPath := .Params.endpoint.path -}} -{{- $currentTag := .Params.endpoint.tag -}} -{{- $operationId := .Params.endpoint.operationId -}} -{{- $operation := .Params.endpoint.operation -}} +{{ $apiData := .Params.api_data }} +{{ $currentMethod := .Params.endpoint.method }} +{{ $currentPath := .Params.endpoint.path }} +{{ $currentTag := .Params.endpoint.tag }} +{{ $operationId := .Params.endpoint.operationId }} +{{ $operation := .Params.endpoint.operation }} -{{- if not $apiData -}} -
-

API Data Not Found

-

Could not load API data from page front matter.

+{{ if not $apiData }} + {{ return }} -{{- end -}} - -{{/* Generate metadata and data attributes */}} -{{ $metadata := partial "openapi/single/metadata.html" (dict - "operation" $operation - "currentMethod" $currentMethod - "currentPath" $currentPath - "operationId" $operationId) }} +{{ end }} -
+
- - {{ partial "openapi/single/header.html" (dict - "operation" $operation - "currentMethod" $currentMethod - "currentPath" $currentPath - "currentTag" $currentTag - "apiData" $apiData - "page" .) }} - - -
-
+ {{/* Endpoint Header */}} +
+ + {{/* Method and Path */}} +
+ + {{ $currentMethod | upper }} + + +
+ + {{/* Title and Summary */}} +
+ {{ with $operation.summary }} +

{{ . }}

+ {{ end }} - {{ partial "openapi/single/content.html" (dict - "operation" $operation - "currentMethod" $currentMethod - "currentPath" $currentPath - "apiData" $apiData - "endpointId" $metadata.endpointId) }} + {{ with $operation.description }} +
+ {{ $.Page.RenderString . }} +
+ {{ end }} + + {{/* Tags and Categories */}} + {{ with $operation.tags }} +
+ Tags: + {{ range . }} + {{ . }} + {{ end }} +
+ {{ end }} + + {{/* Operation ID */}} + {{ with $operationId }} +
+ Operation ID: + {{ . }} +
+ {{ end }}
+ +
+ + {{/* Endpoint Content */}} +
+ + {{/* Parameters Section */}} + {{ with $operation.parameters }} +
+

Parameters

+ + {{ $pathParams := where . "in" "path" }} + {{ $queryParams := where . "in" "query" }} + {{ $headerParams := where . "in" "header" }} + + {{ if $pathParams }} +
+

Path Parameters

+ {{ partial "openapi/parameters-table.html" $pathParams }} +
+ {{ end }} + + {{ if $queryParams }} +
+

Query Parameters

+ {{ partial "openapi/parameters-table.html" $queryParams }} +
+ {{ end }} + + {{ if $headerParams }} +
+

Header Parameters

+ {{ partial "openapi/parameters-table.html" $headerParams }} +
+ {{ end }} + +
+ {{ end }} + + {{/* Request Body Section */}} + {{ with $operation.requestBody }} +
+

Request Body

+ {{ partial "openapi/request-body.html" . }} +
+ {{ end }} + + {{/* Responses Section */}} + {{ with $operation.responses }} +
+

Responses

+ {{ partial "openapi/responses.html" . }} +
+ {{ end }} + + {{/* Security Section */}} + {{ with $operation.security }} +
+

Authentication

+ {{ partial "openapi/security.html" . }} +
+ {{ end }} + + {{/* Examples Section */}} +
+

Try It Out

+
+
+ + + +
+ +
+
+

Click "Send Request" to test this endpoint

+
+
+
+
+
- +
{{- end -}} {{- define "sidebar-right" -}} - {{- partial "navigation/sidebar-right.html" . -}} + {{ partial "navigation/sidebar-right.html" . }} {{- end -}} \ No newline at end of file diff --git a/layouts/partials/article/header.html b/layouts/partials/article/header.html index 7777566..8fa3cae 100644 --- a/layouts/partials/article/header.html +++ b/layouts/partials/article/header.html @@ -1,25 +1,71 @@ -{{/* Article Header - Parent component managing breadcrumbs and metadata */}} -{{- $hasMetadata := or .Date .Params.author .ReadingTime .Lastmod .PublishDate .WordCount -}} - -
-
- {{/* Pure breadcrumbs navigation */}} - {{- partial "navigation/breadcrumbs.html" . -}} +{{/* Article Header Component */}} +
+ + {{/* Article navigation */}} +
\ No newline at end of file + + {{/* Article actions */}} +
+ + {{/* Copy page URL */}} + + + {{/* Edit page (if repository is configured) */}} + {{ if and site.Params.repository.url .File }} + + + Edit page + + {{ end }} + + {{/* Print page */}} + + +
+ + + + {{/* Article metadata panel (collapsible) */}} + {{ $hasMetadata := or .Date .Params.author .ReadingTime .Lastmod .PublishDate .WordCount }} + {{ if $hasMetadata }} +
+ + + Article details + + + +
+ {{ partial "article/metadata.html" . }} +
+ +
+ {{ end }} + + \ No newline at end of file diff --git a/layouts/partials/article/metadata.html b/layouts/partials/article/metadata.html index a7c3890..be5fa0b 100644 --- a/layouts/partials/article/metadata.html +++ b/layouts/partials/article/metadata.html @@ -1,58 +1,160 @@ -{{/* Article metadata component - horizontal flow with enhanced UX */}} -{{- if or .Date .Params.author .ReadingTime .Lastmod .PublishDate .WordCount -}} -
-
- {{/* Primary date - always show creation date first */}} - {{- with .Date -}} -
- - - -
-{{- end -}} \ No newline at end of file + {{ end }} + +
\ No newline at end of file diff --git a/layouts/partials/article/next-prev.html b/layouts/partials/article/next-prev.html index 37fed2b..67f4ee3 100644 --- a/layouts/partials/article/next-prev.html +++ b/layouts/partials/article/next-prev.html @@ -1,72 +1,140 @@ -{{- if .Site.Params.article.nextPrev.display -}} -{{$trunc := .Site.Params.article.nextPrev.trunc}} -{{$current := .}} -{{$prev := false}} -{{$next := false}} -{{- with .CurrentSection -}} - {{- $sorted := .RegularPages.ByWeight -}} - {{- range $i, $p := $sorted -}} - {{- if eq $p.RelPermalink $current.RelPermalink -}} - {{- if gt $i 0 -}} - {{- $prev = index $sorted (sub $i 1) -}} - {{- end -}} - {{- if lt (add $i 1) (len $sorted) -}} - {{- $next = index $sorted (add $i 1) -}} - {{- end -}} - {{- end -}} - {{- end -}} -{{- end -}} - +{{ end }} \ No newline at end of file diff --git a/layouts/partials/article/page-resources.html b/layouts/partials/article/page-resources.html index a5ff6e2..1a81b6b 100644 --- a/layouts/partials/article/page-resources.html +++ b/layouts/partials/article/page-resources.html @@ -1,160 +1,185 @@ -{{/* Page Resources - Display attached files, images, and downloads */}} -{{- with .Resources -}} - {{- $images := .ByType "image" -}} - {{- $videos := .ByType "video" -}} - {{- $documents := .ByType "application" -}} - {{- $others := complement (union $images $videos $documents) . -}} +{{/* Page Resources Component */}} +{{ with .Resources }} + {{ $images := .ByType "image" }} + {{ $videos := .ByType "video" }} + {{ $documents := .ByType "application" }} + {{ $others := complement (union $images $videos $documents) . }} - {{- if or $images $videos $documents $others -}} -